/* ── detalle.jsp — adaptativo móvil ─────────────────────────────────────────
   Por encima de 600px: layout de tabla CSS estándar (dos columnas).
   Por debajo de 600px: cada fila se apila en columna.
                        Orden visual: etiqueta (arriba, pequeña) → input (abajo).
   Los selectores de atributo [style*="..."] sobreescriben los estilos inline
   del JSP sin tocar el Java.
   ────────────────────────────────────────────────────────────────────────── */

input,
select {
    margin: 2px;
}

@media (max-width: 600px) {

    /* ── Selector "Seleccione un caso real" ───────────────── */
    select#casoID {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* ── Sección de riesgo / beneficio (float:left + 200pt) ── */
    div[style*="float:left"] {
        float: none !important;
        width: 100% !important;
        margin-bottom: 10px;
    }
    div[style*="float:left"] input[type="text"] {
        width: 100% !important;
        box-sizing: border-box;
    }

    /* ── Contenedor con width:50% ─────────────────────────── */
    div[style*="width: 50%"] {
        width: 100% !important;
    }

    /* ── Tablas CSS → bloques ─────────────────────────────── */
    /* "display: table;" no aparece en "display: table-row;" ni "table-cell;"
       así que el selector es seguro para el contenedor raíz únicamente.       */
    div[style*="display: table;"] {
        display: block !important;
    }

    div[style*="display: table-caption"] {
        display: block !important;
        padding: 6px 8px;
    }

    /* ── Fila → columna ───────────────────────────────────── */
    div[style*="display: table-row"] {
        display: flex !important;
        flex-direction: column-reverse !important; /* label arriba, input abajo */
        padding: 10px 12px 8px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.12);
        gap: 4px;
    }

    /* ── Celda → bloque ancho completo ────────────────────── */
    div[style*="display: table-cell"] {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
        padding: 0;
    }

    /* La celda de etiqueta (segunda en el DOM, primera visualmente con column-reverse)
       cuando hay dos celdas: se distingue siendo la que NO es también :first-child    */
    div[style*="display: table-cell"]:last-child:not(:first-child) {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        opacity: 0.75;
        padding-bottom: 2px;
    }

    /* ── Inputs y selects dentro de las celdas ────────────── */
    div[style*="display: table-cell"] select,
    div[style*="display: table-cell"] input[type="text"] {
        width: 100% !important;
        box-sizing: border-box;
        font-size: 15px;
        padding: 8px 10px;
        margin-bottom: 10px;
        border-radius: 4px;
        border: 1px solid rgba(0, 0, 0, 0.2);
    }
}