/* =========================================================
   DIGITO · sistema visual del panel de administración
   Paleta "tech" coherente con el logo DIGITO Suite (azul
   eléctrico + dorado premium) sobre una base marino oscura,
   con modo claro opcional. Todo lo de abajo se aplica también
   a assets/css/tpv.css porque comparte estas mismas variables.
   ========================================================= */
:root{
  /* Marca — franja superior y barra lateral, siempre oscuras */
  --ink:#0a0f1c;
  --ink-2:#101a30;

  /* Fondo y superficies (modo oscuro, por defecto) */
  --bg:#070b14;
  --panel:#0f1729;
  --panel-2:#151f36;
  --paper:#0f1729;

  /* Acentos */
  --accent:#2f7dfd;      /* azul eléctrico — foco tech */
  --accent-2:#22d3ee;    /* cian — brillos, hover */
  --gold:#D7A34E;        /* dorado premium — cifras, detalles */
  --canaria:#B8531F;
  --galicia:#37503A;
  --mist:#9FB4B8;
  --foam:#EFEAE0;
  --emerald:#2e9d6c;
  --amber:#c98b2e;
  --danger:#d9503a;

  --text:#e8ecf5;
  --text-muted:#8a94ac;
  --line:rgba(255,255,255,0.10);
  --line-inv:rgba(255,255,255,0.16);
  --shadow:0 14px 32px rgba(3,7,16,0.5);

  --radius:14px;
  --radius-sm:10px;

  --ff-display:'Fraunces',serif;
  --ff-body:'Work Sans',sans-serif;
  --ff-mono:'IBM Plex Mono',monospace;

  --sidebar-w:252px;
}

/* ===== MODO CLARO ===== */
[data-theme="light"]{
  --bg:#eef1f7;
  --panel:#ffffff;
  --panel-2:#f2f4f9;
  --paper:#ffffff;
  --text:#141a2b;
  --text-muted:#5c6478;
  --line:rgba(15,23,42,0.10);
  --line-inv:rgba(15,23,42,0.14);
  --shadow:0 10px 26px rgba(20,26,43,0.08);
}

*{box-sizing:border-box;}
html{background:var(--bg);}
body{
  margin:0;font-family:var(--ff-body);color:var(--text);background:var(--bg);
  line-height:1.55;-webkit-font-smoothing:antialiased;position:relative;min-height:100vh;
}

/* Fondo "premium tech": resplandores suaves + rejilla muy tenue,
   fijos, sin imágenes externas (funciona también sin conexión). */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1100px 560px at 10% -10%, rgba(47,125,253,0.16), transparent 60%),
    radial-gradient(900px 480px at 100% 0%, rgba(215,163,78,0.10), transparent 55%),
    var(--bg);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0.5;
  background-image:
    linear-gradient(rgba(127,155,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(127,155,255,0.05) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(circle at 15% 0%, black, transparent 68%);
  -webkit-mask-image:radial-gradient(circle at 15% 0%, black, transparent 68%);
}
[data-theme="light"] body::before{
  background:
    radial-gradient(1100px 560px at 10% -10%, rgba(47,125,253,0.08), transparent 60%),
    radial-gradient(900px 480px at 100% 0%, rgba(215,163,78,0.08), transparent 55%),
    var(--bg);
}
[data-theme="light"] body::after{ opacity:0.35; }

h1,h2,h3,h4{font-family:var(--ff-display);font-weight:600;margin:0 0 4px;line-height:1.15;}
p{margin:0 0 12px;}
a{color:inherit;}
.container{max-width:1180px;margin:0 auto;padding:0 32px;}
@media(max-width:600px){.container{padding:0 18px;}}
.section{padding:32px 0 64px;}
.muted{color:var(--text-muted);}
.muted.small{font-size:12.5px;}
.text-center{text-align:center;}
.text-right{text-align:right;}
.py{padding:24px 0;}
.mb{margin-bottom:14px;}
.mt-6{margin-top:36px;}
.flex-between{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;}

/* Campos de formulario "sueltos" (fuera de .login-card / .modal-content), para que
   todo el panel (Productos, Caja, Facturas, Usuarios, Importador, Zonas...) quede
   coherente sin tener que retocar cada página una por una. */
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=file]),
select, textarea{
  background:var(--panel-2); color:var(--text); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:9px 12px; font-family:var(--ff-body); font-size:14px;
}
input::placeholder, textarea::placeholder{ color:var(--text-muted); }
input:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(47,125,253,0.18);
}

