/* ============ MAKEY · style.css (final) ============ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap');

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

:root{
  --bg:#f4f5f7; --card:#ffffff; --dark:#22262e; --dark-2:#2b303a;
  --text:#232733; --soft:#707786; --border:#e5e8ee;
  --accent:#c2703d; --accent-2:#d98a54; --accent-dk:#a75c2e;
  --accent-soft:rgba(194,112,61,.12);
  --error:#c0392b; --error-bg:#fdecea;
  --success:#1e7b34; --success-bg:#e9f5ec;
  --r:16px; --shadow:0 10px 30px rgba(25,30,40,.08); --shadow-lg:0 18px 45px rgba(25,30,40,.14);
  --grad:linear-gradient(135deg,var(--accent-2),var(--accent-dk));
}

html{scroll-behavior:smooth}
body{font-family:'Outfit',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--text);background:
  radial-gradient(1100px 520px at 88% -10%, rgba(194,112,61,.08), transparent 60%),
  radial-gradient(900px 480px at -10% 110%, rgba(34,38,46,.07), transparent 60%),
  var(--bg);}
a{color:var(--accent);text-decoration:none;transition:color .2s}
a:hover{color:var(--accent-dk)}
::selection{background:var(--accent);color:#fff}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#c6ccd6;border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--accent)}

@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes float{from{transform:translateY(-12px) scale(1)}to{transform:translateY(16px) scale(1.05)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(156,92,18,.45)}70%{box-shadow:0 0 0 6px transparent}100%{box-shadow:0 0 0 0 transparent}}
@keyframes toastIn{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
@keyframes rip{to{transform:scale(3);opacity:0}}

/* ---------- LOGIN / REGISTRO ---------- */
.auth-body{position:relative;overflow:hidden;min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;padding:24px 16px}
.auth-body::before,.auth-body::after{content:"";position:absolute;border-radius:50%;filter:blur(75px);
  opacity:.55;z-index:0;animation:float 9s ease-in-out infinite alternate}
.auth-body::before{width:340px;height:340px;background:rgba(194,112,61,.28);top:-90px;left:-90px}
.auth-body::after{width:300px;height:300px;background:rgba(34,38,46,.20);bottom:-80px;right:-80px;animation-delay:2s}

.auth-card{position:relative;z-index:1;width:100%;max-width:940px;display:grid;grid-template-columns:1fr 1.15fr;
  background:var(--card);border:1px solid var(--border);border-radius:20px;overflow:hidden;
  box-shadow:var(--shadow-lg);animation:fadeUp .6s ease both}

.auth-brand{position:relative;background:linear-gradient(160deg,#2a2f39,#1c2028 65%);color:#fff;
  padding:48px 38px;display:flex;flex-direction:column;justify-content:center;gap:10px;overflow:hidden}
.auth-brand::before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,rgba(194,112,61,.35),transparent 70%);top:-60px;right:-60px}
.brand-logo{width:60px;height:60px;border-radius:16px;background:var(--grad);color:#fff;
  display:flex;align-items:center;justify-content:center;margin-bottom:8px;
  box-shadow:0 10px 24px rgba(194,112,61,.45);transition:transform .3s}
