/* =========================================================
   GASTITOS — identidad visual
   Concepto: libreta de contabilidad digital. Fondo papel,
   tinta oscura, dos acentos que representan Personal (ámbar
   terracota) y Negocio (verde tintero) — el color acompaña
   cada monto para que sepas de un vistazo a qué espacio
   pertenece, sin leer la etiqueta.
   Tipografía: una serif de texto para números grandes
   (peso, autoridad de "libro contable") + una sans utilitaria
   para UI + una mono para cifras en tablas (alineación real).
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,500;0,600;0,700;1,500&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
    --papel:        #f6f1e7;
    --papel-alto:   #fffdf8;
    --tinta:        #2b2620;
    --tinta-suave:  #6b6255;
    --linea:        #ddd3bf;
    --personal:     #c9683d;
    --personal-bg:  #f4e3d5;
    --negocio:      #2f6f63;
    --negocio-bg:   #dfe9e4;
    --ingreso:      #2f7d5a;
    --egreso:       #b8443a;
    --sombra:       0 2px 10px rgba(43,38,32,.08);
    --radio:        14px;
}

/* ---------- tema oscuro ----------
   Mismos nombres de variable, valores invertidos para pantalla nocturna.
   Los acentos se aclaran un poco (vs. el tema claro) para mantener
   contraste AA sobre fondo oscuro. */
[data-theme="oscuro"] {
    --papel:        #1c1a17;
    --papel-alto:   #26221e;
    --tinta:        #f0ead9;
    --tinta-suave:  #a89e8c;
    --linea:        #3c352c;
    --personal:     #e2915f;
    --personal-bg:  #3a2a1e;
    --negocio:      #64b3a2;
    --negocio-bg:   #1f332f;
    --ingreso:      #57bf8f;
    --egreso:       #e2766a;
    --sombra:       0 2px 14px rgba(0,0,0,.5);
}

/* transición suave al alternar tema, sin animar todo lo demás */
html { transition: background-color .2s ease; }
body, .bloque, .tarjeta-saldo, .app-top, .nav-inferior, .hoja,
input, select, textarea, .pill-negocio, .theme-toggle, .item-trans, .usuario-chip {
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--papel);
    color: var(--tinta);
    font-family: 'Inter', -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* textura sutil de papel */
body {
    background-image:
        radial-gradient(circle at 1px 1px, rgba(43,38,32,.045) 1px, transparent 0);
    background-size: 22px 22px;
}
[data-theme="oscuro"] body {
    background-image:
        radial-gradient(circle at 1px 1px, rgba(255,255,255,.035) 1px, transparent 0);
    background-size: 22px 22px;
}

h1, h2, h3, .cifra-grande {
    font-family: 'Lora', Georgia, serif;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.mono, table td.num, .saldo-num {
    font-family: 'JetBrains Mono', monospace;
}

a { color: inherit; }

/* ---------- layout raíz ---------- */
.app-shell {
    max-width: 720px;
    margin: 0 auto;
    min-height: 100vh;
    padding: 0 0 84px 0; /* espacio para nav inferior */
    position: relative;
}

.app-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 10px;
}

.app-top .marca {
    font-family: 'Lora', serif;
    font-size: 1.15rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}
.app-top .marca .punto {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--personal);
    box-shadow: 10px 0 0 var(--negocio);
    display: inline-block;
    margin-right: 6px;
}

.app-top .usuario-chip {
    font-size: .8rem;
    color: var(--tinta-suave);
    text-decoration: none;
    border: 1px solid var(--linea);
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--papel-alto);
}

.theme-toggle {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid var(--linea);
    background: var(--papel-alto);
    font-size: 1rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}
.theme-toggle:active { transform: scale(.92); }
.theme-toggle-flotante {
    position: fixed;
    top: 18px; right: 18px;
    z-index: 50;
}

.tema-btn.activo {
    background: var(--negocio-bg);
    border-color: var(--negocio);
    color: #1c4b41;
}
[data-theme="oscuro"] .tema-btn.activo {
    color: var(--negocio);
}

main { padding: 4px 16px 20px; }

/* ---------- selector de negocio (pills) ---------- */
.selector-negocios {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 16px 14px;
    -webkit-overflow-scrolling: touch;
}
.selector-negocios::-webkit-scrollbar { display: none; }

