/* contasuma — cascarón de la aplicación.
 *
 * Superficie de trabajo, no de venta: manda la legibilidad y la densidad, no
 * el lucimiento. La marca vive en los detalles (el verde, la mono en las
 * cifras, el símbolo), no en adornos que estorben a quien despacha con cola.
 */

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

/* El atributo hidden NO gana a un display puesto en CSS. Las pantallas de esta
   app llevan display:grid, asi que sin esta regla `hidden` no ocultaba nada:
   la de acceso y la aplicacion se dibujaban a la vez y, como la de acceso va
   primero y mide 100dvh, tapaba a la otra. Parecia que el login no entraba. */
[hidden]{display:none !important}

body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--paper);
  color:var(--ink);
  font-size:15px;
  line-height:1.5;
  -webkit-text-size-adjust:100%;
}
h1,h2,h3{font-family:'Sora',sans-serif;line-height:1.2;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}

/* Toda cifra en mono: es la regla de oro de la marca, y además alinea columnas. */
.mono{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.salto{
  position:absolute;left:12px;top:12px;z-index:99;
  background:var(--emerald-dark);color:#fff;padding:10px 18px;border-radius:var(--r-2);
  font-weight:600;
  /* Con transform en vez de "top": mover top obliga al navegador a
     recalcular la maqueta; transform va directo a la GPU. */
  transform:translateY(-200%);
  transition:transform var(--t-medio) var(--sal);
}
.salto:focus{transform:translateY(0)}


/* ── botones ────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;border-radius:var(--r-2);border:none;cursor:pointer;
  font-weight:600;font-size:.95rem;
  transition:background var(--t-corto) var(--sal),
              border-color var(--t-corto) var(--sal),
              transform var(--t-toque) var(--sal);
}
.btn:not([disabled]):active{transform:scale(.97)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn-primario{background:var(--emerald-dark);color:#fff}
.btn-fantasma{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.ancho{width:100%}

/* ══════════════════════════════════════ acceso */

.acceso{
  min-height:100dvh;display:grid;place-items:center;padding:24px;
  background:
    radial-gradient(ellipse 60% 50% at 70% 15%, rgba(5,150,105,.07), transparent 60%),
    var(--paper);
}
.acceso-caja{
  width:min(400px,100%);background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-3);padding:36px 30px 28px;
  box-shadow:0 20px 50px rgba(3,37,28,.08);text-align:center;
}
.acceso-marca{display:block;margin:0 auto 16px}
.acceso-caja h1{font-size:1.4rem;margin-bottom:6px}
.acceso-hola{color:var(--ink-soft);font-size:.95rem;margin-bottom:26px}

.campo{margin-bottom:18px;text-align:left}
.campo label{display:block;font-size:.78rem;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px}
.campo input,.campo select{
  width:100%;padding:11px 12px;border:1.5px solid var(--line);border-radius:var(--r-2);
  background:var(--card);font-family:'IBM Plex Mono',monospace;font-size:.95rem;
}
.campo input:focus-visible{border-color:var(--emerald);outline-offset:0}
.campo input[aria-invalid="true"]{border-color:var(--peligro)}
.campo .error{display:block;min-height:1.1em;margin-top:5px;
  font-size:.78rem;color:var(--peligro);font-weight:600}

.acceso-estado{min-height:1.2em;margin-top:12px;font-size:.85rem;color:var(--ink-soft)}
/* Frenado por intentos: no es un error de tecleo, es una espera. Se distingue
   para que nadie siga probando la misma clave creyendo que falla. */
.acceso-estado.frenado{color:var(--alerta);font-weight:600}
.acceso-pie{margin-top:20px;font-size:.85rem;color:var(--ink-soft)}
/* El aviso de la clave olvidada: presente, pero sin competir con el boton de
   entrar, que es a lo que viene el 99 % de la gente. */
.acceso-olvido{margin-top:14px;font-size:.78rem;line-height:1.45;
  border-top:1px solid var(--line);padding-top:14px}
.acceso-pie a{color:var(--emerald-dark);font-weight:600;
  text-decoration:underline;text-underline-offset:3px}

.lista-negocios{list-style:none;display:flex;flex-direction:column;gap:10px;text-align:left}
.lista-negocios button{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:14px 16px;background:var(--card);border:1.5px solid var(--line);
  border-radius:var(--r-2);cursor:pointer;transition:border-color var(--t-corto) var(--sal),background var(--t-corto) var(--sal);
}
.lista-negocios span{font-size:.8rem;color:var(--ink-soft)}

/* ══════════════════════════════════════ cascarón */

.app{
  min-height:100dvh;
  display:grid;
  grid-template-columns:216px 1fr;
  grid-template-rows:auto 1fr;
  grid-template-areas:"cabecera cabecera" "lateral vista";
}

