/* ==========================================================================
   Asadito — sistema visual "brasa y carbón"
   Se carga después de Bootstrap 5.3 y lo ajusta. Todo lo propio usa
   variables de :root para poder retocar la paleta en un solo lugar.
   Guía visual con todos los componentes: /admin/guia.php
   ========================================================================== */

:root {
    /* Paleta */
    --carbon: #1c1917;        /* fondos oscuros, texto principal */
    --carbon-2: #292524;
    --carbon-3: #44403c;      /* texto secundario fuerte */
    --humo: #6f6964;          /* texto apagado (contraste AA sobre blanco y ceniza) */
    --ceniza: #f5f5f4;        /* fondo de la app */
    --ceniza-2: #e7e5e4;      /* bordes y divisores */
    --ceniza-3: #d6d3d1;
    --papel: #ffffff;
    --brasa: #ea580c;         /* acento, brillo */
    --brasa-btn: #cf4a0a;     /* botones (texto blanco AA) */
    --brasa-btn-2: #b93f08;
    --brasa-txt: #c2410c;     /* links y texto naranja sobre blanco */
    --brasa-suave: #fff1e7;
    --ascua: #f59e0b;
    --verde: #16a34a;
    --verde-txt: #15803d;
    --verde-suave: #ecfdf3;
    --rojo: #dc2626;
    --rojo-txt: #c81e1e;
    --rojo-suave: #fef2f2;

    /* Forma */
    --r-chico: 10px;
    --r: 14px;
    --r-grande: 20px;
    --sombra-flotante: 0 12px 32px rgba(28, 25, 23, .18), 0 2px 6px rgba(28, 25, 23, .08);
    --ancho-app: 560px;
    --barra-alto: 68px;

    /* Bootstrap */
    --bs-body-font-family: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
    --bs-body-bg: var(--ceniza);
    --bs-body-color: var(--carbon);
    --bs-secondary-color: var(--humo);
    --bs-border-color: var(--ceniza-2);
    --bs-border-radius: var(--r-chico);
    --bs-primary: var(--brasa-btn);
    --bs-primary-rgb: 207, 74, 10;
    --bs-link-color: var(--brasa-txt);
    --bs-link-color-rgb: 194, 65, 12;
    --bs-link-hover-color: var(--brasa-btn-2);
    --bs-link-hover-color-rgb: 185, 63, 8;
    --bs-focus-ring-color: rgba(234, 88, 12, .3);
}