.brand-logo:hover{transform:rotate(-6deg) scale(1.06)}
.auth-brand h1{font-size:2.1rem;letter-spacing:4px;font-weight:800}
.auth-brand .tag{color:#aeb4bf;font-size:.92rem}
.brand-points{list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:12px}
.brand-points li{font-size:.88rem;color:#cfd4dc;display:flex;gap:10px;align-items:center;transition:transform .2s}
.brand-points li:hover{transform:translateX(4px)}
.brand-points li::before{content:"✓";flex:0 0 20px;height:20px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent-2);
  font-size:.7rem;font-weight:800;border:1px solid rgba(217,138,84,.4)}

.auth-form{padding:44px 40px}
.auth-form h2{font-size:1.4rem;font-weight:700}
.auth-form .sub{color:var(--soft);font-size:.9rem;margin-top:4px}
.auth-form label{display:block;margin:16px 0 6px;font-size:.8rem;font-weight:600;color:var(--soft);
  text-transform:uppercase;letter-spacing:.6px}
.auth-form input,.auth-form select{width:100%;padding:12px 14px;border:1px solid var(--border);
  border-radius:12px;background:#fbfbfc;font-size:.95rem;color:var(--text);font-family:inherit;
  transition:border-color .2s,box-shadow .2s,transform .2s}
.auth-form input:hover,.auth-form select:hover{border-color:#cfd4dc}
.auth-form input:focus,.auth-form select:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 4px var(--accent-soft);transform:translateY(-1px)}

.input-pass{position:relative}
.input-pass input{padding-right:46px}
.toggle-pass{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;
  cursor:pointer;color:var(--soft);padding:6px;border-radius:8px;display:flex;transition:.2s}
.toggle-pass:hover{color:var(--accent);background:var(--accent-soft)}

.btn{position:relative;overflow:hidden;width:100%;margin-top:22px;padding:13px;background:var(--grad);
  color:#fff;border:none;border-radius:12px;font-size:1rem;font-weight:700;font-family:inherit;
  letter-spacing:.3px;cursor:pointer;box-shadow:0 8px 20px rgba(194,112,61,.35);
  transition:transform .15s,box-shadow .2s}
.btn::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transition:left .55s}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(194,112,61,.45)}
.btn:hover::after{left:130%}
.btn:active{transform:translateY(0) scale(.99)}
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.55);transform:scale(0);
  animation:rip .6s ease-out forwards;pointer-events:none}

/* Toasts */
.alert{position:fixed;top:18px;right:18px;z-index:99;max-width:360px;padding:13px 16px;border-radius:12px;
  font-size:.88rem;display:flex;align-items:flex-start;gap:8px;box-shadow:var(--shadow-lg);
  animation:toastIn .45s cubic-bezier(.21,1.02,.73,1) both;transition:opacity .4s,transform .4s}