/* ===== TOP BAR / LOGIN ===== */
.admin-bar{background:linear-gradient(90deg, var(--ink), var(--ink-2));color:var(--foam);border-bottom:1px solid rgba(215,163,78,0.35);}
.admin-bar-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 32px;flex-wrap:wrap;}
.admin-bar-inner h1{color:#fff;font-size:19px;margin:0;display:flex;align-items:center;gap:10px;}
.admin-bar-inner h1::before{content:"";display:inline-block;width:30px;height:30px;border-radius:8px;background-image:url('../logo.png');background-size:cover;background-position:center;background-repeat:no-repeat;flex-shrink:0;box-shadow:0 0 0 1px rgba(255,255,255,.12), 0 0 14px rgba(47,125,253,.35);}
.admin-bar-inner a.muted{color:var(--mist);text-decoration:none;font-family:var(--ff-mono);font-size:12.5px;}
.admin-bar-inner a.muted:hover{color:#fff;}

/* El enlace de "volver" (← Panel / ← Salón / etc.) es siempre el primer
   hijo de .admin-bar-inner en las ~34 páginas del admin. Antes era texto
   diminuto de 12.5px sin relieve — ahora es un botón-icono de tamaño
   dedo (44x44px), con una flecha SVG en vez de texto. Una sola regla
   arregla todas las páginas a la vez, sin tocar el PHP de cada una. */
.admin-bar-inner > a.muted:first-child{
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; padding:0; margin-right:4px; flex-shrink:0;
    border-radius:10px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22);
    font-size:0; /* el texto ("← Panel"...) se oculta visualmente, sigue ahí para lectores de pantalla */
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:center; background-size:22px 22px;
}
.admin-bar-inner > a.muted:first-child:hover,
.admin-bar-inner > a.muted:first-child:active{ background-color:rgba(255,255,255,.2); color:var(--mist); }
.admin-bar-inner > div:last-child{display:flex;align-items:center;gap:12px;}

.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:transparent;padding:24px;}
.login-card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:44px 38px;width:100%;max-width:380px;text-align:center;color:var(--text);
}
.login-icon{font-size:0;width:64px;height:64px;margin:0 auto 10px;border-radius:16px;background-image:url('../logo.png');background-size:cover;background-position:center;background-repeat:no-repeat;box-shadow:0 0 0 1px var(--line-inv), 0 0 26px rgba(47,125,253,.28);}
.login-card h2{font-size:24px;margin-bottom:4px;}
.login-card form{text-align:left;margin-top:22px;}
.login-card label{display:block;font-family:var(--ff-mono);font-size:12px;text-transform:uppercase;letter-spacing:0.04em;color:var(--text-muted);margin-bottom:6px;}
.login-card input{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:var(--radius-sm);font-family:var(--ff-body);font-size:14px;margin-bottom:16px;background:var(--panel-2);color:var(--text);}
.login-card code{background:var(--panel-2);padding:2px 6px;border-radius:6px;font-family:var(--ff-mono);color:var(--gold);}

/* =========================================================
   BARRA LATERAL ÚNICA — TPV / Personal / Proveedores /
   Inventario / Fiscal / Sistema, secciones bien separadas y
   botones grandes y claros, fija a la izquierda.
   ========================================================= */
.app-sidebar{
  position:fixed; top:0; left:0; bottom:0; width:var(--sidebar-w); z-index:200;
  background:linear-gradient(180deg, var(--ink), var(--ink-2));
  border-right:1px solid rgba(255,255,255,0.08);
  display:flex; flex-direction:column; overflow-y:auto;
  padding:18px 14px 28px;
}
.app-sidebar::-webkit-scrollbar{width:6px;}
.app-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:6px;}