html { -webkit-text-size-adjust: 100%; }
body {
    background: var(--ceniza);
    color: var(--carbon);
    font-family: var(--bs-body-font-family);
    font-size: 1rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
body.con-barra { padding-bottom: calc(var(--barra-alto) + 24px + env(safe-area-inset-bottom)); }

::selection { background: rgba(234, 88, 12, .22); }
a { text-underline-offset: 2px; }
:focus-visible { outline: 3px solid rgba(234, 88, 12, .55); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   Tipografía: Archivo en dos anchos. Expandida para títulos (cartel),
   condensada para la plata (pizarra de carnicería).
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, .titulo {
    font-stretch: 112%;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.1;
    color: inherit;
}
h1, .t1 { font-size: clamp(1.75rem, 6vw, 2.25rem); }
h2, .t2 { font-size: 1.5rem; }
h3, .t3 { font-size: 1.2rem; }
h4, .t4 { font-size: 1.05rem; }

.num, .monto {
    font-stretch: 78%;
    font-weight: 800;
    font-variant-numeric: tabular-nums lining-nums;
    letter-spacing: -.005em;
    white-space: nowrap;
}
.monto-xl { font-size: clamp(2.4rem, 11vw, 3.2rem); line-height: 1; }
.monto-l  { font-size: 1.9rem; line-height: 1; }
.monto-m  { font-size: 1.25rem; line-height: 1.1; }

.apagado { color: var(--humo) !important; }
.chico { font-size: .875rem; }
.mini { font-size: .78rem; }
.fw-semi { font-weight: 600; }
.txt-brasa { color: var(--brasa-txt) !important; }
.txt-verde { color: var(--verde-txt) !important; }
.txt-rojo { color: var(--rojo-txt) !important; }

/* Título de sección: frase normal, sin mayúsculas forzadas */
.seccion {
    display: flex; align-items: baseline; justify-content: space-between; gap: .75rem;
    margin: 1.75rem 0 .65rem;
}
.seccion h2, .seccion h3 { font-size: 1.1rem; margin: 0; }
.seccion .cuenta { color: var(--humo); font-weight: 600; font-stretch: 100%; letter-spacing: 0; }

/* --------------------------------------------------------------------------
   Estructura
   -------------------------------------------------------------------------- */
.app { max-width: var(--ancho-app); margin: 0 auto; padding: 0 16px; }
.app-ancha { max-width: 1040px; margin: 0 auto; padding: 0 16px; }

/* Encabezado "fogón": carbón con brasas abajo y las barras de la parrilla */
.fogon {
    position: relative;
    color: #fff;
    background:
        radial-gradient(120% 70% at 50% 135%, rgba(234, 88, 12, .62) 0%, rgba(234, 88, 12, .18) 45%, transparent 70%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 26px),
        var(--carbon);
    padding: 12px 0 28px;
    overflow: hidden;
}
.fogon::after {               /* borde de brasa */
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: linear-gradient(90deg, transparent, var(--ascua) 20%, var(--brasa) 50%, var(--ascua) 80%, transparent);
    opacity: .9;
}
.fogon.con-tarjeta { padding-bottom: 64px; }
.fogon.con-tarjeta::after { display: none; }
.fogon a { color: #fff; }
.fogon .apagado, .fogon .sub { color: rgba(255, 255, 255, .68) !important; }
/* Menús desplegables dentro del encabezado oscuro: texto oscuro sobre fondo blanco */
.fogon .dropdown-menu { color: var(--carbon); }
.fogon .dropdown-menu .dropdown-item { color: var(--carbon); }
.fogon .dropdown-menu .dropdown-item:hover, .fogon .dropdown-menu .dropdown-item:focus { color: var(--carbon); background: var(--ceniza); }
.fogon .dropdown-menu .dropdown-item:active { color: #fff; background: var(--brasa-btn); }
.fogon .dropdown-menu .apagado { color: var(--humo) !important; }
.fogon h1 { margin: 0; overflow-wrap: anywhere; }

.barra-sup {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    min-height: 48px; margin-bottom: 14px;
}
.barra-sup .acciones { display: flex; gap: .4rem; align-items: center; }

.btn-icono-claro {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    min-width: 42px; height: 42px; padding: 0 .8rem;
    border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .08); color: #fff; font-weight: 700; font-size: .9rem;
    text-decoration: none; transition: background .15s;
}
.btn-icono-claro:hover, .btn-icono-claro:focus-visible { background: rgba(255, 255, 255, .16); color: #fff; }
.btn-icono-claro.lleno { background: var(--brasa-btn); border-color: var(--brasa-btn); }
.btn-icono-claro.lleno:hover { background: var(--brasa-btn-2); }

/* Sube contenido sobre el fogón */
.sobre-fogon { position: relative; margin-top: -44px; z-index: 2; }

/* Marca */
.marca {
    display: inline-flex; align-items: center; gap: .45rem;
    font-stretch: 118%; font-weight: 900; letter-spacing: -.03em; font-size: 1.2rem;
    color: inherit; text-decoration: none;
}
.marca i { color: var(--ascua); font-size: 1.05em; }
.marca:hover { color: inherit; }

/* --------------------------------------------------------------------------
   Superficies
   -------------------------------------------------------------------------- */
.hoja {                       /* bloque blanco de contenido */
    background: var(--papel);
    border: 1px solid var(--ceniza-2);
    border-radius: var(--r);
}
.hoja-pad { padding: 16px; }
.hoja + .hoja { margin-top: 12px; }

.lista { background: var(--papel); border: 1px solid var(--ceniza-2); border-radius: var(--r); overflow: hidden; }
.fila {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; min-height: 64px;
    border: 0; border-top: 1px solid var(--ceniza-2); border-radius: 0;
    color: inherit; text-decoration: none; background: transparent; width: 100%; text-align: left;
}
.fila:first-child { border-top: 0; }
a.fila:hover, button.fila:hover { background: #fafaf9; color: inherit; }
.fila .cuerpo { flex: 1; min-width: 0; }
.fila .linea1 { font-weight: 700; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila .linea2 { font-size: .85rem; color: var(--humo); line-height: 1.3; margin-top: 2px; }
.fila .derecha { text-align: right; flex-shrink: 0; }
.fila.mia { background: var(--brasa-suave); }
.fila:disabled { opacity: .55; }
.lista > form { margin: 0; }
.lista > :not(.fila) > .fila { border-top: 0; }
.lista > :not(.fila) + :not(.fila) > .fila { border-top: 1px solid var(--ceniza-2); }

/* Ícono de categoría del gasto */
.icono-cat {
    width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
    display: grid; place-items: center;
    background: var(--brasa-suave); color: var(--brasa-txt); font-size: 1.05rem;
}
.icono-cat.servicio { background: var(--ceniza); color: var(--humo); }

/* --------------------------------------------------------------------------
   Tu situación (lo primero que mira cada invitado)
   -------------------------------------------------------------------------- */
.situacion {
    background: var(--papel); border-radius: var(--r-grande);
    box-shadow: var(--sombra-flotante);
    padding: 16px 16px 14px;
}
.situacion .quien { display: flex; align-items: center; gap: 10px; }
.situacion .quien .cuerpo { flex: 1; min-width: 0; }
.situacion .estado {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
    margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--ceniza-3);
}
.situacion .estado .rotulo { font-weight: 700; font-size: .95rem; }
.situacion.debe .estado .monto { color: var(--rojo-txt); }
.situacion.cobra .estado .monto { color: var(--verde-txt); }
.situacion.aldia .estado .monto { color: var(--verde-txt); }

/* --------------------------------------------------------------------------
   Avatares y personas
   -------------------------------------------------------------------------- */
.av {
    --t: 44px;
    width: var(--t); height: var(--t); flex-shrink: 0;
    border-radius: 50%; display: inline-grid; place-items: center;
    color: #fff; font-weight: 800; font-size: calc(var(--t) * .42); line-height: 1;
    background: var(--carbon-3); position: relative; user-select: none;
}
.av-sm { --t: 32px; }
.av-md { --t: 38px; }
.av-lg { --t: 64px; }
.av.yo { box-shadow: 0 0 0 2px var(--papel), 0 0 0 4px var(--brasa); }
.av .porc {
    position: absolute; right: -6px; bottom: -4px;
    background: var(--carbon); color: #fff; border: 2px solid var(--papel);
    border-radius: 999px; font-size: 10px; font-weight: 800; padding: 1px 5px; line-height: 1.3;
}

.personas { display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 8px; margin: 0 -2px; scrollbar-width: none; }
.personas::-webkit-scrollbar { display: none; }
.persona {
    width: 74px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 6px;
    background: none; border: 0; padding: 6px 2px; border-radius: 12px; color: inherit;
}
.persona:hover { background: rgba(28, 25, 23, .04); }
.persona .nombre { font-size: .8rem; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.persona .av.nuevo { background: transparent; border: 2px dashed var(--ceniza-3); color: var(--humo); }

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */
.btn {
    --bs-btn-font-weight: 700;
    --bs-btn-border-radius: 12px;
    --bs-btn-padding-y: .65rem;
    --bs-btn-padding-x: 1.1rem;
    --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(234, 88, 12, .3);
}
.btn-lg { --bs-btn-padding-y: .9rem; --bs-btn-padding-x: 1.3rem; --bs-btn-font-size: 1.05rem; --bs-btn-border-radius: 14px; }
.btn-sm { --bs-btn-padding-y: .4rem; --bs-btn-padding-x: .8rem; --bs-btn-font-size: .85rem; --bs-btn-border-radius: 10px; }

.btn-brasa {
    --bs-btn-color: #fff; --bs-btn-bg: var(--brasa-btn); --bs-btn-border-color: var(--brasa-btn);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--brasa-btn-2); --bs-btn-hover-border-color: var(--brasa-btn-2);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #a33706; --bs-btn-active-border-color: #a33706;
    --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--brasa-btn); --bs-btn-disabled-border-color: var(--brasa-btn);
}
.btn-carbon {
    --bs-btn-color: #fff; --bs-btn-bg: var(--carbon); --bs-btn-border-color: var(--carbon);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--carbon-3); --bs-btn-hover-border-color: var(--carbon-3);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #000; --bs-btn-active-border-color: #000;
    --bs-btn-disabled-bg: var(--carbon); --bs-btn-disabled-border-color: var(--carbon);
}
.btn-ceniza {
    --bs-btn-color: var(--carbon); --bs-btn-bg: var(--ceniza); --bs-btn-border-color: var(--ceniza-2);
    --bs-btn-hover-color: var(--carbon); --bs-btn-hover-bg: var(--ceniza-2); --bs-btn-hover-border-color: var(--ceniza-3);
    --bs-btn-active-color: var(--carbon); --bs-btn-active-bg: var(--ceniza-3); --bs-btn-active-border-color: var(--ceniza-3);
}
.btn-linea {
    --bs-btn-color: var(--carbon); --bs-btn-bg: var(--papel); --bs-btn-border-color: var(--ceniza-3);
    --bs-btn-hover-color: var(--carbon); --bs-btn-hover-bg: var(--ceniza); --bs-btn-hover-border-color: var(--carbon-3);
    --bs-btn-active-color: var(--carbon); --bs-btn-active-bg: var(--ceniza-2); --bs-btn-active-border-color: var(--carbon);
}
.btn-verde {
    --bs-btn-color: #fff; --bs-btn-bg: var(--verde-txt); --bs-btn-border-color: var(--verde-txt);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #166534; --bs-btn-hover-border-color: #166534;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #14532d; --bs-btn-active-border-color: #14532d;
    --bs-btn-disabled-bg: var(--verde-txt); --bs-btn-disabled-border-color: var(--verde-txt);
}
.btn-peligro {
    --bs-btn-color: #fff; --bs-btn-bg: var(--rojo-txt); --bs-btn-border-color: var(--rojo-txt);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #a51616; --bs-btn-hover-border-color: #a51616;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #8a1212; --bs-btn-active-border-color: #8a1212;
}
.btn-texto-peligro { --bs-btn-color: var(--rojo-txt); --bs-btn-hover-color: #a51616; --bs-btn-bg: transparent; --bs-btn-border-color: transparent; --bs-btn-hover-bg: var(--rojo-suave); }
.btn-wa {
    --bs-btn-color: #fff; --bs-btn-bg: #128c4a; --bs-btn-border-color: #128c4a;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #0f7a40; --bs-btn-hover-border-color: #0f7a40;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #0c6634; --bs-btn-active-border-color: #0c6634;
}
.btn .fa-whatsapp { font-size: 1.15em; }
.btn.enviando { position: relative; color: transparent !important; }
.btn.enviando::after {
    content: ""; position: absolute; inset: 0; margin: auto; width: 1.1rem; height: 1.1rem;
    border: 2.5px solid rgba(255, 255, 255, .9); border-right-color: transparent; border-radius: 50%;
    animation: girar .7s linear infinite;
}
.btn-ceniza.enviando::after, .btn-linea.enviando::after { border-color: var(--carbon); border-right-color: transparent; }
@keyframes girar { to { transform: rotate(360deg); } }

.link-accion {
    background: none; border: 0; padding: 0; font-weight: 700; color: var(--brasa-txt); text-decoration: none;
}
.link-accion:hover { color: var(--brasa-btn-2); text-decoration: underline; }

/* Botón de menú (⋮) */
.btn-menu {
    width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; color: var(--humo);
    display: inline-grid; place-items: center;
}
.btn-menu:hover { background: var(--ceniza); color: var(--carbon); }
.dropdown-menu { --bs-dropdown-zindex: 1045; --bs-dropdown-bg: var(--papel); --bs-dropdown-border-radius: 12px; --bs-dropdown-border-color: var(--ceniza-2); --bs-dropdown-link-active-bg: var(--brasa-btn); box-shadow: var(--sombra-flotante); padding: 6px; }
.dropdown-item { border-radius: 8px; padding: .55rem .75rem; font-weight: 600; }

/* --------------------------------------------------------------------------
   Formularios
   -------------------------------------------------------------------------- */
.campo { margin-bottom: 18px; }
.campo > label, .campo > .rotulo {
    display: block; font-weight: 700; font-size: .95rem; margin-bottom: 6px; color: var(--carbon);
}
.ayuda { font-size: .82rem; color: var(--humo); margin-top: 5px; }

.form-control, .form-select {
    border: 1.5px solid var(--ceniza-2); border-radius: 12px;
    padding: .72rem .9rem; font-size: 1rem; background-color: var(--papel); color: var(--carbon);
}
.form-control::placeholder { color: #a8a29e; }
.form-control:focus, .form-select:focus { border-color: var(--brasa); box-shadow: 0 0 0 .22rem rgba(234, 88, 12, .18); }
.form-control.is-invalid { border-color: var(--rojo); }
.form-check-input:checked { background-color: var(--brasa-btn); border-color: var(--brasa-btn); }
.form-check-input:focus { border-color: var(--brasa); box-shadow: 0 0 0 .22rem rgba(234, 88, 12, .2); }
.form-switch .form-check-input { width: 2.6em; height: 1.4em; }
.form-switch .form-check-input:focus { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ea580c'/%3e%3c/svg%3e"); }

/* Monto grande */
.entrada-monto {
    display: flex; align-items: baseline; gap: 6px;
    border-bottom: 2px solid var(--ceniza-2); padding: 4px 2px 8px; transition: border-color .15s;
}
.entrada-monto:focus-within { border-color: var(--brasa); }
.entrada-monto .signo { font-stretch: 78%; font-weight: 800; font-size: 2rem; color: var(--humo); }
.entrada-monto input {
    flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 0;
    font-family: inherit; font-stretch: 78%; font-weight: 800; font-size: 2.6rem; line-height: 1.1;
    font-variant-numeric: tabular-nums; color: var(--carbon);
}
.entrada-monto input::placeholder { color: var(--ceniza-3); }
.entrada-monto.is-invalid { border-color: var(--rojo); }

/* Stepper ( − 2 + ) */
.stepper {
    display: inline-flex; align-items: center; border: 1.5px solid var(--ceniza-2); border-radius: 999px;
    background: var(--papel); overflow: hidden;
}
.stepper button {
    width: 42px; height: 40px; border: 0; background: transparent; font-size: 1.25rem; font-weight: 700; color: var(--carbon);
}
.stepper button:hover { background: var(--ceniza); }
.stepper button:disabled { color: var(--ceniza-3); }
.stepper input {
    width: 40px; border: 0; text-align: center; font-weight: 800; font-size: 1.05rem; background: transparent;
    font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; padding: 0; color: var(--carbon);
}
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper.sm button { width: 34px; height: 32px; font-size: 1.05rem; }
.stepper.sm input { width: 30px; font-size: .95rem; }
.stepper.apagado { opacity: .35; pointer-events: none; }

/* Chips de opción (radio / checkbox con aspecto de pastilla) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips.scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.chips.scroll::-webkit-scrollbar { display: none; }
.chip-op { position: relative; flex-shrink: 0; }
.chip-op input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip-op label {
    display: inline-flex; align-items: center; gap: .45rem; cursor: pointer;
    padding: .45rem .8rem; border-radius: 999px; border: 1.5px solid var(--ceniza-2);
    background: var(--papel); font-weight: 600; font-size: .92rem; white-space: nowrap; user-select: none;
    transition: background .12s, border-color .12s, color .12s;
}
.chip-op label i { color: var(--brasa-txt); }
.chip-op input:checked + label { background: var(--carbon); border-color: var(--carbon); color: #fff; }
.chip-op input:checked + label i { color: var(--ascua); }
.chip-op input:focus-visible + label { outline: 3px solid rgba(234, 88, 12, .55); outline-offset: 2px; }

/* Selector de persona (quién pagó) */
.elegir-persona { display: flex; gap: 4px; overflow-x: auto; padding: 6px 2px 4px; scrollbar-width: none; }
.elegir-persona::-webkit-scrollbar { display: none; }
.elegir-persona .op { position: relative; flex-shrink: 0; }
.elegir-persona input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.elegir-persona label {
    width: 70px; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer;
    padding: 6px 2px; border-radius: 12px;
}
.elegir-persona label .nombre { font-size: .78rem; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.elegir-persona input:checked + label .av { box-shadow: 0 0 0 2px var(--papel), 0 0 0 4px var(--brasa); }
.elegir-persona input:checked + label .nombre { font-weight: 800; color: var(--brasa-txt); }
.elegir-persona input:focus-visible + label { outline: 3px solid rgba(234, 88, 12, .55); }

/* Lista de "entre quiénes se divide" */
.reparto { border: 1.5px solid var(--ceniza-2); border-radius: 12px; }
.reparto .item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--ceniza-2); }
.reparto .item:first-child { border-top: 0; }
.reparto .item label { flex: 1; display: flex; align-items: center; gap: 10px; cursor: pointer; min-width: 0; font-weight: 600; }
.reparto .item label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reparto .form-check-input { width: 1.35em; height: 1.35em; margin: 0; flex-shrink: 0; }
.resumen-reparto {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: var(--ceniza); border-radius: 12px; padding: 12px 14px;
}

/* --------------------------------------------------------------------------
   Barra inferior: Gastos · [Cargar gasto] · Cuentas
   -------------------------------------------------------------------------- */
.barra-inf {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
    background: rgba(255, 255, 255, .97); backdrop-filter: blur(8px);
    border-top: 1px solid var(--ceniza-2);
    padding-bottom: env(safe-area-inset-bottom);
}
.barra-inf .dentro {
    max-width: var(--ancho-app); margin: 0 auto; height: var(--barra-alto);
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 8px;
}
.barra-inf .tab {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    color: var(--humo); text-decoration: none; font-size: .78rem; font-weight: 700; padding: 6px 0;
}
.barra-inf .tab i { font-size: 1.2rem; }
.barra-inf .tab.activa { color: var(--carbon); }
.barra-inf .tab.activa i { color: var(--brasa); }
.barra-inf .accion {
    display: inline-flex; align-items: center; gap: .5rem; transform: translateY(-14px);
    background: var(--brasa-btn); color: #fff; border: 0; border-radius: 999px;
    padding: .85rem 1.35rem; font-weight: 800; font-size: 1rem; text-decoration: none;
    box-shadow: 0 10px 22px rgba(207, 74, 10, .38), 0 0 0 5px var(--ceniza);
}
.barra-inf .accion:hover { background: var(--brasa-btn-2); color: #fff; }
.barra-inf .accion:active { transform: translateY(-12px) scale(.97); }
.barra-inf .accion.cerrado { background: var(--carbon-3); box-shadow: 0 0 0 5px var(--ceniza); }

/* --------------------------------------------------------------------------
   Hojas (modales que suben desde abajo en el celular)
   -------------------------------------------------------------------------- */
.modal { --bs-modal-bg: var(--papel); --bs-modal-border-radius: var(--r-grande); --bs-modal-border-width: 0; --bs-modal-box-shadow: var(--sombra-flotante); }
.modal-backdrop { --bs-backdrop-bg: #0c0a09; --bs-backdrop-opacity: .55; }
.modal-dialog-sheet { display: flex; align-items: flex-end; min-height: 100%; margin: 0 auto; max-width: var(--ancho-app); }
.modal.fade .modal-dialog-sheet { transform: translateY(60px); transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
.modal.show .modal-dialog-sheet { transform: none; }
.modal-dialog-sheet .modal-content {
    border-radius: var(--r-grande) var(--r-grande) 0 0; max-height: 94vh; max-height: 94dvh;
    padding-bottom: env(safe-area-inset-bottom);
}
.modal-dialog-sheet .modal-content { overflow: hidden; }
.modal-dialog-sheet .modal-content > form { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.modal-dialog-sheet .modal-body { overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
.modal-dialog-sheet .modal-footer { flex-shrink: 0; border-top: 1px solid var(--ceniza-2); padding-top: 12px; }
.modal-dialog-sheet .modal-content::before {   /* manija */
    content: ""; display: block; width: 40px; height: 4px; border-radius: 4px; background: var(--ceniza-3);
    margin: 8px auto 0;
}
@media (min-width: 600px) {
    .modal-dialog-sheet { align-items: center; padding: 24px 0; }
    .modal-dialog-sheet .modal-content { border-radius: var(--r-grande); max-height: calc(100vh - 48px); }
    .modal-dialog-sheet .modal-content::before { display: none; }
}
.modal-header { border-bottom: 0; padding: 16px 20px 4px; align-items: flex-start; }
.modal-header .modal-title { font-stretch: 112%; font-weight: 800; font-size: 1.3rem; letter-spacing: -.02em; }
.modal-header .sub { font-size: .9rem; color: var(--humo); margin-top: 4px; }
.modal-body { padding: 12px 20px 8px; }
.modal-footer { border-top: 0; padding: 8px 20px 20px; }
.modal-footer > * { margin: 0; }
.btn-close:focus { box-shadow: 0 0 0 .22rem rgba(234, 88, 12, .3); }

/* --------------------------------------------------------------------------
   Avisos, toasts, vacíos
   -------------------------------------------------------------------------- */
.aviso {
    display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px;
    font-size: .92rem; background: var(--ceniza); border: 1px solid var(--ceniza-2);
}
.aviso i { margin-top: 3px; }
.aviso.ok { background: var(--verde-suave); border-color: #bbf7d0; color: #14532d; }
.aviso.error { background: var(--rojo-suave); border-color: #fecaca; color: #7f1d1d; }
.aviso.brasa { background: var(--brasa-suave); border-color: #fed7aa; color: #7c2d12; }
.aviso a { color: inherit; font-weight: 700; }

.toasts {
    position: fixed; left: 0; right: 0; z-index: 2000; pointer-events: none;
    bottom: calc(var(--barra-alto) + 20px + env(safe-area-inset-bottom));
    display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 16px;
}
body:not(.con-barra) .toasts { bottom: calc(24px + env(safe-area-inset-bottom)); }
.toasty {
    pointer-events: auto; max-width: 520px; display: flex; align-items: flex-start; gap: 10px;
    background: var(--carbon); color: #fff; border-radius: 14px; padding: 12px 16px;
    font-weight: 600; font-size: .95rem; box-shadow: var(--sombra-flotante);
    opacity: 0; transform: translateY(12px); transition: opacity .2s, transform .2s;
}
.toasty.on { opacity: 1; transform: none; }
.toasty i { color: #4ade80; margin-top: 3px; }
.toasty-error i { color: #fb923c; }

.vacio { text-align: center; padding: 28px 16px; }
.vacio .icono {
    width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 12px; display: grid; place-items: center;
    background: var(--brasa-suave); color: var(--brasa-txt); font-size: 1.6rem;
}

/* Pasos para arrancar (es una secuencia real, por eso van numerados) */
.pasos { list-style: none; margin: 0; padding: 0; counter-reset: paso; }
.pasos li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--ceniza-2); counter-increment: paso; }
.pasos li:first-child { border-top: 0; }
.pasos li::before {
    content: counter(paso); flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
    display: grid; place-items: center; font-weight: 800; font-size: .9rem;
    background: var(--ceniza); color: var(--carbon-3); border: 1.5px solid var(--ceniza-3);
}
.pasos li.hecho::before { content: "✓"; background: var(--verde-txt); border-color: var(--verde-txt); color: #fff; }
.pasos li.hecho .titulo-paso { color: var(--humo); text-decoration: line-through; }
.pasos .titulo-paso { font-weight: 700; }

/* Etiquetas de estado */
.etiqueta {
    display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem; border-radius: 999px;
    font-size: .78rem; font-weight: 700; background: var(--ceniza); color: var(--carbon-3); white-space: nowrap;
}
.etiqueta.abierto { background: var(--verde-suave); color: var(--verde-txt); }
.etiqueta.cerrado { background: var(--ceniza-2); color: var(--carbon-3); }
.etiqueta.pagar { background: var(--brasa-suave); color: var(--brasa-txt); }
.etiqueta.debe { background: var(--rojo-suave); color: var(--rojo-txt); }

/* Barra de progreso de pagos */
.progreso { height: 12px; border-radius: 999px; background: var(--ceniza-2); overflow: hidden; }
.progreso > span {
    display: block; height: 100%; width: 0; border-radius: inherit;
    background: linear-gradient(90deg, var(--ascua), var(--brasa));
    transition: width 1s cubic-bezier(.2, .8, .2, 1);
}
.progreso.completo > span { background: var(--verde); }

/* Alias para transferir: se copia de un toque */
.alias-copiar {
    display: flex; align-items: center; gap: 8px; width: 100%;
    border: 1.5px dashed var(--ceniza-3); background: var(--ceniza); border-radius: 10px;
    padding: 8px 10px; font-weight: 700; color: var(--carbon); text-align: left;
}
.alias-copiar .txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9rem; }
.alias-copiar i { color: var(--brasa-txt); }
.alias-copiar:hover { border-color: var(--brasa); }

/* Fecha en bloque (lista de asados) */
.fecha-bloque {
    width: 50px; flex-shrink: 0; text-align: center; border-radius: 12px; padding: 6px 0;
    background: var(--ceniza); border: 1px solid var(--ceniza-2); line-height: 1.05;
}
.fecha-bloque .dia { display: block; font-stretch: 78%; font-weight: 800; font-size: 1.35rem; }
.fecha-bloque .mes { display: block; font-size: .72rem; font-weight: 700; color: var(--humo); }

/* Visor de comprobantes */
.visor { background: #0c0a09; min-height: 300px; display: grid; place-items: center; }
.visor img { max-width: 100%; max-height: 80vh; }
.visor iframe { width: 100%; height: 75vh; border: 0; background: #fff; }

/* Confeti de festejo */
.confeti { position: fixed; inset: 0; pointer-events: none; z-index: 1500; overflow: hidden; }
.confeti i {
    position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px; opacity: 0;
    animation: caer linear forwards;
}
@keyframes caer { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(105vh) rotate(680deg); opacity: 0; } }

/* --------------------------------------------------------------------------
   Pantallas de cuenta (login, registro, etc.)
   -------------------------------------------------------------------------- */
.pantalla-cuenta { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.pantalla-cuenta .fogon { padding: 20px 0 72px; }
.pantalla-cuenta .tarjeta-cuenta {
    position: relative; z-index: 2; margin: -48px auto 32px; max-width: 440px; width: calc(100% - 32px);
    background: var(--papel); border-radius: var(--r-grande); box-shadow: var(--sombra-flotante); padding: 24px 20px;
}
@media (min-width: 480px) { .pantalla-cuenta .tarjeta-cuenta { padding: 32px 28px; } }
.pantalla-cuenta .tarjeta-cuenta h1 { font-size: 1.6rem; margin-bottom: 6px; }
.pantalla-cuenta .pie-cuenta { text-align: center; padding-top: 16px; margin-top: 8px; border-top: 1px solid var(--ceniza-2); font-size: .95rem; }

/* Campo de contraseña con botón "ver" */
.clave { position: relative; }
.clave .form-control { padding-right: 3rem; }
.clave button {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    width: 42px; height: 42px; border: 0; background: transparent; color: var(--humo); border-radius: 10px;
}
.clave button:hover { color: var(--carbon); }

/* --------------------------------------------------------------------------
   Páginas públicas: migas, llamado a la acción, pie, contenido de texto
   -------------------------------------------------------------------------- */
.migas { display: flex; flex-wrap: wrap; gap: 6px; font-size: .85rem; margin-bottom: 10px; color: rgba(255, 255, 255, .6); }
.migas a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.migas a:hover { text-decoration: underline; }
.migas [aria-current] { color: rgba(255, 255, 255, .6); }

.texto { font-size: 1.02rem; line-height: 1.7; color: var(--carbon-3); max-width: 62ch; }
.texto h2 { color: var(--carbon); margin: 2rem 0 .75rem; font-size: 1.3rem; }
.texto h3 { color: var(--carbon); margin: 1.5rem 0 .5rem; font-size: 1.08rem; }
.texto p { margin-bottom: 1rem; }
.texto ul { padding-left: 1.2rem; }
.texto li { margin-bottom: .35rem; }
.texto strong { color: var(--carbon); }

.tabla-simple { width: 100%; border-collapse: collapse; font-size: .95rem; background: var(--papel); border-radius: var(--r); overflow: hidden; border: 1px solid var(--ceniza-2); }
.tabla-simple th, .tabla-simple td { padding: 10px 12px; border-top: 1px solid var(--ceniza-2); text-align: left; }
.tabla-simple thead th { border-top: 0; background: var(--ceniza); font-weight: 700; }
.tabla-simple td.num, .tabla-simple th.num { text-align: right; }

.llamado { background: var(--carbon); color: #fff; border-radius: var(--r-grande); padding: 22px 20px; position: relative; overflow: hidden; }
.llamado::after { content: ""; position: absolute; inset: auto 0 0 0; height: 3px; background: linear-gradient(90deg, var(--ascua), var(--brasa)); }
.llamado p { color: rgba(255, 255, 255, .78); }

.pie-publico { border-top: 1px solid var(--ceniza-2); margin-top: 40px; padding: 24px 0 40px; text-align: center; color: var(--humo); }
.pie-publico .enlaces { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin-bottom: 10px; }
.pie-publico .enlaces a { color: var(--carbon-3); font-weight: 600; text-decoration: none; font-size: .92rem; }
.pie-publico .enlaces a:hover { color: var(--brasa-txt); text-decoration: underline; }

.datos-corte { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; }
.datos-corte > div { padding: 12px 14px; border-top: 1px solid var(--ceniza-2); }
.datos-corte > div:nth-child(-n+2) { border-top: 0; }
.datos-corte > div:nth-child(odd) { border-right: 1px solid var(--ceniza-2); }
.datos-corte .rot { font-size: .8rem; color: var(--humo); }
.datos-corte .val { font-weight: 800; }
.fuego-ico { color: var(--brasa); letter-spacing: -2px; margin-right: 4px; }
.fuego-ico .off { color: var(--ceniza-3); }

/* --------------------------------------------------------------------------
   Movimiento reducido
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
    .confeti { display: none; }
}