/* =========================================================================================
   STILTEX APP — HOJA DE ESTILOS
   Paleta, tipografía y estilos preservados exactamente del diseño original.
   ========================================================================================= */
:root{
  --bg:#0a0e14; --bg-panel:#0f1621; --bg-panel-2:#131b28; --line:#1e2a3a;
  --cyan:#22e8ff; --cyan-dim:#0f7f92; --gold:#d4af37; --gold-soft:#e9cd7a;
  --silver1:#f4f6f8; --silver2:#aab4bf; --text:#dbe4ec; --text-dim:#7c8a99;
  --danger:#ff5d6c; --ok:#3fe3a6;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:'Rajdhani',sans-serif;}
body{min-height:100vh; padding-bottom:60px;
  background:radial-gradient(circle at 15% 0%, rgba(34,232,255,0.07), transparent 45%),
  radial-gradient(circle at 100% 20%, rgba(212,175,55,0.06), transparent 40%), var(--bg);}
.wrap{max-width:760px; margin:0 auto; padding:22px 16px 0;}
header.top{display:flex; align-items:center; gap:12px; padding:6px 4px 18px;}
.hexlogo{width:46px; height:46px; flex-shrink:0;}
.brandtext{flex:1; min-width:0;}
.brandtext .name{font-family:'Orbitron',sans-serif; font-weight:900; font-size:22px; letter-spacing:2px;
  background:linear-gradient(180deg,var(--silver1),var(--silver2) 60%, #7f8a95);
  -webkit-background-clip:text; background-clip:text; color:transparent;}
.brandtext .sub{font-size:12.5px; letter-spacing:2.5px; color:var(--gold-soft); text-transform:uppercase; margin-top:2px;}

.lang-toggle{margin-left:auto; display:flex; border:1px solid var(--line); border-radius:20px; overflow:hidden; flex-shrink:0; background:#0c121b;}
.lang-seg{background:transparent; border:none; color:var(--text-dim); font-family:'Orbitron',sans-serif; font-size:11px;
  letter-spacing:1px; padding:9px 13px; cursor:pointer;}
.lang-seg.active{background:linear-gradient(135deg,var(--gold-soft),var(--gold)); color:#241a02; font-weight:700;}

.clockbox{background:linear-gradient(180deg,var(--bg-panel),var(--bg-panel-2)); border:1px solid var(--line);
  border-radius:14px; padding:16px; margin-bottom:16px; text-align:center; box-shadow:0 8px 24px rgba(0,0,0,0.35);}
.clockbox .hora{font-family:'Orbitron',sans-serif; font-size:32px; font-weight:700; color:var(--cyan); letter-spacing:2px; text-shadow:0 0 14px rgba(34,232,255,0.35);}
.clockbox .fecha{font-size:14px; color:var(--text-dim); margin-top:4px; text-transform:capitalize; letter-spacing:0.5px;}

.trialbanner{background:linear-gradient(135deg, rgba(212,175,55,0.15), rgba(34,232,255,0.06)); border:1px solid var(--gold);
  border-radius:10px; padding:10px 14px; margin-bottom:16px; font-size:13.5px; text-align:center; color:var(--gold-soft);}
.trialbanner b{color:var(--silver1);}

.card{background:linear-gradient(180deg,var(--bg-panel),var(--bg-panel-2)); border:1px solid var(--line);
  border-radius:14px; padding:18px; margin-bottom:16px; box-shadow:0 8px 24px rgba(0,0,0,0.35);}
.card h2{font-family:'Orbitron',sans-serif; font-size:13px; letter-spacing:2px; text-transform:uppercase;
  color:var(--cyan); margin:0 0 14px; display:flex; align-items:center; gap:8px;}
.card h2::before{content:''; width:6px; height:6px; background:var(--cyan); box-shadow:0 0 8px var(--cyan); transform:rotate(45deg);}
.grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.field{display:flex; flex-direction:column; gap:5px; margin-bottom:10px;}
.field label{font-size:12px; color:var(--text-dim);}
.field input, .field select{background:#0c121b; border:1px solid var(--line); color:var(--text); padding:9px 10px;
  border-radius:8px; font-family:'Rajdhani',sans-serif; font-size:15px; font-weight:500;}
.field input:focus, .field select:focus{outline:none; border-color:var(--cyan); box-shadow:0 0 0 2px rgba(34,232,255,0.15);}
.btn{border:none; border-radius:9px; padding:11px 16px; font-family:'Rajdhani',sans-serif; font-weight:700;
  font-size:14.5px; letter-spacing:0.6px; cursor:pointer; text-transform:uppercase;}
.btn:active{transform:scale(0.97);}
.btn-primary{background:linear-gradient(135deg,var(--cyan),var(--cyan-dim)); color:#04161a;}
.btn-gold{background:linear-gradient(135deg,var(--gold-soft),var(--gold)); color:#241a02;}
.btn-ghost{background:transparent; border:1px solid var(--line); color:var(--text-dim);}
.btn-danger{background:transparent; border:1px solid var(--danger); color:var(--danger);}
.btn-ok{background:linear-gradient(135deg,#59f0bc,var(--ok)); color:#04241a;}
.btn-red{background:linear-gradient(135deg,#ff8a95,var(--danger)); color:#2a0509;}
/* Almuerzo: misma familia de color (lila claro = inicio, morado oscuro = fin) */
.btn-lila{background:linear-gradient(135deg,#e2c9ff,#b98cf5); color:#2b0f52;}
.btn-morado{background:linear-gradient(135deg,#8a5ae6,#5b2bb5); color:#ffffff;}
.btn-block{width:100%;}
.btn-sm{padding:7px 10px; font-size:11.5px;}
.btn:disabled{opacity:0.55; cursor:not-allowed;}
.row-btns{display:flex; gap:10px; margin-top:4px; flex-wrap:wrap;}
.punch-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px;}
.punch-grid .btn{padding:16px 10px; font-size:14px;}
.holiday-row{display:flex; align-items:center; gap:8px; margin-bottom:14px; font-size:14px; color:var(--text-dim);}
.holiday-row input{width:18px; height:18px;}
.marcas-hoy{background:#0c121b; border:1px solid var(--line); border-radius:10px; padding:10px 12px; font-size:13px; color:var(--text-dim);}
.marcas-hoy .m-item{display:flex; justify-content:space-between; padding:4px 0; border-bottom:1px dashed var(--line);}
.marcas-hoy .m-item:last-child{border-bottom:none;}
.marcas-hoy .m-item span.tipo{color:var(--silver1);}
.marcas-hoy .m-item span.hora{color:var(--cyan); font-family:'Orbitron',sans-serif; font-size:12px;}

.summary-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.stat{background:#0c121b; border:1px solid var(--line); border-radius:10px; padding:12px;}
.stat .label{font-size:11px; letter-spacing:1px; color:var(--text-dim); text-transform:uppercase;}
.stat .value{font-family:'Orbitron',sans-serif; font-size:19px; font-weight:700; color:var(--silver1); margin-top:4px;}
.stat.total{grid-column:1/-1; background:linear-gradient(135deg, rgba(212,175,55,0.12), rgba(34,232,255,0.06)); display:flex; justify-content:space-between; align-items:center;}
.stat.total .value{color:var(--gold-soft); font-size:26px;}
.eye-btn{background:transparent; border:1px solid var(--line); border-radius:50%; width:38px; height:38px; font-size:17px; cursor:pointer; color:var(--text);}
.filterbar{display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap;}
.chip{padding:7px 13px; border-radius:20px; border:1px solid var(--line); font-size:13px; color:var(--text-dim);
  cursor:pointer; background:transparent;}
.chip.active{border-color:var(--cyan); color:var(--cyan); background:rgba(34,232,255,0.08);}

.entry{background:#0c121b; border:1px solid var(--line); border-left:3px solid var(--cyan); border-radius:8px;
  padding:12px 14px; margin-bottom:10px;}
.entry.doble{border-left-color:var(--gold);}
.entry .erow{display:flex; justify-content:space-between; align-items:flex-start;}
.entry .fecha{font-weight:700; font-size:15px; color:var(--silver1);}
.entry .dia{font-size:12px; color:var(--text-dim); text-transform:uppercase; letter-spacing:1px;}
.entry .horario{font-size:13px; color:var(--text-dim); margin-top:6px; line-height:1.5;}
.entry .pago{font-family:'Orbitron',sans-serif; font-size:16px; color:var(--ok); font-weight:700;}
.entry .tag{font-size:10.5px; padding:2px 8px; border-radius:10px; letter-spacing:1px; text-transform:uppercase;}
.entry .tag.reg{background:rgba(34,232,255,0.1); color:var(--cyan);}
.entry .tag.dob{background:rgba(212,175,55,0.15); color:var(--gold-soft);}
.entry .actions{display:flex; gap:8px; margin-top:10px;}
.entry .actions button{font-size:11.5px; padding:6px 10px;}
.empty{text-align:center; padding:30px 10px; color:var(--text-dim); font-size:14px;}
.toast{position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:#0c121b;
  border:1px solid var(--cyan); color:var(--text); padding:10px 18px; border-radius:20px; font-size:13.5px;
  z-index:999; opacity:0; transition:opacity .25s ease; pointer-events:none; max-width:90vw; text-align:center;}
.toast.show{opacity:1;}
details summary{cursor:pointer; list-style:none;}
details summary::-webkit-details-marker{display:none;}
.toggle-row{display:flex; justify-content:space-between; align-items:center;}
.caret{transition:transform .2s ease; color:var(--cyan); font-size:12px;}
details[open] .caret{transform:rotate(90deg);}
@media(max-width:420px){ .grid{grid-template-columns:1fr;} .punch-grid{grid-template-columns:1fr 1fr;} }

/* Modal edición */
.modal-overlay{position:fixed; inset:0; background:rgba(4,6,10,0.82); display:none; align-items:center; justify-content:center; z-index:200; padding:16px;}
.modal-overlay.show{display:flex;}
.modal-box{background:var(--bg-panel); border:1px solid var(--line); border-radius:14px; padding:20px; max-width:420px; width:100%; max-height:85vh; overflow-y:auto;}
.modal-box h3{font-family:'Orbitron',sans-serif; font-size:14px; color:var(--cyan); margin:0 0 14px; text-transform:uppercase; letter-spacing:1px;}
.marca-edit-row{display:flex; align-items:center; gap:8px; margin-bottom:8px; background:#0c121b; border:1px solid var(--line); border-radius:8px; padding:8px 10px;}
.marca-edit-row select, .marca-edit-row input{background:#0a0e14; border:1px solid var(--line); color:var(--text); padding:6px 8px; border-radius:6px; font-family:'Rajdhani',sans-serif; font-size:13px;}
.marca-edit-row select{flex:1.3;}
.marca-edit-row input[type="time"]{flex:1;}
/* Listas de fecha y hora (funcionan en todos los telefonos) */
.sel-row{display:flex; gap:6px;}
.sel-row select{flex:1; min-width:0;}
.marca-edit-row{flex-wrap:wrap;}
.marca-edit-row .me-hora-box{display:flex; gap:4px; flex:2; min-width:170px;}
.marca-edit-row .me-hora-box select{flex:1; min-width:0; padding:6px 4px;}
.marca-edit-row button{background:transparent; border:none; color:var(--danger); font-size:16px; cursor:pointer; padding:2px 6px;}

/* Lock screen */
#lockScreen{position:fixed; inset:0; background:var(--bg); z-index:500; display:none; align-items:center; justify-content:center; flex-direction:column; text-align:center; padding:24px;}
#lockScreen.show{display:flex;}
#lockScreen .hexlogo{width:70px; height:70px; margin-bottom:16px;}
#lockScreen h1{font-family:'Orbitron',sans-serif; font-size:20px; color:var(--gold-soft); letter-spacing:2px; margin:0 0 6px;}
#lockScreen p{color:var(--text-dim); font-size:14px; max-width:340px; margin:0 0 20px; line-height:1.5;}
#lockScreen .card{width:100%; max-width:360px; text-align:left;}

#splashScreen{position:fixed; inset:0; background:#0a0e14; z-index:9999; display:flex; align-items:center; justify-content:center; transition:opacity .4s ease;}
#splashScreen svg{width:90px; height:90px;}

/* Auth gate (login / registro) — mismo lenguaje visual que el resto de la app */
#authScreen{position:fixed; inset:0; background:var(--bg); z-index:600; display:none; align-items:center; justify-content:center; flex-direction:column; text-align:center; padding:24px;}
#authScreen.show{display:flex;}
#authScreen .hexlogo{width:64px; height:64px; margin-bottom:14px;}
#authScreen h1{font-family:'Orbitron',sans-serif; font-size:18px; color:var(--gold-soft); letter-spacing:2px; margin:0 0 6px;}
#authScreen p{color:var(--text-dim); font-size:13.5px; max-width:320px; margin:0 0 16px; line-height:1.5;}
#authScreen .card{width:100%; max-width:360px; text-align:left;}
.auth-error{color:var(--danger); font-size:12.5px; margin-top:8px; min-height:16px;}
.auth-switch{text-align:center; font-size:12.5px; color:var(--text-dim); margin-top:12px;}
.auth-switch a{color:var(--cyan); cursor:pointer; text-decoration:underline;}
.spinner{display:inline-block; width:14px; height:14px; border:2px solid rgba(255,255,255,0.25); border-top-color:currentColor; border-radius:50%; animation:spin .7s linear infinite; vertical-align:middle; margin-right:6px;}
@keyframes spin{to{transform:rotate(360deg);}}

@media print{
  body *{visibility:hidden;}
  #printArea, #printArea *{visibility:visible;}
  #printArea{display:block !important; position:absolute; top:0; left:0; width:100%; padding:20px; background:#fff; color:#000; font-family:Arial, sans-serif;}
  #printArea h1{font-size:18px; margin-bottom:4px;}
  #printArea table{width:100%; border-collapse:collapse; margin-top:12px; font-size:12px;}
  #printArea th, #printArea td{border:1px solid #999; padding:5px 7px; text-align:left;}
  #printArea th{background:#eee;}
}