.app-sidebar-brand{
  display:flex; align-items:center; gap:11px; padding:6px 8px 18px; margin-bottom:8px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.app-sidebar-brand .dot{
  width:36px; height:36px; border-radius:10px; flex-shrink:0;
  background-image:url('../logo.png'); background-size:cover; background-position:center;
  box-shadow:0 0 0 1px rgba(255,255,255,.14), 0 0 20px rgba(47,125,253,.4);
}
.app-sidebar-brand strong{display:block;color:#fff;font-family:var(--ff-display);font-size:15px;letter-spacing:.01em;}
.app-sidebar-brand span{display:block;font-family:var(--ff-mono);font-size:10px;color:var(--mist);text-transform:uppercase;letter-spacing:.08em;margin-top:2px;}

.app-nav-group{margin-bottom:16px;}
.app-nav-group:last-child{margin-bottom:4px;}
.app-nav-group-label{
  font-family:var(--ff-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.09em;
  color:rgba(255,255,255,.42); padding:0 10px 8px;
}
.app-nav-list{display:flex; flex-direction:column; gap:5px;}

.app-nav-btn{
  display:flex; align-items:center; gap:12px;
  min-height:50px; padding:11px 12px;
  border-radius:var(--radius-sm); color:rgba(255,255,255,.82); text-decoration:none;
  font-family:var(--ff-body); font-weight:600; font-size:13.5px; line-height:1.25;
  border:1px solid transparent;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.app-nav-btn svg{width:19px;height:19px;flex-shrink:0;}
.app-nav-btn:hover{background:rgba(255,255,255,.07); color:#fff;}
.app-nav-btn.active{
  background:linear-gradient(135deg, rgba(47,125,253,.24), rgba(34,211,238,.14));
  border-color:rgba(47,125,253,.5); color:#fff;
  box-shadow:inset 0 0 0 1px rgba(47,125,253,.3), 0 0 18px rgba(47,125,253,.18);
}
.app-nav-btn.active svg{color:var(--accent-2);}

@media (min-width:960px){
  body:has(.app-sidebar){ padding-left:var(--sidebar-w); }
}
@media (max-width:959px){
  .app-sidebar{
    position:static; width:100%; border-right:none;
    border-bottom:1px solid rgba(255,255,255,0.08);
    padding:14px 14px 16px;
  }
  .app-sidebar-brand{ padding-bottom:12px; margin-bottom:10px; }
  .app-nav-group{ margin-bottom:10px; }
  .app-nav-list{ flex-direction:row; overflow-x:auto; padding-bottom:2px; }
  .app-nav-btn{ flex:0 0 auto; min-width:168px; }
}

/* ===== Menús del cajón táctil (admin/tpv-ticket.php) ===== */
.tpv-menu-group-label{
  font-family:var(--ff-mono); font-size:10px; text-transform:uppercase; letter-spacing:.08em;
  color:rgba(255,255,255,.45); padding:10px 8px 4px;
}
.tpv-menu-group-label:first-child{padding-top:2px;}
.tpv-menu-left, .tpv-menu-right{ display:flex; flex-direction:column; gap:6px; }
.tpv-menu-btn{
  display:flex; align-items:center; gap:12px;
  min-height:56px; padding:12px 14px; border-radius:12px;
  font-family:var(--ff-body); font-size:15px; font-weight:700; line-height:1.2;
  text-decoration:none; color:#fff; border:1px solid transparent;
  transition:transform .1s ease, background .15s ease;
}
.tpv-menu-btn svg{width:21px;height:21px;flex-shrink:0;}
.tpv-menu-btn:active{ transform:scale(0.97); }
.tpv-menu-left .tpv-menu-btn{ background:#1a2440; border-color:#1a2440; color:#fff; }
.tpv-menu-left .tpv-menu-btn.active{ background:#233257; border-color:var(--gold); box-shadow:inset 0 0 0 2px var(--gold); }
.tpv-menu-left .tpv-menu-btn:hover{ background:#233257; color:#fff; }
.tpv-menu-right .tpv-menu-btn{ background:#123a52; border-color:#123a52; color:#fff; }
.tpv-menu-right .tpv-menu-btn.active{ background:#155073; border-color:var(--accent-2); box-shadow:inset 0 0 0 2px var(--accent-2); }
.tpv-menu-right .tpv-menu-btn:hover{ background:#155073; color:#fff; }

/* ===== BUTTONS ===== */
.btn{
  font-family:var(--ff-body);font-weight:600;font-size:13.5px;padding:10px 18px;border-radius:var(--radius-sm);
  border:1px solid var(--line);text-decoration:none;cursor:pointer;display:inline-flex;align-items:center;
  gap:6px;transition:transform .12s ease, filter .12s ease;background:var(--panel-2);color:var(--text);
}
.btn:hover{transform:translateY(-1px);filter:brightness(1.08);}
.btn-emerald{background:var(--emerald);color:#fff;border-color:var(--emerald);}
.btn-outline{background:transparent;border-color:var(--line-inv);color:var(--text);}
.btn-danger{background:var(--danger);color:#fff;border-color:var(--danger);}
.btn-sm{padding:7px 12px;font-size:12.5px;}
.btn-block{width:100%;justify-content:center;}

/* ===== ALERTS ===== */
.alert{padding:12px 14px;border-radius:var(--radius-sm);font-size:13.5px;margin-bottom:16px;border:1px solid;}
.alert-error{background:rgba(217,80,58,0.12);color:#ff9d80;border-color:var(--danger);}
.alert-ok{background:rgba(46,157,108,0.12);color:#7be2ad;border-color:var(--emerald);}

/* ===== STATS ===== */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
@media(max-width:800px){.grid-2,.grid-4{grid-template-columns:1fr 1fr;}}
@media(max-width:500px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}}
.stats-grid{margin-bottom:36px;}
.stat-card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);
}
.stat-card small{font-family:var(--ff-mono);font-size:11px;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-muted);display:block;margin-bottom:6px;}
.stat-card strong{font-family:var(--ff-mono);font-size:28px;color:var(--gold);}
.stat-card strong.amber{color:var(--amber);}
.stat-card strong.emerald{color:#7be2ad;}
.stat-mini{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px;text-align:center;}
.stat-mini small{font-family:var(--ff-mono);font-size:10.5px;text-transform:uppercase;color:var(--text-muted);display:block;margin-bottom:4px;}
.stat-mini strong{font-family:var(--ff-display);font-size:18px;}

/* ===== CARDS ===== */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);}
.card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px;}

.upcoming-list{list-style:none;margin:0;padding:0;}
.upcoming-list li{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px dashed var(--line);font-size:13.5px;}
.upcoming-list li:last-child{border-bottom:none;}
.upcoming-list small{display:block;color:var(--text-muted);font-size:12px;margin-top:2px;}

/* ===== BADGES ===== */
.badge{display:inline-block;font-family:var(--ff-mono);font-size:11px;padding:4px 9px;border-radius:10px;text-transform:uppercase;letter-spacing:0.03em;}
.badge-amber-light{background:rgba(201,139,46,0.18);color:#f0c25c;}
.badge-emerald-light{background:rgba(46,157,108,0.18);color:#7be2ad;}
.badge-dark{background:var(--ink);color:#fff;}
.badge-danger-light{background:rgba(217,80,58,0.18);color:#ff9d80;}

/* ===== TABLES ===== */
.table-wrap{overflow-x:auto;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);}
.data-table{width:100%;border-collapse:collapse;font-size:13.5px;}
.data-table th{
  text-align:left;font-family:var(--ff-mono);font-size:11px;text-transform:uppercase;letter-spacing:0.04em;
  color:var(--text-muted);padding:14px 16px;border-bottom:1px solid var(--line);background:var(--panel-2);
}
.data-table td{padding:14px 16px;border-bottom:1px solid var(--line);}
.data-table tr:last-child td{border-bottom:none;}
.amber{color:var(--amber);}

/* Tabla "admin-table" (dashboard de facturas, etc.) también unificada aquí */
table.admin-table{width:100%;border-collapse:collapse;font-size:13.5px;background:var(--panel);border:1px solid var(--line);}
table.admin-table th{text-align:left;font-family:var(--ff-mono);font-size:11px;text-transform:uppercase;letter-spacing:0.04em;color:var(--text-muted);padding:14px 16px;border-bottom:1px solid var(--line);background:var(--panel-2);}
table.admin-table td{padding:14px 16px;border-bottom:1px solid var(--line);}
table.admin-table tr:last-child td{border-bottom:none;}

/* ===== MODALS ===== */
.modal{display:none;position:fixed;inset:0;background:rgba(3,6,14,0.68);z-index:1000;align-items:center;justify-content:center;padding:20px;}
.modal.open{display:flex;}
.modal-content{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:30px;max-width:440px;width:100%;position:relative;box-shadow:var(--shadow);color:var(--text);}
.modal-content h2{font-size:20px;margin-bottom:18px;}
.modal-content label{display:block;font-family:var(--ff-mono);font-size:11.5px;text-transform:uppercase;color:var(--text-muted);margin-bottom:5px;}
.modal-content input,.modal-content select{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:var(--radius-sm);font-family:var(--ff-body);font-size:14px;margin-bottom:14px;background:var(--panel-2);color:var(--text);}
.modal-close{position:absolute;top:14px;right:14px;background:none;border:none;font-size:18px;cursor:pointer;color:var(--text-muted);}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:6px;}

/* ===== STATUS FORM (reservas) ===== */
.status-form{display:flex;gap:6px;align-items:center;}
.status-form select{padding:6px 8px;border:1px solid var(--line);border-radius:var(--radius-sm);font-family:var(--ff-mono);font-size:12px;}

/* ===== PANEL FLOTANTE DE ACCESOS RÁPIDOS ===== */
#quick-trigger{
  position:fixed;top:50%;right:0;transform:translateY(-50%);
  width:22px;height:64px;background:var(--ink);border-radius:8px 0 0 8px;
  cursor:pointer;z-index:2000;display:flex;align-items:center;justify-content:center;
  box-shadow:-2px 0 10px rgba(0,0,0,0.4);border:1px solid var(--gold);border-right:none;
}
#quick-trigger span{color:var(--gold);font-size:14px;}
#quick-panel{
  position:fixed;top:0;right:-320px;width:300px;height:100%;background:var(--ink);color:var(--foam);
  z-index:2001;padding:26px 22px;overflow-y:auto;transition:right .3s ease;box-shadow:-8px 0 30px rgba(0,0,0,0.5);
}
#quick-panel.open{right:0;}
.quick-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;}
.quick-header strong{font-family:var(--ff-display);font-size:18px;color:#fff;}
.quick-close{cursor:pointer;font-size:22px;color:var(--mist);background:none;border:none;}
.quick-section{margin-bottom:22px;}
.quick-section h4{font-family:var(--ff-mono);font-size:11px;text-transform:uppercase;letter-spacing:0.06em;color:var(--gold);margin:0 0 10px;}
.quick-section a{display:flex;align-items:center;gap:8px;padding:7px 0;color:var(--foam);text-decoration:none;font-size:14px;opacity:0.9;}
.quick-section a:hover{opacity:1;color:var(--gold);}

/* ===== INTERRUPTOR DE TEMA (claro / oscuro) ===== */
.theme-toggle-btn{
  position:fixed; bottom:20px; right:20px; z-index:2500;
  width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--panel); color:var(--text); border:1px solid var(--line-inv);
  box-shadow:var(--shadow); cursor:pointer;
}
.theme-toggle-btn:hover{ filter:brightness(1.1); }
.theme-toggle-btn svg{width:20px;height:20px;}
.theme-toggle-btn .icon-sun{display:none;}
.theme-toggle-btn .icon-moon{display:block;}
[data-theme="light"] .theme-toggle-btn .icon-sun{display:block;}
[data-theme="light"] .theme-toggle-btn .icon-moon{display:none;}