/* ============================================================
   LAYOUT PUBLICO
   ------------------------------------------------------------
   Estructura de las pantallas sin menu: login y cambio de clave.
   Solo maquetacion (posicion, tamanos, la banda de marca).
   Los botones, campos y alertas viven en site.css.
   ============================================================ */

.publico {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 100vh;
    /* Instalada como app: que el formulario no quede bajo la muesca ni bajo
       la barra de gestos. En el navegador comun env() vale 0. */
    padding: env(safe-area-inset-top) env(safe-area-inset-right)
             env(safe-area-inset-bottom) env(safe-area-inset-left);
    background: var(--surface-alt);
}

/* En pantallas anchas: banda de marca a la izquierda, formulario a
   la derecha. La proporcion respeta el manual (el verde no domina). */
@media (min-width: 900px) {
    .publico { grid-template-columns: 40% 1fr; }
}

/* ---------- Banda de marca ---------- */
.publico-marca {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--space-12) var(--space-10);
    background: var(--surface-inverse);
    color: var(--text-on-verde);
}

@media (min-width: 900px) {
    .publico-marca { display: flex; }
}

.publico-marca .etiqueta {
    color: var(--mostaza);
}

.publico-marca h2 {
    margin-top: var(--space-6);
    color: var(--text-on-verde);
    font-size: var(--text-h2);
    line-height: var(--text-h2-lh);
    letter-spacing: var(--text-h2-ls);
}

.publico-marca p {
    max-width: 34ch;
    margin-top: var(--space-4);
    color: var(--text-inverse-muted);
    font-size: var(--text-lead);
    line-height: var(--text-lead-lh);
}

.publico-marca footer {
    color: var(--text-inverse-muted);
    font-size: var(--text-caption);
}

/* ---------- Panel del formulario ---------- */
.publico-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--gutter-mobile);
}

@media (min-width: 900px) {
    .publico-panel { padding: var(--space-12) var(--gutter); }
}

.publico-tarjeta {
    width: 100%;
    max-width: 400px;
    padding: var(--space-8);
    background: var(--surface-card);
    border: var(--border-width) solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-2);
}

.publico-tarjeta-encabezado {
    margin-bottom: var(--space-8);
}

.publico-tarjeta-encabezado h1 {
    margin-top: var(--space-2);
}

.publico-tarjeta-encabezado p {
    margin-top: var(--space-2);
    color: var(--text-muted);
    font-size: var(--text-small);
    line-height: var(--text-small-lh);
}

/* En movil no hay banda lateral, asi que la marca va sobre la tarjeta */
.publico-marca-movil {
    margin-bottom: var(--space-6);
    text-align: center;
}

@media (min-width: 900px) {
    .publico-marca-movil { display: none; }
}

.publico-acciones {
    margin-top: var(--space-8);
}

/* ---------- Mantener sesion iniciada ---------- */
.login-recordarme {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-top: var(--space-5);
    font-size: var(--text-small);
    color: var(--text-body);
    cursor: pointer;
}

.login-recordarme input {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: var(--surface-inverse);
    cursor: pointer;
}

.login-recordarme small {
    display: block;
    margin-top: 2px;
    font-size: var(--text-caption);
    color: var(--text-subtle);
}

/* Con la casilla el boton queda menos lejos: el aire lo da la casilla. */
.login-recordarme + .publico-acciones { margin-top: var(--space-6); }

.publico-pie {
    margin-top: var(--space-6);
    text-align: center;
}