:root{
  --bg:#0f1216; --panel:#181d24; --panel-2:#1f2630; --line:#2a323d;
  --txt:#e7ecf2; --muted:#8b97a6; --brand:#ff6a2b; --brand-2:#ffb02b;
  --ok:#3ecf8e; --warn:#f5b83d; --bad:#f2555a; --radius:12px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--bg); color:var(--txt); font-size:15px; line-height:1.5;
}
a{color:var(--brand-2); text-decoration:none}
a:hover{text-decoration:underline}

/* Layout */
.app{display:flex; min-height:100vh}
.sidebar{
  width:230px; background:var(--panel); border-right:1px solid var(--line);
  padding:20px 14px; position:sticky; top:0; height:100vh; flex-shrink:0;
}
.brand{font-weight:800; font-size:20px; letter-spacing:.5px; margin:0 8px 22px}
.brand span{color:var(--brand)}
.brand-logo{margin:0 4px 22px; text-align:center}
.brand-logo img{max-width:100%; max-height:90px; object-fit:contain}
.nav a{
  display:flex; align-items:center; gap:10px; padding:8px 12px; margin:1px 0;
  border-radius:10px; color:var(--muted); font-weight:600; font-size:14px;
}
.nav-sec{
  font-size:10px; text-transform:uppercase; letter-spacing:1px; color:var(--muted);
  opacity:.55; padding:12px 12px 4px; font-weight:700;
}
.sidebar{overflow-y:auto}
.nav a:hover{background:var(--panel-2); color:var(--txt); text-decoration:none}
.nav a.active{background:linear-gradient(90deg,var(--brand),var(--brand-2)); color:#1a1000}
.nav .ico{width:20px; text-align:center}
/* El contenido crece con la pantalla y se detiene en un ancho cómodo de leer:
   en un monitor grande se aprovecha el espacio, sin que las tablas queden
   larguísimas de lado a lado. */
.main{flex:1; min-width:0; padding:26px 30px; width:100%; max-width:1600px; margin:0 auto}
img,svg,video{max-width:100%; height:auto}
.topbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:22px}
.topbar h1{font-size:22px; margin:0}
.user{color:var(--muted); font-size:14px}

/* Cards / stats */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:16px}
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px}
.stat .label{color:var(--muted); font-size:13px; text-transform:uppercase; letter-spacing:.5px}
.stat .value{font-size:30px; font-weight:800; margin-top:6px}
.stat.brand .value{color:var(--brand)}
.stat.ok .value{color:var(--ok)}
.stat.warn .value{color:var(--warn)}

/* Tables */
.panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
table{width:100%; border-collapse:collapse}
th,td{padding:12px 14px; text-align:left; border-bottom:1px solid var(--line)}
th{color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.5px}
tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--panel-2)}

/* Badges */
.badge{display:inline-block; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:700}
.badge.ok{background:rgba(62,207,142,.15); color:var(--ok)}
.badge.bad{background:rgba(242,85,90,.15); color:var(--bad)}
.badge.warn{background:rgba(245,184,61,.15); color:var(--warn)}
.badge.muted{background:var(--panel-2); color:var(--muted)}

/* Forms */
label{display:block; font-size:13px; color:var(--muted); margin:12px 0 6px; font-weight:600}
input,select,textarea{
  width:100%; padding:10px 12px; background:var(--panel-2); border:1px solid var(--line);
  border-radius:9px; color:var(--txt); font-size:15px; font-family:inherit;
}
input:focus,select:focus{outline:none; border-color:var(--brand)}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.check{display:flex; align-items:center; gap:10px; margin-top:14px}
.check input{width:auto}

/* Buttons */
.btn{
  display:inline-block; padding:10px 18px; border-radius:9px; border:none; cursor:pointer;
  font-weight:700; font-size:14px; font-family:inherit;
  background:var(--panel-2); color:var(--txt);
}
.btn:hover{text-decoration:none; filter:brightness(1.1)}
.btn.primary{background:linear-gradient(90deg,var(--brand),var(--brand-2)); color:#1a1000}
.btn.danger{background:rgba(242,85,90,.15); color:var(--bad)}
.btn.sm{padding:6px 12px; font-size:13px}
.actions{display:flex; gap:8px; align-items:center}
.toolbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; gap:12px}
.search{max-width:340px}

/* Flash */
.flash{background:rgba(62,207,142,.12); border:1px solid rgba(62,207,142,.4); color:var(--ok);
  padding:12px 16px; border-radius:10px; margin-bottom:18px}
.error{background:rgba(242,85,90,.12); border:1px solid rgba(242,85,90,.4); color:var(--bad);
  padding:12px 16px; border-radius:10px; margin-bottom:18px}

