/* =============================
   MosaicoAPP – CSS global unificado
   Estructura:
   1) Variables y resets
   2) Utilidades (toolbar, helpers)
   3) Layout principal (sidebar, content, topbar)
   4) Componentes base (cards, tablas, modales, badges)
   5) Controles (inputs, selects, textareas)
   6) Botones
   7) Módulos (Kanban, Users, Wizard, Global Search)
   8) Espaciados & grids
   9) Modo oscuro
   ============================= */

/* 1) Variables y resets */
:root{
  /* Paleta base */
  --radius: 18px;
  --gap: 16px;
  --primary: #7ad1b3;
  --secondary: #a6c8ff;
  --accent: #ffd1a6;
  --bg: #f7f9fc;
  --text: #1f2937;

  /* Controles/UI */
  --ring: #6366f1;
  --border: #e5e7eb;
  --surface: #ffffff;
  --muted: #6b7280;
  --topbar-gap: 12px;
  --topbar-height: 88px;
  --sidebar-pill-expanded-gap: 84px;
  --sidebar-pill-collapsed-gap: calc(56px + var(--gap));
  --sidebar-vertical-offset: calc(var(--topbar-height) + 4px);
}
@media (max-width: 768px){
  :root{
    --topbar-height: 96px;
    --sidebar-pill-expanded-gap: 72px;
    --sidebar-vertical-offset: calc(var(--topbar-height) + 20px);
  }
}
*{ box-sizing:border-box }
html,body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu;
  transition:background-color .4s ease,color .4s ease;
}

