/* =========================================================================
   Formulario de reporte — alta (publico) y edicion (panel)
   2026-08-02

   Una sola hoja para los dos porque son el MISMO formulario en dos sitios: el
   alta vive en el sitio publico y la edicion dentro del panel desde hoy. Antes
   cada uno llevaba su <style> suelto con reglas como `.send { float: right }`,
   que en movil dejaba el boton de enviar flotando sobre el campo de al lado.

   La rejilla es la de Bootstrap (`row g-3` + `col-12 col-md-6`), que ya viene
   cargado en las dos partes. Aqui solo van las secciones y lo que Bootstrap no
   trae.
   ========================================================================= */

.form-reporte { max-width: 980px; }

/* Dentro del panel no hay columna de marketing que respetar: el formulario usa
   todo el ancho del area de contenido (2026-08-02, pedido por Eduardo). */
.panel-contenido .form-reporte { max-width: 1180px; }

/* --- Secciones ----------------------------------------------------------
   Cada bloque del formulario es una tarjeta con su titulo: sin ellas, los
   campos de contacto y los del reporte se leian como una sola lista de once
   cosas sin jerarquia. */
.form-seccion {
    background: #fff;
    border: 1px solid #e3e6e9;
    border-radius: 8px;
    padding: 18px 20px;
    margin-bottom: 18px;
}

.form-seccion-titulo {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #6b7378;
}

.form-seccion-ayuda {
    margin: 0 0 14px;
    color: #6b7378;
    font-size: 14px;
    line-height: 1.5;
}