.pill-negocio {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1.5px solid var(--linea);
    background: var(--papel-alto);
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: transform .12s ease;
}
.pill-negocio:active { transform: scale(.96); }
.pill-negocio.activo.tipo-personal {
    background: var(--personal-bg);
    border-color: var(--personal);
    color: #7a3d1f;
}
.pill-negocio.activo.tipo-negocio {
    background: var(--negocio-bg);
    border-color: var(--negocio);
    color: #1c4b41;
}
[data-theme="oscuro"] .pill-negocio.activo.tipo-personal { color: var(--personal); }
[data-theme="oscuro"] .pill-negocio.activo.tipo-negocio { color: var(--negocio); }

/* ---------- tarjeta de saldo (hero) ---------- */
.tarjeta-saldo {
    background: var(--papel-alto);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: 22px 22px 18px;
    box-shadow: var(--sombra);
    margin-bottom: 18px;
    position: relative;
    overflow: hidden;
}
.tarjeta-saldo::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--acento, var(--negocio)), transparent 140%);
}
.tarjeta-saldo .etiqueta {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--tinta-suave);
    margin: 0 0 4px;
}
.tarjeta-saldo .saldo-num {
    font-size: 2.3rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.1;
}
.tarjeta-saldo .fila-mini {
    display: flex;
    gap: 22px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--linea);
}
.mini-stat .valor { font-weight: 600; font-size: 1.02rem; }
.mini-stat .valor.ok { color: var(--ingreso); }
.mini-stat .valor.mal { color: var(--egreso); }
.mini-stat .txt { font-size: .74rem; color: var(--tinta-suave); }

/* ---------- listas / tarjetas genéricas ---------- */
.bloque {
    background: var(--papel-alto);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    margin-bottom: 16px;
    overflow: hidden;
}
.bloque-titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px 10px;
    font-size: .95rem;
    font-weight: 700;
    font-family: 'Lora', serif;
}
.bloque-titulo .ver-todo { font-size: .78rem; font-weight: 500; color: var(--tinta-suave); font-family: 'Inter'; }

.item-trans {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border-top: 1px solid var(--linea);
}
.item-trans:first-child { border-top: none; }
.item-trans .icono {
    width: 38px; height: 38px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.item-trans .info { flex: 1; min-width: 0; }
.item-trans .desc { font-weight: 600; font-size: .92rem; }
.item-trans .meta { font-size: .76rem; color: var(--tinta-suave); }
.item-trans .monto { font-weight: 600; font-size: .95rem; white-space: nowrap; }
.item-trans .monto.ingreso { color: var(--ingreso); }
.item-trans .monto.egreso { color: var(--egreso); }
.item-trans { cursor: pointer; }
.item-trans:active { background: var(--papel); }

.vacio {
    padding: 30px 18px;
    text-align: center;
    color: var(--tinta-suave);
    font-size: .88rem;
}

/* ---------- nav inferior fija (uso con celular) ---------- */
.nav-inferior {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    max-width: 720px;
    margin: 0 auto;
    background: var(--papel-alto);
    border-top: 1px solid var(--linea);
    display: flex;
    justify-content: space-around;
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
    z-index: 40;
}
.nav-inferior a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-decoration: none;
    color: var(--tinta-suave);
    font-size: .68rem;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 10px;
    flex: 1;
}
.nav-inferior a .ic { font-size: 1.25rem; }
.nav-inferior a.activo { color: var(--tinta); background: var(--papel); }

/* botón flotante agregar */
.btn-flotante {
    position: fixed;
    right: 20px;
    bottom: 78px;
    width: 58px; height: 58px;
    border-radius: 50%;
    background: var(--tinta);
    color: var(--papel);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem;
    box-shadow: 0 6px 18px rgba(43,38,32,.35);
    border: none;
    cursor: pointer;
    z-index: 45;
    max-width: 720px;
}