@keyframes pageFadeSlide{
  from{
    opacity:0;
    transform:translateY(18px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}
@keyframes loaderSpin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}
.page-animate{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.page-animate > *{
  opacity:0;
  animation: pageFadeSlide .55s ease forwards;
}
.page-animate > *:nth-child(1){ animation-delay:0s; }
.page-animate > *:nth-child(2){ animation-delay:.05s; }
.page-animate > *:nth-child(3){ animation-delay:.1s; }
.page-animate > *:nth-child(4){ animation-delay:.15s; }
.page-animate > *:nth-child(5){ animation-delay:.2s; }
.page-animate > *:nth-child(6){ animation-delay:.25s; }
a{ color:inherit; text-decoration:none }

/* 2) Utilidades */
.toolbar{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.ml-auto{ margin-left:auto; }
.max-200{ max-width:200px; }
.w100{ width:100%; }
.pre{ white-space:pre-wrap }

/* 3) Layout principal */
.sidebar{ position:fixed; left:16px; top:var(--sidebar-vertical-offset); bottom:16px; width:180px; background:#fff; border-radius:var(--radius); box-shadow:0 6px 18px rgba(15,23,42,.12); padding:14px; transition:width .2s, background .4s ease, color .4s ease, box-shadow .4s ease; display:flex; flex-direction:column }.sidebar.collapsed{ width:72px }
.sidebar .logo-row{ display:flex; align-items:center; gap:8px; margin-bottom:12px }
.sidebar .logo{ width:28px; height:28px }
.sidebar .brand{ font-weight:700 }
.sidebar .nav-item{ display:flex; align-items:center; gap:10px; padding:10px; border-radius:12px; margin:6px 0 }
.sidebar .nav-item:hover{ background:#f2f4f8 }
.sidebar .nav-item.active{ background:var(--secondary); color:#0a2a57 }
/* Cuerpo de navegación ocupa el alto disponible y pie fijo abajo */
.sidebar .nav-list{ flex:1 1 auto; display:flex; flex-direction:column; gap:6px; padding:8px; overflow:auto }
.sidebar .sidebar-foot{ margin-top:auto; padding:10px; display:flex; justify-content:flex-end }
.sidebar .nav-ico{ width:26px; text-align:center }
/* Tamaño real del SVG del icono en el sidebar */
.sidebar .nav-ico .nav-ico-svg{ width:26px; height:26px; }
.sidebar.collapsed .nav-txt{ display:none }

.content{
  margin-left:212px;
  padding: calc(var(--topbar-height) + 32px) 24px 24px;
  transition: margin-left .25s ease, background .4s ease, color .4s ease;
}
.sidebar.collapsed + .content{ margin-left:100px }
.app-version-bar{
  margin-top:24px;
  text-align:center;
  font-size:.85rem;
  color:rgba(15,23,42,.6);
  padding:12px 0 20px;
}
html.dark .app-version-bar{
  color:rgba(226,232,240,.72);
}
.login-body .app-version-bar{
  position:fixed;
  bottom:16px;
  left:0;
  right:0;
  margin:0 auto;
  padding-bottom:0;
}

.topbar{
  position:sticky;
  top:0;
  z-index:70;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 12px;
  margin-bottom:12px;
  gap:var(--topbar-gap);
  background:rgba(255,255,255,0.92);
  border-radius:var(--radius);
  box-shadow:0 10px 30px rgba(0,0,0,.06);
  transition:background .4s ease, color .4s ease, box-shadow .4s ease;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  overflow:hidden;
}
.topbar::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:-12px;
  height:12px;
  pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,0,0,0.08), transparent);
}
.top-actions{ display:flex; align-items:center; gap:10px }
.user-chip{ background:#f2f4f8; border-radius:999px; padding:8px 12px }

/* 4) Componentes base */
.container{ margin-top:16px }
.card{ background:#fff; border-radius:var(--radius); padding:14px; box-shadow:0 6px 20px rgba(0,0,0,.05); transition:background .4s ease, color .4s ease, box-shadow .4s ease }
.card-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px }
.card .chip{ width:24px; height:24px; border-radius:999px }
.stat{ display:flex; flex-direction:column; align-items:flex-start }
.stat-title{ font-size:14px; opacity:.7 }
.stat-value{ font-size:28px; font-weight:800 }

.table-wrap{ overflow:auto }
.table{ width:100%; border-collapse:collapse }
.table th,.table td{ padding:10px; border-bottom:1px solid #eef1f6; text-align:left }
.ticket-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 12px;
  border-radius:999px;
  background:rgba(148,163,253,0.24);
  font-size:12px;
  font-weight:600;
}
.ticket-chip__dot{
  width:10px;
  height:10px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,0.15);
  flex-shrink:0;
}
.ticket-chip--empty{
  background:transparent;
  padding:0;
  color:var(--muted);
  font-weight:500;
}
html.dark .ticket-chip{
  background:rgba(99,102,241,0.32);
  color:#e5e7eb;
}
html.dark .ticket-chip__dot{
  border-color:rgba(255,255,255,0.25);
}
html.dark .ticket-chip--empty{
  color:#94a3b8;
}

/* Ticket Details & Timeline */
.ticket-details-container{
  padding:12px;
}
.ticket-details-layout{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:16px;
}
.ticket-detail-dl{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:12px;
  margin:0 0 20px;
}
.ticket-detail-dl > div{
  padding:12px 14px;
  border-radius:14px;
  background:var(--surface);
  border:1px solid rgba(15,23,42,.06);
  box-shadow:0 10px 28px rgba(15,23,42,.08);
}
.ticket-detail-dl > .ticket-code{
  grid-column:1 / -1;
}
.ticket-detail-dl dt{
  font-weight:700;
  color:var(--muted);
  font-size:12px;
  letter-spacing:.02em;
  text-transform:uppercase;
  margin-bottom:4px;
}
.ticket-detail-dl dd{
  margin:0;
  font-size:15px;
  color:var(--text);
}
.ticket-description,
.ticket-tech-report{
  margin-bottom:20px;
  padding:14px;
  border-radius:14px;
  background:var(--surface);
  border:1px solid rgba(15,23,42,.06);
  box-shadow:0 10px 28px rgba(15,23,42,.08);
}
.ticket-description h4,
.ticket-tech-report h4{
  font-size:1rem;
  font-weight:700;
  margin:0 0 6px;
  color:var(--text);
}
.ticket-description p,
.ticket-tech-report p{
  font-size:14px;
  line-height:1.5;
  color:var(--text);
  opacity:0.9;
  margin:0;
}
.ticket-details-shell{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.ticket-hero{
  display:flex;
  flex-direction:column;
  gap:10px;
  border-radius:14px;
  padding:16px;
}
.ticket-hero__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.ticket-hero__top h2{
  margin:0;
}
.ticket-hero__meta{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:14px;
}
.ticket-hero__meta strong{
  color:var(--text);
}
.ticket-hero__chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.ticket-main-grid{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:14px;
}
.ticket-section{
  border-radius:14px;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.ticket-section--full{
  grid-column:1 / -1;
}
.ticket-meta-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:10px;
}
.meta-item{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.meta-label{
  font-size:12px;
  color:var(--muted);
  letter-spacing:.01em;
  text-transform:uppercase;
}
.meta-value{
  font-size:15px;
  color:var(--text);
}
.ticket-copy{
  margin:0;
  line-height:1.55;
  color:var(--text);
}
@media (max-width:900px){
  .ticket-main-grid{
    grid-template-columns:1fr;
  }
  .ticket-section--full{
    grid-column:1;
  }
  .ticket-hero,
  .ticket-section{
    padding:12px;
  }
}
.ticket-timeline-container{
  padding:8px 2px 4px;
  max-height:420px;
  overflow-y:auto;
}
.ticket-timeline-list{
  list-style:none;
  padding:6px 0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.ticket-timeline-list .timeline-item{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:10px 12px;
  border-bottom:1px dashed rgba(15,23,42,.08);
  position:relative;
}
.ticket-timeline-list .timeline-head{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  width:100%;
  min-width:0;
}
.ticket-timeline-list .timeline-index{
  position:static;
  order:4;
  margin-left:6px;
  font-weight:700;
  color:var(--muted);
  font-size:12px;
}
.ticket-timeline-list .timeline-user{
  font-weight:700;
  color:var(--text);
  font-size:15px;
  letter-spacing:.01em;
}
.ticket-timeline-list .timeline-time{
  font-size:12px;
  color:var(--muted);
  font-weight:600;
}
.ticket-timeline-list .timeline-body{
  display:flex;
  flex-direction:column;
  gap:6px;
  width:100%;
  min-width:0;
}
.ticket-timeline-list .timeline-note{
  margin:0;
  color:var(--text);
  line-height:1.6;
  font-size:14px;
}
.ticket-timeline-list .timeline-meta-date{
  margin-left:auto;
  font-weight:600;
  font-size:12px;
  color:var(--muted);
  letter-spacing:.02em;
  text-transform:uppercase;
}
@media (max-width:720px){
  .ticket-timeline-list .timeline-item{
    padding:6px 0;
  }
  .ticket-timeline-list .timeline-meta-date{
    order:3;
    text-align:left;
  }
  .ticket-timeline-list .timeline-head{
    gap:6px;
  }
}
.timeline-new-entry{
  padding:12px 10px 4px;
  border-top:1px solid var(--border);
  margin-top:8px;
}
.timeline-new-entry .form-field{
  margin-bottom:12px;
}
.timeline-new-entry textarea.input{
  min-height:80px;
  padding:10px 12px;
  font-size:14px;
  border-radius:12px;
}
.timeline-new-entry .btn{
  width:100%;
}
/* Dark mode adjustments for new elements */
html.dark .ticket-hero,
html.dark .ticket-section{
  background:#0b1220;
  border-color:#1f2937;
  box-shadow:0 10px 28px rgba(0,0,0,.45);
}
html.dark .ticket-hero__meta,
html.dark .ticket-copy,
html.dark .meta-value{
  color:#e5e7eb;
}
html.dark .meta-label,
html.dark .ticket-timeline-list .timeline-time,
html.dark .ticket-timeline-list .timeline-meta-date{
  color:#cbd5f5;
}
html.dark .ticket-timeline-list .timeline-note{
  background:transparent;
}
@media (max-width:900px){
  .ticket-timeline-list{
    gap:12px;
    padding-left:0;
  }
  .ticket-timeline-list .timeline-item{
    padding-left:0;
  }
}
.ticket-details-page .page-head h1,
.ticket-details-page h3{
  font-weight:800;
}

.modal{ position:fixed; inset:0; background:rgba(0,0,0,.25); display:flex; align-items:center; justify-content:center }
.modal.hidden{ display:none }
.modal-card{ width:min(720px,95%); background:#fff; border-radius:16px; box-shadow:0 20px 50px rgba(0,0,0,.2); transition:background .4s ease, color .4s ease }
.modal-card--wide{ width:min(960px,96%); }
.modal-head,.modal-foot{ display:flex; justify-content:space-between; align-items:center; padding:12px 14px }
.modal-body{ padding:12px 14px }

#userModal .modal-card{
  width:min(900px,96%);
  max-height:90vh;
  display:flex;
  flex-direction:column;
}
#userModal .modal-body{
  flex:1;
  overflow:auto;
  padding:18px 22px;
}
#userModal .modal-body::-webkit-scrollbar{
  width:8px;
}
#userModal .modal-body::-webkit-scrollbar-thumb{
  background:rgba(148,163,184,.7);
  border-radius:999px;
}
#userModal .modal-body::-webkit-scrollbar-track{
  background:rgba(148,163,184,.2);
  border-radius:999px;
}

.loader-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,0.45);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:200000;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.loader-overlay.hidden{ display:none }
.loader-overlay__box{
  background:#fff;
  padding:28px 32px;
  border-radius:24px;
  box-shadow:0 30px 80px rgba(15,23,42,0.25);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  min-width:240px;
}
.loader-overlay__text{
  margin:0;
  font-size:15px;
  font-weight:600;
  color:#0f172a;
  text-align:center;
}
.loader-spinner{
  width:48px;
  height:48px;
  border-radius:999px;
  border:4px solid rgba(99,102,241,0.25);
  border-top-color:var(--ring);
  animation: loaderSpin 1s linear infinite;
}
html.dark .loader-overlay__box{
  background:#0b1220;
  color:#e5e7eb;
}
html.dark .loader-overlay__text{ color:#e5e7eb; }

.toast-stack{
  position:fixed;
  top:20px;
  right:20px;
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:10000;
  pointer-events:none;
}
.toast{
  min-width:240px;
  max-width:320px;
  background:#fff;
  border-radius:18px;
  box-shadow:0 15px 35px rgba(15,23,42,0.15);
  padding:12px 16px;
  display:flex;
  align-items:center;
  gap:12px;
  border-left:4px solid var(--primary);
  font-size:.95rem;
  color:#0f172a;
  opacity:1;
  transform:translateY(0);
  transition:opacity .25s ease, transform .25s ease;
  pointer-events:auto;
}
.toast__icon{
  width:24px;
  height:24px;
  border-radius:12px;
  background:var(--primary);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:14px;
  font-weight:700;
}
.toast--success{
  border-left-color:#22c55e;
}
.toast--success .toast__icon{ background:#22c55e; }
.toast--error{
  border-left-color:#ef4444;
}
.toast--error .toast__icon{ background:#ef4444; }
.toast--info{
  border-left-color:#38bdf8;
}
.toast--info .toast__icon{ background:#38bdf8; }
.toast.toast--hide{
  opacity:0;
  transform:translateY(-10px);
}
html.dark .toast{
  background:#0b1220;
  color:#e5e7eb;
  box-shadow:0 20px 40px rgba(2,6,23,0.45);
}

.badge{ display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; background:#eef2ff }
.badge-new{ background:#dbeafe }
.badge-in_progress{ background:#fde68a }
.badge-closed{ background:#dcfce7 }
.badge-cancelled{ background:#fee2e2 }

/* 5) Controles */
label{ font-size:13px; color:var(--text); opacity:.9; display:inline-flex; align-items:center; gap:6px }
label > select, label > input, label > textarea{ width:100% }

input[type="text"], input[type="search"], input[type="email"],
input[type="tel"], input[type="number"], input[type="password"],
input[type="date"], input[type="time"], input[type="file"],
textarea{
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.2;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  width: 100%;
}
input::placeholder, textarea::placeholder{ color: var(--muted) }
input:focus, textarea:focus{ outline:none; border-color: var(--ring); box-shadow:0 0 0 3px rgba(99,102,241,.25) }
textarea{ resize:vertical; min-height:100px }
input[type="search"]{ -webkit-appearance:none }

select{
  appearance:none; -webkit-appearance:none;
  background: var(--surface); color: var(--text);
  border:1px solid var(--border); border-radius:12px;
  padding:10px 36px 10px 12px; font-size:14px; line-height:1.2;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:16px;
}
select:focus{ outline:none; border-color: var(--ring); box-shadow:0 0 0 3px rgba(99,102,241,.25) }

/* 6) Botones */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:10px 14px; border-radius:12px;
  border:1px solid var(--border);
  background:#f3f4f6; color:#111827; font-weight:600;
  cursor:pointer; transition:background .15s, color .15s, border-color .15s, box-shadow .15s;
  text-decoration:none; user-select:none;
}
.btn:hover{ background:#e5e7eb }
.btn:focus{ outline:none; border-color: var(--ring); box-shadow:0 0 0 3px rgba(99,102,241,.25) }
.btn:disabled,.btn[disabled]{ opacity:.55; cursor:not-allowed }

.btn.primary{ background: var(--ring); border-color: var(--ring); color:#fff }
.btn.primary:hover{ filter:brightness(.95) }

.btn.outline{ background:#e5e7eb; color:#0f172a; border-color:rgba(15,23,42,0.18) }
.btn.outline:hover{ filter:brightness(.98); }

.btn.ghost{ background:transparent; border-color:transparent }
.btn.ghost:hover{ background:rgba(0,0,0,.04) }

.btn.danger{ background:#ef4444; border-color:#ef4444; color:#fff }
.btn.danger:hover{ filter:brightness(.95) }

.btn.success{ background:#22c55e; border-color:#22c55e; color:#fff }
.btn.success:hover{ filter:brightness(.95) }

.btn-sm{ padding:8px 12px; font-size:13px; border-radius:10px }
.btn-lg{ padding:12px 18px; font-size:15px; border-radius:14px }
/* Iconos planos en botones */
.btn-icon{ display:inline-flex; align-items:center; gap:8px; }
.ico{ width:18px; height:18px; display:inline-block; stroke: currentColor; fill: none; stroke-width: 2; }

/* 7) Módulos */
/* Global Search (barra superior) */
.global-search{ position:relative; width:100%; max-width:none }
.global-search input[type="search"]{
  width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:999px; outline:none;
  background:var(--surface); box-shadow:0 2px 10px rgba(0,0,0,.04);
}
.search-dd{ position:absolute; top:44px; left:0; right:0; background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:0 14px 40px rgba(0,0,0,.12); max-height:320px; overflow:auto; z-index:30 }
.search-dd.hidden{ display:none }
.search-item{ padding:10px 12px; cursor:pointer; border-bottom:1px solid #f3f4f6 }
.search-item:last-child{ border-bottom:0 }
.search-item:hover,.search-item.active{ background:#f7faff }
.search-item .line1{ display:flex; gap:8px; align-items:center }
.tag{ font-size:12px; padding:2px 8px; border-radius:999px; background:#eef2ff }
.tag-ticket{ background:#dbeafe }
.tag-client{ background:#dcfce7 }
.tag-board{ background:#fde68a }
.tag-article{ background:#f5d0fe }
.line2{ font-size:13px; opacity:.75; margin-top:2px }

/* (Compat) buscador clásico */
.search{ position:relative; flex:1; margin-right:10px }
.search input{ width:100%; padding:10px 12px; border-radius:12px; border:1px solid var(--border); background:#fbfcff }
.search-drop{ position:absolute; left:0; right:0; top:110%; background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.08); z-index:10 }
.search-drop .item{ padding:8px 10px; display:flex; justify-content:space-between }
.search-drop .item:hover{ background:#f8fafc }
.search-drop.hidden{ display:none }

/* Kanban */
.kanban{ display:flex; gap:var(--gap); flex-wrap:nowrap; align-items:stretch }
@media (max-width:1024px){ .kanban{ flex-wrap:wrap } }
.kanban-col{ background:#fff; border-radius:var(--radius); padding:10px; box-shadow:0 6px 20px rgba(0,0,0,.05); display:flex; flex-direction:column; min-height:50vh; max-height:calc(90vh - 240px); overflow:hidden; flex:1 1 0; min-width:0; transition:flex-basis .25s ease, max-width .25s ease; position:relative; }
.kanban-col-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; gap:6px }
.kanban-col-info{ display:flex; align-items:center; gap:8px; flex:1 1 auto; min-width:0 }
.kanban .badge{ background:#f2f4f8; padding:4px 10px; border-radius:999px; font-weight:600 }
.kanban-dropzone{ flex:1; border-radius:12px; padding:6px; min-height:40px; max-height:100%; overflow:auto; transition:background .15s, outline .15s; scroll-behavior:smooth; }
.kanban-dropzone.over{ background:#f8fafc; outline:2px dashed #c7d2fe }

.kanban-toggle{
  border:1px solid transparent;
  background:transparent;
  color:inherit;
  cursor:pointer;
  padding:4px 8px;
  border-radius:8px;
  font-size:.85rem;
  line-height:1;
  transition:background .15s ease, border-color .15s ease;
}
.kanban-toggle:hover{
  background:rgba(15,23,42,0.06);
  border-color:rgba(148,163,184,0.4);
}
html.dark .kanban-toggle:hover{
  background:rgba(255,255,255,0.08);
  border-color:rgba(255,255,255,0.1);
}
.kanban-toggle:focus-visible{
  outline:2px solid #4f46e5;
  outline-offset:2px;
}

.kanban-col.is-collapsed{
  flex:0 0 62px;
  max-width:62px;
  min-height:auto;
  max-height:none;
  cursor:pointer;
  overflow:visible;
  transition:box-shadow .2s ease, background .2s ease;
}
.kanban-col.is-collapsed .kanban-dropzone{ display:none }
.kanban-col.is-collapsed:hover{
  background:#f8fafc;
  box-shadow:0 0 0 2px rgba(79,70,229,0.2);
}
html.dark .kanban-col.is-collapsed:hover{
  background:#111827;
  box-shadow:0 0 0 2px rgba(129,140,248,0.35);
}
.kanban-col.is-collapsed .kanban-col-head{
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  min-height:160px;
  gap:12px;
  width:100%;
}
.kanban-col.is-collapsed .kanban-col-info{
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  text-align:center;
  flex:1 1 auto;
  width:100%;
  margin-top:auto;
}
.kanban-col.is-collapsed .kanban-col-info h3{
  font-size:.95rem;
  writing-mode:vertical-rl;
  text-orientation:mixed;
  white-space:nowrap;
  transform:rotate(180deg);
  margin:0;
}
.kanban-col.is-collapsed .kanban-col-info .badge{
  transform:rotate(-90deg);
  transform-origin:center;
}
.kanban-col.is-collapsed[data-status="CLOSED"] .kanban-col-info{
  position:relative;
  padding-bottom:42px;
}
.kanban-col.is-collapsed[data-status="CLOSED"] .kanban-col-info .badge-closed{
  position:absolute;
  bottom:10px;
  left:50%;
  transform:translateX(-50%);
  box-shadow:0 6px 16px rgba(34,197,94,0.18);
}
.k-more-btn{
  width:100%;
  margin-top:8px;
  padding:8px 10px;
  border-radius:10px;
  border:1px dashed #c7d2fe;
  background:#eef2ff;
  color:#312e81;
  font-weight:600;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.k-more-btn:hover{
  background:#e0e7ff;
  border-color:#6366f1;
  color:#1e1b4b;
}
html.dark .k-more-btn{
  background:#111827;
  border-color:#1f2937;
  color:#e5e7eb;
}
html.dark .k-more-btn:hover{
  background:#1f2937;
  border-color:#4f46e5;
  color:#c7d2fe;
}
.k-card:hover{
  border-color:#c7d2fe;
  box-shadow:0 10px 30px rgba(59,130,246,0.12);
  background:#f8fafc;
  transform:translateY(-1px);
}
html.dark .k-card:hover{
  border-color:#4b5563;
  box-shadow:0 10px 30px rgba(15,23,42,0.45);
  background:#0f172a;
}
.kanban-toggle{
  align-self:flex-start;
}
.kanban-col.is-collapsed .kanban-toggle{
  display:none;
}
.k-card{ background:#fff; border:1px solid #eef1f6; border-radius:14px; padding:10px 12px; margin:8px 0; box-shadow:0 3px 12px rgba(0,0,0,.04); cursor:grab; transition:box-shadow .2s ease, transform .15s ease, border-color .15s ease, background-color .15s ease; }
.k-card:hover{ border-color:#c7d2fe; box-shadow:0 10px 30px rgba(59,130,246,0.12); background:#f8fafc; transform:translateY(-1px); }
.k-card.dragging{ opacity:.6 }
.k-card .k-card-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px }
.k-card .k-code{ font-weight:700; font-variant-numeric: tabular-nums }
.k-client{ font-size:14px; opacity:.8; margin-bottom:6px }
.k-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px }
.k-type{ display:inline-flex; align-items:center; gap:6px; padding:2px 10px; border-radius:999px; font-size:12px; font-weight:600; background:rgba(99,102,241,0.12) }
.k-type--reception{ background:rgba(52,211,153,0.15) }
.k-type--assistance{ background:rgba(59,130,246,0.15) }
.k-type__dot{ width:10px; height:10px; border-radius:999px; border:1px solid rgba(0,0,0,0.08); flex-shrink:0 }
.k-desc{ font-size:14px; line-height:1.35 }
.k-meta{
  margin-top:8px;
  display:flex;
  justify-content:flex-end;
}
.k-registrant{
  font-size:12px;
  color:#475569;
  background:rgba(148,163,184,0.2);
  padding:2px 8px;
  border-radius:999px;
  line-height:1.4;
}
.k-menu{
  border:0;
  background:transparent;
  cursor:pointer;
  padding:6px;
  border-radius:8px;
  color:#475569;
  transition:background .15s ease, color .15s ease;
}
.k-menu:hover{
  background:rgba(99,102,241,0.12);
  color:#312e81;
}
.k-menu-drop{ position:absolute; transform:translate(-60px, 22px); background:#fff; border:1px solid var(--border); border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.12); display:flex; flex-direction:column; overflow:hidden; z-index:10 }
.k-menu-drop.hidden{ display:none }
.k-menu-drop button{ padding:8px 12px; background:#fff; border:0; text-align:left; cursor:pointer }
.k-menu-drop button:hover{ background:#f2f4f8 }
.k-empty{ opacity:.7; text-align:center; padding:12px; border:1px dashed var(--border); border-radius:12px; margin:8px 0 }

/* Users */
.user-card{ display:flex; flex-direction:column; gap:10px }
.user-row{ display:flex; gap:10px; align-items:center }
.avatar{ width:48px; height:48px; border-radius:999px; object-fit:cover; background:#f3f4f6 }
.user-info .user-name{ font-weight:700 }
.user-info .user-meta{ font-size:14px; opacity:.7 }
.user-actions{ display:flex; gap:8px }
.perm-box{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:8px 12px; }
.perm{ display:grid; grid-template-columns:auto 1fr; align-items:flex-start; gap:8px; padding:6px 0; border-bottom:1px solid rgba(148,163,184,.25); }
.perm input{ margin-top:4px; }
.perm__body{ display:flex; flex-direction:column; gap:2px; }
.perm__name{ font-weight:600; font-size:.85rem; word-break:break-word; }
.perm__desc{ font-size:.75rem; color:rgba(71,85,105,.9); line-height:1.2; }
html.dark .perm{ border-color:rgba(148,163,184,.25); }
html.dark .perm__desc{ color:rgba(203,213,225,.8); }

/* Wizard Nueva asistencia */
.wizard{
  display:flex;
  gap:10px;
  margin:0 0 12px 0;
  padding:0;
  list-style:none;
  justify-content:center;
  flex-wrap:wrap;
}
.wizard li{ background:#f2f4f8; border-radius:999px; padding:6px 12px }
.wizard li.active{ background:var(--secondary); color:#0a2a57 }
.wiz-step.hidden{ display:none }
.wiz-actions{ display:flex; gap:8px; justify-content:flex-end; margin-top:10px }
.note-box{ background:#fff7d6; border:1px solid #ffe29a; border-radius:12px; padding:10px }
.success-box{ background:#e7fff3; border:1px solid #b7f5d4; border-radius:12px; padding:12px; margin-top:12px }
.wizard-form{
  max-width:1100px;
  margin:0 auto;
  padding:16px 0 24px;
}
.wiz-grid{
  display:grid;
  gap:16px;
  margin-bottom:12px;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}
.wiz-grid:last-child{ margin-bottom:0; }
.form-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:14px 16px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  position:relative;
  overflow:visible;
}
.form-field--wide{
  grid-column:span 1;
}
.form-field--block{
  margin-bottom:12px;
  grid-column:1 / -1;
}
.form-label{
  font-size:12px;
  font-weight:600;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.05em;
}
.form-field input:not([type="hidden"]),
.form-field select,
.form-field textarea{
  width:100%;
  border:1px solid var(--border);
  border-radius:8px;
  padding:10px 12px;
  font-size:14px;
  color:var(--text);
  background:var(--bg, #fff);
  box-shadow:none;
}
.form-field textarea{
  min-height:140px;
  resize:vertical;
}
.form-field input[type="file"]{
  border:0;
  padding:0;
  background:transparent;
}
.form-field--file input[type="file"]{
  margin-top:4px;
}
.form-field .combo{
  width:100%;
  position:relative;
}
.form-field--file{
  padding-bottom:0;
}
.file-field{
  position:relative;
  display:flex;
  align-items:center;
  gap:16px;
  border:1px dashed var(--border);
  border-radius:16px;
  padding:16px 18px;
  background:rgba(99,102,241,0.04);
  overflow:hidden;
  margin-top:10px;
}
.file-field input[type="file"]{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:pointer;
}
.file-field__icon{
  font-size:24px;
}
.file-field__body{
  display:flex;
  flex-direction:column;
  gap:4px;
  flex:1 1 auto;
}
.file-field__hint{
  font-size:12px;
  color:var(--muted);
}
.file-field__btn{
  padding:8px 16px;
  border-radius:999px;
  background:var(--primary);
  color:#0b1220;
  font-size:13px;
  font-weight:600;
  pointer-events:none;
}
html.dark .file-field{
  background:rgba(99,102,241,0.08);
  border-color:#1f2937;
}
html.dark .file-field__btn{
  color:#050b16;
}

.attachments-block{
  margin-top:12px;
}
.attachments-block strong{
  display:block;
  margin-bottom:6px;
}
.attachments-grid{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.attachment-chip{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  text-decoration:none;
  color:inherit;
  background:var(--surface);
  min-width:160px;
}
.attachment-chip:hover{
  border-color:var(--primary);
  box-shadow:0 6px 14px rgba(0,0,0,.08);
}
.attachment-thumb{
  display:block;
  width:46px;
  height:46px;
  border-radius:10px;
  object-fit:cover;
  background:#f1f5f9;
}
.attachment-file{
  font-size:22px;
}
.attachment-name{
  font-size:13px;
  word-break:break-all;
}
html.dark .attachment-chip{
  background:#0b1220;
  border-color:#1f2937;
}
.form-field:focus-within{
  z-index:3;
}
html.dark .form-field{
  background:#0b1220;
  border-color:#1f2937;
  box-shadow:none;
}
html.dark .form-field input:not([type="hidden"]),
html.dark .form-field select,
html.dark .form-field textarea{
  background:#0b1220;
  border-color:#1f2937;
  color:#e5e7eb;
}
/* 8) Espaciados & grids */
.grid{ display:grid; gap:var(--gap) }
.grid.three{ grid-template-columns:repeat(3,1fr) }
.grid.four{ grid-template-columns:repeat(4,1fr) }
.grid.two{ grid-template-columns:repeat(2,1fr) }
.grid.two .card--stretch{
  display:flex;
  flex-direction:column;
}
.grid.two .card--stretch .week-list{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.card + .card{ margin-top:12px }
.grid > .card + .card{ margin-top:0 }                  /* evita doble espaciado en grids */
.card + .grid, .grid + .card, .grid + .grid{ margin-top:12px }

@media (max-width:900px){ .grid.three, .grid.two, .grid.four{ grid-template-columns:1fr } .content{ margin-left:100px } }

/* 9) Modo oscuro */
html.dark body{ background:#050b16; color:#e5e7eb }
html.dark {
  --surface:#0b1220;
  --border:#1f2937;
  --text:#e5e7eb;
  --bg:#050b16;
  --muted:#94a3b8;
}

/* Layouts principales */
html.dark .sidebar{ background:#0f172a; border-color:#1f2937 }
html.dark .nav-item{ color:#cbd5e1 }
html.dark .nav-item.active{ background:rgba(255,255,255,0.08); color:#fff }

html.dark .topbar{
  background:rgba(11,18,32,0.9);
  box-shadow:0 6px 24px rgba(0,0,0,.4);
}
html.dark .topbar::after{
  background:linear-gradient(to bottom, rgba(5,11,22,0.7), transparent);
}
html.dark .global-search input[type="search"]{ background:#0b1220; color:#e5e7eb; border-color:#1f2937; box-shadow:none }
html.dark .search-dd{ background:#0b1220; border-color:#1f2937 }
html.dark .search-item{ border-bottom-color:#1f2937 }
html.dark .search-item:hover, html.dark .search-item.active{ background:#0e1528 }
html.dark .tag{ background:#1f2937; color:#e5e7eb }
html.dark .tag-ticket{ background:#0e7490 }
html.dark .tag-client{ background:#166534 }
html.dark .tag-board{ background:#92400e }

/* Cards, badges, modales, tablas */
html.dark .card{ background:#0b1220; border:1px solid #1f2937; color:#e5e7eb; box-shadow:none }
html.dark .badge{ background:#1f2937; color:#e5e7eb }
html.dark .note-box{ background:#1f2937; border-color:#334155; color:#e5e7eb }
html.dark .modal-card{ background:#0b1220; border:1px solid #1f2937; color:#e5e7eb }
html.dark .table{ color:#e5e7eb }
html.dark .table th, html.dark .table td{ border-color:#1f2937 }

/* Botones */
html.dark .btn{ background:#1f2937; color:#e5e7eb; border-color:#374151 }
html.dark .btn.outline{ background:#111827; color:#e5e7eb; border-color:#374151 }
html.dark .btn:hover{ background:#111827 }
html.dark .btn.primary{ background:var(--primary); color:#0b1220; border-color:transparent }
html.dark .btn.outline:hover{ background:rgba(99,102,241,.15) }
html.dark .btn.ghost{ background:transparent; color:#e5e7eb }
html.dark .btn.success{ background:#22c55e; border-color:#22c55e; color:#0b1220 }

/* Kanban */
html.dark .kanban-col{ background:#0b1220; border-color:#1f2937 }
html.dark .kanban-dropzone.over{ background:#0e1528; outline-color:#4f46e5 }
html.dark .k-card{ background:#0b1220; border-color:#1f2937; color:#e5e7eb }
html.dark .k-registrant{
  color:#e2e8f0;
  background:rgba(148,163,184,0.25);
}
html.dark .k-type{ background:rgba(99,102,241,0.25) }
html.dark .k-type--reception{ background:rgba(16,185,129,0.25) }
html.dark .k-type--assistance{ background:rgba(59,130,246,0.25) }
html.dark .k-type__dot{ border-color:rgba(255,255,255,0.25) }
html.dark .k-menu{ color:#e5e7eb }
html.dark .k-menu:hover{ background:rgba(99,102,241,0.35); color:#cbd5f5 }
html.dark .k-menu-drop{ background:#0b1220; border-color:#1f2937; box-shadow:none }

/* Wizard */
html.dark .wizard li{ background:#1f2937; color:#e5e7eb }
html.dark .wizard li.active{ background:var(--secondary); color:#0b1220 }
html.dark .success-box{ background:#063b2e; border-color:#0a5b44; color:#e5e7eb }
html.dark .error-box{ background:#3b0e0e !important; border-color:#7f1d1d !important; color:#fca5a5 !important }

/* Inputs/Selects/Placeholders */
html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="date"],
html.dark input[type="time"],
html.dark input[type="search"],
html.dark input[type="file"],
html.dark select,
html.dark textarea{
  background:#0b1220; color:#e5e7eb; border:1px solid #1f2937;
  height: 100%;
}
html.dark ::placeholder{ color:#94a3b8 }

/* Responsive ajustes menores */
.userchip{ display:flex; align-items:center; gap:8px; padding:4px 8px; border-radius:999px; background:#f8fafc; border:1px solid #eef1f6 }
.userchip-avatar{ width:28px; height:28px; border-radius:999px; object-fit:cover; background:#e5e7eb }
.userchip-name{ font-size:14px }
@media (max-width:520px){ .userchip-name{ display:none } }

/* Separación global entre la cabecera de página y el contenido */
.page-head { margin-bottom: var(--gap); } /* usa --gap = 16px */
/* Evitar salto de línea en el texto de la etiqueta del dashboard */
.page-head .toolbar label > span { white-space: nowrap; }
.page-head--split{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  flex-wrap:wrap;
}
.page-head--split > div:first-child{
  flex:1 1 260px;
}
.page-head__actions{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:200px;
}
.page-head__actions:empty{
  display:none;
}

/* ==== Layout horizontal para doughnut/pie con leyenda a la derecha ==== */
.chart-row{ display:flex; align-items:center; gap:12px; }
.chart-row .chart-box{ flex:1 1 60%; }      /* zona del canvas */
.legend-col{ flex:0 0 40%; }                /* zona de la leyenda */
.legend-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.legend-item{ display:flex; align-items:center; gap:8px; font-size:14px; }
.legend-color{ width:12px; height:12px; border-radius:3px; border:1px solid var(--border); display:inline-block; }
html.dark .legend-color{ border-color:#1f2937; }

/* Responsive: en pantallas estrechas, apila leyenda debajo del chart */
@media (max-width: 900px){
  .chart-row{ flex-direction:column; align-items:stretch; }
  .legend-col{ flex:0 0 auto; }
}

/* ==== Toolbar grow fix (Clientes) ==== */
.flex-1{ flex: 1 1 auto; min-width: 0; }

/* Evita que la toolbar envuelva y permite que el buscador crezca hasta los botones */
.toolbar.no-wrap{ display:flex; align-items:center; gap:8px; flex-wrap:nowrap; }
.toolbar.no-wrap .flex-1{ flex: 1 1 auto; min-width: 0; }
.toolbar.no-wrap label.flex-1{ display:flex; align-items:center; gap:6px; width:auto; }
.toolbar.no-wrap label.flex-1 > input[type="search"],
.toolbar.no-wrap label.flex-1 > input[type="text"]{ flex:1 1 auto; min-width:0; width:100%; }
.toolbar.no-wrap .ml-auto{ margin-left:auto !important; }

/* ==== Panel lateral de filtros (sheet) ==== */
.sheet{ position:fixed; inset:0; background:rgba(0,0,0,.28); display:none; z-index:50; }
.sheet.active{ display:flex; justify-content:flex-end; }
.sheet-card{
  width:min(420px,95%); height:100%;
  background:var(--surface); border-left:1px solid var(--border);
  padding:16px; overflow:auto; border-radius: 0 0 0 0;
  box-shadow: -16px 0 40px rgba(0,0,0,.08);
}
.sheet-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.sheet-body{ display:grid; gap:12px; }
.sheet-foot{ display:flex; justify-content:flex-end; gap:8px; margin-top:12px; }

/* Chips de filtros activos */
.filter-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.filter-chip{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px;
  border:1px solid var(--border); border-radius:999px; font-size:13px; background:#f8fafc; }
.filter-chip button{ border:0; background:transparent; cursor:pointer; padding:0 2px; }

/* Combobox de clientes */
.combo{ position:relative; }
.combo input[type="search"]{ width:100%; }
.combo-list{
  position:absolute; left:0; right:0; top:110%;
  background:var(--surface); border:1px solid var(--border);
  border-radius:12px; box-shadow:0 14px 40px rgba(0,0,0,.12);
  max-height:260px; overflow:auto; z-index:100;
}
.combo-item{ padding:8px 10px; display:flex; justify-content:space-between; gap:8px; cursor:pointer; }
.combo-item:hover{ background:#f7faff; }
.combo-empty{ padding:10px; opacity:.7; }

/* Mantén la toolbar en una fila en desktop */
.toolbar.no-wrap{ flex-wrap:nowrap; }
.toolbar.no-wrap .flex-1{ flex:1 1 auto; min-width:0; }
.toolbar.no-wrap label.flex-1{ display:flex; align-items:center; gap:6px; width:auto; }
.toolbar.no-wrap label.flex-1 > input{ flex:1 1 auto; min-width:0; width:100%; }

/* Oscuro */
html.dark .sheet-card{ background:#0b1220; border-color:#1f2937; box-shadow:none; }
html.dark .filter-chip{ background:#1f2937; border-color:#334155; color:#e5e7eb; }
html.dark .combo-list{ background:#0b1220; border-color:#1f2937; }
html.dark .combo-item:hover{ background:#0e1528; }

/* --- Utilidades para panel de filtros (Tickets) --- */
.hidden{ display:none !important; }
.filters-grid{ margin-top:10px; display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:10px; }

/* ==== Combobox Clientes (Asistencias) ==== */
.combo { position: relative; }
.combo input[type="search"] { width: 100%; }
.combo-list{
  position: absolute; left: 0; right: 0; top: 110%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0,0,0,.12);
  max-height: 260px;
  overflow: auto;
  z-index: 200;
}
.combo-item{
  padding: 8px 10px;
  display: flex; justify-content: space-between; gap: 8px;
  cursor: pointer;
}
.combo-item:hover{ background: #f7faff; }
.combo-empty{ padding: 10px; opacity: .7; }

html.dark .combo-list{ background: #0b1220; border-color:#1f2937; }
html.dark .combo-item:hover{ background:#0e1528; }

/* —————————————————————————————
   Badges por estado (claro / oscuro)
   Se espera: .badge .badge-new | .badge-in_progress | .badge-closed
   ————————————————————————————— */

/* Base (por si no existe) */
.badge{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.25rem .5rem; border:1px solid var(--border);
  border-radius:9999px; font-size:.85rem; font-weight:600;
  line-height:1; white-space:nowrap;
}

/* NUEVA (azul) */
.badge-new{
  background:#dbeafe;           /* blue-100 */
  border-color:#60a5fa;         /* blue-400 */
  color:#1e3a8a;                /* blue-900 */
}
.dark .badge-new{
  /* replaced by html.dark .badge-new below */
}
html.dark .badge-new{
  background:#1e3a8a;           /* blue-900 */
  border-color:#3b82f6;         /* blue-500 */
  color:#dbeafe;                /* blue-100 */
}

/* EN PROCESO (amarillo) */
.badge-in_progress{
  background:#fef9c3;           /* yellow-100 */
  border-color:#facc15;         /* yellow-400/500 */
  color:#854d0e;                /* amber-800 aprox */
}
.dark .badge-in_progress{
  /* replaced by html.dark .badge-in_progress below */
}
html.dark .badge-in_progress{
  background:#854d0e;           /* amber-800 */
  border-color:#eab308;         /* yellow/amber-500 */
  color:#fef9c3;                /* yellow-100 */
}

/* CERRADA (verde) */
.badge-closed{
  background:#dcfce7;           /* green-100 */
  border-color:#22c55e;         /* green-500 */
  color:#166534;                /* green-800 */
}
.dark .badge-closed{
  /* replaced by html.dark .badge-closed below */
}
html.dark .badge-closed{
  background:#166534;           /* green-800 */
  border-color:#22c55e;         /* green-500 */
  color:#dcfce7;                /* green-100 */
}

/* CANCELADA (rojo) */
.badge-cancelled{
  background:#fee2e2;           /* red-100 */
  border-color:#ef4444;         /* red-500 */
  color:#991b1b;                /* red-800 */
}
.dark .badge-cancelled{
  /* replaced by html.dark .badge-cancelled below */
}
html.dark .badge-cancelled{
  background:#7f1d1d;           /* red-900 */
  border-color:#ef4444;         /* red-500 */
  color:#fee2e2;                /* red-100 */
}

/* Force badge colors inside table cells (higher specificity) */
.table td .badge-new{ background:#dbeafe !important; border-color:#60a5fa !important; color:#1e3a8a !important; }
.table td .badge-in_progress{ background:#fef9c3 !important; border-color:#facc15 !important; color:#854d0e !important; }
.table td .badge-closed{ background:#dcfce7 !important; border-color:#22c55e !important; color:#166534 !important; }
.table td .badge-cancelled{ background:#fee2e2 !important; border-color:#ef4444 !important; color:#991b1b !important; }

html.dark .table td .badge-new{ background:#1e3a8a !important; border-color:#3b82f6 !important; color:#dbeafe !important; }
html.dark .table td .badge-in_progress{ background:#854d0e !important; border-color:#eab308 !important; color:#fef9c3 !important; }
html.dark .table td .badge-closed{ background:#166534 !important; border-color:#22c55e !important; color:#dcfce7 !important; }
html.dark .table td .badge-cancelled{ background:#7f1d1d !important; border-color:#ef4444 !important; color:#fee2e2 !important; }

/* Colores de estado también en Kanban (forzados) */
.kanban .badge{ border:1px solid var(--border); } /* base neutra, no define background */

/* Claro */
.kanban .badge-new{ background:#dbeafe !important; border-color:#60a5fa !important; color:#1e3a8a !important; }
.kanban .badge-in_progress{ background:#fef9c3 !important; border-color:#facc15 !important; color:#854d0e !important; }
.kanban .badge-closed{ background:#dcfce7 !important; border-color:#22c55e !important; color:#166534 !important; }
.kanban .badge-cancelled{ background:#fee2e2 !important; border-color:#ef4444 !important; color:#991b1b !important; }

/* Oscuro */
html.dark .kanban .badge-new{ background:#1e3a8a !important; border-color:#3b82f6 !important; color:#dbeafe !important; }
html.dark .kanban .badge-in_progress{ background:#854d0e !important; border-color:#eab308 !important; color:#fef9c3 !important; }
html.dark .kanban .badge-closed{ background:#166534 !important; border-color:#22c55e !important; color:#dcfce7 !important; }
html.dark .kanban .badge-cancelled{ background:#7f1d1d !important; border-color:#ef4444 !important; color:#fee2e2 !important; }

/* --- Fix: el modal siempre por encima del Kanban --- */
.modal{ z-index: 100000 !important; }
.modal .modal-card{ position: relative; z-index: 100001 !important; }

/* Normaliza z-index dentro de Kanban para que no se superponga al modal */
.kanban .k-card,
.kanban .k-client,
.kanban .k-desc{
  position: relative;
  z-index: auto !important;
}

/* --- FIX: dropdown del combobox (Cliente) siempre por encima en Filtros --- */
.card, .filters-grid{ overflow: visible !important; }
.filters-grid{ position: relative; z-index: 0; }

/* Cuando la lista esté visible, eleva la pila del panel de filtros */
.filters-grid:has(.combo-list:not(.hidden)){
  position: relative;
  z-index: 99990;
}

/* Eleva SOLO el combobox activo y aísla su contexto */
.combo{ position: relative; z-index: 1; }
.combo:focus-within{
  z-index: 99999;          /* por encima de selects vecinos */
  isolation: isolate;      /* crea un stacking context propio */
}

/* La lista debe ser la capa más alta de esa zona */
.combo-list{
  z-index: 100000;
  transform: translateZ(0); /* fuerza su propia capa (Safari/WebKit) */
  will-change: transform;
}

/* Asegura que los controles adyacentes no se “suban” por encima */
.filters-grid select,
.filters-grid input,
.filters-grid .input,
.filters-grid .btn{
  position: relative;
  z-index: 0;
}
/* ==== Boards (Helpdesk) – pills ==== */
.boards-list{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.board-pill{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center;
  padding:18px 24px;
  border-radius:30px;
  border:1px solid rgba(148,163,253,0.16);
  background:#fff;
  box-shadow:0 10px 24px rgba(15,23,42,0.08);
}
.board-pill__info{
  flex:1 1 360px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.board-pill__title{
  display:flex;
  align-items:flex-start;
  gap:14px;
}
.board-pill__title h3{
  margin:0;
  font-size:18px;
}
.board-pill__title p{
  margin:4px 0 0;
  color:var(--muted);
  font-size:13px;
}
.board-pill__color{
  width:16px;
  height:16px;
  border-radius:999px;
  border:2px solid rgba(0,0,0,0.05);
  flex-shrink:0;
}
.board-pill__meta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.board-pill__stat{
  font-size:12px;
  color:var(--text);
  padding:6px 12px;
  border-radius:999px;
  background:rgba(99,102,241,.08);
}
.board-pill__actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-left:auto;
}
.board-empty{
  padding:32px;
  text-align:center;
  border:1px dashed var(--border);
  border-radius:24px;
  color:var(--muted);
}
html.dark .board-pill{
  background:#0b1220;
  border-color:#1f2937;
  box-shadow:none;
}
html.dark .board-pill__stat{
  background:rgba(255,255,255,0.08);
}

.user-cell{
  display:flex;
  align-items:center;
  gap:12px;
}
.user-cell__avatar{
  width:40px;
  height:40px;
  border-radius:999px;
  object-fit:cover;
}
.user-cell__name{
  font-weight:600;
}
.user-cell__meta{
  font-size:12px;
  color:var(--muted);
}

.tools-grid{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
  text-align:center;
}

.palettes-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px;
  margin-bottom:20px;
  grid-auto-rows:1fr;
  align-items:stretch;
}
.palettes-grid > .card,
.palettes-grid > .palette-card{
  margin-top:0 !important;
}
.palettes-grid--controls{
  align-items:stretch;
}
.palettes-grid--controls .card{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  height:100%;
}
.mail-settings{
  gap:16px;
  margin-bottom:20px;
}
.mail-settings .card{ margin-top:0; }
.mail-form{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.mail-form label{
  display:flex;
  flex-direction:column;
  font-size:13px;
  font-weight:600;
  color:var(--text);
  gap:4px;
}
.mail-form input,
.mail-form select,
.mail-form textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  font-size:13px;
  background:var(--surface);
  color:var(--text);
}
.mail-card{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.mail-card-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
}
.mail-switches{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.mail-provider-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.mail-provider-row label{ flex:1 1 260px; }
.mail-provider-hint{ font-size:.85rem; color:rgba(100,116,139,.9); margin-bottom:6px; }
.mail-config-grid{
  display:grid;
  gap:14px;
}
.mail-config-grid--triplet{ grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
.mail-config-grid--pair{ grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.mail-config-grid--triple{ grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.mail-config-grid label{ font-size:13px; font-weight:600; color:var(--text); }
.mail-config-grid small{ font-weight:400; color:var(--muted); }
.mail-config-grid label{ font-size:13px; font-weight:600; color:var(--text); }
.mail-config-grid small{ font-weight:400; color:var(--muted); }
.mail-actions{ justify-content:flex-start; }
html.dark .mail-provider-hint{ color:rgba(203,213,225,.8); }
.mail-template{
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
  background:var(--surface);
}
.switch{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:600;
}
.switch input{
  width:auto;
}
.mail-placeholders ul{
  margin:6px 0 0;
  padding-left:16px;
  font-size:12px;
  color:var(--muted);
}
.mail-placeholders code{
  background:rgba(148,163,253,0.15);
  padding:2px 6px;
  border-radius:8px;
}
.settings-toggle-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
}
.settings-toggle-row h3{
  margin:0 0 4px;
  font-size:1rem;
}
.settings-toggle-row p{
  margin:0;
  color:rgba(100,116,139,.9);
  font-size:.9rem;
  max-width:540px;
}
html.dark .settings-toggle-row p{
  color:rgba(203,213,225,.85);
}
.palettes-grid .card,
.palettes-grid .palette-card{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:260px;
  height:100%;
}
.palette-card h4{
  margin-top:0;
}
.swatches{
  display:flex;
  gap:8px;
  margin:12px 0;
}
.swatches span{
  flex:1;
  height:32px;
  border-radius:10px;
}
.custom-colors-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:12px;
  margin:12px 0 16px;
}
.theme-split{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:16px;
}
.theme-split > .card{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  margin-top:0 !important;
}
.logo-card{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.logo-preview{
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:center;
}
.logo-preview img{
  max-width:200px;
  max-height:100px;
  padding:8px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  object-fit:contain;
}
.logo-upload{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
}
.logo-upload .file-trigger{
  position:relative;
  overflow:hidden;
  border:1px dashed var(--border);
  border-radius:999px;
  padding:10px 18px;
  cursor:pointer;
  font-size:13px;
  font-weight:500;
  color:var(--text);
  background:rgba(148,163,253,0.08);
}
.logo-upload .file-trigger span{
  pointer-events:none;
}
.logo-upload .file-trigger input{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
}

/* ==== Login ==== */
.login-body{
  min-height:100vh;
  margin:0;
  background:radial-gradient(circle at top left, rgba(122,209,179,0.22), transparent 45%), radial-gradient(circle at bottom right, rgba(166,200,255,0.25), transparent 40%), var(--bg);
  display:flex;
  align-items:stretch;
  justify-content:center;
  padding:0 24px;
}
.login-wrapper{
  width:min(520px,100%);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  gap:20px;
  padding:40px 0;
}
.login-intro{
  color:var(--text);
}
.login-intro h1{
  font-size:clamp(30px,4vw,44px);
  margin:8px 0;
}
.login-intro h1 span{ color:var(--primary); }
.login-intro p{
  font-size:15px;
  max-width:440px;
  opacity:.85;
  margin:0 auto;
}
.login-badge{
  display:inline-flex;
  padding:6px 14px;
  border-radius:999px;
  background:rgba(148,163,253,0.15);
  border:1px solid rgba(148,163,253,0.3);
  font-weight:600;
  letter-spacing:.04em;
  font-size:12px;
}
.login-card{
  background:#fff;
  border-radius:24px;
  padding:28px;
  box-shadow:0 25px 50px rgba(15,23,42,.15);
  display:flex;
  flex-direction:column;
  gap:14px;
  width:100%;
}
.login-card-head{
  display:flex;
  gap:14px;
  align-items:center;
  margin-bottom:6px;
}
.login-card-logo{
  width:60px;
  height:60px;
  border-radius:18px;
  background:#f8fafc;
  border:1px solid rgba(15,23,42,.08);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px;
}
.login-card-logo img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}
.login-card h2{
  margin:0;
}
.login-card label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-weight:600;
  color:var(--text);
}
.login-card input{
  font-size:15px;
}
.login-hint{
  font-size:12px;
  opacity:.7;
  text-align:center;
}
.login-hint code{
  font-family:monospace;
  background:rgba(15,23,42,.06);
  padding:2px 6px;
  border-radius:8px;
}
html.dark .login-body{
  background:radial-gradient(circle at top left, rgba(122,209,179,0.12), transparent 45%), radial-gradient(circle at bottom right, rgba(166,200,255,0.18), transparent 40%), #050b16;
}
html.dark .login-card{
  background:#0b1220;
  border:1px solid #1f2937;
  box-shadow:0 20px 40px rgba(0,0,0,.5);
}
html.dark .login-intro{ color:#e5e7eb; }
html.dark .login-card-logo{
  background:#0f172a;
  border-color:#1f2937;
}

/* Separación de botones en la cabecera de Helpdesk */
.page-head .tabs{ display:flex; gap:8px; flex-wrap:wrap; }
.modal-head .btn.ghost,
.modal-head button.ghost,
.modal-head button[aria-label="Cerrar"],
.modal-head button[title="Cerrar"]{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:36px; min-height:36px; /* buen target táctil */
  padding:4px 10px;
  font-size:20px; /* más grande */
  line-height:1;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  color:#111827;
}
.modal-head .btn.ghost:hover,
.modal-head button.ghost:hover,
.modal-head button[aria-label="Cerrar"]:hover,
.modal-head button[title="Cerrar"]:hover{
  filter:brightness(.95);
  background:rgba(15,23,42,.05) !important;
  border-radius:999px;
}
html.dark .modal-head .btn.ghost,
html.dark .modal-head button.ghost,
html.dark .modal-head button[aria-label="Cerrar"],
html.dark .modal-head button[title="Cerrar"]{
  color:#e5e7eb;
}
html.dark .modal-head .btn.ghost:hover,
html.dark .modal-head button.ghost:hover,
html.dark .modal-head button[aria-label="Cerrar"]:hover,
html.dark .modal-head button[title="Cerrar"]:hover{
  background:rgba(255,255,255,0.08) !important;
  filter:none;
}

/* ==== Tabs estilo píldora (Configuración) ==== */
.tabs-pills{
  display:flex; flex-wrap:wrap; gap:8px;
  background: transparent; /* sin caja blanca */
  border: 0;               /* sin borde */
  border-radius: 0;
  padding: 0;              /* sin padding de card */
  margin-bottom: 12px;
}
.tab-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 600;
  border: 1px solid transparent;
  background: #f3f4f6;        /* fondo opaco suave, consistente con .btn */
  color: #111827;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
  text-decoration: none;
}
.tab-btn:hover{ background:#e5e7eb; }
.tab-btn.active{
  background: var(--ring);
  color:#fff;
  border-color: var(--ring);
  box-shadow: 0 0 0 3px rgba(99,102,241,.20);
}

/* panel contenedor */
.tabs-content{ display:block; }

/* Dark mode */
html.dark .tabs-pills{
  background: transparent;
  border-color: transparent;
}
html.dark .tab-btn{
  background:#1f2937; color:#e5e7eb; border-color:#1f2937;
}
html.dark .tab-btn:hover{ background:#111827; }
html.dark .tab-btn.active{
  background: var(--primary); color:#0b1220; border-color: transparent;
  box-shadow:none;
}

/* ==== CTA principal (p.ej., "Nuevo usuario") ==== */
.btn.cta{
  background: var(--accent);
  color: #0b1220;
  border: 1px solid rgba(0,0,0,.08);
}
.btn.cta:hover{ filter: brightness(.98); }
html.dark .btn.cta{
  background: var(--accent);
  color: #0b1220;
  border-color: rgba(255,255,255,.18);
}
/* ==== Utilities: vertical spacing ==== */
.mt-8{ margin-top:8px }
.mt-12{ margin-top:12px }
.mt-16{ margin-top:16px }

/* ==== Sidebar toggle button (en el pie) ==== */
#sidebar .sidebar-foot #btnSidebar{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:36px; min-height:36px; border-radius:999px;
}
#sidebar .sidebar-foot #btnSidebar .ico{ transition: transform .2s ease; }
#sidebar.collapsed .sidebar-foot #btnSidebar .ico{ transform: rotate(180deg); }

/* ==== Sidebar: ancho con transición y fade de textos ==== */
.sidebar{
  width: 260px;
  transition: width .25s ease;
  overflow: hidden;
}
.sidebar.collapsed{ width: 72px; }

.sidebar .logo-row .brand,
.sidebar .nav-item .nav-txt{
  transition: opacity .20s ease, transform .20s ease, width .20s ease;
  white-space: nowrap;
  display: inline-block;
}
.sidebar.collapsed .logo-row .brand,
.sidebar.collapsed .nav-item .nav-txt{
  opacity: 0;
  transform: translateX(-6px);
  width: 0;
  pointer-events: none;
}

/* Área táctil y rotación del chevron (pie) */
#sidebar .sidebar-foot #btnSidebar{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:36px; min-height:36px; border-radius:999px;
  position: relative; z-index: 2;
}
#sidebar .sidebar-foot #btnSidebar .ico{ transition: transform .2s ease; }
#sidebar.collapsed .sidebar-foot #btnSidebar .ico{ transform: rotate(180deg); }

/* Opcional: transición suave del contenido si lo usas con un contenedor .main */
html:not(.sidebar-collapsed) .main{ transition: margin-left .25s ease; }
html.sidebar-collapsed .main{ transition: margin-left .25s ease; /* ajusta si desplazas layout */ }
/* =============================
   Sidebar "pill" vertical (sin colapso)
   ============================= */
.sidebar-pill{
  position: fixed;
  left:16px;
  top:var(--sidebar-vertical-offset);
  bottom:16px;
  width:56px; /* grosor coherente tipo p�ldora, similar a la altura de las pills del topbar */
  background:#fff;
  border-radius:999px;
  box-shadow:0 6px 18px rgba(15,23,42,.12);
  padding:12px 8px; /* m�s alto, consistente con pills superiores */
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  z-index:120;
  transition: all .28s ease;
  -webkit-touch-callout:none;
}
.sidebar-pill .pill-logo{
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  margin-bottom:4px;
  border:none;
  background:none;
  padding:0;
  border-radius:999px;
  cursor:pointer;
  transition: transform .2s ease;
}
.sidebar-pill .pill-toggle{
  margin-top:auto;
  width:28px;
  height:28px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.4);
  background:#fff;
  display:none;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: transform .2s ease, background .2s ease;
}
.sidebar-pill.collapsed .pill-toggle{
  display:flex;
}
.pill-toggle__icon{
  width:14px;
  height:14px;
  display:block;
  background:currentColor;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox=\"0 0 24 24\"><path fill=\"white\" d=\"M8 5l8 7-8 7z\"/></svg>') no-repeat center / contain;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"white\" d=\"M8 5l8 7-8 7z\"/></svg>') no-repeat center / contain;
  transition: transform .2s ease;
}
.sidebar-pill.collapsed .pill-toggle__icon{
  transform: rotate(90deg);
}
.sidebar-pill .pill-logo:focus-visible{
  outline:2px solid var(--primary,#7ad1b3);
  outline-offset:4px;
}
.sidebar-pill .pill-logo .logo{
  width:100%;
  height:100%;
  border-radius:999px; /* completamente circular */
  object-fit:cover;
}

.sidebar-pill__body{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  width:100%;
  flex:1;
  max-height:100%;
  min-height:0; /* permite que los hijos gestionen su propio scroll */
  overflow:hidden; /* evita que el contenido empuje al toggle fuera del contenedor */
  transition: opacity .2s ease, max-height .25s ease;
}

.sidebar-pill .pill-list{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  width:100%;
  flex:1 1 auto;
  min-height:0; /* asegura scroll interno cuando hay muchos iconos */
  overflow:auto;
}
.sidebar-pill .pill-item{ display:flex; flex-direction:column; align-items:center; gap:6px; width:100%; padding:8px 0; border-radius:12px; color:inherit; text-decoration:none; }
.sidebar-pill .pill-item:hover{ background:#f2f4f8; }
.sidebar-pill .pill-item.active{ background:var(--secondary); color:#0a2a57; }

/* Icono del item (plano minimal) */
.pill-ico .pill-ico-svg{ width:26px; height:26px; display:inline-block; }
/* El texto se oculta en este layout estrecho */
.pill-txt{ display:none; }

/* Ajuste del contenido cuando existe el pill */
.sidebar-pill + .content{
  margin-left: var(--sidebar-pill-expanded-gap); /* sidebar + margen lateral */
  transition: margin-left .28s ease;
}
.sidebar-pill.collapsed + .content{
  margin-left: var(--gap);
  margin-right: 0;
}

/* Dark mode para el pill */
html.dark .sidebar-pill{ background:#0f172a; box-shadow:none; border:1px solid #1f2937; }
html.dark .sidebar-pill .pill-item:hover{ background:#111827; }
html.dark .sidebar-pill .pill-item.active{ background:rgba(255,255,255,0.08); color:#fff; }

.sidebar-pill.collapsed{
  bottom:auto;
  height:56px;
  min-height:56px;
  width:56px;
  padding:8px;
  border-radius:999px;
  gap:0;
  align-items:center;
  top:var(--sidebar-vertical-offset);
  touch-action:none;
}
.sidebar-pill.collapsed .pill-logo{
  margin-bottom:0;
  cursor:grab;
  touch-action:none;
}
.sidebar-pill.sidebar-pill--dragging{
  transition:none;
  user-select:none;
}
.sidebar-pill.sidebar-pill--dragging .pill-logo{
  cursor:grabbing;
}
.sidebar-pill .pill-chevron{
  font-size:16px;
  color:#1f2937;
  transition: transform .2s ease, opacity .2s ease;
  opacity:0;
  pointer-events:none;
}
.sidebar-pill.collapsed .pill-chevron{
  opacity:1;
  pointer-events:auto;
}
.sidebar-pill.collapsed .sidebar-pill__body{
  opacity:0;
  max-height:0;
  pointer-events:none;
}
@media (prefers-reduced-motion: reduce){
  .sidebar-pill,
  .sidebar-pill + .content{
    transition:none;
  }
}

@media (max-width: 768px){
  .sidebar-pill{
    top:var(--sidebar-vertical-offset);
    left:12px;
    bottom:auto;
  }
  .sidebar-pill + .content{
    margin-left:72px;
  }
}

/* ===== Page Top Pills (buscador, usuario, tema) ===== */
.page-top{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:140;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 28px;
  background:transparent;
  box-shadow:none;
}
.page-top.is-sticky{
  position:fixed;
}
.topbar__left{
  flex:1 1 auto;
  min-width:0;
}
.topbar__right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:12px;
}
@media (max-width: 640px){
  :root{
    --topbar-height: 140px;
  }
  .page-top{
    flex-direction:column;
    align-items:stretch;
    padding:12px 16px;
    gap:12px;
  }
  .topbar__left,
  .topbar__right{
    width:100%;
  }
  .topbar__right{
    justify-content:flex-start;
  }
  .pill-search{
    width:100%;
  }
}

/* Pill genérico (Usuario, Tema, etc.) */
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 20px;
  border-radius:999px;
  background:#fff;
  box-shadow:0 6px 18px rgba(15,23,42,.12);
  border:1px solid rgba(148,163,253,0.16);
}
.pill-quick{
  font-weight:100;
  background:var(--surface);
  color:var(--text);
  text-decoration:none;
  box-shadow:0 6px 18px rgba(15,23,42,.12);
  height:48px;
  padding:0 22px;
  display:inline-flex;
  align-items:center;
}
.pill-quick__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-right:6px;
  font-size:18px;
  font-weight:700;
  color:inherit;
}
.pill-quick__text{
  white-space:nowrap;
  font-size: 14px;
}
.pill-theme{
  cursor:pointer;
  justify-content:center;
  width:48px;
  height:48px;
  padding:0;
  font-size:16px;
}
.pill-theme .theme-icon{
  font-size:16px;
}

/* Buscador: sin pill extra, solo ocupa espacio y deja que el input sea la píldora */
.pill-search{
  flex:1 1 auto;
}

.pill-search .global-search{
  width:100%;
  position:relative;
}

/* El input actúa como pill: ancho, alto y redondeado */
.pill-search input[type="search"]{
  width:100%;
  padding:12px 18px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--surface);
  box-shadow:0 6px 18px rgba(15,23,42,.12);
  font-size:14px;
  line-height:1.4;
  color:var(--text);
}
.pill-search input[type="search"]::placeholder{
  color:var(--muted);
}

/* Usuario: pill compacta con nombre centrado */
.pill-user{
  font-size:13px;
  font-weight:500;
  white-space:nowrap;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  cursor:pointer;
  position:relative;
  width:48px;
  height:48px;
  padding:0;
}
.pill-user__indicator{
  position:absolute;
  top:4px;
  right:4px;
  min-width:14px;
  height:14px;
  border-radius:999px;
  background:#ef4444;
  border:1px solid #fff;
  font-size:9px;
  font-weight:700;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}
.pill-user__indicator.hidden{
  display:none;
}
.pill-user .user-avatar{
  width:32px;
  height:32px;
  border-radius:999px;
  object-fit:cover;
}
.pill-user .chevron{
  width:16px;
  height:16px;
  transition:transform .2s ease;
}
.pill-user.open .chevron{
  transform:rotate(180deg);
}
.user-menu{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:0 20px 40px rgba(15,23,42,0.18);
  min-width:190px;
  padding:6px;
  display:flex;
  flex-direction:column;
  gap:4px;
  z-index:200;
  max-height:calc(100vh - 120px);
  overflow-y:auto;
}
.user-menu button,
.user-menu a{
  border:0;
  background:transparent;
  text-align:left;
  padding:10px 12px;
  border-radius:12px;
  font-size:13px;
  font-weight:500;
  color:var(--text);
  cursor:pointer;
}
.user-menu button:hover,
.user-menu a:hover{
  background:rgba(148,163,253,0.15);
}
.user-menu a{
  text-decoration:none;
  display:block;
}

/* Tema oscuro: pill con icono centrado */
/* Dark mode para pills y buscador */
html.dark .pill{
  background:#0b1220;
  border-color:#1f2937;
  box-shadow:none;
}
html.dark .pill-quick{
  background:#0b1220;
  border-color:#1f2937;
  color:#e5e7eb;
  box-shadow:none;
}
html.dark .pill-quick__icon{
  background:transparent;
}
html.dark .pill-search input[type="search"]{
  background:#0b1220;
  border-color:#1f2937;
  color:#e5e7eb;
}
html.dark .page-top{
  background:transparent;
  box-shadow:none;
}

/* Logout pill al pie del sidebar pill */
.sidebar-pill .pill-logout{
  margin-top:auto;
  width:100%;
  display:flex;
  justify-content:center;
}
.sidebar-pill .pill-logout-item{
  padding:6px 0;
}

/* Toolbar estilo pills (Clientes, Asistencias) */
.clients-toolbar,
.tickets-toolbar,
.boards-toolbar,
.settings-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  align-items:center;
}
.boards-toolbar{
  justify-content:flex-end;
  margin-bottom:16px;
}
.settings-toolbar{
  justify-content:center;
  margin-top:16px;
  margin-bottom:24px;
}
.settings-tab{
  min-width:140px;
  text-align:center;
}
.settings-card{
  width:min(1100px,100%);
  margin:0 auto;
}
.settings-file-trigger{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 18px;
  border-radius:999px;
  border:1px dashed rgba(99,102,241,0.4);
  font-weight:600;
  color:#4338ca;
  cursor:pointer;
  background:rgba(99,102,241,0.08);
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.settings-file-trigger input{ display:none; }
.settings-file-trigger:hover{ background:rgba(99,102,241,0.15); border-color:var(--ring); }
html.dark .settings-file-trigger{ color:#c4b5fd; border-color:rgba(129,140,248,0.5); background:rgba(79,70,229,0.2); }
.public-file-url{ max-width:360px; word-break:break-all; font-size:.9rem; }
.public-file-url a{ color:var(--ring); }
.public-files-toolbar{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:12px; }
.public-files-search{ flex:1 1 280px; }
.public-files-search input{ width:100%; border-radius:999px; border:1px solid rgba(148,163,184,.4); padding:10px 14px; }
.public-files-card{ max-width:1280px; width:100%; margin:0 auto; }
.share-menu{ position:relative; display:inline-block; }
.share-dropdown{ position:absolute; top:100%; right:0; background:#fff; border:1px solid rgba(148,163,184,.5); border-radius:12px; padding:8px; display:flex; flex-direction:column; gap:6px; min-width:160px; box-shadow:0 10px 25px rgba(15,23,42,.12); z-index:10; }
.share-dropdown.hidden{ display:none; }
.share-dropdown button{ border:none; background:none; text-align:left; padding:6px 8px; border-radius:8px; font-size:.9rem; cursor:pointer; }
.share-dropdown button:hover{ background:rgba(148,163,184,.15); }
html.dark .share-dropdown{ background:#0b1220; border-color:#1f2a3d; box-shadow:0 10px 25px rgba(0,0,0,.6); }
html.dark .share-dropdown button{ color:#e2e8f0; }
.form-field-spacer{ height:16px; }
.form-field--file{ padding-bottom:16px; }
.form-field--file .file-field{ min-height:180px; align-items:center; }
.form-field--file{ margin-bottom:16px; }
.settings-form{
  display:flex;
  flex-direction:column;
  gap:18px;
}
.settings-form__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px 18px;
}
.settings-form__grid--2{ grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.settings-form__grid--3{ grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
.settings-field{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--surface);
  box-shadow:0 10px 28px rgba(15,23,42,0.05);
}
.settings-field > label{
  font-size:13px;
  font-weight:600;
  color:var(--text);
}
.settings-field input[type="file"]{
  padding:0;
  border:none;
  background:transparent;
}
.settings-field__hint,
.settings-field small{
  font-size:12px;
  color:var(--muted);
}
.user-payroll-panel{
  margin-top:24px;
  padding:0;
  border-radius:0;
  border:none;
  background:transparent;
  box-shadow:none;
  position:relative;
  z-index:5;
}
.user-payroll-panel.hidden{
  display:none;
}
.user-payroll-panel__head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:16px;
}
.user-payroll-panel__head h4{
  margin:0;
}
.payroll-helper{
  margin:4px 0 0;
  color:#6b7280;
  font-size:.9rem;
}
.payroll-steps{
  display:flex;
  flex-direction:column;
  gap:16px;
  margin-bottom:16px;
}
.payroll-steps__row{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.payroll-user-filter{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.payroll-user-picker{
  position:relative;
  z-index:30;
  display:flex;
  flex-direction:column;
  height:100%;
}
.payroll-user-picker__toggle{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  border:1px solid rgba(148,163,184,.6);
  border-radius:14px;
  padding:10px 14px;
  background:#fff;
  font-size:.95rem;
  cursor:pointer;
  transition:box-shadow .15s ease, border-color .15s ease;
}
.payroll-user-picker__toggle{
  flex:1;
}
.payroll-user-picker__toggle span{
  pointer-events:none;
}
.payroll-user-picker__toggle:focus-visible{
  outline:2px solid var(--primary);
}
.payroll-user-picker.is-open .payroll-user-picker__toggle{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(99,102,241,.12);
}
.payroll-user-picker__caret{
  font-size:.8rem;
  color:#475569;
}
.payroll-user-picker__dropdown{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  right:0;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.35);
  background:#fff;
  box-shadow:0 14px 35px rgba(15,23,42,.15);
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:12px;
  z-index:60;
}
.payroll-user-picker__search input{
  width:100%;
  border:1px solid rgba(148,163,184,.6);
  border-radius:999px;
  padding:8px 12px;
  font-size:.9rem;
}
.payroll-user-picker__list{
  max-height:240px;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.payroll-user-option{
  width:100%;
  border:none;
  border-radius:12px;
  background:rgba(248,250,252,0.8);
  padding:10px 12px;
  text-align:left;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:4px;
  transition:background .15s ease, color .15s ease;
}
.payroll-user-option:hover{
  background:rgba(99,102,241,0.12);
}
.payroll-user-option.is-active{
  background:rgba(99,102,241,0.18);
  color:var(--text);
}
.payroll-user-option__name{
  font-weight:600;
}
.payroll-user-option__email{
  font-size:.82rem;
  color:#6b7280;
}
.payroll-user-picker__empty{
  margin:0;
  font-size:.85rem;
  color:#94a3b8;
  text-align:center;
}
html.dark .payroll-user-picker__toggle{
  background:#0f172a;
  border-color:#1f2937;
  color:#e2e8f0;
}
html.dark .payroll-user-picker__caret{
  color:#cbd5f5;
}
html.dark .payroll-user-picker__dropdown{
  background:#0b1220;
  border-color:#1f2937;
  box-shadow:0 18px 40px rgba(0,0,0,.6);
}
html.dark .payroll-user-picker__search input{
  background:#0f172a;
  border-color:#1f2937;
  color:#e2e8f0;
}
html.dark .payroll-user-option{
  background:#0f172a;
  color:#e2e8f0;
}
html.dark .payroll-user-option__email{
  color:#94a3b8;
}
html.dark .payroll-user-option:hover,
html.dark .payroll-user-option.is-active{
  background:rgba(99,102,241,0.35);
}
html.dark .payroll-user-picker__empty{
  color:#64748b;
}
.payroll-step{
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.35);
  background:rgba(249,250,251,.85);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.payroll-step .settings-field{
  background:var(--surface);
}
.payroll-step__body{
  display:flex;
  width:100%;
}
.payroll-step__body--fill{
  flex:1;
}
.payroll-step__body--fill .settings-field{
  flex:1;
  display:flex;
  flex-direction:column;
  height:100%;
}
.payroll-step__body--fill .settings-field > label{
  display:flex;
  flex-direction:column;
  flex:1;
}
.payroll-step__body--fill .payroll-user-picker,
.payroll-step__body--fill input{
  flex:1;
}
.payroll-step__body--center{
  align-items:stretch;
}
.payroll-upload-btn{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1rem;
}
.payroll-step--full{
  width:100%;
}

html.dark .payroll-step{
  background:#0f172a;
  border-color:#1f2937;
}
html.dark .payroll-step .settings-field{
  background:#0b1220;
  border-color:#1f2937;
}
html.dark .payroll-step__title{
  color:#e2e8f0;
}
html.dark .payroll-helper{
  color:#cbd5f5;
}
.payroll-step__title{
  font-weight:600;
  color:var(--text);
  font-size:0.95rem;
}
.payroll-steps .settings-field{
  margin:0;
}
.payroll-dropzone{
  display:flex !important;
  flex-direction:column;
  flex:1 1 auto;
  justify-content:center;
  align-items:center;
  padding:24px !important;
  border:2px dashed rgba(148,163,184,.6);
  border-radius:16px;
  background:rgba(249,250,251,.8);
  min-height:140px;
  cursor:pointer;
  text-align:center;
  transition:border-color .15s ease, background .15s ease;
}
.payroll-dropzone.is-dragover{
  border-color:var(--primary);
  background:rgba(122,209,179,.15);
}
.dropzone-label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:.95rem;
  color:var(--text);
}
.dropzone-helper{
  font-size:.8rem;
  color:var(--muted);
}
.payroll-dropzone input[type="file"]{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
}
.payroll-dropzone strong{
  font-size:1rem;
}
.payroll-dropzone small{
  color:var(--muted);
}
.payroll-table td{
  vertical-align:middle;
}
.payroll-actions{
  display:flex;
  gap:6px;
}

@media (min-width: 992px){
  .payroll-steps__row{
    flex-direction:row;
    align-items:stretch;
  }
  .payroll-steps__row .payroll-step{
    flex:1 1 0;
  }
}
.settings-field--inline{
  flex-direction:row;
  align-items:center;
  gap:10px;
}
.settings-field--inline input{
  width:auto;
}
.settings-avatar{
  display:flex;
  align-items:center;
  gap:14px;
}
.settings-avatar__preview{
  width:68px;
  height:68px;
  border-radius:18px;
  border:1px solid var(--border);
  object-fit:cover;
  background:var(--bg);
}
.settings-avatar__actions{
  display:flex;
  flex-direction:column;
  gap:6px;
  flex:1;
}
.user-vacations-panel{
  margin-top:16px;
  border:1px solid rgba(15,23,42,.08);
  border-radius:16px;
  padding:16px;
  background:#fff;
  box-shadow:0 10px 30px rgba(15,23,42,.08);
}
.user-vacations-panel.hidden{ display:none; }
.user-vacations-panel__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.user-vacations-panel__year select{ min-width:120px; }
.user-vacations-summary{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:12px;
  margin:16px 0;
}
.user-vacations-summary div{
  background:rgba(15,23,42,.03);
  border-radius:12px;
  padding:12px;
  text-align:center;
}
.user-vacations-summary span{
  display:block;
  font-size:.85rem;
  color:rgba(15,23,42,.6);
  margin-bottom:6px;
}
.user-vacations-summary strong{ font-size:1.4rem; }
.user-vacations-actions{ margin-bottom:12px; }
.user-vacations-adjust{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}
.user-vacations-adjust input{
  flex:1;
  min-width:120px;
}
.user-vacations-note{
  margin:0;
  font-size:.9rem;
  color:rgba(15,23,42,.6);
}
html.dark .user-vacations-panel{
  background:#0f172a;
  border-color:#1f2a3d;
  box-shadow:none;
}
html.dark .user-vacations-summary div{
  background:#111b2e;
}
html.dark .user-vacations-summary span{
  color:rgba(203,213,225,.85);
}
html.dark .user-vacations-note{
  color:rgba(203,213,225,.8);
}
.settings-fieldset{
  border:1px solid var(--border);
  border-radius:18px;
  padding:16px;
  background:var(--surface);
  box-shadow:0 10px 28px rgba(15,23,42,0.04);
  display:flex;
  flex-direction:column;
  gap:12px;
}
.settings-fieldset legend{
  font-size:14px;
  font-weight:700;
}
.settings-fieldset--perms{
  max-height:360px;
  overflow:auto;
}
.settings-fieldset--perms::-webkit-scrollbar{ width:6px }
.settings-fieldset--perms::-webkit-scrollbar-thumb{ background:rgba(99,102,241,.4); border-radius:999px; }
.settings-fieldset__helper{
  margin:0;
  font-size:13px;
  color:var(--muted);
}
.role-modal-grid{
  display:grid;
  grid-template-columns:minmax(260px,320px) 1fr;
  gap:16px;
}
@media(max-width:960px){
  .role-modal-grid{
    grid-template-columns:1fr;
  }
}
.role-card{
  background:#f8fafc;
  border:1px solid rgba(15,23,42,0.08);
  border-radius:18px;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:12px;
  box-shadow:0 8px 24px rgba(15,23,42,0.08);
}
.role-card h4{
  margin:0 0 4px;
}
.role-field label{
  font-size:13px;
  font-weight:600;
  color:var(--text);
  display:flex;
  flex-direction:column;
  gap:6px;
}
.role-field input,
.role-field textarea{
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  font-size:.95rem;
  width:100%;
}
.role-hint{
  margin:0;
  font-size:.82rem;
  color:rgba(100,116,139,.9);
}
.role-card--perms{
  background:#fff;
  border-color:rgba(15,23,42,0.05);
}
.role-perms-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
}
.role-perms-head input[type=\"search\"]{
  border:1px solid rgba(148,163,184,.7);
  border-radius:999px;
  padding:8px 14px;
  min-width:200px;
}
@media(max-width:600px){
  .role-perms-head{ flex-direction:column; align-items:flex-start; }
  .role-perms-head input[type=\"search\"]{ width:100%; }
}
html.dark .role-card{
  background:#0f172a;
  border-color:#1f2937;
  box-shadow:none;
}
html.dark .role-card--perms{
  background:#0b1220;
}
html.dark .role-field input,
html.dark .role-field textarea,
html.dark .role-perms-head input{
  background:#0b1220;
  border-color:#1f2937;
  color:#e2e8f0;
}
html.dark .role-hint{ color:rgba(148,163,184,.85); }
.settings-color{
  display:flex;
  align-items:center;
  gap:10px;
}
.settings-color input[type="color"]{
  width:56px;
  height:40px;
  padding:0;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--surface);
}
.settings-color__value{
  font-weight:600;
  font-size:13px;
  color:var(--text);
}
.clients-toolbar{
  margin-bottom:16px;
}
.clients-toolbar__search{
  flex:1 1 280px;
}
.clients-toolbar__search input{
  width:100%;
  padding:12px 18px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--surface);
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  font-size:14px;
  line-height:1.4;
  color:var(--text);
}
.tickets-toolbar__search{
  flex:1 1 280px;
  align-items:stretch;
  max-width:none;
}
.tickets-toolbar__search--compact{
  flex:0 1 200px;
  max-width:220px;
}
.tickets-toolbar__search--wide{
  flex:1 1 420px;
  max-width:none;
}
.tickets-toolbar__search input{
  font-size:14px;
  line-height:1.5;
  padding:0;
  height:100%;
}
.clients-toolbar__actions,
.tickets-toolbar__actions,
.boards-toolbar__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.clients-pagination{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 0 0;
}
.clients-pagination__page-size{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  color:var(--text);
}
.clients-pagination__page-size select{
  min-width:90px;
  padding:6px 28px 6px 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--surface);
  font-size:13px;
  color:var(--text);
}
.clients-pagination__controls{
  display:flex;
  align-items:center;
  gap:12px;
}
.clients-pagination__info{
  font-size:13px;
  color:var(--text-muted, #475569);
}
html.dark .clients-pagination__page-size select{
  background:#0b1220;
  border-color:#1f2937;
  color:#e5e7eb;
}
html.dark .clients-pagination__info{
  color:var(--text-muted, #94a3b8);
}
.settings-actions{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:16px;
  margin-bottom:0;
}
.settings-actions.bottom{
  margin-top:20px;
}
.settings-actions.outside{
  margin-bottom:24px;
}
.table-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.table-centered{
  width:80%;
  margin:0 auto;
}
.rating-stars{
  display:inline-flex;
  gap:2px;
  font-size:1rem;
  line-height:1;
}
.rating-star{
  color:#cbd5f5;
}
.rating-star.is-active{
  color:#fbbf24;
}
html.dark .rating-star{
  color:#475569;
}
html.dark .rating-star.is-active{
  color:#facc15;
}
.client-view-dl{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px 24px;
  margin:0;
}
.client-view-dl dt{
  font-size:.8rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:#64748b;
  margin-bottom:4px;
}
.client-view-dl dd{
  margin:0;
  font-size:.95rem;
  color:#0f172a;
}
html.dark .client-view-dl dt{ color:#94a3b8; }
html.dark .client-view-dl dd{ color:#e2e8f0; }
.client-view-notes{
  margin-top:16px;
  padding-top:12px;
  border-top:1px solid rgba(148,163,184,.2);
}
.client-view-notes p{
  white-space:pre-line;
  margin:6px 0 0;
}
.pill-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 20px;
  border-radius:999px;
  border:1px solid rgba(148,163,253,0.16);
  background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  font-size:13px;
  font-weight:600;
  color:#0f172a;
  cursor:pointer;
  transition:filter .15s ease, transform .15s ease;
}
.pill-action:disabled{
  opacity:.45;
  cursor:not-allowed;
  filter:none;
  transform:none;
}
.pill-action:hover{
  filter:brightness(.93);
}
.pill-action:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(52,211,153,.35);
}
.pill-action.primary{
  background:var(--ring);
  border-color:var(--ring);
  color:#fff;
}
.pill-action.danger{
  background:#ef4444;
  border-color:#ef4444;
  color:#fff;
}
.pill-action.success{
  background:var(--ring);
  border-color:var(--ring);
  color:#fff;
}
.pill-action svg{
  width:16px;
  height:16px;
}
.pill-action.outline{
  background:transparent;
  border-color:rgba(99,102,241,0.4);
  color:var(--text);
}
.pill-action-sm{
  padding:10px 16px;
  font-size:12px;
}
html.dark .clients-toolbar__search input{
  background:#0b1220;
  border-color:#1f2937;
  color:#e5e7eb;
  box-shadow:none;
}
html.dark .pill-action{
  background:#111827;
  border-color:#1f2937;
  color:#e5e7eb;
  box-shadow:none;
}
html.dark .pill-action.primary,
html.dark .pill-action.success{
  background:var(--primary);
  border-color:var(--primary);
  color:#0b1220;
}
html.dark .pill-action.danger{
  background:#b91c1c;
  border-color:#b91c1c;
}
html.dark .pill-action.outline{
  background:transparent;
  border-color:#374151;
  color:#e5e7eb;
}

.tickets-toolbar{
  margin-bottom:16px;
}
.pill-field{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 18px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--surface);
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  font-size:13px;
  min-height:48px;
  min-width:140px;
}
.pill-color-dot{
  width:16px;
  height:16px;
  border-radius:999px;
  border:2px solid rgba(15,23,42,0.2);
  background:transparent;
  flex:0 0 16px;
  transition:background .15s ease, border-color .15s ease;
}
.pill-color-dot.is-empty{ background:transparent; }
.pill-field--type{ min-width:220px; }
.pill-field span{
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
  white-space:nowrap;
}
.pill-field[for="flt_from"] span,
.pill-field[for="flt_to"] span{
  font-size:6px;
}
.pill-field input,
.pill-field select{
  border:0;
  background:transparent;
  font-size:clamp(11px, 1vw, 13px);
  color:var(--text);
  padding:0;
  margin:0;
  flex:1 1 auto;
  min-width:0;
  box-shadow:none;
}
.pill-field input::placeholder{
  font-size:clamp(10px, 0.9vw, 12px);
  color:var(--muted);
}
.pill-field select{
  padding-right:24px;
}
.pill-field input:focus,
.pill-field select:focus{
  outline:none;
  box-shadow:none;
}
.pill-field .combo{
  flex:1 1 auto;
  min-width:0;
}
.pill-field .combo input[type="search"]{
  border:0;
  background:transparent;
  padding:0;
  box-shadow:none;
}
.pill-field:focus-within{
  border-color:var(--ring);
  box-shadow:0 0 0 3px rgba(99,102,241,.2);
}
.pill-field--compact{
  flex:0 1 160px;
}
.pill-field--wide{
  flex:1 1 360px;
}
.pill-field--full{
  flex:1 1 520px;
}
html.dark .pill-field{
  background:#0b1220;
  border-color:#1f2937;
  box-shadow:none;
}
html.dark .pill-field input,
html.dark .pill-field select{
  color:#e5e7eb;
}
html.dark .pill-color-dot{
  border-color:#4b5563;
}

.filters-pills{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  max-height:0;
  opacity:0;
  overflow:hidden;
  pointer-events:none;
  margin-top:0;
  transition:max-height .35s ease, opacity .25s ease, margin-top .25s ease;
}
.filters-pills.is-open{
  max-height:1200px;
  opacity:1;
  pointer-events:auto;
  margin-top:12px;
}
.filters-pills .pill-field{
  flex:1 1 220px;
}
.filters-pills .pill-field.pill-field--compact{
  flex:0 1 180px;
}
.filters-pills .pill-field.pill-field--full{
  flex:1 1 480px;
}

.filters-area{
  margin-bottom:16px;
}
.debug-box,
.tickets-debug{
  margin-top:8px;
  font-size:12px;
  padding:6px 8px;
  border:1px dashed var(--border);
  border-radius:8px;
  background:rgba(148,163,184,0.08);
}


/* Formulario modal de clientes */
#clientModal .modal-card{
  width:95%;
  max-width:900px;
}
#clientModal .modal-head,
#clientModal .modal-foot{
  padding:16px 24px;
}
#clientModal .modal-body{
  padding:24px;
}
.client-form{
  display:flex;
  flex-direction:column;
  gap:20px;
}
.client-form-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:20px 24px;
}
.client-form-field{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.client-form-field.full{
  grid-column:1 / -1;
}
.client-form-field label{
  display:block;
  font-size:13px;
  font-weight:600;
  color:var(--text);
  opacity:.85;
}
.client-form-field .help{
  font-size:12px;
  color:var(--muted);
}
.client-form-field input,
.client-form-field textarea{
  width:100%;
}
.client-form-field textarea{
  min-height:120px;
}
.palettes-grid--examples{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  grid-auto-rows:1fr;
  align-items:stretch;
}
.palette-card--example{
  display:flex;
  flex-direction:column;
  gap:12px;
  text-align:center;
  height:100%;
}
.palette-card--example .palette-card__info{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.palette-card--example .palette-card__actions{
  display:flex;
  justify-content:center;
  margin-top:auto;
}
.palette-card--example .palette-card__actions .pill-action{
  min-width:160px;
  justify-content:center;
}
html.dark .user-menu{
  background:#0b1220;
  border-color:#1f2937;
  box-shadow:none;
}
html.dark .user-menu button,
html.dark .user-menu a{
  color:#e5e7eb;
}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* === Centro de conocimiento === */
.knowledge-search{ margin:10px 0 20px; }
.knowledge-search input{ width:100%; padding:12px 16px; border-radius:999px; border:1px solid rgba(15,23,42,.12); background:#fff; box-shadow:0 10px 30px rgba(15,23,42,.08); font-size:0.95rem; }
html.dark .knowledge-search input{ background:rgba(15,23,42,.65); color:#e2e8f0; border-color:rgba(148,163,184,.35); }
.knowledge-layout{ display:grid; gap:20px; grid-template-columns:minmax(260px,1fr); align-items:start; grid-auto-rows:auto; }
@media (min-width:900px){ .knowledge-layout{ grid-template-columns:repeat(2,minmax(260px,1fr)); } }
@media (min-width:1200px){ .knowledge-layout{ grid-template-columns:1fr 1fr 1.2fr; } }
.knowledge-column{ display:flex; flex-direction:column; gap:14px; min-height:360px; height:auto; }
.knowledge-column--wide{ min-height:360px; }
.knowledge-layout > .card{ margin-top:0 !important; height:auto; }
.knowledge-head p{ color:rgba(99,102,241,.75); }
.knowledge-center .muted{ color:rgba(100,116,139,.9); font-size:.85rem; margin:2px 0 0; }
html.dark .knowledge-center .muted{ color:rgba(203,213,225,.85); }
.knowledge-visibility-hint{
  margin:4px 0 0;
  font-size:.8rem;
  color:rgba(100,116,139,.9);
}
html.dark .knowledge-visibility-hint{
  color:rgba(203,213,225,.8);
}
.kc-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:10px; }
.kc-head h3{ margin:0 0 2px; font-size:1.05rem; }
.knowledge-list{ display:flex; flex-direction:column; gap:12px; min-height:240px; }
.knowledge-empty{ padding:24px; border:1px dashed rgba(15,23,42,.15); border-radius:14px; text-align:center; color:rgba(100,116,139,.9); font-size:.9rem; }
html.dark .knowledge-empty{ border-color:rgba(148,163,184,.35); color:rgba(203,213,225,.85); }
.knowledge-item{ display:flex; gap:12px; justify-content:space-between; align-items:flex-start; border:1px solid rgba(15,23,42,.08); border-radius:16px; padding:12px 14px; background:rgba(15,23,42,.02); cursor:pointer; transition:border-color .2s ease, background .2s ease, transform .2s ease; }
.knowledge-item:hover{ border-color:var(--primary); transform:translateY(-1px); }
.knowledge-item.active{ border-color:var(--primary); background:rgba(122,209,179,.12); box-shadow:0 0 0 1px rgba(122,209,179,.25); }
.knowledge-item--article{ cursor:pointer; flex-direction:column; }
html.dark .knowledge-item--article{ background:rgba(255,255,255,.03); }
.knowledge-item--article .knowledge-item__actions{ align-self:flex-end; }
.knowledge-item--article .knowledge-article-detail{ max-height:0; overflow:hidden; transition:max-height .3s ease; width:100%; overflow-wrap:break-word; }
.knowledge-item--article.expanded{ border-color:var(--primary); background:rgba(122,209,179,.15); box-shadow:0 0 0 1px rgba(122,209,179,.25); }
.knowledge-item--article.expanded .knowledge-article-detail{ margin-top:12px; padding-top:12px; border-top:1px solid rgba(15,23,42,.12); max-height:var(--expanded-height, 1200px); overflow:visible; }
html.dark .knowledge-item--article.expanded{ background:rgba(122,209,179,.18); }
html.dark .knowledge-item--article.expanded .knowledge-article-detail{ border-top-color:rgba(255,255,255,.2); }
html.dark .knowledge-item{ border-color:rgba(255,255,255,.08); background:rgba(255,255,255,.02); }
html.dark .knowledge-item.active{ background:rgba(122,209,179,.2); box-shadow:0 0 0 1px rgba(122,209,179,.35); }
.knowledge-item__body{ flex:1; min-width:0; }
.knowledge-item__title{ font-weight:600; display:flex; gap:8px; align-items:center; margin-bottom:4px; font-size:1rem; }
.knowledge-item__desc{ margin:0 0 6px; font-size:.9rem; color:rgba(15,23,42,.75); }
html.dark .knowledge-item__desc{ color:rgba(229,231,235,.85); }
.knowledge-item__meta{ font-size:.78rem; color:rgba(100,116,139,.95); }
html.dark .knowledge-item__meta{ color:rgba(148,163,184,.9); }
.knowledge-item__actions{ display:flex; flex-direction:column; gap:6px; }
@media (min-width:640px){ .knowledge-item__actions{ flex-direction:row; } }
.knowledge-status{ font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; padding:2px 8px; border-radius:999px; background:rgba(15,23,42,.08); color:#0f172a; }
.knowledge-status--published{ background:rgba(34,197,94,.15); color:#15803d; }
.knowledge-status--draft{ background:rgba(148,163,184,.2); color:#475569; }
.knowledge-status--archived{ background:rgba(148,163,184,.2); color:#475569; border:1px dashed rgba(148,163,184,.5); }
html.dark .knowledge-status{ background:rgba(255,255,255,.12); color:#e2e8f0; }
html.dark .knowledge-status--published{ background:rgba(34,197,94,.2); color:#86efac; }
html.dark .knowledge-status--draft{ background:rgba(148,163,184,.2); color:#cbd5f5; }
html.dark .knowledge-status--archived{ background:rgba(148,163,184,.2); color:#cbd5f5; border-color:rgba(148,163,184,.4); }
.knowledge-article-meta{ display:flex; flex-wrap:wrap; gap:8px; font-size:.82rem; color:rgba(100,116,139,.95); }
html.dark .knowledge-article-meta{ color:rgba(148,163,184,.9); }
.knowledge-article-summary{ font-weight:600; margin:6px 0; color:#0f172a; }
html.dark .knowledge-article-summary{ color:#f8fafc; }
.knowledge-article-content{ color:#0f172a; line-height:1.5; font-size:.95rem; }
html.dark .knowledge-article-content{ color:#e2e8f0; }
.knowledge-article-content p{ margin-bottom:8px; }
.knowledge-article-content ul{ padding-left:18px; margin:6px 0 10px; }
.knowledge-article-content pre{ background:rgba(15,23,42,.08); padding:10px; border-radius:10px; overflow:auto; }
html.dark .knowledge-article-content pre{ background:rgba(15,23,42,.35); }
.knowledge-editor-card{
  max-width:min(920px, calc(100vw - 24px));
  width:min(920px, calc(100vw - 24px));
  max-height:92vh;
  display:flex;
  flex-direction:column;
}
.knowledge-modal-body{
  background:linear-gradient(180deg, #f6f8fb 0%, #fff 120%);
  flex:1;
  overflow:auto;
  padding-right:min(2vw, 24px);
}
.knowledge-form{ display:flex; flex-direction:column; gap:16px; }
.knowledge-form-grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.knowledge-form-card{ background:#fff; border:1px solid rgba(15,23,42,.08); border-radius:20px; padding:16px; display:flex; flex-direction:column; gap:12px; box-shadow:0 10px 30px rgba(15,23,42,.08); }
.knowledge-form-card h4{ margin:0; font-size:1rem; }
.knowledge-form-fields{ display:flex; flex-direction:column; gap:12px; }
.knowledge-form-fields--two{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; }
.knowledge-form-card label{ font-size:.9rem; font-weight:600; color:#0f172a; display:flex; flex-direction:column; gap:6px; }
.knowledge-form-card textarea,
.knowledge-form-card input,
.knowledge-form-card select{ width:100%; border:1px solid rgba(15,23,42,.12); border-radius:12px; padding:10px 12px; font-size:.92rem; background:#fff; }
.knowledge-form-card--meta{ background:#f5f7fb; }
.knowledge-form-card--visibility{ background:#fdfcff; }
.knowledge-visibility__helper{ font-size:.85rem; color:rgba(100,116,139,.95); margin:0; }
.knowledge-visibility__toggle{ align-items:center; }
.knowledge-visibility__groups{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; margin-top:10px; }
.knowledge-visibility__groups--hidden{ display:none; }
.knowledge-visibility__group{ display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid rgba(15,23,42,.12); border-radius:12px; background:#fff; font-weight:600; }
.knowledge-visibility__group input{ width:auto; margin:0; }
.knowledge-visibility__group span{ flex:1; }
.knowledge-visibility__empty{ font-size:.85rem; color:rgba(100,116,139,.9); margin:6px 0 0; }
@media (min-width: 900px){
  .knowledge-visibility__groups{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
html.dark .knowledge-form-card{ background:#0b1220; border-color:#1e293b; box-shadow:none; }
html.dark .knowledge-form-card--meta{ background:#111b2e; }
html.dark .knowledge-form-card--visibility{ background:#0f172a; }
html.dark .knowledge-form-card label{ color:#e2e8f0; }
html.dark .knowledge-form-card textarea,
html.dark .knowledge-form-card input,
html.dark .knowledge-form-card select{ background:#0f172a; border-color:#1f2a3d; color:#e2e8f0; }
html.dark .knowledge-visibility__helper{ color:rgba(203,213,225,.85); }
html.dark .knowledge-visibility__group{ border-color:#1f2a3d; background:#0b1220; }
html.dark .knowledge-visibility__empty{ color:rgba(203,213,225,.8); }
.knowledge-form-card--attachments{ background:#fdfcfe; }
html.dark .knowledge-form-card--attachments{ background:#0f172a; }
.knowledge-attachments__head{ display:flex; justify-content:space-between; align-items:flex-start; }
.knowledge-attachments__head h4{ margin-bottom:2px; }
.knowledge-attachments__empty{ font-size:.9rem; color:rgba(100,116,139,.9); }
html.dark .knowledge-attachments__empty{ color:rgba(203,213,225,.8); }
.knowledge-attachments__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.knowledge-attachment{ display:flex; justify-content:space-between; gap:12px; border:1px solid rgba(15,23,42,.08); border-radius:14px; padding:10px 14px; background:#fff; align-items:center; flex-wrap:wrap; }
.knowledge-attachment__info{ display:flex; flex-direction:column; gap:4px; }
.knowledge-attachment__name{ font-weight:600; }
.knowledge-attachment__meta{ font-size:.8rem; color:rgba(100,116,139,.9); }
.knowledge-attachment__actions{ display:flex; gap:8px; flex-wrap:wrap; }
html.dark .knowledge-attachment{ background:#0b1220; border-color:#1f2a3d; }
.knowledge-file-trigger{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 16px; border-radius:16px; border:1px dashed rgba(99,102,241,.5); cursor:pointer; font-weight:600; color:#4c1d95; background:rgba(99,102,241,.08); text-align:center; }
.knowledge-file-trigger span{ pointer-events:none; }
html.dark .knowledge-file-trigger{ color:#c4b5fd; background:rgba(99,102,241,.18); border-color:rgba(167,139,250,.6); }
.knowledge-file-trigger input{ display:none; }
.knowledge-attachments__hint{ font-size:.78rem; color:rgba(100,116,139,.9); margin:4px 0 0; }
html.dark .knowledge-attachments__hint{ color:rgba(203,213,225,.8); }
.knowledge-file-trigger.disabled{ opacity:.4; cursor:not-allowed; }
.knowledge-modal .modal-card{
  background:#fff;
}
html.dark .knowledge-modal .modal-card{
  background:#081021;
  border-color:#1f2a3d;
  box-shadow:0 20px 50px rgba(0,0,0,.65);
}
html.dark .knowledge-modal .modal-body{
  background:transparent;
}
.client-portal-modal .modal-body{
  background:linear-gradient(180deg,#f8fbff 0%,#ffffff 110%);
}
.client-portal-grid{
  display:grid;
  gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.client-portal-section{
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  border-radius:18px;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:12px;
  box-shadow:0 20px 40px rgba(15,23,42,.08);
}
.client-portal-section--qr{
  align-items:center;
  text-align:center;
}
.client-portal-helper{
  margin:0;
  color:rgba(100,116,139,.95);
  font-size:.9rem;
}
.client-portal-label{
  font-size:.85rem;
  color:#475569;
  font-weight:600;
  margin-bottom:-6px;
}
.client-portal-link{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.client-portal-link input{
  flex:1;
  border:1px solid rgba(15,23,42,.12);
  border-radius:12px;
  padding:10px 12px;
  min-width:200px;
  font-size:.95rem;
}
.client-portal-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.client-portal-updated{
  color:rgba(100,116,139,.8);
  font-size:.82rem;
}
.client-portal-qrbox{
  width:100%;
  min-height:240px;
  border:1px dashed rgba(15,23,42,.15);
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  padding:12px;
}
.client-portal-qrbox canvas,
.client-portal-qrbox img{
  max-width:100%;
  height:auto;
}
html.dark .client-portal-modal .modal-body{
  background:linear-gradient(180deg,#0b1220 0%,#111b2e 120%);
}
html.dark .client-portal-section{
  background:#0f172a;
  border-color:#1f2a3d;
  box-shadow:none;
}
html.dark .client-portal-helper,
html.dark .client-portal-label,
html.dark .client-portal-updated{
  color:rgba(203,213,225,.85);
}
html.dark .client-portal-link input{
  background:#0b1220;
  border-color:#1f2a3d;
  color:#e2e8f0;
}
html.dark .client-portal-qrbox{
  border-color:rgba(203,213,225,.2);
  background:#0b1220;
}
@media (max-width:768px){
  .knowledge-editor-card{
    width:calc(100vw - 20px);
    max-height:90vh;
  }
}
@media (max-width:600px){
  .knowledge-form-fields--two{
    grid-template-columns:1fr;
  }
}
.ka-meta{ display:flex; gap:8px; flex-wrap:wrap; font-size:.85rem; color:rgba(100,116,139,.95); margin-bottom:8px; }
html.dark .ka-meta{ color:rgba(148,163,184,.9); }
.ka-meta span{ display:flex; gap:6px; align-items:center; }
.ka-summary{ font-weight:600; color:#0f172a; margin-bottom:10px; }
html.dark .ka-summary{ color:#f8fafc; }
.ka-content{ color:#0f172a; line-height:1.55; }
html.dark .ka-content{ color:#e2e8f0; }
.ka-content p{ margin-bottom:10px; }
.ka-content ul{ padding-left:20px; margin-bottom:10px; }
.ka-content pre{ background:rgba(15,23,42,.08); padding:12px; border-radius:12px; overflow:auto; }
html.dark .ka-content pre{ background:rgba(15,23,42,.35); }
.color-pill{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; background:rgba(148,163,184,.15); font-size:.85rem; font-weight:600; color:#0f172a; }
.color-pill__dot{ width:14px; height:14px; border-radius:50%; background:var(--dot-color,#94a3b8); border:1px solid rgba(15,23,42,.08); box-shadow:0 0 0 3px rgba(15,23,42,.04); }
.color-pill__code{ letter-spacing:.05em; }
.color-picker-field{ display:flex; align-items:center; gap:12px; }
.color-picker-field input[type="color"]{ width:52px; height:42px; padding:0; border-radius:12px; border:none; background:none; }
.color-picker-field span{ font-weight:600; font-size:.9rem; }
.calendar-page .calendar-head-actions{ display:flex; align-items:center; gap:12px; }
.calendar-head-month{ font-size:1.2rem; font-weight:600; text-transform:capitalize; min-width:160px; text-align:center; }
.calendar-page .calendar-month{ min-width:180px; text-transform:capitalize; font-weight:600; text-align:center; }
.calendar-toolbar{ display:flex; flex-direction:column; gap:12px; margin-bottom:16px; padding:0; }
.calendar-toolbar__left{ display:flex; flex-direction:column; gap:10px; }
.calendar-toolbar__label{ margin:0; font-size:.85rem; text-transform:uppercase; letter-spacing:.08em; color:#64748b; }
.calendar-filters{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:12px; }
.calendar-month-switch{ display:flex; gap:8px; align-items:center; }
.calendar-toolbar-actions{ display:flex; gap:16px; justify-content:space-between; flex-wrap:wrap; align-items:center; }
.calendar-toolbar-buttons{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.calendar-filter{ border:1px solid rgba(148,163,184,.4); border-radius:16px; padding:10px 14px; font-size:.9rem; cursor:pointer; background:#f8fafc; color:#0f172a; display:flex; align-items:center; gap:10px; min-width:160px; justify-content:space-between; transition:.25s; }
.calendar-filter__dot{ width:12px; height:12px; border-radius:50%; background:var(--chip-color,#0ea5e9); box-shadow:0 0 0 3px rgba(15,23,42,.05); }
.calendar-filter__label{ font-weight:600; flex:1; text-align:left; }
.calendar-filter__toggle{ font-size:.8rem; color:#475569; }
.calendar-filter.active{ background:#fff; border-color:var(--chip-color,#0ea5e9); box-shadow:0 6px 18px rgba(14,165,233,.15); }
.calendar-filter.active .calendar-filter__toggle{ color:#0ea5e9; }
html.dark .calendar-toolbar__label{ color:#94a3b8; }
html.dark .calendar-filter{ background:#0f172a; border-color:#1f2a3d; color:#e2e8f0; }
html.dark .calendar-filter__toggle{ color:#94a3b8; }
html.dark .calendar-filter.active{ background:#0b1220; }
.calendar-grid{ display:grid; grid-template-columns:repeat(7,minmax(120px,1fr)); gap:1px; background:#e2e8f0; border-radius:24px; overflow:hidden; }
.calendar-day{ background:#fff; min-height:140px; display:flex; flex-direction:column; border:1px solid rgba(148,163,184,.25); padding:8px; cursor:pointer; transition:.2s; }
.calendar-day--muted{ background:#f8fafc; color:#94a3b8; }
.calendar-day--today{ border:1px solid #0ea5e9; }
.calendar-day__head{ font-size:14px; font-weight:600; margin-bottom:6px; display:flex; justify-content:space-between; align-items:center; }
.calendar-day__events{ display:flex; flex-direction:column; gap:4px; }
.calendar-event-chip{ display:block; width:100%; text-align:left; border:none; border-radius:8px; padding:4px 8px; font-size:13px; color:#0f172a; background:rgba(148,163,184,.2); cursor:pointer; border-left:4px solid var(--chip-color,#0ea5e9); }
.calendar-form-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin-bottom:12px; }
.calendar-form-inline{ display:flex; align-items:center; gap:8px; margin-top:24px; }
.calendar-form-dates label{ margin-bottom:0; }
.calendar-ticket-link{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px; border:1px dashed rgba(59,130,246,.4); border-radius:14px; background:rgba(59,130,246,.05); margin-bottom:12px; }
.calendar-ticket-link.hidden{ display:none; }
.calendar-ticket-detail{ display:block; padding:16px; }
.calendar-ticket-detail.hidden{ display:none; }
.calendar-ticket-detail__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.calendar-ticket-detail__body{ max-height:60vh; overflow:auto; padding-right:6px; }
#calendarEventContent.hidden{ display:none; }

html.dark .calendar-grid{ background:#1f2937; }
html.dark .calendar-day{
  background:#0b1220;
  border-color:#1f2937;
  color:#e2e8f0;
}
html.dark .calendar-day--muted{ background:#0f172a; color:#64748b; }
html.dark .calendar-day__head{ color:#e2e8f0; }
html.dark .calendar-event-chip{
  color:#e2e8f0;
  background:rgba(148,163,184,0.18);
  border-left-color:var(--chip-color,#38bdf8);
}
html.dark .calendar-ticket-link{
  border-color:rgba(59,130,246,.5);
  background:rgba(59,130,246,.08);
  color:#e2e8f0;
}
html.dark .calendar-ticket-detail{ background:#0b1220; color:#e2e8f0; }
@media (max-width:1024px){
  .calendar-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .calendar-day{ min-height:120px; }
}
.modal.modal-animate .modal-card{
  animation: modalPop .28s ease;
}
@keyframes modalPop{
  from{ transform:translateY(16px) scale(.97); opacity:0; }
  to{ transform:translateY(0) scale(1); opacity:1; }
}
.messages-page{
  padding-bottom:24px;
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;
  height: var(--messages-height, calc(100vh - 64px));
  max-height: var(--messages-height, calc(100vh - 64px));
  overflow:hidden;
}
.messages-layout{
  display:grid;
  grid-template-columns:320px 1fr;
  gap:16px;
  flex:1;
  min-height:0;
  height:100%;
}
.messages-sidebar,
.messages-thread{
  background:#fff;
  border:1px solid rgba(148,163,184,.3);
  border-radius:24px;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:12px;
  height:100%;
  min-height:0;
  overflow:hidden;
}
.messages-sidebar__head h2{ margin:0 0 6px; font-size:1.1rem; }
.messages-search{ position:relative; }
.messages-search input{ width:100%; border:1px solid rgba(148,163,184,.4); border-radius:12px; padding:8px 12px; }
.messages-search__results{ position:absolute; top:calc(100% + 4px); left:0; right:0; background:#fff; border:1px solid rgba(148,163,184,.3); border-radius:12px; max-height:240px; overflow:auto; z-index:20; display:flex; flex-direction:column; }
.messages-search__results.hidden{ display:none; }
.messages-search__results button{ display:flex; justify-content:space-between; align-items:center; padding:8px 12px; border:none; background:none; cursor:pointer; gap:8px; }
.messages-search__results button[data-locked]{ opacity:.45; cursor:not-allowed; }
.messages-search__empty{ padding:8px 12px; font-size:.9rem; }
.conversation-list{ flex:1; overflow:auto; display:flex; flex-direction:column; gap:6px; }
.conversation-empty{ opacity:.7; text-align:center; padding:24px 0; }
.conversation{ width:100%; text-align:left; border:1px solid rgba(148,163,184,.2); border-radius:16px; padding:10px 12px; background:#fff; display:flex; justify-content:space-between; gap:12px; cursor:pointer; }
.conversation.active{ border-color:var(--primary,#7ad1b3); box-shadow:0 6px 18px rgba(122,209,179,.3); }
.conversation__body{
  display:flex;
  flex-direction:column;
  gap:4px;
  flex:1;
  position:relative;
  padding-left:42px;
}
.conversation__body .conversation__avatar{
  position:absolute;
  left:0;
  top:0;
  width:32px;
  height:32px;
  border-radius:999px;
  object-fit:cover;
  border:1px solid rgba(148,163,184,.3);
}
html.dark .conversation__body .conversation__avatar{
  border-color:#1f2937;
}
.conversation__title{ font-weight:500; }
.conversation__preview{ font-size:.85rem; color:#64748b; }
.conversation--unread .conversation__title{ font-weight:700; }
.conversation__meta{ display:flex; align-items:center; gap:6px; }
.messages-thread__head{ display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid rgba(148,163,184,.3); padding-bottom:12px; gap:12px; }
.thread-head-actions{
  display:flex;
  align-items:center;
  gap:10px;
}
.thread-head-actions .pill-action{
  white-space:nowrap;
}
.thread-subtitle{ margin:0; color:#64748b; font-size:.9rem; }
.messages-history{
  flex:1;
  min-height:0;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding-right:6px;
}
.messages-empty{ opacity:.7; text-align:center; margin-top:60px; }
.msg{ display:flex; }
.msg--me{ justify-content:flex-end; }
.msg-bubble{ max-width:70%; border-radius:16px; padding:10px 14px; background:#f1f5f9; }
.msg--me .msg-bubble{ background:#d1fae5; }
.msg-text{ white-space:pre-line; }
.msg-attachment{ margin-top:6px; }
.msg-attachment a{ color:#2563eb; font-size:.9rem; }
.msg-time{ font-size:.75rem; text-align:right; margin-top:4px; color:#64748b; }
.messages-form{ display:flex; flex-direction:column; gap:8px; border-top:1px solid rgba(148,163,184,.2); padding-top:12px; }
.messages-form textarea{ width:100%; border-radius:16px; border:1px solid rgba(148,163,184,.4); padding:12px; resize:vertical; min-height:68px; }
.messages-form__actions{ display:flex; justify-content:space-between; align-items:center; }
.file-pill{ cursor:pointer; }
.file-pill input{ display:none; }
.dot{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.dot-online{ background:#22c55e; }
.dot-offline{ background:#94a3b8; }
.chat-widget{ position:fixed; bottom:20px; right:20px; z-index:1000; }
.chat-widget__toggle{
  position:relative;
  border:none;
  border-radius:999px;
  padding:12px 16px;
  background:#0ea5e9;
  color:#fff;
  cursor:pointer;
  box-shadow:0 10px 25px rgba(14,165,233,.3);
}
.chat-widget__toggle.has-unread::after{
  content:'';
  position:absolute;
  top:6px;
  right:6px;
  width:12px;
  height:12px;
  border-radius:50%;
  background:#ef4444;
  border:2px solid #fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.1);
}
.chat-widget__panel{
  position:absolute;
  bottom:60px;
  right:0;
  width:320px;
  background:#fff;
  border:1px solid rgba(148,163,184,.3);
  border-radius:20px;
  box-shadow:0 20px 50px rgba(15,23,42,.2);
  display:flex;
  flex-direction:column;
  height:min(520px,75vh);
  max-height:75vh;
  overflow:hidden;
}
.chat-widget__panel.hidden{ display:none; }
.chat-widget__head{ padding:12px 14px; border-bottom:1px solid rgba(148,163,184,.2); display:flex; justify-content:space-between; align-items:center; }
.chat-widget__list{
  flex:0 0 110px;
  min-height:90px;
  max-height:40%;
  overflow:auto;
  padding:4px 0;
}
.chat-widget__conversation{ width:100%; text-align:left; padding:6px 10px; border:none; background:none; display:flex; justify-content:space-between; border-bottom:1px solid rgba(148,163,184,.08); cursor:pointer; font-size:.9rem; }
.chat-widget__conversation.active{ background:rgba(14,165,233,.08); }
.chat-widget__thread{
  border-top:1px solid rgba(148,163,184,.2);
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:1 1 auto;
  min-height:200px;
}
.chat-widget__messages{
  flex:1;
  min-height:0;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:8px;
}
.chat-widget__msg{ font-size:.85rem; }
.chat-widget__msg.me{ text-align:right; }
.chat-widget__thread textarea{
  border-radius:10px;
  border:1px solid rgba(148,163,184,.4);
  padding:3px 6px;
  resize:none;
  min-height:26px;
  max-height:60px;
  line-height:1.25;
  font-size:.82rem;
}
.chat-widget__send{ align-self:flex-end; }
@media (max-width:1024px){
  .messages-layout{ grid-template-columns:1fr; }
  .messages-sidebar{ order:2; height:auto; }
  .messages-thread{ order:1; flex:1; min-height:480px; }
  .messages-history{ min-height:280px; }
  .messages-form textarea{ min-height:48px; }
}

html.dark .messages-sidebar,
html.dark .messages-thread{
  background:#0b1220;
  border-color:#1f2937;
  color:#e2e8f0;
}
html.dark .messages-search input{
  background:#0f172a;
  border-color:#1f2937;
  color:#e2e8f0;
}
html.dark .messages-search__results{
  background:#0b1220;
  border-color:#1f2937;
  color:#e2e8f0;
}
html.dark .messages-search__results button{
  color:#f8fafc;
  border-bottom:1px solid rgba(148,163,184,0.15);
}
html.dark .messages-search__results button .messages-user-locked{
  color:#f87171;
}
html.dark .messages-search__results button small{
  color:#94a3b8;
}
html.dark .conversation{
  background:#0f172a;
  border-color:#1f2937;
}
html.dark .conversation.active{
  border-color:var(--primary,#7ad1b3);
  box-shadow:none;
}
html.dark .conversation__title{ color:#f1f5f9; }
html.dark .conversation__preview{ color:#94a3b8; }
html.dark .messages-thread__head{ border-bottom-color:#1f2937; }
html.dark .messages-history{ color:#e2e8f0; }
html.dark .msg-bubble{ background:#1f2937; color:#e2e8f0; }
html.dark .msg--me .msg-bubble{ background:#115e59; color:#e2e8f0; }
html.dark .messages-form textarea{
  background:#0f172a;
  border-color:#1f2937;
  color:#e2e8f0;
}
html.dark .messages-form textarea::placeholder{ color:#94a3b8; }
html.dark .messages-form{ border-top-color:#1f2937; }

html.dark .chat-widget__panel{
  background:#0b1220;
  border-color:#1f2937;
  color:#e2e8f0;
}
html.dark .chat-widget__list{ border-bottom:1px solid rgba(148,163,184,.15); }
html.dark .chat-widget__conversation{
  color:#e2e8f0;
  border-bottom-color:#1f2937;
}
html.dark .chat-widget__conversation.active{
  background:rgba(59,130,246,0.18);
}
html.dark .chat-widget__thread{
  border-top-color:#1f2937;
}
html.dark .chat-widget__messages{ color:#e2e8f0; }
html.dark .chat-widget__thread textarea{
  background:#0f172a;
  border-color:#1f2937;
  color:#e2e8f0;
}
html.dark .chat-widget__toggle{
  background:#2563eb;
  box-shadow:0 10px 25px rgba(37,99,235,.35);
}
html.dark .chat-widget__toggle.has-unread::after{
  border-color:#0b1220;
}

/* 10) Módulo de fichajes */
.fichajes-top .fichajes-card{
  padding:24px;
  min-height:100%;
  border:0;
  position:relative;
  overflow:hidden;
  background:var(--surface);
  box-shadow:0 6px 20px rgba(0,0,0,.05);
}
.fichajes .page-subtitle{
  margin:4px 0 0;
  color:var(--muted);
  font-size:14px;
}
.fichajes-card{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.clock-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.clock-mode-bar{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  margin-top:12px;
  padding:14px;
  border-radius:18px;
  background:rgba(15,23,42,.04);
}
.clock-mode-label{
  font-size:13px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#475569;
}
.clock-mode-bar{ display:none; }
.eyebrow{
  margin:0;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
}
.clock-visual{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  margin-top:20px;
}
.clock-visual > div{
  flex:0 0 auto;
}
.status-dot{
  width:12px;
  height:12px;
  border-radius:999px;
  background:var(--primary);
  box-shadow:0 0 12px rgba(122,209,179,.8);
}
.clock-display{
  display:flex;
  flex-direction:column;
  gap:6px;
  text-align:center;
  align-items:center;
}
.clock-time{
  font-size:44px;
  font-weight:700;
  line-height:1;
}
.clock-date{
  font-size:16px;
  color:var(--muted);
  text-transform:capitalize;
}
.clock-hint{
  margin:0;
  font-size:13px;
  color:var(--muted);
}
.fichajes[data-clock-mode="analog"] .analog-clock{
  opacity:1;
  transform:scale(1);
  pointer-events:auto;
}
.fichajes[data-clock-mode="analog"] [data-clock-digital]{
  opacity:0;
  transform:translateY(12px);
}
.fichajes[data-clock-mode="digital"] [data-clock-digital]{
  opacity:1;
  transform:none;
}
.location-box{
  border:1px dashed rgba(148,163,184,.6);
  border-radius:16px;
  padding:12px;
  background:rgba(122,209,179,.12);
  display:flex;
  flex-direction:column;
  gap:4px;
  height:100%;
}
.location-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.location-head strong{
  font-size:15px;
}
.location-hint{
  margin:2px 0 0;
  font-size:12px;
  color:var(--muted);
}
.location-body{
  font-size:14px;
  line-height:1.4;
}
.loc-line{ margin:2px 0; }
.location-map,
.timeline-map{
  margin-top:8px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 4px 8px rgba(15,23,42,.12);
}
.timeline-map-toggle{
  margin-top:8px;
  padding:0;
  background:none;
  border:0;
  color:var(--primary);
  font-weight:600;
  cursor:pointer;
  font-size:.85rem;
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.timeline-map-toggle:hover,
.timeline-map-toggle:focus{
  text-decoration:underline;
}
.location-map iframe,
.timeline-map iframe{
  display:block;
  width:100%;
  border:0;
  aspect-ratio:4 / 3;
  min-height:120px;
  max-height:220px;
}
.loc-error{
  color:#b91c1c;
  font-weight:600;
}
.fichajes-form-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px;
}
.fichajes-panel{
  border-radius:16px;
  border:1px solid rgba(148,163,184,.4);
  background:rgba(15,23,42,.02);
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:200px;
}
.location-box.fichajes-panel{
  border:1px dashed rgba(148,163,184,.6);
  background:rgba(122,209,179,.12);
  padding:12px;
}
.note-panel textarea{
  width:100%;
  flex:1;
  min-height:0;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.5);
  padding:12px;
  font-size:14px;
  resize:none;
  background:#fff;
}
.note-head{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.note-head strong{
  font-size:14px;
}
.note-head p{
  margin:0;
  font-size:12px;
  color:var(--muted);
}
.fichajes-actions{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.fichajes-actions--stacked{
  margin-top:4px;
}
.fichajes-break{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.35);
  background:rgba(148,163,184,.12);
}
.break-info{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.break-label{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
}
.break-meta{
  display:flex;
  gap:12px;
  font-size:12px;
  color:var(--muted);
}
.break-info strong{
  font-size:18px;
}
.next-action{
  color:var(--muted);
  font-size:13px;
}
.fichajes-alert{
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,159,123,.18);
  color:#a85507;
  border:1px solid rgba(249,115,22,.35);
  font-size:14px;
}
.fichajes-alert[data-type="error"]{
  background:rgba(248,113,113,.2);
  color:#881337;
  border-color:rgba(239,68,68,.4);
}
.fichajes-alert[data-type="success"]{
  background:rgba(34,197,94,.22);
  color:#14532d;
  border-color:rgba(34,197,94,.45);
}
.status-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  background:rgba(191,219,254,.4);
}
.status-chip[data-mode="on"]{
  background:rgba(134,239,172,.35);
  color:#0f5132;
}
.status-chip[data-mode="off"]{
  background:rgba(199,210,254,.5);
  color:#312e81;
}
.status-detail{
  margin:6px 0 10px;
  font-size:14px;
  color:var(--muted);
}
.status-metrics{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(160px,1fr));
  gap:12px;
}
.status-metric{
  background:rgba(15,23,42,.03);
  border-radius:16px;
  padding:12px;
  min-height:120px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.status-range-toggle{
  margin:12px 0 0;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:var(--muted);
}
.status-range-toggle select{
  border:1px solid rgba(148,163,184,.5);
  border-radius:12px;
  padding:6px 10px;
  font-size:14px;
  background:#fff;
}
.status-metric dt{
  margin:0 0 4px;
  font-size:12px;
  color:var(--muted);
}
.status-metric dd{
  margin:0;
  font-size:24px;
  font-weight:700;
}
.status-extra-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:16px;
}
.status-next,
.status-mini{
  border:1px solid rgba(148,163,184,.35);
  border-radius:16px;
  padding:14px;
  background:rgba(15,23,42,.02);
}
.status-next strong{
  display:block;
  font-size:20px;
  margin-top:6px;
}
.status-mini{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.status-mini span{
  font-size:13px;
  color:var(--muted);
}
.status-mini strong{
  font-size:18px;
}
.status-metric dd small{
  display:block;
  font-size:12px;
  font-weight:500;
  margin-top:4px;
  color:var(--muted);
}
.status-next,
.status-mini{
  font-size:14px;
  color:var(--muted);
}
.status-next strong,
.status-mini strong{
  color:var(--text);
}
.timeline-list{
  list-style:none;
  padding:4px 0 4px 34px;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:14px;
  position:relative;
}
.timeline-list::before{
  content:"";
  position:absolute;
  left:16px;
  top:0;
  bottom:0;
  width:2px;
  background:linear-gradient(180deg, rgba(148,163,184,.3), rgba(148,163,184,.1));
}
.timeline-item{
  --timeline-accent: var(--secondary);
  display:flex;
  gap:12px;
  position:relative;
  padding:14px 16px;
  background:var(--surface);
  border-radius:16px;
  border:1px solid rgba(15,23,42,.06);
  box-shadow:0 12px 36px rgba(15,23,42,.08);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  overflow:visible;
}
.timeline-item::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, rgba(122,209,179,.08), rgba(166,200,255,.08));
  opacity:0;
  transition:opacity .18s ease;
  pointer-events:none;
}
.timeline-item:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 44px rgba(15,23,42,.12);
  border-color:rgba(15,23,42,.12);
}
.timeline-item:hover::after{
  opacity:1;
}
.timeline-dot{
  width:16px;
  height:16px;
  border-radius:999px;
  flex-shrink:0;
  background:#c7d2fe;
  box-shadow:0 0 0 4px rgba(199,210,254,.45);
  position:absolute;
  left:-18px;
  top:18px;
}
.timeline-dot--in{
  background:#22c55e;
  box-shadow:0 0 0 4px rgba(34,197,94,.32);
}
.timeline-dot--out{
  background:#fb7185;
  box-shadow:0 0 0 4px rgba(251,113,133,.35);
}
.timeline-dot--break{
  background:#f59e0b;
  box-shadow:0 0 0 4px rgba(245,158,11,.35);
}
.timeline-body{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.timeline-title{
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.timeline-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  font-size:13px;
  line-height:1.1;
  background:rgba(122,209,179,.2);
  color:#0f5132;
}
.timeline-badge--in{
  background:rgba(34,197,94,.16);
  color:#065f46;
}
.timeline-badge--out{
  background:rgba(251,113,133,.16);
  color:#9f1239;
}
.timeline-badge--break{
  background:rgba(245,158,11,.18);
  color:#92400e;
}
.timeline-time{
  font-size:13px;
  color:var(--muted);
  font-weight:600;
  letter-spacing:.01em;
}
.timeline-note{
  margin:0;
  font-size:13px;
  color:var(--muted);
  padding:8px 10px;
  border-radius:12px;
  background:rgba(15,23,42,.03);
}
.timeline-meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  font-size:12px;
  color:var(--muted);
  margin-top:2px;
}
.timeline-chip{
  padding:5px 8px;
  border-radius:10px;
  background:rgba(15,23,42,.04);
  border:1px solid rgba(15,23,42,.06);
}
.timeline-empty{
  color:var(--muted);
  font-size:14px;
}
.timeline-list--compact .timeline-item{
  gap:8px;
  padding:12px 14px;
}
.pager{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  margin-top:10px;
  flex-wrap:wrap;
}
.pager.hidden{
  display:none;
}
.pager-info{
  font-size:13px;
  color:var(--muted);
}
.pager .btn{
  padding:6px 12px;
  min-width:auto;
}
.import-card{
  margin-bottom:20px;
  text-align:center;
}
.import-card--first{
  margin-top:0;
}
.import-note{
  margin-top:12px;
  font-size:13px;
  color:var(--muted);
}
.import-card code{
  background:rgba(15,23,42,.08);
  padding:2px 6px;
  border-radius:6px;
  font-size:12px;
}
.import-tools-grid{
  margin-top:12px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  justify-items:center;
  row-gap:18px;
}
.import-custom{
  margin-top:16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.import-tools-grid .import-group{
  display:flex;
  flex-direction:column;
  gap:10px;
  width:100%;
  max-width:320px;
}
.import-tools-grid .pill-action{
  width:100%;
}
.db-tools-card{
  margin-top:24px;
}
.db-tools-grid{
  justify-content:center;
}
.db-tools-card h3{
  text-align:center;
}
.messages-audit-card{
  margin-top:18px;
}
.messages-audit-form{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:12px;
}
.messages-audit-form label{
  flex:1 1 160px;
  display:flex;
  flex-direction:column;
  gap:4px;
  font-weight:500;
}
.messages-audit-form button{
  align-self:flex-end;
}
.tools-error{
  margin-top:16px;
  padding:12px 14px;
  border-radius:12px;
  background:rgba(248,113,113,.15);
  color:#b91c1c;
  border:1px solid rgba(185,28,28,.3);
  font-size:14px;
}
.tools-error.hidden{
  display:none;
}
.tools-error strong{
  margin-right:6px;
}
.week-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.week-row{
  display:grid;
  grid-template-columns:140px 1fr auto;
  gap:12px;
  align-items:center;
}
.week-label{
  font-weight:600;
  text-transform:capitalize;
}
.week-meter{
  height:8px;
  border-radius:999px;
  background:rgba(203,213,225,.6);
  overflow:hidden;
}
.week-meter span{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, var(--primary), var(--secondary));
}
.week-value{
  font-size:13px;
  color:var(--muted);
  white-space:nowrap;
}
.timeline-list--compact .timeline-note{
  font-size:12px;
}
.timeline-meta + .timeline-note{ margin-top:4px; }
.timeline-list--compact .timeline-meta{
  font-size:11px;
}
@media (max-width:900px){
  .week-row{
    grid-template-columns:1fr;
    gap:6px;
  }
  .week-value{
    justify-self:flex-start;
  }
}
html.dark .location-box{
  background:rgba(15,118,110,.28);
  border-color:rgba(30,64,175,.4);
}
html.dark .location-map,
html.dark .timeline-map{
  border-color:rgba(59,130,246,.3);
  box-shadow:0 4px 12px rgba(0,0,0,.35);
}
html.dark .status-metric{
  background:rgba(148,163,184,.12);
}
html.dark .clock-mode-bar{
  background:rgba(15,23,42,.45);
}
html.dark .clock-mode-toggle{
  background:transparent;
  border-color:#1f2937;
}
html.dark .clock-mode-btn{
  color:#cbd5f5;
}
html.dark .clock-mode-btn.active{
  color:#0b1220;
}
html.dark .analog-clock{
  background:#0b1220;
  border-color:#1f2937;
}
html.dark .analog-clock__hand{
  background:#e2e8f0;
}
html.dark .analog-clock__hand--second{
  background:#f43f5e;
}
html.dark .analog-clock__center{
  background:#e2e8f0;
  box-shadow:0 0 0 4px rgba(226,232,240,.08);
}
html.dark .timeline-list::before{
  background:linear-gradient(180deg, rgba(148,163,184,.35), rgba(148,163,184,.08));
}
html.dark .timeline-item{
  background:rgba(15,23,42,.7);
  border-color:#1f2937;
  box-shadow:0 14px 40px rgba(0,0,0,.45);
}
html.dark .timeline-item::after{
  background:linear-gradient(120deg, rgba(122,209,179,.12), rgba(166,200,255,.12));
}
html.dark .timeline-badge{
  color:#d1fae5;
  border:1px solid rgba(255,255,255,.06);
}
html.dark .timeline-time{
  color:#94a3b8;
}
html.dark .timeline-note{
  background:rgba(15,23,42,.55);
  border:1px solid #1f2937;
}
html.dark .timeline-chip{
  background:rgba(15,23,42,.65);
  border-color:#1f2937;
}
html.dark .timeline-meta,
html.dark .timeline-note,
html.dark .status-detail,
html.dark .status-next,
html.dark .status-mini,
html.dark .week-value,
html.dark .next-action,
html.dark .clock-date,
html.dark .clock-hint,
html.dark .location-hint{
  color:#cbd5f5;
}
html.dark .fichajes-break{
  border-color:#1f2937;
  background:rgba(15,23,42,.65);
}
html.dark .fichajes-panel{
  background:rgba(15,23,42,.55);
  border-color:rgba(148,163,184,.4);
}
html.dark .note-panel textarea{
  background:#0b1220;
  border-color:#1f2937;
  color:#e2e8f0;
}
html.dark .status-metric{
  background:rgba(15,23,42,.55);
}
html.dark .status-next,
html.dark .status-mini{
  background:rgba(15,23,42,.45);
  border-color:#1f2937;
}
html.dark .status-range-toggle select{
  background:#111827;
  color:#f9fafb;
  border-color:#374151;
}
html.dark .timeline-dot{
  box-shadow:0 0 0 3px rgba(99,102,241,.4);
}
html.dark .week-meter{
  background:rgba(15,23,42,.55);
}
html.dark .fichajes-alert{
  background:rgba(217,119,6,.18);
  color:#fed7aa;
  border-color:rgba(251,191,36,.4);
}

/* 10.1) Panel de estadísticas de fichajes */
.fichajes-stats .stats-filters label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:.95rem;
  font-weight:500;
}
.fichajes-stats .stats-filters{
  background:transparent;
  border:none;
  box-shadow:none;
  padding:0;
}
.fichajes-stats .stats-filters input,
.fichajes-stats .stats-filters select{
  margin-top:4px;
}
.fichajes-stats .filters-actions{
  margin-top:12px;
  width:100%;
}
.fichajes-stats .filters-actions .btn{
  width:100%;
  justify-content:center;
}
.fichajes-stats .stats-status{
  margin-top:8px;
  font-size:.9rem;
  color:#6b7280;
  min-height:1.2em;
}
.fichajes-stats .stats-status.visible{
  display:block;
}
.fichajes-stats .stats-status[data-type="error"]{
  color:#b91c1c;
}
.fichajes-stats .stats-summary{
  margin:24px 0;
  gap:16px;
}
.fichajes-stats .stat-card{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.fichajes-stats .stat-card strong{
  font-size:1.6rem;
  color:#111827;
}
.fichajes-stats .stat-card small{
  color:#6b7280;
}
.table-responsive{
  overflow:auto;
}
.stats-table td:first-child{
  white-space:normal;
  min-width:200px;
}
.stats-table td,
.stats-table th{
  white-space:nowrap;
}
.stats-detail-card{
  margin-top:24px;
}
.stats-detail-table td,
.stats-detail-table th{
  white-space:nowrap;
}
html.dark .fichajes-stats .stat-card strong{
  color:#f9fafb;
}








.notifications-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.notifications-list li{
  border:1px solid rgba(15,23,42,.1);
  border-radius:12px;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.notifications-list li.unread{
  border-color:#2563eb;
  box-shadow:0 0 0 1px rgba(37,99,235,.15);
}
.notifications-list__title{
  font-weight:600;
}
.notifications-list__meta{
  font-size:.85rem;
  color:rgba(15,23,42,.6);
}
.notifications-list__actions{
  margin-top:8px;
  display:flex;
  gap:8px;
}
html.dark .notifications-list li{
  border-color:#1f2a3d;
  background:#0f172a;
}
html.dark .notifications-list li.unread{
  border-color:#38bdf8;
  box-shadow:0 0 0 1px rgba(56,189,248,.3);
}
html.dark .calendar-vacations-panel{
  border-bottom-color:rgba(30,41,59,.6);
}
.calendar-vacations-panel{
  margin-top:12px;
  margin-bottom:8px;
  padding:0 0 24px;
  background:transparent;
  border:none;
  border-bottom:1px solid rgba(148,163,184,.25);
  box-shadow:none;
}
.calendar-vacations-panel .page-head{
  margin:0 0 16px;
}
.calendar-vacations-panel .page-head__actions{
  align-self:flex-end;
}
.calendar-vacations-filter label{
  font-weight:600;
  font-size:.9rem;
  color:#475569;
}
.calendar-vacations-filter select{
  min-width:200px;
}
.calendar-vacations-panel__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.vacations-admin-list{ display:flex; flex-direction:column; gap:12px; margin-top:12px; }
.vacations-admin-item{ border:1px solid rgba(148,163,184,.35); border-radius:14px; padding:16px; background:#fff; }
.vacations-admin-item__head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.vacations-admin-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.vacations-admin-empty{ margin:12px 0 0; color:rgba(15,23,42,.6); }
.vacation-summary{ font-size:.9rem; color:rgba(15,23,42,.7); margin:8px 0 0; }
.vacations-admin-pagination{ display:flex; gap:10px; align-items:center; justify-content:flex-end; margin-top:12px; }
.vacations-admin-pagination.hidden{ display:none; }
.badge-status{ display:inline-flex; align-items:center; padding:2px 10px; border-radius:999px; font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
.badge-status--pending{ background:rgba(250,204,21,.18); color:#92400e; }
.badge-status--approved{ background:rgba(34,197,94,.18); color:#166534; }
.badge-status--rejected{ background:rgba(239,68,68,.18); color:#991b1b; }
.badge-status--cancelled{ background:rgba(148,163,184,.2); color:#475569; }
html.dark .vacations-admin-item{ border-color:#243047; background:#0b1220; }
html.dark .vacations-admin-empty{ color:rgba(226,232,240,.7); }
html.dark .vacation-summary{ color:rgba(226,232,240,.7); }
html.dark .badge-status--pending{ background:rgba(250,204,21,.25); color:#fde68a; }
html.dark .badge-status--approved{ background:rgba(34,197,94,.25); color:#bbf7d0; }
html.dark .badge-status--rejected{ background:rgba(239,68,68,.25); color:#fecaca; }
.bug-reports-page .page-head{
  margin-bottom:18px;
}
.bug-reports-head__actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.bug-report-layout{
  display:flex;
  flex-direction:column;
  gap:18px;
}
.bug-report-list__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
}
.bug-report-search input{
  min-width:240px;
}
.bug-report-table-wrap{
  position:relative;
}
.bug-report-table tr.is-active{
  background:rgba(59,130,246,.08);
}
.bug-report-table td{
  vertical-align:middle;
}
.bug-pill{
  display:inline-flex;
  align-items:center;
  padding:2px 10px;
  border-radius:999px;
  font-size:.8rem;
  font-weight:600;
  text-transform:capitalize;
}
.bug-pill--low{ background:#ecfccb; color:#3f6212; }
.bug-pill--medium{ background:#fef9c3; color:#854d0e; }
.bug-pill--high{ background:#fee2e2; color:#b91c1c; }
.bug-pill--critical{ background:#fca5a5; color:#7f1d1d; }
.bug-status{
  display:inline-flex;
  align-items:center;
  padding:2px 12px;
  border-radius:8px;
  font-size:.78rem;
  font-weight:600;
  text-transform:capitalize;
}
.bug-status--open{ background:#e0f2fe; color:#075985; }
.bug-status--in_progress{ background:#fef3c7; color:#92400e; }
.bug-status--resolved{ background:#dcfce7; color:#166534; }
.bug-status--closed{ background:#e5e7eb; color:#374151; }
.bug-report-detail{
  min-height:100%;
  display:flex;
  flex-direction:column;
}
.bug-detail-content{
  display:flex;
  flex-direction:column;
  gap:0;
}
.bug-detail-content.is-transitioning{
  animation:bugDetailFade .28s ease;
}
@keyframes bugDetailFade{
  from{
    opacity:.1;
    transform:translateY(10px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}
.bug-detail-empty{
  text-align:center;
  padding:40px 16px;
  color:rgba(15,23,42,.6);
}
.bug-detail-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.bug-detail-id{
  font-size:.85rem;
  color:rgba(15,23,42,.6);
  margin-bottom:2px;
}
.bug-detail-pill-group{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
}
.bug-detail-meta{
  font-size:.9rem;
  color:rgba(15,23,42,.7);
  margin:12px 0;
}
.bug-detail-summary{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px;
  margin-bottom:12px;
}
.bug-detail-summary__item{
  border:1px solid rgba(148,163,184,.35);
  border-radius:12px;
  padding:12px;
  background:rgba(248,250,252,.8);
  display:flex;
  flex-direction:column;
  gap:4px;
}
.bug-detail-summary__label{
  font-size:.85rem;
  color:rgba(15,23,42,.6);
  text-transform:uppercase;
  letter-spacing:.05em;
}
.bug-detail-summary__hint{
  font-size:.8rem;
  color:rgba(15,23,42,.6);
}
.bug-detail-section{
  margin-bottom:18px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.bug-detail-section__head h4{
  margin:0;
  font-size:1rem;
}
.bug-detail-section__hint{
  margin:4px 0 0;
  color:rgba(15,23,42,.6);
  font-size:.85rem;
}
.bug-detail-description{
  background:rgba(248,250,252,.8);
  border:1px solid rgba(148,163,184,.35);
  border-radius:12px;
  padding:12px;
  margin-bottom:12px;
  min-height:64px;
}
.bug-detail-description p{
  margin:0;
}
.bug-detail-resolution-preview{
  border:1px dashed rgba(148,163,184,.6);
  border-radius:12px;
  padding:12px;
  background:#fff;
  min-height:48px;
}
.bug-detail-resolution-preview p{
  margin:0;
}
.bug-detail-resolution-empty{
  color:rgba(15,23,42,.5);
  font-style:italic;
}
.bug-detail-form__grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
  gap:12px;
}
.bug-detail-form__grid + label{
  margin-top:16px;
}
.bug-detail-form label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:.9rem;
  color:#0f172a;
}
.bug-detail-form textarea{
  width:100%;
  min-height:150px;
  border:1px solid rgba(148,163,184,.5);
  border-radius:14px;
  padding:12px 14px;
  background:#f8fafc;
  resize:vertical;
  font-family:inherit;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.bug-detail-form textarea:focus{
  outline:none;
  border-color:#2563eb;
  box-shadow:0 0 0 2px rgba(37,99,235,.12);
  background:#fff;
}
.bug-detail-form__actions{
  display:flex;
  justify-content:flex-end;
  margin-top:12px;
}
.table-empty{
  padding:24px;
  text-align:center;
  color:rgba(15,23,42,.55);
}
.table-empty.hidden{
  display:none;
}
html.dark .bug-detail-description{
  background:#0f172a;
  border-color:#1f2937;
  color:rgba(248,250,252,.9);
}
html.dark .bug-detail-summary__item{
  background:#0b1120;
  border-color:#1f2937;
}
html.dark .bug-detail-summary__label,
html.dark .bug-detail-summary__hint,
html.dark .bug-detail-section__hint{
  color:rgba(226,232,240,.75);
}
html.dark .bug-detail-resolution-preview{
  background:#0b1120;
  border-color:#1f2937;
  color:#e2e8f0;
}
html.dark .bug-detail-resolution-empty{
  color:rgba(226,232,240,.65);
}
html.dark .bug-detail-form label{
  color:rgba(226,232,240,.85);
}
html.dark .bug-detail-form textarea{
  background:#0f172a;
  color:#e2e8f0;
  border-color:#1f2937;
}
html.dark .bug-detail-form textarea:focus{
  border-color:#38bdf8;
  box-shadow:0 0 0 2px rgba(56,189,248,.2);
  background:#0b1120;
}
html.dark .table-empty{
  color:rgba(226,232,240,.7);
}
html.dark .badge-status--cancelled{ background:rgba(148,163,184,.25); color:#cbd5f5; }

/* ===== CRM / ERP / Inventario – ajustes de UI ===== */
.crm-page .table th,
.erp-page .table th,
.inventory-page .table th{
  white-space:nowrap;
}
.crm-page .table td,
.erp-page .table td,
.inventory-page .table td{
  vertical-align:middle;
}
.erp-page .line-product-search,
.erp-page .line-desc,
.erp-page .line-qty,
.erp-page .line-price,
.erp-page .line-tax{
  width:100%;
}
.erp-page small.muted{
  display:block;
  margin-top:4px;
}
.crm-page input[type="search"],
.erp-page input[type="search"],
.inventory-page input[type="search"]{
  width:100%;
}
html.dark .crm-page input,
html.dark .erp-page input,
html.dark .inventory-page input,
html.dark .crm-page select,
html.dark .erp-page select,
html.dark .inventory-page select,
html.dark .crm-page textarea,
html.dark .erp-page textarea,
html.dark .inventory-page textarea{
  background:#0b1220;
  color:#e5e7eb;
  border-color:#1f2937;
}
html.dark .crm-page .card,
html.dark .erp-page .card,
html.dark .inventory-page .card{
  background:#0f172a;
}