/* El aviso de campos obligatorios, arriba del todo y discreto. */
.form-reporte .note { color: #6b7378; font-size: 13px; margin: 0 0 14px; }

/* --- Mapa ---------------------------------------------------------------
   Alto por pantalla: 400px fijos dejaban el mapa ocupando media pantalla de
   movil antes de llegar a la descripcion. */
.form-mapa {
    height: 360px;
    width: 100%;
    border-radius: 6px;
    border: 1px solid #dde1e4;
}
@media (max-width: 767.98px) {
    .form-mapa { height: 240px; }
}

/* --- Media ya subida (solo en la edicion) ------------------------------- */
.form-media {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}
.form-media-pieza {
    border: 1px solid #e3e6e9;
    border-radius: 6px;
    padding: 8px;
    background: #fbfbfc;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.form-media-pieza img,
.form-media-pieza video {
    width: 100%;
    height: 110px;
    object-fit: cover;
    border-radius: 4px;
    display: block;
}
.form-media-pieza video { height: auto; }
.form-media-pieza form { margin: 0; }
.form-media-pieza .btn { width: 100%; }

.form-docs { list-style: none; margin: 0; padding: 0; }
.form-docs li {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 8px 0;
    border-bottom: 1px solid #f0f2f4;
    overflow-wrap: anywhere;
}
.form-docs li:last-child { border-bottom: 0; }
.form-docs form { margin: 0; }
.form-docs-nombre { flex: 1 1 200px; min-width: 0; }

/* --- Botonera -----------------------------------------------------------
   ⚠️ Nada de `float: right` (lo que habia): en movil el boton se salia de la
   columna. Con flex se alinea a la derecha en escritorio y ocupa el ancho
   entero en movil, que es donde se pulsa con el pulgar. */
.form-botones {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.form-botones .btn { min-width: 150px; }

@media (max-width: 575.98px) {
    .form-seccion { padding: 14px 14px; }
    .form-botones { flex-direction: column-reverse; }
    .form-botones .btn { width: 100%; min-width: 0; }
}

/* El reCAPTCHA y su caja viven en css/tema/ivan.css: los usan tres
   formularios de secciones distintas, y esta hoja solo la carga el alta de
   reportes. */

/* El tema publico limita los textarea a 46rem (`.ivan-banda textarea`), asi que
   dentro de una seccion se quedaban 200px mas estrechos que su tarjeta. */
.form-seccion textarea.form-control { max-width: 100%; width: 100%; }

/* Que se vea que el campo de fecha es pulsable entero, ahora que lo es. */
.form-seccion input[type="datetime-local"],
.form-seccion input[type="date"] { cursor: pointer; }


/* =========================================================================
   La pagina publica de enviar un reporte (2026-08-02)
   ========================================================================= */

/* El formulario se alinea con el titulo y el aviso: a 980px quedaba casi 200px
   mas estrecho que ellos y la pagina parecia descuadrada. Los campos no se
   estiran porque van en la rejilla, no porque el contenedor sea estrecho. */
.ivan-banda .form-reporte { max-width: 100%; }

.reporte-intro {
    margin: 0 0 14px;
    max-width: 62ch;
    color: #4a5257;
    font-size: 1.05rem;
    line-height: 1.6;
}

/* --- El aviso de emergencia ---------------------------------------------
   Era un <p> con `background:#f0ffc1` escrito a mano, o sea que lo mas
   importante de la pagina se leia como un parrafo mas. */
.aviso-emergencia {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #fff8e6;
    border: 1px solid #f0d9a0;
    border-left: 4px solid #d99b1c;
    border-radius: 6px;
    padding: 14px 16px;
    margin: 0 0 22px;
    line-height: 1.55;
}
.aviso-emergencia-icono { color: #b47a10; flex: none; line-height: 0; margin-top: 2px; }
.aviso-emergencia a { font-weight: 700; white-space: nowrap; }

/* ⚠️ En movil el telefono SI se parte. Con `nowrap`, la cadena
   "1-800-CUT SMOG® (1-800-288-7664)" mide 311px de una pieza y no hay 311px
   dentro del aviso en una pantalla de 360: la pagina desbordaba 29px y todo el
   sitio se veia alejado. Medido en /report — y no era el reCAPTCHA, que es lo
   que parecia—. Parte por los espacios, que es feo pero se lee; desbordar no. */
@media (max-width: 575.98px) {
    .aviso-emergencia a { white-space: normal; overflow-wrap: anywhere; }
}

/* ⚠️ El tema publico topa los campos a 34rem y los textarea a 46rem
   (`.ivan-banda input`, `.ivan-banda textarea`). Dentro de una seccion eso
   dejaba el titulo en 544px al lado de un mapa de 938: cada campo con un
   ancho distinto sin motivo. Aqui el ancho lo decide la REJILLA, que para eso
   esta, y el campo llena su celda.

   El selector se ancla en `.ivan-banda` (y en `.panel-contenido`, que es donde
   vive el mismo formulario al editar): con `.form-seccion input` a secas la
   especificidad EMPATA con la del tema —las dos son (0,1,1)— y ganaba la que
   se cargara despues, que resulto ser la del tema. */
.ivan-banda .form-seccion input[type="text"],
.panel-contenido .form-seccion input[type="text"],
.form-seccion input[type="text"],
.ivan-banda .form-seccion input[type="email"],
.panel-contenido .form-seccion input[type="email"],
.form-seccion input[type="email"],
.ivan-banda .form-seccion input[type="tel"],
.panel-contenido .form-seccion input[type="tel"],
.form-seccion input[type="tel"],
.ivan-banda .form-seccion input[type="url"],
.panel-contenido .form-seccion input[type="url"],
.form-seccion input[type="url"],
.ivan-banda .form-seccion input[type="number"],
.panel-contenido .form-seccion input[type="number"],
.form-seccion input[type="number"],
.ivan-banda .form-seccion input[type="password"],
.panel-contenido .form-seccion input[type="password"],
.form-seccion input[type="password"],
.ivan-banda .form-seccion input[type="search"],
.panel-contenido .form-seccion input[type="search"],
.form-seccion input[type="search"],
.ivan-banda .form-seccion input[type="date"],
.panel-contenido .form-seccion input[type="date"],
.form-seccion input[type="date"],
.ivan-banda .form-seccion input[type="datetime-local"],
.panel-contenido .form-seccion input[type="datetime-local"],
.form-seccion input[type="datetime-local"],
.ivan-banda .form-seccion select,
.panel-contenido .form-seccion select,
.form-seccion select,
.ivan-banda .form-seccion textarea,
.panel-contenido .form-seccion textarea,
.form-seccion textarea {
    max-width: 100%;
    width: 100%;
}

/* En la seccion de ubicacion, el mapa acompaña la altura de la columna de al
   lado cuando van en paralelo. */
@media (min-width: 992px) {
    .form-seccion .col-lg-8 > .form-mapa { height: 100%; min-height: 300px; }
}