/* La Gomita: frambuesa de gomita como acento, azul de renglón de cuaderno como secundario. */
:root {
    --gomita: #c0265e;
    --gomita-oscuro: #9c1c4b;
    --gomita-suave: #fbe7ef;
    --renglon: #2f5da8;
    --papel: #fbf9fb;
    --tinta: #221a24;
    --tinta-suave: #5f5463;
    --linea: #e6dfe8;
    --bs-primary: #c0265e;
    --bs-primary-rgb: 192, 38, 94;
    --bs-link-color: #2f5da8;
    --bs-link-color-rgb: 47, 93, 168;
}

html, body {
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    background: var(--papel);
    color: var(--tinta);
}

.btn-primary {
    --bs-btn-bg: var(--gomita);
    --bs-btn-border-color: var(--gomita);
    --bs-btn-hover-bg: var(--gomita-oscuro);
    --bs-btn-hover-border-color: var(--gomita-oscuro);
    --bs-btn-active-bg: var(--gomita-oscuro);
    --bs-btn-active-border-color: var(--gomita-oscuro);
    --bs-btn-disabled-bg: var(--gomita);
    --bs-btn-disabled-border-color: var(--gomita);
}

.btn-outline-primary {
    --bs-btn-color: var(--gomita);
    --bs-btn-border-color: var(--gomita);
    --bs-btn-hover-bg: var(--gomita);
    --bs-btn-hover-border-color: var(--gomita);
    --bs-btn-active-bg: var(--gomita-oscuro);
}

.form-control:focus, .form-select:focus, .form-check-input:focus, .btn:focus-visible {
    border-color: var(--gomita);
    box-shadow: 0 0 0 0.2rem rgba(192, 38, 94, 0.2);
}

.form-check-input:checked {
    background-color: var(--gomita);
    border-color: var(--gomita);
}

h1:focus { outline: none; }

/* Encabezado */
.aviso-entorno {
    background: #fbf0d9;
    color: #6b4500;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 4px 12px;
}

.barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 10px max(16px, env(safe-area-inset-left, 0px));
    background: #fff;
    border-bottom: 1px solid var(--linea);
}

.marca {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--tinta);
    text-decoration: none;
}

.marca-punto {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--gomita);
    box-shadow: 4px 4px 0 var(--gomita-suave);
}

.menu { display: flex; flex-wrap: wrap; gap: 4px; }

.menu-enlace {
    padding: 6px 10px;
    border-radius: 8px;
    color: var(--tinta-suave);
    text-decoration: none;
    font-size: 0.95rem;
}

.menu-enlace:hover { background: var(--gomita-suave); color: var(--gomita-oscuro); }
.menu-enlace.active { background: var(--gomita-suave); color: var(--gomita-oscuro); font-weight: 600; }
.menu-boton { border: 0; background: none; }

.contenido {
    max-width: 960px;
    margin: 0 auto;
    padding: 20px max(16px, env(safe-area-inset-left, 0px)) 48px;
}

/* Pantallas de acceso */
.acceso {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px 16px;
    background-image: repeating-linear-gradient(to bottom, transparent 0 31px, #e8eef9 31px 32px);
}

.acceso-tarjeta {
    width: 100%;
    max-width: 380px;
    background: #fff;
    border: 1px solid var(--linea);
    border-radius: 14px;
    padding: 28px 24px;
}

/* Bloques del corte */
.bloque {
    background: #fff;
    border: 1px solid var(--linea);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.bloque-titulo {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 12px;
}

.etiqueta {
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gomita);
    font-weight: 600;
}

.rejilla-montos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}

.rejilla-montos label { font-size: 0.85rem; color: var(--tinta-suave); margin-bottom: 2px; }

.monto { font-variant-numeric: tabular-nums; text-align: right; }

.tabla-resumen td, .tabla-resumen th { font-variant-numeric: tabular-nums; }
.tabla-resumen td:not(:first-child), .tabla-resumen th:not(:first-child) { text-align: right; }

.dif-cero { color: #2e7d4f; }
.dif-falta { color: #b3261e; font-weight: 600; }
.dif-sobra { color: #9a6200; font-weight: 600; }

.pill {
    display: inline-block;
    font-size: 0.75rem;
    padding: 2px 9px;
    border-radius: 999px;
    background: #e3f3ea;
    color: #2e7d4f;
    font-weight: 600;
}
.pill.aviso { background: #fbf0d9; color: #9a6200; }
.pill.gris { background: #eee9ef; color: var(--tinta-suave); }

.pasos { display: flex; gap: 8px; margin-bottom: 16px; font-size: 0.85rem; }
.paso { padding: 4px 10px; border-radius: 999px; background: #eee9ef; color: var(--tinta-suave); }
.paso.activo { background: var(--gomita); color: #fff; }

.foto-sobre { max-width: 100%; max-height: 360px; border-radius: 8px; border: 1px solid var(--linea); }

.tarjetas-tienda { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }

.tarjeta-tienda {
    display: block;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid var(--linea);
    background: #fff;
    text-decoration: none;
    color: var(--tinta);
}
.tarjeta-tienda:hover { border-color: var(--gomita); }
.tarjeta-tienda strong { display: block; font-size: 1.1rem; }

.contrasena-temporal {
    font-family: Consolas, "Courier New", monospace;
    font-size: 1.4rem;
    letter-spacing: 0.08em;
    background: var(--gomita-suave);
    padding: 8px 12px;
    border-radius: 8px;
    display: inline-block;
}

.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid #e50000; }
.validation-message { color: #b3261e; font-size: 0.875rem; }

#blazor-error-ui {
    background: #fbf0d9;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

.blazor-error-boundary { background: #b32121; padding: 1rem; color: white; }
.blazor-error-boundary::after { content: "Ocurrió un error."; }