/* ==========================================================
   FORM-RESCUE-V2.CSS
   Parche para tablas de formulario antiguas
   Agrega este archivo DESPUÉS de modern_adaces.css
   ========================================================== */

/* ----------------------------------------------------------
   1. DESKTOP (>768px): Tabla natural, flujo horizontal
   ---------------------------------------------------------- */
fieldset > table,
fieldset table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 6px;          /* espacio suave entre filas */
}

fieldset table tr {
    transition: background 0.15s;
}

fieldset table td {
    padding: 6px 10px;
    vertical-align: middle;
    white-space: normal;            /* permite que el texto haga wrap */
    line-height: 1.7;
    font-size: 0.9rem;
    color: var(--text-secondary, #334155);
}

/* Inputs/selects dentro de celdas: flujo inline, NO bloque */
fieldset table td input[type="text"],
fieldset table td input[type="email"],
fieldset table td input[type="number"],
fieldset table td input[type="date"],
fieldset table td input[type="password"],
fieldset table td input[type="search"],
fieldset table td select,
fieldset table td textarea {
    display: inline-block;
    vertical-align: middle;
    width: auto;                     /* respeta size o clase */
    max-width: 100%;
    margin: 2px 6px;
    box-sizing: border-box;
}

/* Anular size="100%" o size="110" absurdos del HTML */
fieldset table td input[size] {
    width: auto !important;
    max-width: 240px;                /* límite razonable en desktop */
}

/* PERO permitir que inputs de dirección/email sean anchos */
fieldset table td input[size="80"],
fieldset table td input[size="110"],
fieldset table td input[size="100%"],
fieldset table td input[size="60%"] {
    max-width: 100% !important;
    width: 100% !important;
    min-width: auto !important;
}

/* Respetar las clases de ancho del proyecto */
fieldset table td .input-corto        { width: 60px  !important; max-width: 60px  !important; }
fieldset table td .input-corto-mediano{ width: 100px !important; max-width: 100px !important; }
fieldset table td .input-mediano      { width: 150px !important; max-width: 150px !important; }
fieldset table td .input-mediano-largo{ width: 300px !important; max-width: 300px !important; }
fieldset table td .input-largo          { width: 400px !important; max-width: 100% !important; }
fieldset table td .input-muy-largo      { width: 500px !important; max-width: 100% !important; }

/* Radios y checkboxes siempre inline */
fieldset table td input[type="radio"],
fieldset table td input[type="checkbox"] {
    display: inline-block;
    width: auto !important;
    margin: 0 4px 0 10px;
    vertical-align: middle;
}

/* Selects con ancho mínimo */
fieldset table td select {
    min-width: 160px;
}

/* Separador visual entre filas */
fieldset table tr:not(:last-child) td {
    border-bottom: 1px solid rgba(203, 213, 225, 0.4);
}

html[data-theme="dark"] fieldset table tr:not(:last-child) td {
    border-bottom-color: rgba(45, 59, 82, 0.6);
}

/* ----------------------------------------------------------
   2. MÓVIL (<=768px): Romper tabla a columna
   ---------------------------------------------------------- */
@media (max-width: 768px) {
    fieldset table,
    fieldset table tbody,
    fieldset table tr,
    fieldset table td {
        display: flex;
        flex-direction: column;
        width: 100% !important;
        max-width: 100% !important;
    }

    fieldset table td {
        gap: 6px;
        padding: 10px 0;
        border-bottom: 1px solid var(--border-color, #e2e8f0);
    }

    fieldset table td input,
    fieldset table td select,
    fieldset table td textarea {
        width: 100% !important;
        max-width: 100% !important;
        margin: 2px 0;
    }

    fieldset table td input[type="radio"],
    fieldset table td input[type="checkbox"] {
        width: auto !important;
    }

    /* En móvil, anular size grandes para que no desborden */
    fieldset table td input[size] {
        max-width: 100% !important;
    }
}