/* Layout del sistema: móvil por defecto, escritorio a partir de 900px.
   Una sola app; cambia la composición, no los tokens. */

/* `hidden` debe ganarle a cualquier display de abajo: si no, la app y el login salen a la vez. */
[hidden]{display:none !important}

/* ---------- entrada ---------- */
.entrada{min-height:100vh;display:grid;place-items:center;padding:24px;
  background:linear-gradient(170deg,#EEF2F8,#E4EAF4)}
.entrada-caja{width:100%;max-width:380px;background:#fff;border:1px solid var(--linea);
  border-radius:22px;padding:28px 24px 24px;box-shadow:0 20px 50px -20px rgba(45,53,113,.25)}
.entrada-logo{height:52px;display:block;margin:0 auto 14px}
.entrada-titulo{font-size:24px;font-weight:700;text-align:center;letter-spacing:-.02em;margin-bottom:22px}
.campo{display:block;margin-bottom:14px}
.campo span{display:block;font-size:12.5px;font-weight:600;color:var(--tinta2);margin-bottom:6px}
.campo input{width:100%;height:46px;border:1px solid var(--linea);border-radius:12px;
  padding:0 14px;font-family:inherit;font-size:15px;background:#F8FAFD;appearance:none}
.campo input:focus{outline:2px solid var(--tur);outline-offset:1px;border-color:var(--tur)}
.btn-ancho{width:100%;height:48px;margin-top:6px}
.error{color:var(--rojo);font-size:13px;margin-top:12px;text-align:center}

/* ---------- estructura ---------- */
.app{min-height:100vh;display:block}
.lado{display:none}
.contenido{padding:18px 0 96px;max-width:100%}
.cab{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:0 16px 14px}
.cab h1{font-size:26px;font-weight:700;letter-spacing:-.03em;line-height:1.1}
.sub{font-size:12.5px;color:var(--tinta2);margin-top:4px;font-weight:600}
.periodo{font-size:12px;font-weight:700;color:var(--tinta3);text-transform:uppercase;letter-spacing:.06em}
.vista{padding:0 0 10px}

/* barra inferior (móvil) */
.tabbar{position:fixed;left:0;right:0;bottom:0;display:flex;gap:2px;
  background:rgba(255,255,255,.94);backdrop-filter:blur(12px);
  border-top:1px solid var(--linea);padding:8px 6px calc(8px + env(safe-area-inset-bottom))}
.tabbar button{flex:1;border:0;background:none;padding:6px 2px;border-radius:12px;
  font-family:inherit;font-size:10.5px;font-weight:600;color:var(--tinta3);min-height:48px}
.tabbar button.activa{color:var(--navy);background:#EEF3FA}

/* ---------- piezas ---------- */
.fila{display:flex;align-items:center;gap:12px;padding:13px 16px;min-height:56px;
  background:var(--card);border-bottom:1px solid var(--linea);
  transition:background .18s ease,opacity .18s ease,transform .18s ease}
/* Entra una fila nueva (pago, documento, declaración recién marcada). */
.fila.nueva{animation:aparece .3s cubic-bezier(.2,.8,.25,1)}
@keyframes aparece{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* Se va una fila (desaparece de la lista al cambiar de bloque). */
.fila.saliendo{opacity:0;transform:translateX(10px)}
/* Mientras se confirma con el servidor: se ve vivo, no congelado. */
.fila.pendiente{background:#F4F8FD}
.fila:last-child{border-bottom:0}
.fila .crece{flex:1;min-width:0}
/* Dos líneas y no una: los nombres de empresa no caben en 390px y cortarlos a la primera
   deja «SOCARAGUA ASOCIAC…», que no distingue una empresa de otra. */
.fila .t{font-size:14.5px;font-weight:600;line-height:1.25;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal}
.fila .s{font-size:12px;color:var(--tinta2);margin-top:2px;font-weight:500}
.fila .r{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.rojo{color:var(--rojo)} .ok{color:var(--tur-osc)} .ambar{color:var(--ambar)}

.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:0 16px 14px}
.kpi{background:var(--card);border:1px solid var(--linea);border-radius:16px;padding:14px}
.kpi .k{font-size:11px;font-weight:700;color:var(--tinta3);text-transform:uppercase;letter-spacing:.07em}
.kpi .v{font-size:24px;font-weight:700;letter-spacing:-.03em;margin-top:6px;font-variant-numeric:tabular-nums}
.kpi .d{font-size:11.5px;color:var(--tinta2);margin-top:2px;font-weight:600}

.hero{margin:0 16px 14px;background:linear-gradient(150deg,#2D3571,#25728E);color:#fff;
  border-radius:20px;padding:20px}
.hero .k{font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#D7E2F0}
.hero .v{font-size:38px;font-weight:700;letter-spacing:-.04em;line-height:1.05;margin-top:5px}
.hero .s{font-size:12.5px;color:#D7E2F0;margin-top:6px;font-weight:500}
.hero-barra{height:6px;border-radius:99px;background:rgba(255,255,255,.22);margin-top:14px;overflow:hidden}
.hero-barra i{display:block;height:100%;background:#66C1B7;border-radius:99px}

.vacio{padding:40px 16px;text-align:center;color:var(--tinta3);font-size:13.5px;font-weight:600}
.cargando{padding:40px 16px;text-align:center;color:var(--tinta3);font-size:13px}

/* tabla (escritorio) */
.tabla{width:100%;border-collapse:collapse;background:var(--card)}
.tabla th{text-align:left;font-size:11px;font-weight:700;color:var(--tinta3);
  text-transform:uppercase;letter-spacing:.07em;padding:12px 16px;border-bottom:1px solid var(--linea)}
.tabla td{padding:13px 16px;border-bottom:1px solid var(--linea);font-size:14px}
.tabla td.n{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.tabla tr:last-child td{border-bottom:0}
.tabla tr:hover td{background:#F7FAFD}
.solo-pc{display:none}

/* ---------- hoja de formulario ---------- */
.campo{display:block;margin-bottom:14px}
.campo span{display:block;font-size:12px;font-weight:600;color:var(--tinta2);margin-bottom:6px}
.cargando{padding:40px 16px;text-align:center;color:var(--tinta2);font-size:13.5px}
.sub{font-size:12px;color:var(--tinta2);margin-top:2px}
.kpi .v.grande{font-size:32px;letter-spacing:-.03em}
.kpi .v.grande small{font-size:13px;font-weight:600;color:var(--tinta2)}
.pastilla{font-size:11px;font-weight:700;padding:4px 9px;border-radius:999px;text-transform:capitalize}
.pastilla.alta{background:#FDECEC;color:#B3261E}
.pastilla.media{background:#FFF4E0;color:#8A5A00}
.pastilla.baja{background:#E6F5F1;color:#1E7A63}
/* Aviso no nativo: entra desde arriba y se va solo. */
.aviso{position:fixed;top:14px;left:50%;transform:translateX(-50%) translateY(0);
  max-width:min(92vw,420px);padding:11px 16px;border-radius:12px;font-size:13px;font-weight:600;
  z-index:2000;box-shadow:0 8px 24px rgba(20,30,55,.18);transition:opacity .4s,transform .4s}
.aviso.error{background:#FDECEC;color:#B3261E}
.aviso.bien{background:#E6F5F1;color:#1E7A63}
.aviso.fuera{opacity:0;transform:translateX(-50%) translateY(-10px)}

.velo{position:fixed;inset:0;background:rgba(20,26,45,.45);display:grid;place-items:end center;z-index:1000}
.hoja{background:#fff;width:100%;max-width:460px;border-radius:20px 20px 0 0;
  padding:20px 18px calc(20px + env(safe-area-inset-bottom));max-height:92vh;overflow:auto}
.hoja h3{font-size:18px;font-weight:700;letter-spacing:-.02em}
.hoja p{font-size:12.5px;color:var(--tinta2);margin:4px 0 16px}
.hoja .acciones{display:flex;gap:8px;margin-top:18px}
.hoja .acciones .btn,.hoja .acciones .btn-suave{flex:1;height:46px}
.hoja select,.hoja input[type=number],.hoja input[type=text]{
  width:100%;height:46px;border:1px solid var(--linea);border-radius:12px;padding:0 14px;
  font-family:inherit;font-size:15px;background:#F8FAFD;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7A90' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center}
.hoja input[type=number],.hoja input[type=text]{background-image:none}
.hoja select:focus,.hoja input:focus{outline:2px solid var(--tur);outline-offset:1px;border-color:var(--tur)}
@media (min-width:900px){
  .velo{place-items:center}
  .hoja{border-radius:20px;padding:22px}
}

/* ---------- escritorio ---------- */
@media (min-width:900px){
  .app{display:grid;grid-template-columns:236px 1fr;min-height:100vh}
  .lado{display:flex;flex-direction:column;background:#fff;border-right:1px solid var(--linea);
    padding:20px 14px;position:sticky;top:0;height:100vh}
  .lado-marca{padding:0 8px 18px}
  .lado-marca img{height:40px}
  .menu{display:flex;flex-direction:column;gap:2px;flex:1}
  .menu button{display:flex;align-items:center;gap:10px;border:0;background:none;
    font-family:inherit;font-size:14px;font-weight:600;color:var(--tinta2);
    padding:11px 12px;border-radius:11px;text-align:left;min-height:44px}
  .menu button.activa{background:#EEF3FA;color:var(--navy)}
  .menu button:hover{background:#F4F7FB}
  .lado-pie{border-top:1px solid var(--linea);padding-top:12px}
  .quien{display:block;font-size:13px;font-weight:700;padding:0 8px 8px}
  .btn-suave{border:0;background:none;font-family:inherit;font-size:13px;font-weight:600;
    color:var(--tinta2);padding:8px;text-align:left;cursor:pointer}
  .tabbar{display:none}
  .contenido{padding:26px 30px 40px;max-width:1180px;width:100%}
  .cab{padding:0 0 18px}
  .cab h1{font-size:32px}
  .vista{padding:0}
  .sec-card,.hero,.kpis{margin-left:0;margin-right:0}
  .kpis{grid-template-columns:repeat(4,1fr);padding:0 0 16px}
  .entrada-caja{max-width:400px}
  .solo-pc{display:revert}
  .solo-mov{display:none}
}