.alert.hide{opacity:0;transform:translateY(-10px)}
.alert-error{background:var(--error-bg);color:var(--error);border:1px solid #f2c7c2}
.alert-success{background:var(--success-bg);color:var(--success);border:1px solid #bfdcc6}
.alert ul{padding-left:18px}

.alt-link{margin-top:18px;text-align:center;font-size:.9rem;color:var(--soft)}
.demo{margin-top:12px;padding:10px;text-align:center;font-size:.83rem;color:var(--soft);
  background:#f6f7f9;border:1px dashed var(--border);border-radius:10px;transition:.25s}
.demo:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
.auth-footer{font-size:.8rem;color:var(--soft);position:relative;z-index:1}

/* ---------- TOPBAR ---------- */
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:14px;padding:12px 22px;
  background:linear-gradient(90deg,#22262e,#2a3039);border-bottom:1px solid rgba(255,255,255,.06);
  box-shadow:0 6px 20px rgba(15,18,25,.25)}
.topbar .brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:2.5px;color:#fff}
.topbar .brand svg{display:block;background:var(--grad);padding:6px;border-radius:10px;color:#fff;
  box-shadow:0 4px 12px rgba(194,112,61,.45);transition:transform .3s}
.topbar .brand:hover svg{transform:rotate(-8deg) scale(1.08)}
.topbar-nav{display:flex;gap:4px;margin-left:8px}
.nav-link{padding:7px 15px;border-radius:999px;font-size:.85rem;font-weight:600;color:#cfd4dc;transition:.25s}
.nav-link:hover{background:rgba(255,255,255,.1);color:#fff;text-decoration:none}
.nav-link.active{background:var(--grad);color:#fff;box-shadow:0 4px 14px rgba(194,112,61,.4)}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:10px;color:#e6e8ec}
.rol-badge{background:var(--grad);color:#fff;font-size:.66rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.7px;padding:5px 12px;border-radius:999px;box-shadow:0 4px 12px rgba(194,112,61,.35)}
.btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35);padding:8px 14px;
  border-radius:10px;font-size:.85rem;font-weight:600;cursor:pointer;transition:.25s;text-decoration:none}
.btn-ghost:hover{background:rgba(255,255,255,.14);transform:translateY(-1px);color:#fff;text-decoration:none}

/* ---------- CONTENIDO ---------- */
.container{max-width:1060px;margin:0 auto;padding:28px 20px 48px}
.container h2{font-size:1.35rem;font-weight:800;animation:fadeUp .5s ease both}
.container .sub{color:var(--soft);font-size:.9rem;margin-top:2px;animation:fadeUp .5s .05s ease both}

.stats{margin-top:22px;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.stat-card{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--border);
  border-radius:var(--r);padding:20px;box-shadow:var(--shadow);transition:transform .25s,box-shadow .25s;
  animation:fadeUp .55s ease both}
.stat-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad);
  transform:scaleX(0);transform-origin:left;transition:transform .35s}
.stat-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.stat-card:hover::before{transform:scaleX(1)}
.stat-card:nth-child(1){animation-delay:.05s}.stat-card:nth-child(2){animation-delay:.12s}
.stat-card:nth-child(3){animation-delay:.19s}.stat-card:nth-child(4){animation-delay:.26s}
.stat-card h3{font-size:.7rem;color:var(--soft);text-transform:uppercase;letter-spacing:.9px}
.stat-card .num{font-size:1.75rem;font-weight:800;margin-top:8px}
.stat-card .hint{font-size:.78rem;color:var(--soft);margin-top:4px}

.panel{margin-top:24px;background:var(--card);border:1px solid var(--border);border-radius:var(--r);
  padding:22px;box-shadow:var(--shadow);overflow-x:auto;animation:fadeUp .55s .1s ease both}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.panel h3{font-size:1rem;font-weight:700;display:flex;align-items:center;gap:8px}
.panel h3::before{content:"";width:4px;height:16px;border-radius:99px;background:var(--grad)}

table{width:100%;border-collapse:collapse;font-size:.88rem;min-width:640px}
th{text-align:left;color:var(--soft);font-size:.7rem;text-transform:uppercase;letter-spacing:.7px;
  padding:10px;border-bottom:2px solid var(--border);background:#fafbfc}
td{padding:11px 10px;border-bottom:1px solid var(--border);transition:background .2s}
tbody tr{transition:background .2s}
tbody tr:hover{background:linear-gradient(90deg,var(--accent-soft),transparent 65%)}
tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
tr:last-child td{border-bottom:none}

/* ---------- CAJA ---------- */
.pedido-form{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
.pedido-form label{display:block;margin:0 0 6px;font-size:.75rem;font-weight:700;color:var(--soft);
  text-transform:uppercase;letter-spacing:.6px}
.f-cliente{grid-column:span 4}.f-mesa{grid-column:span 2}
.f-precio{grid-column:span 3}.f-cant{grid-column:span 3}
.f-desc{grid-column:span 10}.f-btn{grid-column:span 2;display:flex;align-items:flex-end}
.f-btn .btn{margin-top:0}

.input-icon{position:relative}
.input-icon svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#b6bcc8;
  pointer-events:none;transition:color .2s,transform .2s}
.input-icon input{width:100%;padding:11px 12px 11px 38px;border:1px solid var(--border);border-radius:12px;
  background:#fbfbfc;font-size:.92rem;font-family:inherit;transition:border-color .2s,box-shadow .2s,transform .2s}
.input-icon input:hover{border-color:#cfd4dc}
.input-icon input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);
  transform:translateY(-1px)}
.input-icon:focus-within svg{color:var(--accent);transform:translateY(-50%) scale(1.15)}

.mesa-badge{display:inline-block;background:linear-gradient(135deg,var(--dark-2),var(--dark));color:#fff;
  padding:4px 11px;border-radius:9px;font-size:.74rem;font-weight:700;white-space:nowrap;
  box-shadow:0 3px 8px rgba(20,24,32,.25);transition:transform .2s}
.mesa-badge:hover{transform:scale(1.07)}

.badge{display:inline-flex;align-items:center;padding:4px 11px;border-radius:999px;font-size:.66rem;
  font-weight:800;letter-spacing:.6px;text-transform:uppercase}
.badge-pendiente{background:#fff3e0;color:#9c5c12;border:1px solid #f0d9b5}
.badge-pendiente::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;
  margin-right:6px;animation:pulse 1.4s infinite}
.badge-pagado{background:var(--success-bg);color:var(--success);border:1px solid #bfdcc6}

.cobrar-cell{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cobrar-form{display:flex;gap:6px;align-items:center}
.cobrar-form select{padding:7px 9px;border:1px solid var(--border);border-radius:10px;font-size:.8rem;
  background:#fff;font-family:inherit;cursor:pointer;transition:.2s}
.cobrar-form select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.btn-mini{position:relative;overflow:hidden;background:var(--grad);border:none;color:#fff;padding:8px 14px;
  border-radius:10px;font-size:.75rem;font-weight:800;letter-spacing:.5px;cursor:pointer;
  box-shadow:0 5px 14px rgba(194,112,61,.35);transition:transform .15s,box-shadow .2s}
.btn-mini:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(194,112,61,.45)}
.btn-del{background:var(--error-bg);border:1px solid #f2c7c2;color:var(--error);padding:7px 9px;
  border-radius:10px;cursor:pointer;display:inline-flex;transition:.25s}
.btn-del svg{transition:transform .25s}
.btn-del:hover{background:var(--error);border-color:var(--error);color:#fff;transform:translateY(-1px)}
.btn-del:hover svg{transform:rotate(-10deg) scale(1.15)}

.fecha-form input[type="date"]{padding:8px 14px;border:1px solid var(--border);border-radius:999px;
  font-size:.82rem;background:#fbfbfc;font-family:inherit;color:var(--text);cursor:pointer;transition:.2s}
.fecha-form input[type="date"]:hover{border-color:var(--accent);transform:translateY(-1px)}
.fecha-form input[type="date"]:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}

.head-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{padding:7px 14px;border-radius:999px;border:1px solid var(--border);background:#fff;color:var(--soft);
  font-size:.78rem;font-weight:600;transition:.25s}
.chip:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px);text-decoration:none}
.chip.active{background:var(--dark);border-color:var(--dark);color:#fff;box-shadow:0 4px 12px rgba(20,24,32,.25)}
.buscar input{padding:8px 15px;border:1px solid var(--border);border-radius:999px;font-size:.82rem;
  width:190px;background:#fbfbfc;font-family:inherit;transition:.2s}
.buscar input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);width:220px}
.empty{text-align:center;color:var(--soft);padding:28px 10px;font-size:.9rem}

/* ---------- ADICIONALES (MODAL) ---------- */
.btn-add{width:34px;height:34px;border-radius:10px;border:1px dashed var(--accent);
  background:var(--accent-soft);color:var(--accent);font-size:1.05rem;font-weight:800;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:.25s}
.btn-add:hover{background:var(--accent);color:#fff;border-style:solid;transform:rotate(90deg) scale(1.08)}
.extras-note{display:block;border:none;background:none;color:var(--accent);font-size:.7rem;
  font-weight:700;cursor:pointer;text-decoration:underline dotted;padding:2px 0}
.extras-note:hover{color:var(--accent-dk)}

.modal-extras{border:none;border-radius:18px;padding:22px;width:min(440px,92vw);
  margin:auto;inset:0;box-shadow:0 30px 70px rgba(15,20,30,.35)}
.modal-extras::backdrop{background:rgba(20,24,32,.55);backdrop-filter:blur(3px)}
.modal-extras[open]{animation:fadeUp .3s ease}
.modal-head{display:flex;justify-content:space-between;align-items:center}
.modal-head h4{font-size:1.02rem;font-weight:800}
.cerrar{border:none;background:#f1f2f4;width:30px;height:30px;border-radius:9px;cursor:pointer;
  color:var(--soft);font-weight:700;transition:.25s}
.cerrar:hover{background:var(--error);color:#fff;transform:rotate(90deg)}
.modal-sub{color:var(--soft);font-size:.82rem;margin-top:2px}
.extras-list{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:8px;
  max-height:180px;overflow:auto}
.extras-list li{display:flex;justify-content:space-between;align-items:center;gap:10px;
  background:#f8f9fb;border:1px solid var(--border);padding:9px 12px;border-radius:10px;
  font-size:.86rem;animation:fadeUp .25s ease}
.extras-list li strong{color:var(--accent-dk)}
.mini-del button{border:none;background:transparent;color:var(--error);cursor:pointer;
  font-weight:800;transition:.2s}
.mini-del button:hover{transform:scale(1.25)}
.empty-small{color:var(--soft);font-size:.82rem;margin-top:12px;text-align:center}
.extra-form{display:flex;gap:8px;margin-top:12px}
.extra-form input[type="text"]{flex:1;padding:10px 12px;border:1px solid var(--border);
  border-radius:10px;font-family:inherit;font-size:.88rem;background:#fbfbfc}
.extra-form input[type="number"]{width:90px;padding:10px 12px;border:1px solid var(--border);
  border-radius:10px;font-family:inherit;font-size:.88rem;background:#fbfbfc}
.extra-form input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}

/* ---------- VENTAS ---------- */
.metodo-badge{display:inline-block;padding:4px 11px;border-radius:999px;font-size:.7rem;
  font-weight:700;white-space:nowrap;transition:transform .2s}
.metodo-badge:hover{transform:scale(1.06)}
.m-efectivo{background:var(--success-bg);color:var(--success);border:1px solid #bfdcc6}
.m-yape{background:#fdeef6;color:#b0327f;border:1px solid #f3cfe4}
.m-tarjeta{background:#eaf2fd;color:#2b6cb0;border:1px solid #cfe0f7}
.extras-mini{display:flex;flex-direction:column;gap:2px;margin-top:5px}
.extras-mini span{font-size:.72rem;color:var(--soft)}
.extras-mini em{font-style:normal;color:var(--accent-dk);font-weight:700}

.footer{text-align:center;padding:18px;font-size:.8rem;color:var(--soft)}

/* ---------- RESPONSIVE ---------- */
@media (max-width:840px){
  .auth-card{grid-template-columns:1fr;max-width:480px}
  .auth-brand{padding:26px 24px;gap:6px}
  .brand-points{display:none}
  .auth-form{padding:30px 22px}
  .f-cliente{grid-column:span 12}
  .f-mesa,.f-precio,.f-cant{grid-column:span 4}
  .f-desc,.f-btn{grid-column:span 12}
  .user-name{display:none}
}
@media (max-width:760px){
  .tabla-pedidos table,.tabla-pedidos tbody,.tabla-pedidos tr,.tabla-pedidos td{display:block;width:100%;min-width:0}
  .tabla-pedidos thead{display:none}
  .tabla-pedidos tr{border:1px solid var(--border);border-radius:14px;margin-bottom:12px;padding:10px 12px;
    background:#fff;box-shadow:var(--shadow);transition:transform .2s}
  .tabla-pedidos tr:hover{transform:translateY(-2px)}
  .tabla-pedidos td{border:none;padding:7px 2px;display:flex;justify-content:space-between;align-items:center;gap:10px}
  .tabla-pedidos td::before{content:attr(data-label);font-size:.66rem;font-weight:800;text-transform:uppercase;
    letter-spacing:.5px;color:var(--soft)}
  .f-mesa,.f-precio,.f-cant{grid-column:span 12}
  .topbar{padding:10px 12px;gap:8px}
  .nav-link{padding:6px 11px;font-size:.78rem}
  .alert{left:12px;right:12px;max-width:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
/* Botones de descarga */
.desc-group{ display:flex; gap:6px; }
.btn-desc{ display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:999px;
  border:1px solid var(--border); background:#fff; color:var(--text); font-size:.8rem; font-weight:700;
  cursor:pointer; transition:.25s; text-decoration:none; font-family:inherit; }
.btn-desc:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px);
  box-shadow:0 6px 14px rgba(194,112,61,.2); text-decoration:none; }
  /* Cabecera de página con acciones */
.page-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
/* ---------- BORRADOS ---------- */
.acc-cell{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.btn-restore{ background:var(--success-bg); border:1px solid #bfdcc6; color:var(--success);
  padding:7px 11px; border-radius:10px; cursor:pointer; display:inline-flex; align-items:center;
  gap:6px; font-size:.74rem; font-weight:800; font-family:inherit; transition:.25s; }
.btn-restore:hover{ background:var(--success); border-color:var(--success); color:#fff; transform:translateY(-1px); }
/* ---------- PENSIONISTAS ---------- */
.f-6{grid-column:span 6}.f-4{grid-column:span 4}.f-2{grid-column:span 2}.f-10{grid-column:span 10}
.pedido-form select{width:100%;padding:11px 12px 11px 38px;border:1px solid var(--border);border-radius:12px;
  background:#fbfbfc;font-size:.92rem;font-family:inherit;color:var(--text);cursor:pointer;
  transition:border-color .2s,box-shadow .2s,transform .2s}
.pedido-form select:hover{border-color:#cfd4dc}
.pedido-form select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);transform:translateY(-1px)}
.dni-txt{font-size:.8rem;color:var(--soft);letter-spacing:.5px}
.deuda-txt{color:var(--error);font-weight:700;font-size:.82rem}
@media (max-width:840px){ .f-6,.f-4,.f-2,.f-10{grid-column:span 12} }
@media (max-width:640px){
  .topbar{flex-wrap:wrap}
  .topbar-nav{order:3;width:100%;justify-content:center;margin-left:0}
}
/* ---------- VENTANAS DE PENSIONISTAS ---------- */
.f-3{grid-column:span 3}
.form-actions{grid-column:span 4;display:flex;gap:8px;align-items:flex-end}
.form-actions .btn{flex:1;margin-top:0}
.btn-ver{flex:.8;padding:12px;border-radius:12px;border:1px solid var(--accent);background:#fff;
  color:var(--accent);font-weight:700;font-size:.95rem;font-family:inherit;cursor:pointer;transition:.25s}
.btn-ver:hover{background:var(--accent-soft);transform:translateY(-2px);box-shadow:0 6px 14px rgba(194,112,61,.2)}
.modal-wide{width:min(560px,94vw)}
.modal-tip{margin-top:12px;font-size:.75rem;color:var(--soft);text-align:center}

.pens-list{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:8px;max-height:320px;overflow:auto}
.pens-list li{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#f8f9fb;
  border:1px solid var(--border);border-radius:12px;padding:10px 12px;animation:fadeUp .25s ease;transition:.2s}
.pens-list li:hover{border-color:var(--accent);transform:translateY(-1px)}
.pens-link{border:none;background:none;cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:2px;font-family:inherit}
.pens-link strong{font-size:.9rem;color:var(--text);transition:color .2s}
.pens-link:hover strong{color:var(--accent);text-decoration:underline}
.pens-right{display:flex;align-items:center;gap:8px}

.consumo-stats{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.consumo-stats div{flex:1;min-width:110px;background:#f8f9fb;border:1px solid var(--border);border-radius:12px;
  padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.consumo-stats span{font-size:.66rem;text-transform:uppercase;letter-spacing:.6px;color:var(--soft)}
.consumo-stats strong{font-size:1rem}
.ok-txt{color:var(--success)}
.consumo-list li{flex-wrap:wrap;gap:8px}

@media (max-width:840px){ .f-3,.f-4.form-actions{grid-column:span 12} }

/* Botón Anotar (pensionistas) */
.btn-anotar{ display:inline-flex; align-items:center; gap:6px; padding:8px 18px; border-radius:10px;
  border:1px solid var(--dark); background:var(--dark); color:#fff; font-size:.78rem; font-weight:800;
  letter-spacing:.4px; cursor:pointer; font-family:inherit; transition:.25s; }
.btn-anotar:hover{ background:var(--accent); border-color:var(--accent); transform:translateY(-2px);
  box-shadow:0 8px 16px rgba(194,112,61,.35); }
.btn-anotar:active{ transform:translateY(0) scale(.98); }
/* Total acumulado por pensionista */
.pens-total-wrap{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.pens-total{ font-size:.98rem; font-weight:800; color:var(--text); transition:color .2s; }
.pens-list li:hover .pens-total{ color:var(--accent); }
.pens-total-label{ font-size:.62rem; text-transform:uppercase; letter-spacing:.6px; color:var(--soft); }
/* Cobrar todo lo anotado + descargas en ficha */
.badge-pago{ background:var(--accent-soft); color:var(--accent-dk); border:1px solid rgba(194,112,61,.35); }
.consumo-cobrar-cell{ display:flex; align-items:center; justify-content:flex-end; }
.btn-cobrar-total{ background:var(--grad); border:none; color:#fff; padding:11px 18px; border-radius:12px;
  font-size:.88rem; font-weight:800; font-family:inherit; letter-spacing:.3px; cursor:pointer;
  box-shadow:0 8px 18px rgba(194,112,61,.4); transition:.25s; }
.btn-cobrar-total:hover{ transform:translateY(-2px); box-shadow:0 12px 24px rgba(194,112,61,.5); }
.sin-cobro{ font-size:.8rem; color:var(--success); font-weight:800; }
.consumo-actions{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.estado-cell{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
/* ---------- PANEL: CREAR USUARIO ---------- */
.btn-light{ background:#fff; border:1px solid var(--border); color:var(--text); padding:8px 14px;
  border-radius:10px; font-size:.85rem; font-weight:700; font-family:inherit; cursor:pointer; transition:.25s; }
.btn-light:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(194,112,61,.15); }

.modal-form label{ display:block; margin:14px 0 6px; font-size:.75rem; font-weight:700; color:var(--soft);
  text-transform:uppercase; letter-spacing:.6px; }
.modal-form input, .modal-form select{ width:100%; padding:11px 13px; border:1px solid var(--border);
  border-radius:11px; background:#fbfbfc; font-size:.92rem; font-family:inherit; color:var(--text);
  transition:border-color .2s, box-shadow .2s; }
.modal-form input:hover, .modal-form select:hover{ border-color:#cfd4dc; }
.modal-form input:focus, .modal-form select:focus{ outline:none; border-color:var(--accent);
  box-shadow:0 0 0 4px var(--accent-soft); }
.modal-form .btn{ margin-top:18px; }

.rol-tag{ display:inline-block; padding:4px 11px; border-radius:999px; font-size:.68rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.6px; }
.rol-admin{ background:var(--grad); color:#fff; box-shadow:0 4px 10px rgba(194,112,61,.35); }
.rol-cajero{ background:#eef1f5; color:var(--soft); border:1px solid var(--border); }
/* Botón Editar pedido */
.btn-edit{ width:34px; height:34px; border-radius:10px; border:1px solid var(--border); background:#fff;
  color:var(--soft); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:.25s; }
.btn-edit:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px);
  box-shadow:0 6px 14px rgba(194,112,61,.2); }
.edit-row{ display:flex; gap:10px; }
.edit-row > div{ flex:1; }
.dash{ color:var(--soft); font-weight:700; }
/* Enlace de WhatsApp en el login */
.wa-link{ display:flex; align-items:center; justify-content:center; gap:8px; color:var(--soft);
  width:100%; margin-top:26px; }
.wa-link svg{ color:#25d366; flex:0 0 auto; transition:transform .25s; }
.wa-link:hover{ color:#128c7e; border-color:#25d366; }
.wa-link:hover svg{ transform:scale(1.2) rotate(-8deg); }
/* ---------- GASTOS ---------- */
.cat-badge{ display:inline-block; padding:4px 10px; border-radius:999px; font-size:.68rem;
  font-weight:700; background:#eef1f5; color:var(--soft); border:1px solid var(--border); }
.num-positivo{ color:var(--success) !important; }
.num-negativo{ color:var(--error) !important; }
/* Insignias por tipo en Borrados */
.tipo-badge{ display:inline-block; padding:4px 11px; border-radius:999px; font-size:.68rem;
  font-weight:800; text-transform:uppercase; letter-spacing:.5px; }
.t-caja{ background:var(--accent-soft); color:var(--accent-dk); border:1px solid rgba(194,112,61,.35); }
.t-pension{ background:var(--success-bg); color:var(--success); border:1px solid #bfdcc6; }
.t-makey{ background:#eaf2fd; color:#2b6cb0; border:1px solid #cfe0f7; }
.t-gasto{ background:var(--error-bg); color:var(--error); border:1px solid #f2c7c2; }
.detalle-txt{ display:block; font-size:.74rem; color:var(--soft); margin-top:2px; }