/* Login y pantallas sueltas (abrir caja, cierre, corte del turno) */
.login-wrap{display:flex; justify-content:center; min-height:100vh; padding:24px 16px}
/* Centrado vertical con margen automático y no con align-items: así, cuando la
   tarjeta es más alta que la pantalla (el corte del turno lo es), se desborda
   hacia abajo y se puede desplazar, en vez de quedar cortada por arriba. */
.login-wrap > *{margin-top:auto; margin-bottom:auto}
.login{width:100%; max-width:360px}
.login .brand{text-align:center; font-size:28px}
.muted{color:var(--muted)}

/* ===================== Responsivo ===================== */

/* Botón de menú (solo en pantallas chicas) */
.btn-menu{
  display:none; align-items:center; justify-content:center;
  width:42px; height:42px; margin-right:10px; flex-shrink:0;
  background:var(--panel-2); border:1px solid var(--line); border-radius:10px;
  color:var(--txt); font-size:20px; cursor:pointer;
}
.menu-fondo{
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:150;
}
.menu-fondo.visible{ display:block }

/* Monitores grandes: el menú y el contenido respiran un poco más */
@media(min-width:1500px){
  .sidebar{ width:250px }
  .main{ padding:30px 40px }
}

/* Portátiles: la ficha del socio deja de ser de dos columnas antes de apretarse */
@media(max-width:1180px){
  .ficha-cols{ grid-template-columns:1fr !important }
}

/* Tablet vertical: el menú fijo se comía el ancho útil, así que a partir de
   aquí se guarda en el cajón deslizable y el contenido usa toda la pantalla. */
@media(max-width:900px){
  .app{ display:block }
  .sidebar{
    position:fixed; top:0; left:0; bottom:0; width:250px; height:100vh;
    transform:translateX(-100%); transition:transform .22s ease; z-index:200;
  }
  .sidebar.abierta{ transform:translateX(0); box-shadow:8px 0 30px rgba(0,0,0,.5) }
  .btn-menu{ display:inline-flex }
  .main{ max-width:none }
}

/* Tablet: menos columnas y tablas con scroll propio */
@media(max-width:980px){
  .grid{ grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) !important }
  .main{ padding:20px }

  /* Sin esto las columnas se estiran con el contenido y desbordan la página */
  .grid > *, .card{ min-width:0 }

  /* La tabla ancha se desplaza DENTRO de su panel, no de la página */
  .panel{ overflow-x:auto; -webkit-overflow-scrolling:touch }
  .panel table{ min-width:620px }
  /* Tablas sueltas dentro de una tarjeta: que también se desplacen solas */
  .card > table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch }
}

/* Teléfono */
@media(max-width:760px){
  .main{ padding:14px }
  .topbar{ flex-wrap:wrap; gap:8px; align-items:center }
  .topbar h1{ font-size:20px; flex:1; margin:0 }
  .user{ width:100%; display:flex; align-items:center; flex-wrap:wrap; gap:6px; font-size:13px }

  .grid{ grid-template-columns:1fr !important }
  .form-row{ grid-template-columns:1fr }
  .card{ padding:14px }
  .stat .value{ font-size:26px }

  /* Barras de herramientas y filtros: cada cosa en su renglón */
  .toolbar{ flex-direction:column; align-items:stretch; gap:10px }
  .toolbar form{ width:100% }
  .search{ max-width:none }
  .toolbar .actions{ justify-content:flex-start }

  /* Filtros de fecha (panel, reportes, cortes, gastos…): se apilan y ocupan
     todo el ancho. Llevan display:flex en línea, por eso hace falta !important.
     Se excluye .search para que el buscador conserve su botón al lado. */
  form.card,
  form[style*="display:flex"]:not(.search){
    flex-direction:column !important; align-items:stretch !important;
  }
  form[style*="display:flex"]:not(.search) > *{ width:100%; min-width:0 !important }
  form.card > div{ width:100%; margin-left:0 !important }
  form.card input, form.card select, form.card textarea{ width:100% }
  form.card input[type=date]{ min-height:44px }   /* cómodo al tacto */
  form.card .actions{ width:100%; justify-content:flex-start }
  /* Dentro de un filtro, los bloques en fila también se apilan y se alinean
     a la izquierda (el align-items en línea gana, por eso el !important). */
  form.card > div[style*="display:flex"]{
    flex-direction:column !important; align-items:stretch !important; gap:10px !important;
  }
  form.card > div[style*="display:flex"] > *{ width:100%; min-width:0 !important; margin-left:0 !important }

  /* Botones y filtros cómodos con el dedo */
  .btn{ padding:12px 16px }
  .btn.sm{ padding:8px 12px }
  .actions{ flex-wrap:wrap }
  input, select, textarea{ font-size:16px }   /* evita el zoom de iOS */

  .brand-logo img{ max-height:70px }
  .nav a{ padding:12px }
}

/* Pantallas muy angostas */
@media(max-width:420px){
  .reloj-fecha{ display:none }          /* deja solo la hora */
  .topbar h1{ font-size:18px }
  .panel table{ min-width:520px }
}