/* ================== SDL · Sistema de diseño ================== */
:root {
    --fondo: #f1f5f9;
    --carta: #ffffff;
    --tinta: #0f172a;
    --tinta-suave: #64748b;
    --borde: #e2e8f0;
    --primario: #2563eb;
    --primario-suave: #dbeafe;
    --exito: #059669;
    --peligro: #dc2626;
    --aviso: #ea7317;
    --aviso-suave: #fff2e5;
    --teal: #0f766e;
    --teal-suave: #ccfbf1;
    --radio: 12px;
    --sombra: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.05);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* El display de las clases gana al del atributo hidden, así que se refuerza */
[hidden] { display: none !important; }

body {
    background: var(--fondo);
    color: var(--tinta);
    font-family: "Segoe UI", -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.45;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ---------- Barra superior ---------- */
.barra-superior {
    background: var(--tinta);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.65rem 1.5rem;
}
.marca { display: flex; align-items: baseline; gap: 0.6rem; }
.marca h1 { font-size: 1.25rem; letter-spacing: 0.06em; }
.marca-sub { font-size: 0.8rem; color: #94a3b8; }
.acciones { display: flex; align-items: center; gap: 0.75rem; }
.accion-texto { font-size: 0.8rem; color: #cbd5e1; }
.boton-fantasma {
    background: transparent;
    color: #e2e8f0;
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 0.35rem 0.9rem;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.boton-fantasma:hover { background: #1e293b; border-color: #475569; }

/* ---------- Layout general ---------- */
main {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.25rem 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    flex: 1;
}

.carta {
    background: var(--carta);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 1rem 1.25rem;
}

h2 {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tinta-suave);
    margin-bottom: 0.75rem;
}

/* ---------- Campos ---------- */
.campo { display: flex; flex-direction: column; gap: 0.25rem; }
.campo-nombre {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tinta-suave);
}
.campo-control { display: flex; align-items: center; gap: 0.4rem; }
.unidad { font-size: 0.75rem; color: var(--tinta-suave); white-space: nowrap; }

input.dato {
    width: 6rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--borde);
    border-radius: 8px;
    background: #fff;
    color: var(--tinta);
    font: inherit;
    text-align: center;
    transition: border-color 0.15s, box-shadow 0.15s;
}
input.dato:focus {
    outline: none;
    border-color: var(--primario);
    box-shadow: 0 0 0 3px var(--primario-suave);
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }

/* El placeholder no es decorativo: es el valor sugerido con el que se calcula
   mientras el campo esté vacío. Va en plomo para que se lea como sugerencia
   y nunca se confunda con un dato ingresado. */
.dato::placeholder {
    color: var(--tinta-suave);
    opacity: 0.75;
    font-style: italic;
}

/* ---------- Panel de datos generales ---------- */
.panel-datos {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1.5rem;
}
.grupo-campos { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.grupo-tramos { display: flex; flex-direction: column; gap: 0.25rem; }
.grupo-minmax { display: flex; gap: 1.5rem; margin-left: auto; }
.mini-dato { display: flex; flex-direction: column; gap: 0.25rem; }
.mini-dato b { font-size: 1rem; font-weight: 600; }

.stepper {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    border: 1px solid var(--borde);
    border-radius: 8px;
    padding: 0.15rem;
    background: #fff;
}
.stepper button {
    width: 1.9rem;
    height: 1.9rem;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--primario);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s;
}
.stepper button:hover:not(:disabled) { background: var(--primario-suave); }
.stepper button:disabled { color: #cbd5e1; cursor: default; }
.stepper span {
    min-width: 1.8rem;
    text-align: center;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}


/* ---------- Zona de viga: secciones + longitudinal con scroll compartido ---------- */
.scroll-viga {
    overflow-x: auto;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding-bottom: 0.5rem;
}
/* La barra propia se oculta: la reemplaza la barra espejo, siempre visible */
.scroll-viga { scrollbar-width: none; }
.scroll-viga::-webkit-scrollbar { height: 0; }

.barra-scroll {
    position: sticky;
    bottom: 0;
    z-index: 40;
    overflow-x: auto;
    overflow-y: hidden;
    padding-top: 0.35rem;
    background: linear-gradient(to top, var(--fondo) 70%, transparent);
    scrollbar-width: thin;
}
.barra-scroll[hidden] { display: none; }
.barra-scroll > div { height: 1px; }
.barra-scroll::-webkit-scrollbar { height: 10px; }
.barra-scroll::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 5px;
}
.barra-scroll::-webkit-scrollbar-thumb:hover { background: #64748b; }
.barra-scroll::-webkit-scrollbar-track { background: #e2e8f0; border-radius: 5px; }

.tira-secciones {
    display: flex;
    align-items: flex-start;      /* al desplegar una carta no se estiran las demás */
    gap: 1rem;
    padding: 0.25rem;
    width: max-content;
    min-width: 100%;
}

.carta-seccion {
    /* crecen para repartirse el ancho sobrante (pocas cartas), con mínimo
       de 275px y scroll horizontal cuando ya no caben */
    flex: 1 0 275px;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.seccion-cabecera { display: flex; align-items: center; gap: 0.5rem; }
.seccion-cabecera h3 { font-size: 1.05rem; }
.chip {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
}
.carta-seccion[data-cara="superior"] .chip { background: var(--primario-suave); color: #1d4ed8; }
.carta-seccion[data-cara="inferior"] .chip { background: var(--teal-suave); color: var(--teal); }

.resultado-as {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    border-top: 1px solid var(--borde);
    padding-top: 0.55rem;
}
.resultado-as .valor { font-size: 1.05rem; font-weight: 600; color: var(--exito); }
.resultado-as .valor.no-cumple { color: var(--peligro); }

/* ---------- Dibujo de la sección transversal ---------- */
.zona-dibujo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.vigadibujo { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
.texto-arriba, .texto-abajo {
    font-size: 0.8rem;
    font-weight: 600;
    min-height: 1.1rem;
    text-align: center;
    white-space: nowrap;
}

.seccionViga {
    position: relative;
    width: 6rem;
    height: 9rem;
    border: 2px solid var(--tinta);
    border-radius: 2px;
    background: #fafbfc;
    cursor: pointer;
}
.seccionViga.fuera-tolerancia,
.seccionViga.fuera-tolerancia .estribo {
    border-color: var(--aviso);
}
.seccionViga.incumple,
.seccionViga.incumple .estribo {
    border-color: var(--peligro);
}
.stats .alerta { color: var(--aviso); }
.stats .falla { color: var(--peligro); }
.boton-porque.falla { color: var(--peligro); }

.aviso-tolerancia {
    background: var(--aviso-suave);
    color: var(--aviso);
    border: 1px solid var(--aviso);
    border-radius: 8px;
    padding: 0.35rem 0.6rem;
    font-size: 0.74rem;
    font-weight: 600;
    text-align: center;
}
.aviso-tolerancia.grave {
    background: #fef2f2;
    color: var(--peligro);
    border-color: var(--peligro);
}
.aviso-tolerancia[hidden] { display: none; }

.boton-porque {
    align-self: flex-start;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--primario);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.boton-porque.alerta { color: var(--aviso); }

/* Flotante anclado al botón: la carta conserva su tamaño al desplegarlo.
   Va en position:fixed para no quedar recortado por el scroll de la tira. */
.panel-porque {
    position: fixed;
    z-index: 60;
    display: none;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.panel-porque.abierto { display: block; }
.panel-porque.visible { opacity: 1; transform: translateY(0); }
.panel-porque > .panel-caja {
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: 8px;
    padding: 0.6rem 0.7rem;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
}
.tabla-verificacion {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.72rem;
}
.tabla-verificacion td {
    padding: 0.16rem 0.2rem;
    border-bottom: 1px solid #eef2f7;
    text-align: left;
    width: auto;
    color: var(--tinta-suave);
}
.tabla-verificacion tr:last-child td { border-bottom: none; }
.tabla-verificacion .valor {
    color: var(--tinta);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.tabla-verificacion .limite { font-size: 0.68rem; white-space: nowrap; }
.tabla-verificacion .marca { text-align: center; font-size: 0.85rem; }
.tabla-verificacion .ok { color: var(--exito); font-weight: 700; }
.tabla-verificacion .alerta { color: var(--aviso); font-weight: 700; }
.tabla-verificacion .falla { color: var(--peligro); font-weight: 700; }
.nota-verificacion {
    margin-top: 0.4rem;
    font-size: 0.68rem;
    line-height: 1.35;
    color: var(--tinta-suave);
}

.acciones-carta { display: flex; gap: 0.9rem; }
.chip-manual {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    background: var(--aviso-suave);
    color: var(--aviso);
    border: 1px solid var(--aviso);
}
.chip-manual[hidden] { display: none; }

/* ---------- Congelado de secciones ---------- */
/* Copo de nieve: gris cuando la sección es editable, azul cuando está
   congelada. El color lo hereda el SVG con currentColor. */
.boton-congelar {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border: 1px solid var(--borde);
    border-radius: 50%;
    background: #fff;
    color: #cbd5e1;
    padding: 0;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.boton-congelar:hover:not(:disabled) { color: var(--primario); border-color: var(--primario); }
.boton-congelar.activo {
    background: var(--primario-suave);
    border-color: var(--primario);
    color: var(--primario);
}
.boton-congelar:disabled { opacity: 0.4; cursor: default; }

.carta-congelada {
    border-color: var(--primario);
    box-shadow: 0 0 0 1px var(--primario) inset, var(--sombra);
}
.carta-congelada .seccionViga.bloqueado { cursor: default; }
.carta-congelada .flecha { opacity: 0.35; cursor: default; }
.carta-congelada input.dato:disabled { background: #f8fafc; color: var(--tinta-suave); }

.grupo-congelar { display: flex; flex-direction: column; gap: 0.25rem; }
.congelar-control { display: flex; align-items: center; gap: 0.6rem; }
.nota-congeladas { font-size: 0.72rem; color: var(--tinta-suave); white-space: nowrap; }
.nota-congeladas.completo { color: var(--primario); font-weight: 600; }
.boton-fantasma:disabled { opacity: 0.4; cursor: default; }
.boton-fantasma:disabled:hover { background: transparent; border-color: #334155; }

/* ---------- Explorador de combinaciones ---------- */
.explorador {
    width: min(880px, 94vw);
    max-height: 88vh;
    border: none;
    border-radius: var(--radio);
    padding: 1.1rem 1.25rem;
    color: var(--tinta);
    background: var(--carta);
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
}
.explorador::backdrop { background: rgba(15, 23, 42, 0.45); }
.explorador-cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}
.explorador-cabecera h2 { margin-bottom: 0.15rem; }
.explorador-contexto { font-size: 0.75rem; color: var(--tinta-suave); }
.boton-cerrar {
    border: none;
    background: none;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--tinta-suave);
    cursor: pointer;
}
.boton-cerrar:hover { color: var(--tinta); }

/* ---------- Opciones avanzadas ---------- */
.avanzadas { width: min(560px, 94vw); }
.grupo-avanzado {
    border-top: 1px solid var(--borde);
    padding-top: 0.7rem;
    margin-bottom: 0.9rem;
}
.grupo-avanzado h3 {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tinta-suave);
    margin-bottom: 0.6rem;
}
.campos-avanzados { display: flex; flex-wrap: wrap; gap: 1.1rem; }
/* ---------- Mis vigas ---------- */
.lista-vigas { max-height: 40vh; overflow-y: auto; }
.viga-guardada {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0.2rem;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.8rem;
}
.viga-guardada:last-child { border-bottom: none; }
.acciones-viga { display: flex; gap: 0.4rem; flex-shrink: 0; }
.boton-usar-fila.peligro { color: var(--peligro); }
.boton-usar-fila.peligro:hover { background: #fef2f2; }
input.dato.ancho { width: 20rem; text-align: left; }

.acciones-avanzadas {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    border-top: 1px solid var(--borde);
    padding-top: 0.8rem;
}

.constructor {
    background: #f8fafc;
    border: 1px solid var(--borde);
    border-radius: 8px;
    padding: 0.65rem 0.8rem;
    margin-bottom: 0.75rem;
}
.constructor h3 {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tinta-suave);
    margin-bottom: 0.5rem;
}
.constructor-campos {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.constructor-campos { margin-bottom: 0.6rem; }
.constructor-campos .mas { color: var(--tinta-suave); padding: 0 0.2rem; }

/* Selección de la barra a colocar */
.brochas { display: flex; gap: 0.35rem; }
.brocha {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--borde);
    border-radius: 999px;
    background: #fff;
    color: var(--tinta-suave);
    font: inherit;
    font-size: 0.75rem;
    padding: 0.25rem 0.7rem;
    cursor: pointer;
}
.brocha.activa {
    border-color: var(--primario);
    background: var(--primario-suave);
    color: #1d4ed8;
    font-weight: 600;
}
.punto { display: inline-block; border-radius: 50%; background: var(--tinta); }
.punto.grande { width: 0.62rem; height: 0.62rem; }
.punto.chico { width: 0.46rem; height: 0.46rem; }

.boton-secundario {
    border: 1px solid var(--borde);
    border-radius: 8px;
    background: #fff;
    color: var(--tinta-suave);
    font: inherit;
    font-size: 0.78rem;
    padding: 0.35rem 0.8rem;
    cursor: pointer;
}
.boton-secundario:hover { background: #f1f5f9; }

/* Editor gráfico de la sección */
.editor-wrap { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.editor-seccion { flex: 0 0 auto; }
.editor-estribo {
    position: relative;
    width: 13rem;
    height: 6rem;
    border: 2px solid var(--tinta);
    border-radius: 0.35rem;
    background: #fff;
}
.fila-editor {
    position: absolute;
    left: 1rem;
    width: 11rem;
    height: 1.4rem;
    cursor: copy;
    border-radius: 4px;
}
.fila-editor:hover { background: rgba(37, 99, 235, 0.07); }
.barra-editor {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--tinta);
    cursor: pointer;
}
.barra-editor:hover { background: var(--peligro); }
.fila-vacia {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    color: #cbd5e1;
    pointer-events: none;
}
.editor-ayuda { flex: 1 1 16rem; min-width: 14rem; }
.editor-ayuda p { font-size: 0.72rem; color: var(--tinta-suave); margin-bottom: 0.4rem; }
input.dato.mini { width: 3.6rem; }
select.dato {
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--borde);
    border-radius: 8px;
    background: #fff;
    color: var(--tinta);
    font: inherit;
}
.boton-usar {
    margin-left: auto;
    border: none;
    border-radius: 8px;
    background: var(--primario);
    color: #fff;
    font: inherit;
    font-weight: 600;
    padding: 0.4rem 1rem;
    cursor: pointer;
}
.boton-usar:disabled { background: #cbd5e1; cursor: default; }
.manual-diagnostico { margin-top: 0.5rem; font-size: 0.75rem; }
.manual-diagnostico.ok { color: var(--exito); }
.manual-diagnostico.falla { color: var(--aviso); }

.filtro-cumplen {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: var(--tinta-suave);
    margin-bottom: 0.5rem;
}
.filtro-cumplen input { width: auto; }

.explorador-tabla { max-height: 42vh; overflow-y: auto; }
.tabla-explorador {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
}
.tabla-explorador th {
    position: sticky;
    top: 0;
    background: var(--carta);
    text-align: left;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tinta-suave);
    padding: 0.3rem 0.35rem;
    border-bottom: 1px solid var(--borde);
}
.tabla-explorador td {
    padding: 0.28rem 0.35rem;
    border-bottom: 1px solid #f1f5f9;
    width: auto;
    text-align: left;
    font-variant-numeric: tabular-nums;
}
.tabla-explorador .nombre { font-weight: 600; white-space: nowrap; }
.tabla-explorador tr.rechazada td { color: #94a3b8; }
.tabla-explorador tr.actual { background: var(--primario-suave); }
.tabla-explorador th.ordenable { cursor: pointer; user-select: none; }
.tabla-explorador th.ordenable:hover { color: var(--primario); }
.tabla-explorador .cabecera-grupo td {
    padding: 0.45rem 0.35rem 0.25rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--borde);
}
.tabla-explorador .grupo-0 td { color: var(--exito); }
.tabla-explorador .grupo-1 td { color: var(--aviso); }
.tabla-explorador .grupo-2 td { color: var(--peligro); }
.tabla-explorador .nota-grupo {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--tinta-suave);
}
.tabla-explorador .ok { color: var(--exito); font-weight: 700; }
.tabla-explorador .alerta { color: var(--aviso); }
.tabla-explorador .falla { color: var(--peligro); }
.tabla-explorador td.alerta { font-weight: 600; }
.boton-usar-fila {
    border: 1px solid var(--borde);
    border-radius: 6px;
    background: #fff;
    color: var(--primario);
    font: inherit;
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    cursor: pointer;
}
.boton-usar-fila:hover { background: var(--primario-suave); }
.estribo {
    position: absolute;
    width: 5rem;
    height: 8rem;
    border: 2px solid var(--tinta);
    border-radius: 0.35rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.vigsup { position: absolute; top: 0; width: 100%; height: 3rem; }
.viginf { position: absolute; bottom: 0; width: 100%; height: 3rem; }

.flecha {
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    border: 1px solid var(--borde);
    border-radius: 50%;
    background: #fff;
    color: var(--primario);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.flecha:hover { background: var(--primario-suave); border-color: var(--primario); }

/* ---------- Datos de la sección ---------- */
.stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
    border-top: 1px solid var(--borde);
    padding-top: 0.55rem;
}
.stats > div { display: flex; flex-direction: column; gap: 0.1rem; }
.stats dt {
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tinta-suave);
}
.stats dd { font-size: 0.85rem; font-weight: 600; }

.detalle-secundario {
    font-size: 0.72rem;
    color: var(--tinta-suave);
    text-align: center;
}

/* ---------- Viga longitudinal ---------- */
#longitudinal {
    width: max-content;
    min-width: 100%;
    padding: 1rem 0.25rem;
}
#longitudinal h2 { margin: 0 1rem 0.75rem; }
#dibujo svg { display: block; }

/* ---------- Interruptor ---------- */
.switch { position: relative; display: inline-block; width: 34px; height: 20px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
    position: absolute;
    inset: 0;
    background: #475569;
    border-radius: 34px;
    cursor: pointer;
    transition: 0.2s;
}
.slider:before {
    content: "";
    position: absolute;
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: 0.2s;
}
.switch input:checked + .slider { background: var(--primario); }
.switch input:checked + .slider:before { transform: translateX(14px); }

/* ---------- Pie ---------- */
footer {
    background: var(--tinta);
    color: #94a3b8;
    text-align: center;
    font-size: 0.75rem;
    padding: 0.5rem;
}

/* Aviso de que lo mostrado sale de los valores sugeridos, no de datos propios */
.aviso-ejemplo {
    background: var(--aviso-suave);
    color: var(--aviso);
    border: 1px solid currentColor;
    border-radius: var(--radio);
    padding: 0.55rem 0.8rem;
    font-size: 0.78rem;
    line-height: 1.35;
}

/* ---------- Pantallas angostas ---------- */
@media (max-width: 640px) {
    .barra-superior { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
    main { padding: 1rem; }
    .grupo-minmax { margin-left: 0; }
}