.cabecera{
  grid-area:cabecera;position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:16px;
  padding:0 18px;height:58px;
  background:var(--card);border-bottom:1px solid var(--line);
}
.menu-boton{
  display:none;width:40px;height:40px;align-items:center;justify-content:center;
  background:transparent;border:1.5px solid var(--line);border-radius:var(--r-1);cursor:pointer;
}
.menu-barras,.menu-barras::before,.menu-barras::after{
  display:block;width:16px;height:2px;border-radius:2px;background:var(--ink);
}
.menu-barras{position:relative}
.menu-barras::before,.menu-barras::after{content:"";position:absolute;left:0}
.menu-barras::before{top:-5px}
.menu-barras::after{top:5px}

.marca{display:flex;align-items:center;gap:8px;font-family:'Sora';font-weight:700;font-size:1.05rem}

.cabecera-negocio{display:flex;flex-direction:column;line-height:1.2;margin-left:6px}
.cabecera-negocio strong{font-size:.9rem}
.cabecera-negocio span{font-size:.72rem;color:var(--ink-soft)}

.cabecera-derecha{margin-left:auto;display:flex;align-items:center;gap:12px}

.tasa{
  display:flex;flex-direction:column;align-items:flex-end;line-height:1.15;
  background:var(--emerald-soft);border:1px solid #BBEBD5;border-radius:var(--r-1);
  padding:6px 12px;cursor:pointer;transition:border-color var(--t-corto) var(--sal);
}
.tasa-rotulo{font-size:.65rem;text-transform:uppercase;letter-spacing:.08em;color:var(--emerald-dark)}
.tasa-valor{font-size:.85rem;font-weight:600}
.tasa.sin-tasa{background:#FFF3D6;border-color:#F5E0A3}
.tasa.sin-tasa .tasa-rotulo,.tasa.sin-tasa .tasa-valor{color:var(--alerta)}

.conexion{font-size:.72rem;padding:4px 10px;border-radius:var(--r-full);white-space:nowrap}
.conexion.bien{background:var(--emerald-soft);color:var(--emerald-dark)}
.conexion.pendiente{background:#FFF3D6;color:var(--alerta);font-weight:600}
.conexion.sin-linea{background:#FDE8E6;color:var(--peligro);font-weight:600}

.salir{background:none;border:none;cursor:pointer;color:var(--ink-soft);
  font-size:.85rem;font-weight:600;padding:6px}

.lateral{
  grid-area:lateral;background:var(--card);border-right:1px solid var(--line);
  padding:14px 10px 16px;display:flex;flex-direction:column;gap:2px;
  overflow-y:auto;
}
.lat-grupo{display:flex;flex-direction:column;gap:2px;margin-top:14px}
.lat-titulo{
  font-size:.66rem;text-transform:uppercase;letter-spacing:.11em;
  color:var(--ink-soft);font-weight:700;padding:0 12px 5px;opacity:.72;
}
/* El pie del menu se separa del resto y se empuja abajo: no son tareas del
   dia, son sitios a los que se va de vez en cuando. */
.lat-pie{margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.lateral a{
  position:relative;
  display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--r-1);
  color:var(--ink-soft);font-weight:500;font-size:.9rem;
  transition:background var(--t-corto) var(--sal),color var(--t-corto) var(--sal);
}
/* La entrada activa lleva una barra a la izquierda, no solo un fondo. El
   fondo dice "estas aqui"; la barra lo dice desde el rabillo del ojo. */
.lateral a.activo::before{
  content:"";position:absolute;left:0;top:7px;bottom:7px;width:3px;
  background:var(--emerald);border-radius:var(--r-full);
}
.lateral a.activo{background:var(--emerald-soft);color:var(--ink);font-weight:600}
.lateral .ico{width:18px;text-align:center;opacity:.75}
.lateral-nota{
  margin-top:14px;padding:12px;font-size:.75rem;color:var(--ink-soft);
  background:var(--paper);border-radius:var(--r-1);line-height:1.4;
}
.lateral-nota a{color:var(--emerald-dark);font-weight:600;
  text-decoration:underline;text-underline-offset:2px}

.vista{grid-area:vista;padding:22px;overflow-x:hidden}
.vista:focus{outline:none}

/* ── panel genérico ── */
.panel{max-width:1000px}
.panel-cabeza{display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;margin-bottom:18px;flex-wrap:wrap}
.panel-cabeza h1{font-size:1.35rem}
.panel-fecha{font-size:.8rem;color:var(--ink-soft)}
.panel-nota{margin-top:22px;font-size:.82rem;color:var(--ink-soft)}

.tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.tarjeta{background:var(--card);border:1px solid var(--line);border-radius:var(--r-3);padding:18px}
.tarjeta small{display:block;font-size:.75rem;color:var(--ink-soft);margin-bottom:8px}
.tarjeta strong{display:block;font-size:1.45rem;font-weight:600;margin-bottom:4px}
.tarjeta span{font-size:.8rem;color:var(--ink-soft)}

.cargando,.vacio{color:var(--ink-soft);font-size:.9rem;padding:18px 0}

/* ── tablas ── */
.tabla{width:100%;border-collapse:collapse;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-2);overflow:hidden}
.tabla th,.tabla td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);font-size:.88rem}
.tabla th{background:#EDF5F0;font-size:.75rem;text-transform:uppercase;
  letter-spacing:.05em;color:var(--ink-soft)}