/* ---------- formularios ---------- */
label { display: block; font-size: .8rem; font-weight: 600; color: var(--tinta-suave); margin: 14px 0 6px; }
input, select, textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1.5px solid var(--linea);
    background: var(--papel-alto);
    font-family: inherit;
    font-size: .95rem;
    color: var(--tinta);
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--tinta);
}
.toggle-tipo {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}
.toggle-tipo button {
    flex: 1;
    padding: 12px;
    border-radius: 10px;
    border: 1.5px solid var(--linea);
    background: var(--papel-alto);
    font-weight: 700;
    cursor: pointer;
    font-size: .9rem;
}
.toggle-tipo button.ing.activo { background: #e5f3ec; border-color: #2f7d5a; color: #1f5c40; }
.toggle-tipo button.egr.activo { background: #fbe8e6; border-color: #b8443a; color: #8a2f26; }

.btn {
    display: inline-block;
    width: 100%;
    padding: 13px;
    border-radius: 10px;
    border: none;
    background: var(--tinta);
    color: var(--papel);
    font-weight: 700;
    font-size: .95rem;
    cursor: pointer;
    margin-top: 18px;
    text-align: center;
    text-decoration: none;
}
.btn:active { opacity: .85; }
.btn.secundario { background: transparent; color: var(--tinta); border: 1.5px solid var(--linea); }
.btn.peligro { background: var(--egreso); }

/* ---------- modal / hoja inferior ---------- */
.overlay {
    position: fixed; inset: 0;
    background: rgba(43,38,32,.45);
    z-index: 60;
    display: none;
}
.overlay.abierto { display: block; }
.hoja {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    max-width: 720px;
    margin: 0 auto;
    background: var(--papel);
    border-radius: 20px 20px 0 0;
    padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
    max-height: 88vh;
    overflow-y: auto;
    z-index: 61;
    transform: translateY(100%);
    transition: transform .25s ease;
}
.overlay.abierto .hoja { transform: translateY(0); }
.hoja .asa { width: 40px; height: 4px; background: var(--linea); border-radius: 3px; margin: 0 auto 14px; }
.hoja-titulo { font-family: 'Lora', serif; font-size: 1.2rem; font-weight: 700; margin: 0 0 4px; }

/* ---------- login ---------- */
.pantalla-login {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24px;
    max-width: 420px;
    margin: 0 auto;
}
.pantalla-login .marca-login {
    text-align: center;
    margin-bottom: 28px;
}
.pantalla-login .marca-login h1 {
    font-size: 1.8rem;
    margin: 10px 0 4px;
}
.pantalla-login .marca-login p { color: var(--tinta-suave); font-size: .88rem; margin: 0; }
.pantalla-login .logo-cintas {
    display: inline-flex; gap: 6px;
}
.pantalla-login .logo-cintas span {
    width: 26px; height: 8px; border-radius: 4px;
}

.error-msg {
    background: #fbe8e6; color: #8a2f26;
    padding: 10px 14px; border-radius: 10px;
    font-size: .85rem; margin-top: 14px;
}
.ok-msg {
    background: #e5f3ec; color: #205c40;
    padding: 10px 14px; border-radius: 10px;
    font-size: .85rem; margin-top: 14px;
}

/* ---------- filtros de reportes ---------- */
.filtros-reporte {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    margin-bottom: 14px;
}
.filtros-reporte select {
    width: auto;
    flex: 0 0 auto;
    padding: 9px 12px;
    font-size: .82rem;
}

.grafica-caja {
    background: var(--papel-alto);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: var(--sombra);
}
.grafica-caja h3 {
    font-size: .95rem;
    margin: 0 0 12px;
}

/* ---------- foto adjunta (nota/factura) ---------- */
.foto-zona {
    border: 1.5px dashed var(--linea);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    margin-top: 6px;
}
.btn-agregar-foto {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 11px 18px;
    border-radius: 10px;
    border: 1.5px solid var(--linea);
    background: var(--papel-alto);
    font-weight: 600;
    font-size: .88rem;
    cursor: pointer;
    color: var(--tinta);
}
.foto-preview {
    max-width: 100%;
    max-height: 240px;
    border-radius: 10px;
    display: block;
    margin: 0 auto 10px;
    object-fit: contain;
}
.foto-peso {
    font-size: .74rem;
    color: var(--tinta-suave);
    margin: 4px 0 10px;
}
.foto-botones {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}
.foto-botones .btn,
.foto-botones label.btn {
    width: auto;
    margin: 0;
    padding: 9px 16px;
    font-size: .82rem;
}

.clip-foto {
    cursor: pointer;
    margin-left: 2px;
    font-size: .85em;
}

.visor-foto {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px 20px;
    pointer-events: none;
}
.visor-foto img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 12px;
    pointer-events: auto;
    box-shadow: 0 10px 40px rgba(0,0,0,.5);
}
.btn-cerrar-foto {
    position: fixed;
    top: 18px; right: 18px;
    width: 42px; height: 42px;
    border-radius: 50%;
    background: rgba(0,0,0,.55);
    color: #fff;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    z-index: 63;
}

/* utilidades */
.flex-entre { display: flex; align-items: center; justify-content: space-between; }
.text-suave { color: var(--tinta-suave); font-size: .82rem; }
.mt-0 { margin-top: 0; }
.badge {
    display: inline-block;
    font-size: .68rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
}
.badge.personal { background: var(--personal-bg); color: #7a3d1f; }
.badge.negocio { background: var(--negocio-bg); color: #1c4b41; }
[data-theme="oscuro"] .badge.personal { color: var(--personal); }
[data-theme="oscuro"] .badge.negocio { color: var(--negocio); }