/* ── Relievo · Sistema de cobros ─────────────────────────────────
   Identidad oficial de la marca (tomada de la presentación Relievo):
   verdes profundos + oro champán sobre crema cálida.
   Tipografías: Fraunces (serif, títulos y cifras) + Manrope (texto). */

:root {
    /* Escala de verdes de la marca */
    --verde-900:   #132B13;
    --verde-800:   #1E441E;   /* verde del logo */
    --verde-700:   #285728;
    --verde-600:   #356B35;
    --verde-tint:  #EDF2E8;

    /* Oros */
    --oro:         #C9A44E;
    --oro-claro:   #E8D6A0;
    --oro-oscuro:  #A6822F;

    /* Neutros cálidos */
    --crema:       #FAF8F1;
    --tinta:       #22301F;
    --gris:        #6B7466;

    /* Estados */
    --rojo:        #B4552E;
    --ambar:       #C08A2D;

    /* Nombres semánticos que usa el resto de la hoja */
    --verde:        var(--verde-800);
    --verde-osc:    var(--verde-900);
    --verde-claro:  var(--verde-700);
    --dorado:       var(--oro);
    --dorado-suave: var(--oro-claro);
    --fondo:        var(--crema);
    --tarjeta:      #FFFFFF;
    --texto:        var(--tinta);
    --sutil:        var(--gris);
    --borde:        #E5E0D0;
    --mora:         var(--rojo);
    --mora-fondo:   #F8EDE5;
    --exito:        #2F6B35;
    --exito-fondo:  var(--verde-tint);

    --serif:        'Fraunces', Georgia, 'Times New Roman', serif;
    --sans:         'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;

    /* Fondos de marca */
    --degradado-verde: radial-gradient(1100px 620px at 82% -12%, rgba(201, 164, 78, 0.12), transparent 55%),
                       linear-gradient(160deg, #193A19 0%, var(--verde-800) 48%, #16351A 100%);
    --degradado-oro:   linear-gradient(100deg, var(--oro-claro) 0%, var(--oro) 45%, var(--oro-oscuro) 100%);

    --sombra:       0 1px 3px rgba(19, 43, 19, 0.06);
    --sombra-suave: 0 1px 2px rgba(19, 43, 19, 0.04), 0 10px 30px rgba(20, 40, 18, 0.07);
    --sombra-alta:  0 2px 4px rgba(19, 43, 19, 0.05), 0 18px 44px rgba(20, 40, 18, 0.13);
    --anillo:       0 0 0 3px rgba(53, 107, 53, 0.16);
    --anillo-oro:   0 0 0 3px rgba(201, 164, 78, 0.30);
}

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

/* Ninguna imagen puede desbordar su espacio, pase lo que pase. */
img { max-width: 100%; height: auto; }

body {
    font-family: var(--sans);
    background: var(--fondo);
    color: var(--texto);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ── Páginas de marca (login y link de pago): el verde exacto del logo ──
   El fondo es plano (#1E441F, tomado del archivo del logo) para que el
   PNG de la marca se funda con la página sin ningún borde visible. */
body.portada, body.publico {
    background: #1E441F;
}

/* ── Barra superior ── */
.barra {
    position: relative;
    background: radial-gradient(900px 300px at 88% -60%, rgba(201, 164, 78, 0.16), transparent 60%),
                linear-gradient(160deg, #193A19 0%, var(--verde-800) 55%, #16351A 100%);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 2.2rem;
    padding: 0.85rem 2rem;
    flex-wrap: wrap;
}
.barra::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--oro-oscuro), var(--oro-claro) 50%, var(--oro-oscuro));
    opacity: 0.85;
}
.barra-publica {
    justify-content: center;
    padding: 1.5rem 1rem 0;
    background: none;
}
.barra-publica::after { content: none; }

.logo { display: flex; align-items: center; gap: 0.8rem; text-decoration: none; color: #fff; }
.logo-simbolo { flex-shrink: 0; display: block; }
.logo-textos { display: flex; flex-direction: column; gap: 0.34rem; }
.logo-palabra { display: block; color: #fff; }
.logo-lema  { font-size: 0.55rem; font-weight: 600; color: var(--oro-claro); text-transform: uppercase; letter-spacing: 0.16em; }

.barra nav { display: flex; gap: 1.6rem; flex: 1; flex-wrap: wrap; }
.barra nav a {
    color: #C7D2BE;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.45rem 0;
    border-bottom: 2px solid transparent;
    letter-spacing: 0.02em;
    transition: color 0.15s;
}
.barra nav a:hover { color: #fff; }
.barra nav a.activa { color: #fff; border-bottom-color: var(--oro); }

.barra-usuario { font-size: 0.84rem; color: #C7D2BE; display: flex; align-items: center; gap: 0.6rem; }
.barra-usuario a { color: var(--oro-claro); text-decoration: none; }
.barra-usuario a:hover { text-decoration: underline; }
.chip-modo {
    background: rgba(201, 164, 78, 0.14);
    border: 1px solid rgba(201, 164, 78, 0.5);
    color: var(--oro-claro);
    font-size: 0.64rem;
    font-weight: 700;
    padding: 0.18rem 0.66rem;
    border-radius: 999px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
}

.aviso-modo {
    background: #F8F1DC;
    border-bottom: 1px solid #ECDFB4;
    color: #86651C;
    padding: 0.55rem 1.5rem;
    font-size: 0.84rem;
    text-align: center;
}
.aviso-modo code { background: #F0E5C2; padding: 0 0.3rem; border-radius: 4px; }
.aviso-clave { background: var(--mora-fondo); border-bottom: 1px solid #EBD2C0; color: var(--mora); }
.aviso-clave a { color: var(--mora); font-weight: 700; }
.tarjeta .aviso-modo {
    border: 1px solid #ECDFB4;
    border-radius: 12px;
    margin: 1.1rem 0 0.2rem;
    padding: 0.6rem 0.9rem;
    font-size: 0.8rem;
}

/* ── Contenido ── */
.contenido { flex: 1; width: 100%; max-width: 1080px; margin: 0 auto; padding: 2.2rem 1.5rem 2rem; }
.contenido-publico { max-width: 560px; }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; color: var(--verde-osc); letter-spacing: -0.01em; line-height: 1.12; }
h1 { font-size: 1.8rem; margin-bottom: 0.4rem; }
h2 { font-size: 1.22rem; margin: 2rem 0 0.8rem; }
h3 { font-size: 1.05rem; margin: 0.4rem 0; }

/* Arco de la marca antes del título principal de cada página */
h1::before {
    content: "";
    display: inline-block;
    width: 17px;
    height: 19px;
    margin-right: 0.6rem;
    border: 1.5px solid var(--oro);
    border-bottom: none;
    border-radius: 999px 999px 0 0;
    opacity: 0.9;
}
.caja-login h1::before, .tarjeta-pago h1::before { content: none; }

.sutil { color: var(--sutil); font-size: 0.9rem; margin-bottom: 1rem; }
.sutil a { color: var(--verde-700); }
.sutil-linea { color: var(--sutil); font-size: 0.8rem; }
.centrado { text-align: center; margin-top: 0.8rem; }
hr { border: none; border-top: 1px solid var(--borde); margin: 1.2rem 0; }

.error { background: var(--mora-fondo); color: var(--mora); padding: 0.75rem 1rem; border-radius: 12px; margin-bottom: 1rem; font-size: 0.92rem; }
.exito { background: var(--exito-fondo); color: var(--exito); padding: 0.75rem 1rem; border-radius: 12px; margin-bottom: 1rem; font-size: 0.92rem; }

/* ── Tarjetas ── */
.tarjeta {
    background: var(--tarjeta);
    border: 1px solid rgba(30, 68, 30, 0.08);
    border-radius: 18px;
    padding: 1.4rem;
    margin-bottom: 1rem;
    box-shadow: var(--sombra-suave);
}
.tarjetas-resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.9rem; margin: 1rem 0 1.4rem; }
.tarjeta.resumen { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0; padding: 1.15rem 1.25rem; transition: box-shadow 0.18s ease, transform 0.18s ease; }
.tarjeta.resumen:hover { box-shadow: var(--sombra-alta); transform: translateY(-2px); }
.tarjeta.resumen span:last-child { color: var(--sutil); font-size: 0.8rem; }
.tarjeta.resumen span:last-child a { color: var(--verde-700); }
.cifra { font-family: var(--serif); font-weight: 600; font-size: 1.55rem; color: var(--verde-800); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.cifra-mora { color: var(--mora); }
.aviso p { margin-bottom: 0.8rem; }

/* ── Tarjetas de balance ── */
.balance-ingreso  { border-left: 3px solid var(--verde-600); }
.balance-egreso   { border-left: 3px solid var(--oro); }
.balance-positivo { border-left: 3px solid var(--verde-600); background: linear-gradient(135deg, #F3F7EE, var(--verde-tint)); }
.balance-positivo .cifra { color: var(--exito); }
.balance-negativo { border-left: 3px solid var(--mora); background: linear-gradient(135deg, #FBF3ED, var(--mora-fondo)); }
.balance-negativo .cifra { color: var(--mora); }

.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
@media (max-width: 800px) { .dos-columnas { grid-template-columns: 1fr; } }

/* ── Tablas ── */
.tabla-envoltura {
    overflow-x: auto;
    background: var(--tarjeta);
    border: 1px solid rgba(30, 68, 30, 0.08);
    border-radius: 18px;
    box-shadow: var(--sombra-suave);
}
table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th, td { padding: 0.85rem 1rem; text-align: left; }
thead th {
    color: var(--oro-oscuro);
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    background: rgba(201, 164, 78, 0.07);
    border-bottom: 1px solid rgba(201, 164, 78, 0.35);
}
tbody tr { border-top: 1px solid #F1EEE3; transition: background 0.12s ease; }
tbody tr:first-child { border-top: none; }
tbody tr:hover { background: #FAF8F0; }
td.num, th.num { text-align: right; white-space: nowrap; }
td a { color: var(--verde-700); font-weight: 700; text-decoration: none; }
td a:hover { text-decoration: underline; }
.fila-mora { background: var(--mora-fondo); }
.fila-mora:hover { background: #F4E3D6; }
.fila-inactiva { opacity: 0.55; }

.tabla-detalle { font-size: 0.95rem; }
.tabla-detalle td { padding: 0.55rem 0.4rem; border-top: 1px solid #EFEBDD; }
.tabla-detalle tr:first-child td { border-top: none; }
.tabla-detalle td:first-child { color: var(--sutil); }
.tabla-detalle .fila-total td {
    border-top: 2px solid var(--oro);
    font-size: 1.08rem;
    padding-top: 0.75rem;
}
.tabla-detalle .fila-total strong { font-family: var(--serif); font-weight: 600; font-size: 1.22rem; color: var(--verde-800); }
.tabla-detalle .fila-mora td { color: var(--mora); background: none; }
td.num, .tabla-detalle td.num { font-variant-numeric: tabular-nums; }

/* ── Etiquetas ── */
.etiqueta { display: inline-block; font-size: 0.66rem; font-weight: 800; padding: 0.2rem 0.62rem; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.08em; }
.etiqueta-pendiente { background: #F6ECD2; color: #8A6A1F; }
.etiqueta-pagada, .etiqueta-pago-aprobado { background: var(--exito-fondo); color: var(--exito); }
.etiqueta-anulada, .etiqueta-pago-anulado, .etiqueta-pago-rechazado { background: #EEF0EB; color: #75816F; }
.etiqueta-mora, .etiqueta-pago-pendiente { background: #F7E7DB; color: var(--mora); }

/* ── Botones y formularios ── */
.boton {
    display: inline-block;
    background: #fff;
    border: 1px solid #E0DAC6;
    color: var(--verde-800);
    padding: 0.55rem 1.2rem;
    border-radius: 12px;
    font-family: var(--sans);
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease;
}
.boton:hover { background: #FBF8EF; border-color: var(--oro); }
.boton:focus-visible { outline: none; box-shadow: var(--anillo-oro); }
.boton:active { transform: translateY(1px); }
.boton-principal {
    background: linear-gradient(135deg, var(--verde-700), var(--verde-800));
    border-color: var(--verde-800);
    color: #fff;
    box-shadow: 0 2px 8px rgba(19, 43, 19, 0.22);
}
.boton-principal:hover { background: linear-gradient(135deg, var(--verde-800), var(--verde-900)); border-color: var(--verde-900); }
.boton-peligro { background: #fff; border-color: #E7C9B7; color: var(--mora); }
.boton-peligro:hover { background: var(--mora-fondo); border-color: var(--mora); }
.boton-whatsapp { background: #25d366; border-color: #25d366; color: #fff; }
.boton-whatsapp:hover { background: #1FB558; border-color: #1FB558; }
.boton-mini { padding: 0.28rem 0.75rem; font-size: 0.8rem; border-radius: 10px; }
.boton-grande { width: 100%; padding: 0.95rem; font-size: 1.02rem; margin-top: 1.2rem; }

.formulario { display: flex; flex-direction: column; gap: 1rem; max-width: 520px; }
.formulario label, .caja-login label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.84rem; color: var(--sutil); font-weight: 700; }
.formulario label.checkbox-linea { flex-direction: row; align-items: center; gap: 0.5rem; color: var(--texto); }
.checkbox-linea input { width: auto; accent-color: var(--verde-700); }

input[type="text"], input[type="email"], input[type="password"], input[type="date"],
input[type="month"], input[type="number"], select, textarea {
    padding: 0.62rem 0.8rem;
    border: 1px solid #DDD7C3;
    border-radius: 12px;
    font-size: 0.95rem;
    font-family: var(--sans);
    background: #fff;
    color: var(--texto);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--verde-600); box-shadow: var(--anillo); }
input::placeholder { color: #A8AEA3; }
select { appearance: none; -webkit-appearance: none; padding-right: 2.2rem; cursor: pointer;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%236B7466' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 0.8rem center; background-size: 12px;
}
.acciones { display: flex; gap: 0.6rem; margin-top: 0.4rem; flex-wrap: wrap; }
.acciones-tabla { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.acciones-tabla form { margin: 0; }
.formulario-en-linea { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.formulario-en-linea input[type="text"] { flex: 1; min-width: 120px; }

/* ── Buscador ── */
.buscador { display: flex; gap: 0.6rem; margin: 1rem 0 1.5rem; max-width: 560px; }
.buscador input { flex: 1; padding: 0.85rem 1.1rem; font-size: 1.02rem; border-radius: 14px; }
.buscador .boton { padding: 0.85rem 1.7rem; border-radius: 14px; }

.titulo-con-accion { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }

/* ── Pestañas ── */
.pestanas { display: flex; gap: 0.4rem; margin: 1rem 0; flex-wrap: wrap; }
.pestanas a {
    padding: 0.42rem 1.05rem;
    border-radius: 999px;
    text-decoration: none;
    color: var(--sutil);
    font-size: 0.86rem;
    font-weight: 700;
    border: 1px solid #E0DAC6;
    background: #fff;
    transition: border-color 0.15s, color 0.15s;
}
.pestanas a:hover { border-color: var(--oro); color: var(--verde-800); }
.pestanas a.activa { background: var(--verde-800); border-color: var(--verde-800); color: #fff; }

/* ── Portada (login) ── */
.portada-centro { width: min(420px, 92vw); margin: 4vh auto 0; display: flex; flex-direction: column; gap: 0.6rem; }

/* El logo real de la marca (PNG con el mismo verde del fondo) */
.login-logo { display: flex; justify-content: center; }
.login-logo .logo-imagen { display: block; width: min(390px, 88vw); height: auto; }

.caja-login {
    max-width: 400px;
    width: 100%;
    background: var(--tarjeta);
    border: 1px solid rgba(30, 68, 30, 0.08);
    border-radius: 22px;
    padding: 2.4rem 2.3rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-shadow: 0 24px 60px rgba(8, 20, 8, 0.4);
}
.caja-login h1 {
    text-align: center;
    font-family: var(--sans);
    font-size: 0.8rem;
    color: var(--sutil);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.caja-login h1::after,
.tarjeta-pago h1::after {
    content: "";
    display: block;
    width: 70px;
    height: 1.5px;
    margin: 0.9rem auto 0;
    background: linear-gradient(90deg, transparent, var(--oro), transparent);
}
.caja-login form { display: flex; flex-direction: column; gap: 1rem; }

/* ── Gastos: alertas y vista por mes ── */
.alerta-pagos { border-left: 3px solid var(--oro); }
.alerta-pagos.alerta-vencida { border-left-color: var(--mora); }
.lista-alertas { list-style: none; margin: 0.6rem 0 0; display: flex; flex-direction: column; gap: 0.5rem; }
.lista-alertas li { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: 0.92rem; }

.navegador-mes { display: flex; align-items: center; gap: 0.6rem; margin: 1.2rem 0 0.2rem; flex-wrap: wrap; }
.mes-actual { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; color: var(--verde-800); padding: 0 0.4rem; }

.formulario-valor { display: flex; align-items: center; gap: 0.4rem; justify-content: flex-end; flex-wrap: wrap; }
.formulario-valor input[type="text"] { width: 110px; text-align: right; padding: 0.35rem 0.5rem; font-size: 0.9rem; }
.formulario-valor .checkbox-linea { display: flex; flex-direction: row; align-items: center; gap: 0.3rem; font-weight: 400; white-space: nowrap; }
.formulario-valor .campo-rete { width: 58px; }

.bloque-rete { border: 1px solid var(--borde); border-radius: 14px; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.9rem; }
.bloque-rete legend { font-size: 0.86rem; font-weight: 700; color: var(--sutil); padding: 0 0.4rem; }

/* ── Reportes ── */
.filtros-reporte { padding: 1.3rem 1.4rem; }
.filtros-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.9rem 1rem; margin-bottom: 1rem; }
.filtros-grid .campo { margin-bottom: 0; }
.fila-total-tabla td { background: #F4F6EE; border-top: 2px solid var(--oro); }

/* ── Página pública de pago ── */
.tarjeta-pago {
    margin-top: 0.6rem;
    padding: 2.4rem 2.2rem;
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(8, 20, 8, 0.4);
    position: relative;
    z-index: 1;
}
.tarjeta-pago h1 { text-align: center; }
.tarjeta-pago > p { text-align: center; }
.tarjeta-pago .tabla-detalle { margin-top: 1.3rem; width: 100%; }
.link-pago { display: flex; gap: 0.5rem; margin: 0.8rem 0; }
.link-pago input { flex: 1; font-size: 0.85rem; color: var(--sutil); }
.sello-pagado {
    width: 68px; height: 68px;
    margin: 0 auto 1.1rem;
    border-radius: 50%;
    background: var(--exito-fondo);
    color: var(--exito);
    font-size: 2rem;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--verde-600);
    box-shadow: 0 0 0 6px rgba(53, 107, 53, 0.10);
}

/* Logo real centrado en las páginas públicas */
.barra-publica .logo-imagen { display: block; width: min(330px, 82vw); height: auto; }

.miga { font-size: 0.86rem; margin-bottom: 0.5rem; }
.miga a { color: var(--sutil); text-decoration: none; font-weight: 700; }
.miga a:hover { color: var(--verde-700); }

/* ── Formulario de gasto: dos columnas con resumen en vivo ── */
.form-gasto { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.5rem; align-items: start; margin-top: 1.4rem; }
.form-columna { display: flex; flex-direction: column; gap: 1rem; }
.form-gasto .tarjeta { margin-bottom: 0; }

.bloque { padding: 1.5rem; }
.bloque-titulo { display: flex; gap: 0.85rem; align-items: flex-start; margin-bottom: 1.3rem; }
.bloque-num {
    width: 27px; height: 27px; flex-shrink: 0; border-radius: 50%;
    background: var(--verde-800); color: var(--oro-claro);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem; font-weight: 800;
    border: 1px solid rgba(201, 164, 78, 0.55);
}
.bloque-titulo h2 { margin: 0 0 0.15rem; font-size: 1.05rem; }
.bloque-titulo .pista { margin: 0; }
.pista { font-size: 0.8rem; color: var(--sutil); font-weight: 400; line-height: 1.5; }
.chip-opcional {
    display: inline-block; vertical-align: middle; margin-left: 0.4rem;
    background: var(--fondo); border: 1px solid var(--borde); color: var(--sutil);
    font-family: var(--sans); font-size: 0.6rem; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase; padding: 0.14rem 0.5rem; border-radius: 999px;
}

.campo { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.15rem; }
.campo:last-child { margin-bottom: 0; }
.campo-nombre { font-size: 0.86rem; font-weight: 700; color: var(--texto); }
.campo .pista { margin: 0; }
.campo-oculto { display: none !important; }

.campo-moneda { position: relative; display: flex; align-items: center; }
.campo-moneda input { font-size: 1.08rem; padding-left: 2.15rem; font-variant-numeric: tabular-nums; width: 100%; }
.moneda-simbolo { position: absolute; left: 0.9rem; color: var(--sutil); font-size: 1rem; pointer-events: none; }
.moneda-derecha { left: auto; right: 0.9rem; }
.campo-pct input { padding-left: 0.85rem; padding-right: 2.15rem; }

.interruptor {
    display: flex; gap: 0.7rem; align-items: flex-start; cursor: pointer;
    padding: 0.8rem 0.95rem; border: 1px solid #E0DAC6; border-radius: 14px;
    margin-bottom: 0.7rem; background: #fff;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.interruptor:last-child { margin-bottom: 0; }
.interruptor:hover { background: #FBF8EF; border-color: var(--oro); }
.interruptor:focus-within { border-color: var(--verde-600); box-shadow: var(--anillo); }
.interruptor input { width: 17px; height: 17px; margin-top: 0.12rem; accent-color: var(--verde-700); flex-shrink: 0; cursor: pointer; }
.interruptor > span { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.93rem; }
.interruptor .pista { margin: 0; }
#bloque-rete { display: block; padding-top: 0.3rem; }

.form-resumen { position: sticky; top: 1.4rem; display: flex; flex-direction: column; gap: 0.9rem; }
.resumen-gasto { padding: 1.3rem 1.4rem; margin-bottom: 0; box-shadow: var(--sombra-alta); border-top: 3px solid var(--oro); }
.resumen-gasto h2 { margin: 0 0 0.2rem; font-size: 1rem; }
.resumen-nombre { font-weight: 700; font-size: 0.95rem; margin-bottom: 0.9rem; color: var(--verde-800); word-break: break-word; }
.resumen-gasto .tabla-detalle td { padding: 0.5rem 0; font-size: 0.9rem; }
.resumen-nota { font-size: 0.8rem; color: var(--sutil); margin-top: 0.9rem; line-height: 1.5; }
.resumen-dian { color: var(--mora); background: var(--mora-fondo); border-radius: 10px; padding: 0.5rem 0.7rem; margin-top: 0.6rem; }
.form-acciones { display: flex; flex-direction: column; gap: 0.5rem; }
.form-acciones .boton { text-align: center; }
.form-acciones .boton-grande { margin-top: 0; }

@media (max-width: 900px) {
    .form-gasto { grid-template-columns: 1fr; }
    .form-resumen { position: static; }
}

/* ══════════════════════════════════════════════════════════════
   Celular y tablet
   ══════════════════════════════════════════════════════════════ */

/* Botón de menú: solo aparece en pantallas pequeñas. */
.boton-menu {
    display: none; margin-left: auto;
    width: 44px; height: 44px; padding: 0;
    background: transparent; border: 1px solid rgba(201, 164, 78, 0.45);
    border-radius: 12px; cursor: pointer;
    align-items: center; justify-content: center;
}
.boton-menu:hover { background: rgba(201, 164, 78, 0.12); }
.boton-menu .rayas, .boton-menu .rayas::before, .boton-menu .rayas::after {
    display: block; width: 18px; height: 2px; border-radius: 2px;
    background: var(--oro-claro); transition: transform 0.2s ease, opacity 0.2s ease;
}
.boton-menu .rayas { position: relative; }
.boton-menu .rayas::before, .boton-menu .rayas::after { content: ""; position: absolute; left: 0; }
.boton-menu .rayas::before { top: -6px; }
.boton-menu .rayas::after  { top: 6px; }
.menu-abierto .boton-menu .rayas { background: transparent; }
.menu-abierto .boton-menu .rayas::before { transform: translateY(6px) rotate(45deg); }
.menu-abierto .boton-menu .rayas::after  { transform: translateY(-6px) rotate(-45deg); }

.menu-barra { display: contents; }

@media (max-width: 860px) {
    /* ── Barra compacta con menú desplegable ── */
    .barra { padding: 0.7rem 1rem; gap: 0.75rem; flex-wrap: nowrap; }
    .barra .logo-simbolo { height: 32px; width: auto; }
    .barra .logo-palabra { height: 16px; width: auto; }
    .barra .logo-lema { display: none; }
    .boton-menu { display: flex; }

    .menu-barra {
        display: none; order: 3; width: 100%;
        flex-direction: column; gap: 0.2rem;
        padding-top: 0.7rem; margin-top: 0.2rem;
        border-top: 1px solid rgba(201, 164, 78, 0.28);
    }
    .menu-abierto .menu-barra { display: flex; }
    .barra { flex-wrap: wrap; }
    .barra nav { flex-direction: column; gap: 0; width: 100%; }
    .barra nav a {
        padding: 0.85rem 0.5rem; border-bottom: none; border-radius: 10px;
        border-left: 3px solid transparent; font-size: 1rem;
    }
    .barra nav a.activa { border-left-color: var(--oro); background: rgba(201, 164, 78, 0.10); }
    .barra-usuario {
        width: 100%; padding: 0.85rem 0.5rem; margin-top: 0.4rem;
        border-top: 1px solid rgba(201, 164, 78, 0.28);
        flex-wrap: wrap; gap: 0.5rem; font-size: 0.92rem;
    }

    /* ── Contenido con más aire para el pulgar ── */
    .contenido { padding: 1.4rem 1rem 2rem; }
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.12rem; margin: 1.4rem 0 0.7rem; }
    .titulo-con-accion { flex-direction: column; align-items: stretch; gap: 0.7rem; }
    .titulo-con-accion .acciones { width: 100%; }
    .titulo-con-accion .acciones .boton { flex: 1; text-align: center; }

    /* Botones cómodos para el dedo */
    .boton { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
    .boton-mini { min-height: 40px; padding: 0.5rem 0.9rem; font-size: 0.86rem; }
    .acciones-tabla { gap: 0.5rem; }
    .acciones-tabla .boton, .acciones-tabla form { flex: 1 1 auto; }
    .acciones-tabla form .boton { width: 100%; }

    /* El teclado del celular no hace zoom si la letra mide 16px */
    input[type="text"], input[type="email"], input[type="password"], input[type="date"],
    input[type="month"], input[type="number"], select, textarea { font-size: 16px; padding: 0.7rem 0.8rem; min-height: 46px; }
    .buscador { flex-direction: column; }
    .buscador .boton { width: 100%; }
    .formulario, .caja-login { max-width: 100%; }
    .portada-centro { margin-top: 5vh; }
    .caja-login { padding: 1.9rem 1.5rem; }

    .tarjetas-resumen { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
    .tarjeta.resumen { padding: 0.9rem; }
    .cifra { font-size: 1.25rem; }
    .tarjeta.resumen span:last-child { font-size: 0.75rem; }

    /* ── Tablas: cada fila se vuelve una tarjeta ── */
    .tabla-envoltura { border: none; background: none; box-shadow: none; overflow: visible; }
    .tabla-envoltura table, .tabla-envoltura thead, .tabla-envoltura tbody,
    .tabla-envoltura tr, .tabla-envoltura td { display: block; width: 100%; }
    .tabla-envoltura thead { display: none; }
    .tabla-envoltura tbody tr {
        background: var(--tarjeta); border: 1px solid rgba(30, 68, 30, 0.08); border-radius: 16px;
        box-shadow: var(--sombra-suave); margin-bottom: 0.75rem; padding: 0.3rem 1rem;
    }
    .tabla-envoltura tbody tr:hover { background: var(--tarjeta); }
    .tabla-envoltura td {
        display: flex; justify-content: space-between; align-items: center; gap: 1rem;
        padding: 0.7rem 0; border-top: 1px solid #F1EEE3; text-align: left !important;
        white-space: normal;
    }
    .tabla-envoltura tbody tr td:first-child {
        border-top: none; font-size: 1.02rem; font-weight: 700; padding-top: 0.9rem;
    }
    .tabla-envoltura td[data-titulo]:not([data-titulo=""])::before {
        content: attr(data-titulo);
        font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.14em;
        color: var(--oro-oscuro); font-weight: 800; flex-shrink: 0; text-align: left;
    }
    .tabla-envoltura td:empty { display: none; }
    .tabla-envoltura td.acciones-tabla { flex-wrap: wrap; justify-content: stretch; padding-bottom: 0.9rem; }
    .tabla-envoltura .fila-mora { background: var(--mora-fondo); border-color: #EBD2C0; }
    .tabla-envoltura .fila-inactiva { opacity: 0.7; }

    /* El editor de valor + retefuente se apila dentro de su tarjeta */
    .tabla-envoltura td.celda-valor { flex-direction: column; align-items: stretch; gap: 0.5rem; }
    .tabla-envoltura td.celda-valor::before { text-align: left; }
    .formulario-valor { justify-content: flex-start; width: 100%; gap: 0.5rem; }
    .formulario-valor input[type="text"] { flex: 1 1 120px; min-width: 0; width: auto; font-size: 16px; text-align: right; min-height: 44px; }
    .formulario-valor .campo-rete { flex: 0 0 72px; width: 72px; }
    .formulario-valor .boton { width: 100%; }
    .formulario-valor .checkbox-linea { width: 100%; }

    .navegador-mes { justify-content: space-between; }
    .navegador-mes .boton-mini { flex: 1 1 40%; }
    .mes-actual { order: -1; width: 100%; text-align: center; font-size: 1.3rem; }

    .dos-columnas { grid-template-columns: 1fr; }
    .link-pago { flex-direction: column; }
    .link-pago .boton { width: 100%; }
    .tarjeta-pago { margin-top: 0.4rem; padding: 1.7rem 1.3rem; }
    .barra-publica { padding-top: 1rem; }
    .barra-publica .logo-imagen { width: min(280px, 80vw); }
    .pestanas { gap: 0.35rem; }
    .pestanas a { flex: 1; text-align: center; min-height: 42px; display: flex; align-items: center; justify-content: center; }
    .lista-alertas li { align-items: flex-start; }
    .bloque { padding: 1.2rem; }
    .aviso-modo { padding: 0.6rem 1rem; font-size: 0.8rem; }
}

@media (max-width: 420px) {
    .tarjetas-resumen { grid-template-columns: 1fr; }
    .navegador-mes .boton-mini { flex: 1 1 100%; }
    .titulo-con-accion .acciones { flex-direction: column; }
    .titulo-con-accion .acciones .boton { width: 100%; }
}

/* ── Pie ── */
.pie { text-align: center; color: var(--sutil); font-size: 0.78rem; padding: 1.5rem 1rem 1.7rem; }
.portada .pie, .publico .pie { color: rgba(250, 248, 241, 0.55); position: relative; z-index: 1; }