@font-face{font-family:Figtree;font-weight:300 900;font-display:swap;src:url(figtree-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Figtree;font-weight:300 900;font-display:swap;src:url(figtree-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --ground:#f9fafb;--surface:#fff;--line:#e5e7eb;--line-soft:#f0f1f3;
  --ink:#101d2c;--muted:#536576;--faint:#7a8896;
  --accent:#007f96;--accent-soft:#e4f8fc;
  --danger:#a33a3a;--ok:#1d7a4f;
  --radius:8px;
  --ease-out:cubic-bezier(0.23,1,0.32,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:15px/1.5 Figtree,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-feature-settings:"tnum" 0}
::selection{background:var(--accent-soft);color:var(--ink)}
input,select,button{font:inherit;color:inherit;caret-color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}

/* Barra superior */
.barra{background:var(--surface);border-bottom:1px solid var(--line)}
.barra-in{max-width:1160px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:12px;min-height:60px}
.marca{white-space:nowrap;display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:-.01em}
.marca img{width:36px;height:36px}
.marca span{color:var(--muted);font-weight:400}
.cuenta{margin-left:auto;display:flex;align-items:center;gap:14px;font-size:14px;color:var(--muted)}
.cuenta b{color:var(--ink);font-weight:500}
.cuenta form{margin:0}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:0 14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);cursor:pointer;font-size:14px;font-weight:500;transition:background-color .15s ease,border-color .15s ease,color .15s ease,transform .12s var(--ease-out);-webkit-tap-highlight-color:transparent}
.btn:active:not(:disabled){transform:scale(.97)}
.btn:hover{border-color:#cfd5db;background:#f6f7f8}
.btn:disabled{opacity:.55;cursor:default}
.btn.prim{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.prim:hover{background:#22334a;border-color:#22334a}
.btn.texto{border-color:transparent;background:none;padding:0 8px;color:var(--muted)}
.btn.texto:hover{color:var(--ink);background:#f1f3f5}
.btn.quitar{color:var(--danger)}
.btn.texto.quitar:hover{color:var(--danger);background:#fdf5f5}
.btn.quitar.confirmar{background:var(--danger);border-color:var(--danger);color:#fff}

/* Encabezado de la pantalla */
main{max-width:1160px;margin:0 auto;padding:32px 16px 56px}
.cabeza{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
h1{margin:0;font-size:24px;line-height:1.2;font-weight:600;letter-spacing:-.015em}
.periodo{display:flex;align-items:center;gap:4px}
.periodo input{height:36px;border:1px solid var(--line);border-radius:var(--radius);padding:0 10px;background:var(--surface);min-width:0}
.periodo .btn{width:36px;padding:0;font-size:18px;line-height:1}

.cifra{margin:28px 0 8px;display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.cifra strong{font-size:40px;line-height:1.1;font-weight:600;letter-spacing:-.02em;color:var(--accent);font-variant-numeric:tabular-nums}
.cifra span{color:var(--muted)}
.reglas{margin:0 0 28px;color:var(--muted);font-size:14px;max-width:72ch}

/* Tabla */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden}
table{width:100%;border-collapse:collapse}
th{font-size:13px;font-weight:500;color:var(--muted);text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:12px 14px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tfoot td{border-top:1px solid var(--line);border-bottom:0;font-weight:600}
td.valeria{color:var(--accent);font-weight:600}
td.cliente{font-weight:500}
td.acc{width:1%;white-space:nowrap;text-align:right}
.sec{color:var(--muted)}

/* Totales de administración */
.global{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:20px 0 24px;background:var(--surface);border:1px solid var(--line);border-radius:10px}
.global[hidden]{display:none}
.global div{padding:14px 16px;border-left:1px solid var(--line-soft)}
.global div:first-child{border-left:0}
.global dt{font-size:13px;color:var(--muted)}
.global dd{margin:2px 0 0;font-size:20px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.global dd.valeria{color:var(--accent)}
td .sub{display:block;font-size:13px;font-weight:400;color:var(--muted)}
td.sirion{font-weight:600}

/* Edición: se abre debajo de la fila del cliente */
.campo{width:100%;min-width:0;height:38px;border:1px solid var(--line);border-radius:6px;padding:0 10px;background:var(--surface);transition:border-color .15s,box-shadow .15s}
.campo:hover{border-color:#cfd5db}
.campo:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
.campo.num{text-align:right;font-variant-numeric:tabular-nums}
select.campo{cursor:pointer;padding-right:4px}
tr.abierto td{background:#f6f8f9;border-bottom-color:transparent}
tr.editor td{background:#f6f8f9;padding:4px 14px 18px}
.edicion{display:grid;gap:16px}
.edicion.abre{--dy:-4px;animation:aparecer .22s var(--ease-out) backwards}
.campos{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:12px}
.f{display:block;min-width:0}
.f > span{display:block;font-size:13px;color:var(--muted);margin-bottom:4px}
.f > .btn{width:100%;min-height:38px;color:var(--muted);font-weight:400}
.con-baja{display:flex;gap:4px}
.conceptos{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:4px 14px}
.concepto{display:grid;grid-template-columns:minmax(0,1fr) auto 168px 72px;gap:12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line-soft)}
.concepto.base{grid-template-columns:minmax(0,1fr) 168px 72px}
.concepto.base .c{font-weight:500}
.concepto.base .dinero{grid-column:2}
.etq{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:12px;font-weight:500;vertical-align:1px}
.pauta{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--muted);cursor:pointer;white-space:nowrap}
.pauta input{width:16px;height:16px;margin:0;accent-color:var(--accent)}
.dinero{position:relative;display:block}
.dinero::before{content:"$";position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--faint);pointer-events:none}
.dinero .campo{padding-left:22px}
.btn.texto.agregar-concepto{margin:6px 0 4px -8px;color:var(--accent)}
.btn.texto.agregar-concepto:hover{color:var(--accent);background:var(--accent-soft)}
.acciones{display:flex;justify-content:space-between;align-items:center;gap:12px}

.pie-tabla{display:flex;align-items:center;gap:16px;margin-top:14px;flex-wrap:wrap}
.estado{font-size:14px;color:var(--muted);min-height:20px;display:inline-flex;align-items:flex-start;gap:8px}
.estado:not(:empty)::before{content:"";flex:none;width:7px;height:7px;margin-top:6.5px;border-radius:50%;background:var(--faint)}
.estado.guardando::before{background:var(--accent);animation:latir .8s ease-in-out infinite alternate}
.estado.ok::before{background:var(--ok);animation:pop .26s var(--ease-out)}
.estado.error::before{background:var(--danger)}
.estado.error{animation:sacudir .34s var(--ease-out)}
.estado.error{color:var(--danger)}
.estado.ok{color:var(--ok)}

.vacio{padding:28px 14px;text-align:center;color:var(--muted)}
h2{font-size:15px;font-weight:600;margin:40px 0 4px}
h2 + p{margin:0 0 12px;color:var(--muted);font-size:14px}
.fuera td{color:var(--muted)}
.fuera td.valeria{color:var(--muted);font-weight:500}
.nota{margin-top:32px;color:var(--muted);font-size:13px;max-width:80ch}
.cargando{padding:80px 16px;text-align:center;color:var(--muted)}
.error-carga{padding:24px;border:1px solid #efc9c9;background:#fdf5f5;border-radius:10px;color:var(--danger)}

/* Login */
.login{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:24px 16px}
.login-caja{width:100%;max-width:380px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:32px 28px}
.login-caja .marca{margin-bottom:24px}
.login-caja .marca img{width:48px;height:48px}
.login-caja h1{font-size:22px;margin-bottom:4px}
.login-caja p.sub{margin:0 0 24px;color:var(--muted);font-size:14px}
.login-caja label{display:block;font-size:14px;font-weight:500;margin-bottom:6px}
.login-caja input{width:100%;height:44px;border:1px solid var(--line);border-radius:var(--radius);padding:0 12px;margin-bottom:16px;background:var(--surface);font-size:16px}
.login-caja input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
.login-caja .btn{width:100%;min-height:44px;font-size:15px;margin-top:4px}
.error{margin:0 0 16px;padding:10px 12px;border-radius:var(--radius);background:#fdf5f5;color:var(--danger);font-size:14px}

.movil{display:none}
.panel{overflow-x:auto}
.editable td.cliente{min-width:220px}
@media (max-width:900px){
  .global{grid-template-columns:repeat(2,minmax(0,1fr))}
  .global div:nth-child(3){border-left:0}
  .global div:nth-child(n+3){border-top:1px solid var(--line-soft)}
  .campos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .campos .nombre{grid-column:1/-1}
}

/* Teléfono: cada cliente pasa a un bloque de dos o tres renglones */
@media (max-width:640px){
  main{padding:24px 16px 48px}
  #cuenta,.marca span{display:none}
  .cabeza{align-items:stretch;flex-direction:column;gap:14px}
  .periodo input{flex:1;height:44px}
  .periodo .btn{width:44px;height:44px}
  .cifra{margin-top:20px}
  .cifra strong{font-size:34px}
  thead{display:none}
  table,tbody,tfoot{display:block}
  tr{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:14px;border-bottom:1px solid var(--line-soft)}
  tbody tr:last-child{border-bottom:0}
  tfoot tr{border-top:1px solid var(--line);border-bottom:0}
  td,.editable td,tfoot td{padding:0;border:0}
  td.oc{display:none}
  td.movil{display:block;grid-column:1/-1;color:var(--muted);font-size:14px}
  td.valeria{grid-column:2;grid-row:1}
  td.vacio{grid-column:1/-1}
  /* Administración en teléfono: cifras en dos columnas con etiqueta, edición apilada */
  .global dd{font-size:18px}
  .editable tbody tr,.editable tfoot tr{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 12px}
  .editable td.cliente{grid-column:1/-1;min-width:0}
  .editable td.valeria{grid-column:auto;grid-row:auto}
  .editable td.num{text-align:left}
  .editable td[data-l]::before{content:attr(data-l);display:block;font-size:13px;line-height:1.4;font-weight:400;color:var(--muted)}
  .editable td.acc{width:auto;text-align:left;align-self:end}
  .editable td.acc .btn{min-height:44px;width:100%;border-color:var(--line)}
  .editable tfoot td.oc{display:none}
  .editable tbody tr.editor{display:block;padding:0 14px 16px;background:#f6f8f9}
  tr.editor td{display:block;padding:0}
  .campos{grid-template-columns:minmax(0,1fr)}
  .campo{height:44px;font-size:16px}
  .f > .btn,.con-baja .btn{min-height:44px}
  .concepto,.concepto.base{grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;padding:12px 0}
  .concepto .c,.concepto.base .c{grid-column:1/-1}
  .concepto .dinero,.concepto.base .dinero{grid-column:1/-1}
  .editable tbody tr.abierto{background:#f6f8f9}
  tr.abierto td{background:none}
  .concepto .pauta{grid-row:3;min-height:44px}
  .concepto .quitar-concepto{grid-row:3;grid-column:2;min-height:44px}
  .agregar-concepto{min-height:44px}
  .acciones .btn{min-height:44px}
  .pie-tabla .btn{min-height:44px;flex:1}
  .login-caja{padding:28px 20px}
}
/* Movimiento: entradas cortas con ease-out fuerte; solo transform y opacity */
@keyframes aparecer{from{opacity:0;transform:translate(var(--dx,0px),var(--dy,0px))}}
@keyframes resaltar{from{background-color:var(--accent-soft)}to{background-color:transparent}}
@keyframes latir{from{opacity:.35}to{opacity:1}}
@keyframes pop{from{transform:scale(.4)}}
@keyframes sacudir{0%,100%{transform:none}25%{transform:translateX(-4px)}50%{transform:translateX(3px)}75%{transform:translateX(-2px)}}
@keyframes girar{to{transform:rotate(360deg)}}
.entra{animation:aparecer .34s var(--ease-out) backwards}
.cabeza.entra,.cifra.entra,.reglas.entra{--dy:8px}
.cifra.entra{animation-delay:50ms}
.reglas.entra{animation-delay:90ms}
tr.nueva{--dy:-6px;animation:aparecer .26s var(--ease-out) backwards,resaltar 1.6s ease .3s backwards}
@media (hover:hover) and (pointer:fine){
  .panel:not(.editable) tbody tr{transition:background-color .15s ease}
  .panel:not(.editable) tbody tr:hover{background:#fafbfc}
}
.login-caja{--dy:10px;animation:aparecer .4s var(--ease-out) backwards}
.login-caja .marca img{--dy:0px;animation:aparecer .4s var(--ease-out) .08s backwards}
.login-caja .error{animation:sacudir .36s var(--ease-out) .3s backwards}
.btn.enviando::after{content:"";width:14px;height:14px;border-radius:50%;border:2px solid rgb(255 255 255 / .35);border-top-color:#fff;animation:girar .7s linear infinite}
/* Movimiento reducido: se quedan los desvanecidos, se van los desplazamientos */
@media (prefers-reduced-motion:reduce){
  .entra,tr.nueva,.login-caja,.login-caja .marca img{--dx:0px!important;--dy:0px!important}
  .estado.error,.login-caja .error,.estado.ok::before{animation:none}
  .btn:active:not(:disabled){transform:none}
  .btn.enviando::after{animation-duration:2s}
}