/*
 * Estilos complementarios de la migración.
 *
 * stylesheet.css es la hoja ORIGINAL sin cambios (clases .titulo, .texto,
 * .pagina...). Esta hoja añade:
 *  1. Lo que antes aportaba el tema Woodstock "suntheme" (tipografía base,
 *     aspecto de campos, separadores, rejilla de etiquetas de 80 px).
 *  2. Un mínimo de calidad: foco visible con teclado y adaptación a móvil.
 */

:root {
    color-scheme: light;
    --dorado: #B7930E;      /* color de .titulo en el original */
    --borde-campo: #7f7f7f;
    --separador: #c0c0c0;
}

body {
    margin: 0;
    padding: 8px;
    background: #fff;
    color: #000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}

/* .pagina del original medía 600 x 700 px fijos; se mantiene el ancho
   máximo pero se permite estrechar en pantallas pequeñas */
.pagina {
    box-sizing: border-box;
    width: 100%;
    max-width: 600px;
    height: auto;
    min-height: 700px;
}

/* mensajeGridPanel: hueco de 20 px */
.espaciador {
    min-height: 20px;
}

/* Las etiquetas "titulo" del original eran <label>; ahora son <h2>
   para dar estructura accesible, sin cambiar su aspecto */
h2.titulo {
    margin: 6px 0;
}

/* Fila etiqueta (80 px) + control (hasta 500 px), como los h:panelGrid */
.fila {
    display: grid;
    grid-template-columns: 80px minmax(0, 500px);
    align-items: center;
    column-gap: 4px;
    margin: 3px 0;
}

.celda-casilla {
    display: flex;
    align-items: center;
}

.bloque {
    margin: 4px 0;
}

/* Aspecto aproximado del webuijsf:textField */
.campo {
    box-sizing: border-box;
    max-width: 100%;
    padding: 2px 3px;
    border: 1px solid var(--borde-campo);
    font-family: inherit;
}

/* webuijsf:label labelLevel="3" */
.nivel3 {
    margin: 4px 0;
    font-size: 12px;
    font-weight: normal;
}

/* webuijsf:listbox */
.lista {
    max-width: 100%;
    font-family: inherit;
    font-size: 12px;
}

/* webuijsf:pageSeparator */
hr.separador {
    margin: 8px 0;
    border: 0;
    border-top: 1px solid var(--separador);
}

/* botonesGridPanel: 2 columnas en el 50 % del ancho */
.botones {
    display: flex;
    gap: 12px;
    width: 50%;
    min-width: 200px;
    margin-top: 10px;
}

.boton-imagen {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    line-height: 0;
}

.boton-imagen img {
    display: block;
}

/* Foco visible para quien navega con teclado */
.campo:focus-visible,
.lista:focus-visible,
input[type="checkbox"]:focus-visible,
input[type="file"]:focus-visible,
.boton-imagen:focus-visible {
    outline: 2px solid var(--dorado);
    outline-offset: 2px;
}

/* Mensaje visible solo si el navegador no ejecuta JavaScript */
.mensaje-noscript {
    margin: 0 0 8px;
    color: red;
    font-weight: bold;
}

/* Móvil: la etiqueta pasa encima del campo */
@media (max-width: 480px) {
    .fila {
        grid-template-columns: 1fr;
    }

    .fila:has(.celda-casilla) {
        grid-template-columns: 28px 1fr;
    }

    .botones {
        width: 100%;
    }
}