/* ============================================================
   Cupones de Tiempo - Estilos corporativos Alcogal
   Basado en el sistema de diseño de las apps internas de RRHH
   ============================================================ */

/* ── Reset & Base ─────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:'Montserrat',system-ui,sans-serif;font-size:13px;
  background:#f0f2f6;color:#1e293b;min-height:100vh;
  display:flex;flex-direction:column;}
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:99px;}
::-webkit-scrollbar-thumb:hover{background:#94a3b8;}

/* ── Header ───────────────────────────────────────────────── */
.app-header{
  background:#15233f;color:#fff;height:62px;
  display:flex;align-items:center;padding:0 20px;gap:14px;
  flex-shrink:0;z-index:100;border-bottom:1px solid rgba(0,0,0,0.15);
  box-shadow:0 1px 3px rgba(0,0,0,0.2),0 4px 16px rgba(0,0,0,0.12);}
.app-header .logo-img{height:46px;object-fit:contain;}
.app-header .logo-dot{
  width:7px;height:7px;border-radius:50%;
  background:linear-gradient(135deg,#38bdf8,#6366f1);flex-shrink:0;}
.brand{display:flex;flex-direction:column;justify-content:center;gap:2px;flex:1;}
.brand .titulo{font-weight:700;font-size:15px;letter-spacing:.3px;white-space:nowrap;display:flex;align-items:center;gap:8px;}
.brand .subtitle{font-size:12px;color:#fff;font-weight:600;opacity:.85;letter-spacing:.1px;}
.header-user{display:flex;align-items:center;gap:10px;font-size:12px;}
.header-user .avatar{
  width:34px;height:34px;border-radius:50%;
  background:linear-gradient(135deg,#3b82f6,#6366f1) center/cover no-repeat;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:12px;color:#fff;flex-shrink:0;
  box-shadow:0 0 0 2px rgba(255,255,255,0.25);
  overflow:hidden;}
.header-btn{
  background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.25);
  color:#fff;padding:5px 12px;border-radius:6px;cursor:pointer;
  font-size:11.5px;font-family:inherit;font-weight:500;transition:all .15s;}
.header-btn:hover{background:rgba(255,255,255,0.2);border-color:rgba(255,255,255,0.4);}

/* ── Login ────────────────────────────────────────────────── */
.login-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:#f0f2f6;padding:20px;}
.login-card{
  background:#fff;border-radius:20px;width:380px;max-width:100%;
  box-shadow:0 24px 80px rgba(0,0,0,0.22),0 0 0 1px rgba(0,0,0,0.06);
  overflow:hidden;}
.login-header{
  background:#15233f;padding:28px 32px 24px;text-align:center;}
.login-header img{height:46px;object-fit:contain;display:block;margin:0 auto;}
.login-body{
  padding:36px 30px 32px;display:flex;flex-direction:column;
  align-items:center;gap:14px;text-align:center;}
.login-icon{
  font-size:56px;line-height:1;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,0.12));}
.login-titulo h1{
  font-size:19px;font-weight:800;color:#15233f;
  letter-spacing:.2px;margin-bottom:3px;line-height:1.25;}
.login-titulo p{
  font-size:12px;font-weight:600;color:#64748b;
  letter-spacing:.8px;text-transform:uppercase;}
.login-ms-btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:12px;border:1.5px solid #e2e8f0;border-radius:10px;
  background:#fff;cursor:pointer;font-size:13px;font-weight:600;
  color:#1e293b;transition:all .15s;font-family:inherit;}
.login-ms-btn:hover{background:#f8fafc;border-color:#3b82f6;box-shadow:0 2px 8px rgba(59,130,246,0.15);}
.login-ms-btn:disabled{opacity:.5;cursor:not-allowed;}
.login-nota{font-size:11px;color:#94a3b8;text-align:center;line-height:1.6;}

/* ── Layout con menú lateral ─────────────────────────────── */
.app-body{display:flex;flex:1;align-items:stretch;min-height:0;}
main{flex:1;width:100%;padding:22px 28px;overflow-y:auto;}

/* ── Sidebar (menú izquierdo) ─────────────────────────────── */
.sidebar{
  width:262px;background:#15233f;flex-shrink:0;
  padding:6px 0 20px;overflow-y:auto;
  border-right:1px solid rgba(0,0,0,0.15);}
.sidebar-title{
  color:rgba(255,255,255,0.6);font-size:10px;font-weight:700;
  letter-spacing:1.2px;padding:14px 14px 8px;text-transform:uppercase;}
/* Módulo (carpeta madre del portal) */
.tree-module{border-bottom:1px solid rgba(255,255,255,0.15);}
.tree-module-header{
  display:flex;align-items:center;gap:8px;padding:12px;
  cursor:pointer;user-select:none;background:rgba(255,255,255,0.05);
  transition:all .15s;}
.tree-module-header:hover{background:rgba(255,255,255,0.12);}
.tree-module-label{
  font-weight:700;font-size:11.5px;color:#fff;flex:1;
  letter-spacing:.8px;text-transform:uppercase;}
.tree-module-children.cerrado{display:none;}
.tree-module-children .tree-group-header{padding-left:22px;}
.tree-module-children .tree-item{padding-left:44px;}

.tree-group{border-bottom:1px solid rgba(255,255,255,0.08);}
.tree-group-header{
  display:flex;align-items:center;gap:8px;padding:10px 12px;
  cursor:pointer;user-select:none;border-left:3px solid transparent;
  transition:all .15s;}
.tree-group-header:hover{background:rgba(255,255,255,0.08);}
.tree-group-header.active-group{border-left-color:#1aafba;background:rgba(26,175,186,0.15);}
.tree-group-icon{width:18px;flex-shrink:0;font-size:14px;}
.tree-group-label{font-weight:600;font-size:11.5px;color:#fff;flex:1;}
.tree-group-header.active-group .tree-group-label{color:#7de8ef;font-weight:700;}
.tree-chevron{color:rgba(255,255,255,0.4);transition:transform .15s;flex-shrink:0;font-size:14px;}
.tree-chevron.open{transform:rotate(90deg);}
.tree-children{background:rgba(0,0,0,0.15);}
.tree-children.cerrado{display:none;}
.tree-item{
  display:flex;align-items:center;gap:8px;
  padding:7px 12px 7px 32px;cursor:pointer;
  border-left:3px solid transparent;transition:all .12s;}
.tree-item:hover{background:rgba(255,255,255,0.08);}
.tree-item.active{background:rgba(26,175,186,0.2);border-left-color:#1aafba;}
.tree-item-dot{
  width:4px;height:4px;border-radius:50%;
  background:rgba(255,255,255,0.35);flex-shrink:0;}
.tree-item.active .tree-item-dot{background:#1aafba;}
.tree-item-label{font-size:11.5px;color:rgba(255,255,255,0.75);line-height:1.4;}
.tree-item.active .tree-item-label{color:#7de8ef;font-weight:600;}

/* ── Tarjetas (cards) ─────────────────────────────────────── */
.tarjeta{
  background:#fff;border-radius:12px;border:1px solid #e2e8f0;
  box-shadow:0 1px 3px rgba(0,0,0,0.05),0 4px 12px rgba(0,0,0,0.04);
  padding:20px 22px;margin-bottom:18px;}
.tarjeta h3{
  background:#15233f;color:#fff;font-weight:600;font-size:13px;
  letter-spacing:.2px;display:flex;align-items:center;gap:8px;
  margin:-20px -22px 16px;padding:13px 18px;border-radius:12px 12px 0 0;
  border-bottom:1px solid rgba(0,0,0,0.1);}
.tarjeta h3::before{
  content:'';width:7px;height:7px;border-radius:50%;
  background:linear-gradient(135deg,#38bdf8,#6366f1);flex-shrink:0;}
.fila-tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:18px;}
.stat{
  background:#fff;border-radius:12px;border:1px solid #e2e8f0;
  box-shadow:0 1px 3px rgba(0,0,0,0.05);padding:16px;text-align:center;}
.stat .num{font-size:22px;font-weight:700;color:#15233f;}
.stat div:last-child{font-size:11px;font-weight:600;color:#94a3b8;text-transform:uppercase;letter-spacing:.8px;margin-top:4px;}
.aviso{background:#fffbeb;border:1px solid #fde68a;color:#92400e;border-radius:8px;padding:12px 16px;}

/* ── Formularios ──────────────────────────────────────────── */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px 20px;margin-bottom:14px;align-items:end;}
label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:600;color:#475569;letter-spacing:.1px;}
input,select{
  width:100%;padding:8px 11px;font-size:12.5px;
  border:1.5px solid #e2e8f0;border-radius:8px;background:#fff;
  color:#1e293b;transition:border-color .15s,box-shadow .15s;
  font-family:inherit;font-weight:400;line-height:1.4;}
input:focus,select:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,0.12);}
input:disabled,select:disabled{background:#f8fafc;color:#94a3b8;cursor:default;}

/* ── Botones ──────────────────────────────────────────────── */
button{cursor:pointer;border-radius:8px;font-size:12.5px;font-family:inherit;transition:all .15s;}
button:active{transform:translateY(1px);}
.btn-primario{
  display:inline-flex;align-items:center;gap:6px;padding:8px 16px;
  border:none;background:#2563eb;color:#fff;font-weight:600;letter-spacing:.1px;
  box-shadow:0 1px 3px rgba(37,99,235,0.3);}
.btn-primario:hover{background:#1d4ed8;box-shadow:0 2px 8px rgba(37,99,235,0.4);}
.btn-primario:disabled{background:#93c5fd;box-shadow:none;cursor:not-allowed;transform:none;}
.btn-secundario{
  background:#f8fafc;color:#475569;border:1.5px solid #e2e8f0;
  padding:7px 14px;font-weight:500;}
.btn-secundario:hover{background:#f1f5f9;border-color:#cbd5e1;color:#1e293b;}
.btn-mini{
  background:#f8fafc;border:1.5px solid #e2e8f0;padding:5px 11px;
  font-size:11.5px;font-weight:600;color:#475569;border-radius:6px;}
.btn-mini:hover{background:#eff6ff;border-color:#93c5fd;color:#2563eb;}
.btn-mini.peligro{color:#dc2626;border-color:#fecaca;background:#fff;}
.btn-mini.peligro:hover{background:#fef2f2;border-color:#f87171;}

/* ── Tablas ───────────────────────────────────────────────── */
table{width:100%;border-collapse:collapse;font-size:12px;}
th{
  background:#15233f;color:#fff;padding:9px 12px;text-align:left;
  font-weight:600;font-size:11px;letter-spacing:.5px;text-transform:uppercase;}
th:first-child{border-radius:8px 0 0 0;}
th:last-child{border-radius:0 8px 0 0;}
td{padding:8px 12px;border-bottom:1px solid #f1f5f9;color:#334155;}
tr:last-child td{border-bottom:none;}
tbody tr:hover td{background:#f8fafc;}
.scroll-x{overflow-x:auto;}
.th-sort{cursor:pointer;user-select:none;white-space:nowrap;}
.th-sort:hover{background:#1d3050;}

/* ── Badges ───────────────────────────────────────────────── */
.badge{display:inline-block;padding:2px 9px;border-radius:99px;font-size:10.5px;font-weight:600;white-space:nowrap;}
.badge.ok{background:#dcfce7;color:#166534;}
.badge.mal{background:#fee2e2;color:#991b1b;}
.badge.pend{background:#fef9c3;color:#854d0e;}
.badge.neutro{background:#e2e8f0;color:#475569;}

/* ── Modal ────────────────────────────────────────────────── */
.modal-overlay{
  position:fixed;inset:0;background:rgba(15,23,42,.55);
  display:flex;align-items:center;justify-content:center;
  z-index:1000;padding:20px;}
.modal-card{
  background:#fff;border-radius:14px;max-width:1050px;width:100%;
  max-height:88vh;overflow-y:auto;padding:24px 28px;
  box-shadow:0 24px 80px rgba(0,0,0,.35);
  animation:slideIn .18s ease;}
.celda-acciones{white-space:nowrap;display:flex;gap:6px;align-items:center;}

/* ── Paginación ───────────────────────────────────────────── */
.paginacion{display:flex;gap:10px;align-items:center;margin-top:12px;flex-wrap:wrap;}
.paginacion label{flex-direction:row;align-items:center;gap:6px;font-weight:400;}

/* ── Alertas / validación ─────────────────────────────────── */
.ok{
  background:#f0fdf4;border:1px solid #bbf7d0;color:#166534;
  padding:9px 14px;border-radius:8px;font-size:12px;margin:6px 0;}
.error{
  background:#fef2f2;border:1px solid #fecaca;color:#991b1b;
  padding:9px 14px;border-radius:8px;font-size:12px;margin:6px 0;}
.nota{font-size:11.5px;color:#64748b;margin-top:5px;line-height:1.5;}

/* ── Solicitudes (cards de aprobación) ────────────────────── */
.solicitud-card{
  display:flex;justify-content:space-between;gap:14px;
  border:1.5px solid #e2e8f0;border-radius:10px;padding:13px 16px;
  margin-bottom:10px;flex-wrap:wrap;background:#fff;transition:border-color .12s;}
.solicitud-card:hover{border-color:#cbd5e1;}
.acciones{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.acciones input{width:auto;min-width:180px;}
.sub-form{
  background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:10px;
  padding:16px;margin:14px 0;}

/* ── Tarjetas de cupones ──────────────────────────────────── */
.cupones-hint{font-size:12px;color:#64748b;margin-bottom:12px;}
.cupones-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
  gap:10px;margin-bottom:14px;}
.cupon-card{
  border:2px solid #e2e8f0;border-radius:12px;padding:14px 12px;
  text-align:center;cursor:pointer;background:#fff;transition:all .18s;
  display:flex;flex-direction:column;align-items:center;gap:6px;}
.cupon-card:hover{border-color:#93c5fd;background:#eff6ff;transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(59,130,246,0.12);}
.cupon-card.activo{border-color:#2563eb;background:#eff6ff;
  box-shadow:0 0 0 3px rgba(37,99,235,0.18);transform:translateY(-2px);}
.cupon-horas{font-size:24px;font-weight:700;color:#15233f;line-height:1;}
.cupon-nombre{font-size:11px;font-weight:600;color:#475569;letter-spacing:.3px;}
.cupon-etiqueta{
  font-size:10px;font-weight:600;background:#dcfce7;color:#166534;
  padding:2px 8px;border-radius:99px;letter-spacing:.3px;}
.cupon-card.activo .cupon-etiqueta{background:#dbeafe;color:#1d4ed8;}

/* ── Panel de fecha/hora (expandible) ────────────────────── */
.cupon-panel{
  border:2px solid #2563eb;border-radius:12px;padding:16px 18px;
  background:#f8faff;margin-top:4px;
  animation:panelSlide .2s cubic-bezier(.34,1.56,.64,1);}
@keyframes panelSlide{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:translateY(0);}}
.cupon-panel-titulo{
  font-weight:700;font-size:13px;color:#1d4ed8;margin-bottom:14px;
  display:flex;align-items:center;gap:8px;}
.cupon-panel-titulo::before{
  content:'';width:8px;height:8px;border-radius:50%;
  background:linear-gradient(135deg,#38bdf8,#2563eb);flex-shrink:0;}

/* ── Reglas ───────────────────────────────────────────────── */
.reglas{padding-left:22px;font-size:12.5px;line-height:1.8;color:#334155;}

/* ── Carga / spinner ──────────────────────────────────────── */
.centro{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:60px 20px;}
.spinner{
  width:34px;height:34px;border:3px solid rgba(59,130,246,0.2);
  border-top-color:#3b82f6;border-radius:50%;
  animation:spin .65s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ── Notificaciones (toast) ───────────────────────────────── */
.notif{position:fixed;top:70px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:8px;}
.notif-item{
  position:relative;background:#fff;border-radius:10px;border-left:4px solid #3b82f6;
  padding:12px 32px 12px 16px;
  box-shadow:0 4px 6px rgba(0,0,0,0.07),0 10px 24px rgba(0,0,0,0.1);
  min-width:270px;max-width:350px;font-size:12.5px;
  animation:slideIn .22s cubic-bezier(.34,1.56,.64,1);}
.notif-item.success{border-left-color:#059669;}
.notif-item.error{border-left-color:#dc2626;}
@keyframes slideIn{from{transform:translateX(40px);opacity:0;}to{transform:translateX(0);opacity:1;}}

footer{text-align:center;padding:14px;font-size:11.5px;color:#94a3b8;}

@media (max-width:760px){
  .app-header{height:auto;padding:10px 14px;flex-wrap:wrap;}
  .solicitud-card{flex-direction:column;}
  main{padding:14px;}
  .app-body{flex-direction:column;}
  .sidebar{width:100%;padding-bottom:4px;}
}