/* ============================================================
   controlhorario.digital — Sistema de diseño de paneles
   Complementa Bootstrap 5: refina los componentes existentes
   y aporta clases .ch-* para los nuevos rediseños.
   ============================================================ */

:root{
  /* Marca */
  --ch-brand:        #455A64;   /* azul pizarra corporativo */
  --ch-brand-700:    #37474F;
  --ch-brand-900:    #263238;
  --ch-accent:       #BCDECD;   /* verde menta */
  --ch-accent-600:   #8FC9AD;

  /* Tinta y superficies */
  --ch-ink:          #0f172a;
  --ch-ink-soft:     #334155;
  --ch-muted:        #64748b;
  --ch-line:         #e6eaf0;
  --ch-surface:      #ffffff;
  --ch-canvas:       #f5f7fa;

  /* Estados */
  --ch-success:      #16a34a;
  --ch-success-bg:   #dcfce7;
  --ch-warn:         #d97706;
  --ch-warn-bg:      #fef3c7;
  --ch-danger:       #dc2626;
  --ch-danger-bg:    #fee2e2;
  --ch-info:         #2563eb;
  --ch-info-bg:      #dbeafe;

  /* Formas */
  --ch-radius:       14px;
  --ch-radius-sm:    10px;
  --ch-shadow:       0 8px 28px rgba(15,23,42,.06);
  --ch-shadow-sm:    0 2px 10px rgba(15,23,42,.05);
}

/* ---------- Base ---------- */
body{
  background: var(--ch-canvas);
  color: var(--ch-ink);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a{ color: var(--ch-brand); }
a:hover{ color: var(--ch-brand-900); }
h1,h2,h3,h4,h5,h6{ color: var(--ch-ink); font-weight: 700; letter-spacing: -.01em; }

/* ---------- Topbar (parcial header) ---------- */
.ch-topbar{
  background: var(--ch-brand);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 6px 20px rgba(38,50,56,.18);
  position: sticky; top: 0; z-index: 1030;
}
.ch-topbar .navbar-brand{
  display:flex; align-items:center; gap:.55rem;
  font-weight: 800; letter-spacing: -.02em; color:#fff;
}
.ch-topbar .navbar-brand .ch-logo{
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--ch-accent); color: var(--ch-brand-900);
  display:flex; align-items:center; justify-content:center;
  font-weight: 900; font-size: 15px;
}
.ch-topbar .navbar-brand small{
  display:block; font-weight:500; font-size:.66rem;
  color: rgba(255,255,255,.7); margin-top:-3px; letter-spacing:0;
}
.ch-nav .nav-link{
  color: rgba(255,255,255,.82); font-weight: 600; font-size: .93rem;
  border-radius: 999px; padding: .4rem .9rem; transition: background .15s, color .15s;
}
.ch-nav .nav-link:hover{ color:#fff; background: rgba(255,255,255,.1); }
.ch-nav .nav-link.active{ color: var(--ch-brand-900); background: var(--ch-accent); }
.ch-nav .nav-link.ch-exit{ color: rgba(255,255,255,.6); }
.ch-chip-role{
  font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  background: rgba(255,255,255,.14); color:#fff; padding:.25rem .55rem; border-radius:999px;
}

/* ---------- Layout de página ---------- */
.ch-page{ padding: 1.75rem 0 2.5rem; }
.ch-page-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.25rem; }
.ch-page-head h1, .ch-page-head h2, .ch-page-head h3{ margin:0; }
.ch-page-head .ch-sub{ color: var(--ch-muted); font-size:.9rem; margin-top:.15rem; }

/* ---------- Tarjetas (refina .card y añade .ch-card) ---------- */
.card, .ch-card{
  background: var(--ch-surface);
  border: 1px solid var(--ch-line) !important;
  border-radius: var(--ch-radius) !important;
  box-shadow: var(--ch-shadow);
}
.ch-card-head{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding: 1rem 1.15rem; border-bottom: 1px solid var(--ch-line);
}
.ch-card-head h5,.ch-card-head h6{ margin:0; }
.ch-card-body{ padding: 1.15rem; }

/* ---------- KPI ---------- */
.ch-kpi{
  background: var(--ch-surface); border:1px solid var(--ch-line);
  border-radius: var(--ch-radius); padding: 1.1rem 1.2rem; box-shadow: var(--ch-shadow-sm);
  position: relative; overflow:hidden;
}
.ch-kpi::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background: var(--ch-accent);
}
.ch-kpi .ch-kpi-label{ color: var(--ch-muted); font-size:.8rem; font-weight:600; text-transform:uppercase; letter-spacing:.03em; }
.ch-kpi .ch-kpi-value{ font-size: 1.9rem; font-weight: 800; line-height:1.1; margin-top:.2rem; color: var(--ch-ink); }
.ch-kpi .ch-kpi-foot{ font-size:.78rem; color: var(--ch-muted); margin-top:.35rem; }
.ch-kpi.is-brand::before{ background: var(--ch-brand); }
.ch-kpi.is-success::before{ background: var(--ch-success); }
.ch-kpi.is-warn::before{ background: var(--ch-warn); }