.tabla tr:last-child td{border-bottom:none}
.tabla .der{text-align:right}
.tabla tr.anulada td{color:var(--ink-soft);text-decoration:line-through}
.etiqueta{font-size:.72rem;background:#FDE8E6;color:var(--peligro);
  padding:2px 8px;border-radius:var(--r-full);font-weight:600}
.enlace{background:none;border:none;cursor:pointer;color:var(--emerald-dark);
  font-size:.82rem;font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* ── avisos ── */
/* El aviso entra desde abajo, deslizando. Antes aparecía de golpe y se
   leía como un parpadeo.
 *
 * La SALIDA no se anima, y no por olvido: la regla [hidden]{display:none
 * !important} de más arriba —la que impide que una pantalla tape a otra—
 * gana sobre cualquier transición de display. Quitarle el !important para
 * ganar medio segundo de elegancia sería cambiar un adorno por el riesgo
 * de que vuelva un fallo que dejó la aplicación inservible. */
.aviso{
  position:fixed;left:50%;bottom:22px;z-index:90;
  transform:translate(-50%,0);opacity:1;
  transition:opacity var(--t-medio) var(--sal),transform var(--t-medio) var(--sal);
  max-width:min(460px,calc(100vw - 32px));
  padding:12px 20px;border-radius:var(--r-2);font-size:.9rem;font-weight:500;
  background:var(--ink);color:#fff;box-shadow:0 12px 32px rgba(3,37,28,.24);
}
@starting-style{
  .aviso:not([hidden]){opacity:0;transform:translate(-50%,12px)}
}
.aviso.error{background:var(--peligro)}
.aviso.aviso{background:var(--alerta)}

/* ── móvil ── */
@media(max-width:900px){
  .app{grid-template-columns:1fr;grid-template-areas:"cabecera" "vista"}
  .menu-boton{display:inline-flex}
  .cabecera-negocio{display:none}
  .lateral{
    position:fixed;left:0;top:58px;bottom:0;width:250px;z-index:45;
    transform:translateX(-100%);transition:transform .2s ease;
    box-shadow:0 0 40px rgba(3,37,28,.18);
  }
  .lateral.abierto{transform:none}
  .vista{padding:16px}
}

@media(max-width:560px){
  .cabecera{gap:10px;padding:0 12px}
  .marca span{display:none}
  .conexion{display:none}
}

/* Movimiento reducido significa MENOS movimiento, no ninguno.
   Quien lo activa suele hacerlo por mareo, y lo que marea es el
   desplazamiento: lo que se mueve por la pantalla. Un cambio de color o
   de opacidad no marea a nadie y SI ayuda a entender que algo paso, asi
   que se queda. Apagarlo todo deja una interfaz que da saltos secos. */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:var(--t-toque) !important;
    scroll-behavior:auto !important;
  }
  /* Fuera lo que se desplaza. */
  .lateral,.aviso,.dialogo,.salto{transition-property:opacity !important}
  .btn:active,.producto:active{transform:none !important}
}


/* Los estados de hover solo donde hay un raton de verdad.
   En un telefono, tocar dispara :hover y el estilo se queda pegado
   hasta que se toca otra cosa: botones resaltados sin razon en la
   pantalla que mas se usa. */
@media (hover: hover) and (pointer: fine){
  .btn-primario:not([disabled]):hover{background:var(--emerald-deep)}
  .btn-fantasma:hover{border-color:var(--ink)}
  .lista-negocios button:hover{border-color:var(--emerald);background:var(--emerald-soft)}
  .tasa:hover{border-color:var(--emerald)}
  .salir:hover{color:var(--ink)}
  .lateral a:hover{background:var(--emerald-soft);color:var(--ink)}
}
/* ══════════════════════════════════════ responder al tacto
 *
 * Todo lo que se pulsa tiene que hundirse un poco al pulsarlo. No es
 * adorno: es la señal de que la interfaz oyó. Sin ella, quien despacha
 * con cola delante no sabe si el toque entró y toca dos veces.
 *
 * La escala arrastra también el contenido, así que el botón entero se
 * hunde en vez de resbalar. Y se queda en .97: por debajo se nota como
 * un salto, por encima no se nota nada.
 */
.lateral a,.salir,.tasa,.enlace,.chip-pregunta,.chip-categoria,
.m-tab,.rol-select,.menu-boton,.lista-negocios button{
  transition:background var(--t-corto) var(--sal),border-color var(--t-corto) var(--sal),
             color var(--t-corto) var(--sal),transform var(--t-toque) var(--sal);
}
.lateral a:active,.salir:active,.tasa:active,.enlace:active,
.chip-pregunta:active,.m-tab:active,.menu-boton:active,
.lista-negocios button:active{transform:scale(.97)}

/* El foco del teclado, visible y con la misma forma que todo lo demás.
   Quien navega con el tabulador no debería tener que adivinar dónde está. */
:where(a,button,input,select,[tabindex]):focus-visible{
  outline:3px solid var(--emerald);outline-offset:2px;border-radius:var(--r-1);
}