/* ---------- Tablas (refina .table y añade .ch-table) ---------- */
.table, .ch-table{ color: var(--ch-ink-soft); margin-bottom:0; }
.table > thead, .ch-table > thead{
  background: #f8fafc;
}
.table > thead th, .ch-table > thead th{
  font-size:.74rem; text-transform:uppercase; letter-spacing:.04em;
  color: var(--ch-muted); font-weight:700; border-bottom:1px solid var(--ch-line);
}
.table > tbody td, .ch-table > tbody td{ vertical-align: middle; border-color: var(--ch-line); }
.table-hover > tbody > tr:hover > *{ background: #f6f9fb; }
.ch-table code{ background:#f1f5f9; padding:.12rem .4rem; border-radius:6px; color: var(--ch-brand-700); }

/* ---------- Botones (refina .btn-dark/.btn-outline-dark y añade .ch-btn) ---------- */
.btn{ border-radius: var(--ch-radius-sm); font-weight:600; }
.btn-dark, .ch-btn-primary{
  background: var(--ch-brand) !important; border-color: var(--ch-brand) !important; color:#fff !important;
}
.btn-dark:hover, .ch-btn-primary:hover{ background: var(--ch-brand-900) !important; border-color: var(--ch-brand-900) !important; }
.btn-outline-dark{ border-color: var(--ch-brand) !important; color: var(--ch-brand) !important; }
.btn-outline-dark:hover{ background: var(--ch-brand) !important; color:#fff !important; }
.ch-btn{
  display:inline-flex; align-items:center; gap:.45rem; cursor:pointer;
  border:1px solid var(--ch-line); background:#fff; color: var(--ch-ink-soft);
  border-radius: var(--ch-radius-sm); padding:.5rem .9rem; font-weight:600; font-size:.9rem; text-decoration:none;
  transition: background .15s, border-color .15s, color .15s;
}
.ch-btn:hover{ background:#f8fafc; color: var(--ch-ink); }
.ch-btn-primary{ border-color: var(--ch-brand); }
.ch-btn-accent{ background: var(--ch-accent); border-color: var(--ch-accent); color: var(--ch-brand-900); }
.ch-btn-accent:hover{ background: var(--ch-accent-600); border-color: var(--ch-accent-600); color: var(--ch-brand-900); }

/* ---------- Badges / pills (refina .badge y añade .ch-badge) ---------- */
.ch-badge{
  display:inline-flex; align-items:center; gap:.3rem;
  font-size:.74rem; font-weight:700; padding:.28rem .6rem; border-radius:999px; line-height:1;
}
.ch-badge.is-success{ background: var(--ch-success-bg); color:#15803d; }
.ch-badge.is-warn{ background: var(--ch-warn-bg); color:#b45309; }
.ch-badge.is-danger{ background: var(--ch-danger-bg); color:#b91c1c; }
.ch-badge.is-info{ background: var(--ch-info-bg); color:#1d4ed8; }
.ch-badge.is-neutral{ background:#eef2f7; color: var(--ch-ink-soft); }
.ch-badge .ch-dot{ width:7px; height:7px; border-radius:50%; background: currentColor; }

/* Distintivos de plan */
.ch-plan{ font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; padding:.28rem .6rem; border-radius:8px; }
.ch-plan.free{ background:#eef2f7; color: var(--ch-ink-soft); }
.ch-plan.pro{  background: var(--ch-accent); color: var(--ch-brand-900); }
.ch-plan.business,.ch-plan.empresa{ background: var(--ch-brand); color:#fff; }

/* ---------- Formularios ---------- */
.form-control, .form-select{ border-radius: var(--ch-radius-sm); border-color: var(--ch-line); }
.form-control:focus, .form-select:focus{
  border-color: var(--ch-accent-600); box-shadow: 0 0 0 .2rem rgba(143,201,173,.35);
}
.form-label{ font-weight:600; color: var(--ch-ink-soft); font-size:.9rem; }

/* ---------- Estado vacío ---------- */
.ch-empty{ text-align:center; color: var(--ch-muted); padding: 2.5rem 1rem; }
.ch-empty .ch-empty-ic{ font-size:2rem; opacity:.5; margin-bottom:.4rem; }

/* ---------- Sello de integridad (cumplimiento legal) ---------- */
.ch-seal{
  display:inline-flex; align-items:center; gap:.5rem;
  background: linear-gradient(180deg, #f0fdf4, #ffffff);
  border:1px solid var(--ch-success-bg); color:#15803d;
  padding:.5rem .85rem; border-radius: 999px; font-weight:700; font-size:.85rem;
}
.ch-seal.is-broken{ background: linear-gradient(180deg,#fef2f2,#fff); border-color: var(--ch-danger-bg); color:#b91c1c; }

/* ---------- Footer ---------- */
.ch-foot{ color: var(--ch-muted); font-size:.85rem; }

/* ============================================================
   Admin shell — barra lateral oscura (estilo panel SaaS)
   Estas clases solo aparecen en el panel admin, no afectan al
   panel de empresa (que sigue con .ch-topbar).
   ============================================================ */
:root{
  --ch-side-bg:   #1b2429;   /* azul pizarra muy oscuro */
  --ch-side-bg2:  #161e22;
  --ch-side-w:    250px;
}
.ch-side{
  position: fixed; inset: 0 auto 0 0; width: var(--ch-side-w);
  background: linear-gradient(180deg, var(--ch-side-bg), var(--ch-side-bg2));
  color: #cdd6dc; display: flex; flex-direction: column;
  padding: 16px 12px; z-index: 1045;
}
.ch-side-brand{
  display:flex; align-items:center; gap:.6rem; color:#fff; text-decoration:none;
  font-weight:800; letter-spacing:-.02em; padding: 6px 8px 18px;
}
.ch-side-brand small{ display:block; font-weight:500; font-size:.64rem; color: rgba(255,255,255,.45); letter-spacing:0; }
.ch-side-brand .ch-logo{
  width:32px; height:32px; border-radius:9px; background: var(--ch-accent);
  color:#14201a; display:flex; align-items:center; justify-content:center; font-weight:900;
}
.ch-side-nav{ display:flex; flex-direction:column; gap:3px; }
.ch-side-link{
  display:flex; align-items:center; gap:.7rem; color: rgba(255,255,255,.72);
  text-decoration:none; padding:.6rem .75rem; border-radius:10px; font-weight:600; font-size:.92rem;
  transition: background .15s, color .15s;
}
.ch-side-link svg{ flex:0 0 auto; opacity:.85; }
.ch-side-link:hover{ background: rgba(255,255,255,.07); color:#fff; }
.ch-side-link.active{ background: rgba(188,222,205,.16); color:#fff; }
.ch-side-link.active svg{ color: var(--ch-accent); opacity:1; }
.ch-side-foot{ margin-top:auto; border-top:1px solid rgba(255,255,255,.08); padding-top:10px; }
.ch-side-foot .ch-side-link{ color: rgba(255,255,255,.55); }

/* Variante CLARA (panel de empresa / cliente) */
.ch-side-light{
  background: #ffffff;
  color: var(--ch-ink-soft);
  border-right: 1px solid var(--ch-line);
  box-shadow: var(--ch-shadow-sm);
}
.ch-side-light .ch-side-brand{ color: var(--ch-ink); }
.ch-side-light .ch-side-brand small{ color: var(--ch-muted); }
.ch-side-light .ch-side-link{ color: var(--ch-ink-soft); }
.ch-side-light .ch-side-link:hover{ background: #f1f5f9; color: var(--ch-ink); }
.ch-side-light .ch-side-link.active{ background: var(--ch-accent); color: var(--ch-brand-900); }
.ch-side-light .ch-side-link.active svg{ color: var(--ch-brand); opacity:1; }
.ch-side-light .ch-side-foot{ border-top-color: var(--ch-line); }
.ch-side-light .ch-side-foot .ch-side-link{ color: var(--ch-muted); }

.ch-main{ margin-left: var(--ch-side-w); min-height: 100vh; display:flex; flex-direction:column; }
.ch-topthin{
  position: sticky; top:0; z-index:1030; background:#fff; border-bottom:1px solid var(--ch-line);
  display:flex; align-items:center; gap:.8rem; padding:.7rem 1.5rem;
}
.ch-topthin .ch-burger{ display:none; font-size:1.35rem; line-height:1; cursor:pointer; color:var(--ch-ink-soft); }
.ch-topthin .ch-crumb{ color: var(--ch-muted); font-weight:600; font-size:.9rem; }
.ch-page-wrap{ padding: 0 1.5rem; flex:1; }
.ch-page-wrap .container{ max-width: 1180px; }
#ch-side-toggle{ position:absolute; opacity:0; pointer-events:none; }

@media (max-width: 991.98px){
  .ch-side{ transform: translateX(-100%); transition: transform .22s ease; box-shadow: 0 0 40px rgba(0,0,0,.3); }
  #ch-side-toggle:checked ~ .ch-side{ transform: translateX(0); }
  .ch-main{ margin-left: 0; }
  .ch-topthin .ch-burger{ display:inline-block; }
}

/* ---------- Impresión (PDF de informes): oculta el shell ---------- */
@media print {
  .ch-side, .ch-topthin, .ch-burger, .ch-topbar { display: none !important; }
  .ch-main { margin-left: 0 !important; }
  .ch-page-wrap { padding: 0 !important; }
  body { background: #fff !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 575.98px){
  .ch-kpi .ch-kpi-value{ font-size:1.55rem; }
  .ch-page-head{ align-items:flex-start; }
}