.tab-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  color: #94a3b8;
  cursor: pointer;
  transition: 0.15s;
}
.tab-btn:hover { color: #fff; background: #1e293b; }
.tab-btn.active { background: #4f46e5; color: #fff; }

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  border: 1px solid transparent;
}

td[contenteditable="true"]:focus,
td.editing {
  outline: 2px solid #6366f1;
  outline-offset: -2px;
  background: #eef2ff;
}

table td, table th {
  padding: 6px 10px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}

.icon-btn {
  padding: 4px 6px;
  border-radius: 6px;
  cursor: pointer;
}
.icon-btn:hover { background: #f1f5f9; }

/* Campos de formulario — inspirados en el diseño original React/Tailwind */
.field {
  width: 100%;
  padding: 8px 12px;
  font-size: 13px;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  transition: 0.15s;
  color: #1e293b;
}
.field:focus {
  outline: none;
  background: #fff;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
}
.field:disabled {
  background: #f1f5f9;
  color: #94a3b8;
  cursor: not-allowed;
}

.shift-option { cursor: pointer; display: block; }
.shift-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 9px 6px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #475569;
  transition: 0.15s;
}
.shift-btn-active {
  background: #eef2ff;
  border-color: #6366f1;
  color: #4338ca;
}

.ticket-type-btn {
  cursor: pointer;
  border: 1px solid var(--sc-45);
  background: var(--sc-14);
  color: var(--sc-75b);
  transition: 0.15s;
}
.ticket-type-btn:hover { background: var(--sc-22); }
.ticket-type-btn-active {
  background: var(--sc);
  border-color: var(--sc);
  color: #fff;
  box-shadow: 0 0 0 2px var(--sc-35a);
}

/* Gráfica de horas por día del Resumen: barra activa al pasar o tocar */
.daily-bar { cursor: pointer; background: transparent; padding: 0; border: 0; }
.daily-bar > span { opacity: 0.9; }
.daily-bar:hover > span, .daily-bar-active > span { opacity: 1; filter: brightness(0.92); }
.daily-bar:hover, .daily-bar-active { box-shadow: 0 0 0 2px #312e81; }
html.dark .daily-bar:hover, html.dark .daily-bar-active { box-shadow: 0 0 0 2px #a5b4fc; }

.kbd { font-family: ui-monospace, monospace; font-size: 10px; padding: 1px 5px; border-radius: 4px; border: 1px solid #cbd5e1; border-bottom-width: 2px; background: #fff; color: #334155; }

/* Copiar solo el número del ticket con un clic */
.ticket-copy { cursor: copy; transition: 0.15s; }
.ticket-copy:hover { border-color: #818cf8 !important; background: #eef2ff; color: #3730a3; }
.ticket-copied { border-color: #10b981 !important; background: #d1fae5 !important; color: #047857 !important; }

/* Resumen en PDF (botón "📄 PDF" → imprimir → Guardar como PDF) */
.print-only { display: none; }
@media print {
  .print-only { display: block !important; }
  .print-table thead { display: table-header-group; } /* encabezado repetido en cada página */
  .print-table tr { break-inside: avoid; }
  @page { margin: 12mm; }
  body { background: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  header, footer, #monthNav, #bottomNav, #fabNewActivity, .no-print, #undoToastHost { display: none !important; }
  main { max-width: none !important; padding: 0 !important; }
  #summaryContainer .shadow-xs, #summaryContainer .shadow-sm { box-shadow: none !important; }
  #summaryContainer > div > div:not(.print-only) { break-inside: avoid; }
}

/* Periodo de trabajo: flechas, selector de 4 partes y campos */
.period-arrow {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  line-height: 1;
  color: #64748b;
  flex-shrink: 0;
  transition: 0.15s;
}
.period-arrow:hover { background: #eef2ff; color: #4f46e5; }
.period-seg { gap: 3px; padding: 3px; border-radius: 12px; background: #f1f5f9; }
.period-seg-btn {
  padding: 8px 10px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  white-space: nowrap;
  text-align: center;
  transition: 0.15s;
}
.period-seg-btn:hover { color: #334155; }
.period-seg-btn-active { background: #fff; color: #4338ca; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12); }
.period-input {
  width: 100%;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  border-radius: 9px;
  padding: 8px 10px;
  font-size: 12px;
  color: #334155;
}
.period-input:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25); }
@media (min-width: 640px) { .period-input { width: auto; padding: 6px 10px; } }
@media (max-width: 639px) { .period-seg-btn { padding: 8px 2px; font-size: 11.5px; } }

/* Configuración en celular: botón con la sección actual que abre el menú */
.settings-picker {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  text-align: left;
}

/* Botones del encabezado: mismo alto y estilo (en celular, cuadrados de 36px) */
.hdr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  min-width: 36px;
  padding: 0 10px;
  border-radius: 12px;
  background: rgba(30, 41, 59, 0.85);
  border: 1px solid #334155;
  color: #fff;
  font-size: 15px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: 0.15s;
}
.hdr-btn:hover { background: #334155; }

/* Celular: barra de pestañas inferior */
.bottom-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 8px 4px 10px;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  border-top: 3px solid transparent;
}
.bottom-tab-active { color: #4f46e5; border-top-color: #4f46e5; background: #eef2ff; }

/* Importar: zona para arrastrar el archivo de Excel */
.import-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 22px 16px;
  border: 2px dashed #a5b4fc;
  border-radius: 16px;
  background: #eef2ff;
  text-align: center;
  cursor: pointer;
  transition: 0.15s;
}
.import-drop:hover { background: #e0e7ff; }
.import-drop-active { border-color: #4f46e5; background: #e0e7ff; box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.15); }

/* Menús desplegables de la barra de Actividades ("Vista", "Importar / Exportar") */
.dropdown-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  text-align: left;
  font-size: 13px;
  color: #0f172a;
  transition: 0.15s;
}
.dropdown-item:hover { background: #f8fafc; }
.dropdown-item b { display: block; font-weight: 600; }
.dropdown-item small { display: block; font-size: 11px; color: #64748b; }
.dropdown-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Celda seleccionada con el teclado (tabla tipo Excel) */
#activityTableBody td.cell-active { box-shadow: inset 0 0 0 2px #4f46e5; background: #eef2ff; }
#activityTableBody td.editing { box-shadow: inset 0 0 0 2px #4f46e5; background: #fff; }

/* Fila resaltada al llegar desde la búsqueda o la revisión del mes */
@keyframes rowFlash { 0%, 60% { background: #fef3c7; } 100% { background: transparent; } }
tr.row-flash td { animation: rowFlash 1.8s ease-out; }

/* Menú "⚙️ Columnas": interruptor mostrar/ocultar */
.col-toggle {
  width: 30px;
  height: 17px;
  border-radius: 999px;
  background: #cbd5e1;
  position: relative;
  flex-shrink: 0;
  transition: 0.15s;
}
.col-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
  border-radius: 999px;
  background: #fff;
  transition: 0.15s;
}
.col-toggle-on { background: #4f46e5; }
.col-toggle-on::after { left: 15px; }

/* Tabla compacta: menos espacio por fila para ver más filas por pantalla */
.table-compact table { font-size: 11px; }
.table-compact td { padding-top: 3px !important; padding-bottom: 3px !important; }
.table-compact th { padding-top: 7px !important; padding-bottom: 7px !important; }
.table-compact .pill-outline, .table-compact .pill-mini { padding-top: 0; padding-bottom: 0; }
.table-compact .status-select { padding-top: 2px; padding-bottom: 2px; }
.table-compact .icon-btn-blue { transform: scale(0.88); }

/* Selección múltiple en la tabla de actividades */
.row-check {
  width: 16px;
  height: 16px;
  accent-color: #4f46e5;
  cursor: pointer;
}
tr.row-selected, tr.row-selected:hover { background: #eef2ff !important; }
tr.row-selected td:first-child { box-shadow: inset 3px 0 0 #4f46e5; }

/* Plantillas rápidas en la ventana de "Nueva actividad". --sc = color del cliente. */
.template-card {
  position: relative;
  cursor: pointer;
  border-radius: 12px;
  padding: 9px 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-left: 4px solid var(--sc, #4f46e5);
  transition: 0.15s;
}
.template-card:hover { background: var(--sc-14, #eef2ff); border-color: var(--sc-45, #c7d2fe); }
.template-card-active { background: var(--sc-16, #eef2ff); box-shadow: 0 0 0 2px var(--sc-40a, rgba(79,70,229,.4)); }
.template-delete {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  font-size: 10px;
  color: #94a3b8;
  opacity: 0;
  transition: 0.15s;
}
.template-card:hover .template-delete { opacity: 1; }
.template-delete:hover { background: #fee2e2; color: #dc2626; }
@media (hover: none) { .template-delete { opacity: 1; } }

/* Configuración — menú lateral agrupado. Cada sección trae su color en --nav-color. */
.settings-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #475569;
  min-width: 0;
  border: 1px solid transparent;
  transition: 0.15s;
  cursor: pointer;
}
.settings-nav-item:hover { background: #fff; color: #0f172a; border-color: #e2e8f0; }
.settings-nav-icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  background: #fff;
  border: 1px solid #e2e8f0;
}
.settings-nav-count {
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
}
.settings-nav-item-active {
  background: #fff;
  color: #0f172a;
  font-weight: 700;
  border-color: #e2e8f0;
  box-shadow: inset 3px 0 0 var(--nav-color, #4f46e5), 0 1px 2px rgba(15,23,42,0.06);
}
.settings-nav-item-active .settings-nav-icon {
  background: var(--nav-color, #4f46e5);
  border-color: var(--nav-color, #4f46e5);
}
.settings-nav-item-active .settings-nav-count { color: var(--nav-color, #4f46e5); }

/* Tabla principal — pills y acciones estilo "hoja de cálculo ligera" */
.pill-outline {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #334155;
  white-space: nowrap;
}
.pill-mini {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
}
.status-select {
  appearance: none;
  -webkit-appearance: none;
  font-size: 10.5px;
  font-weight: 800;
  padding: 4px 22px 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--sc-45);
  background-color: var(--sc-16);
  color: var(--sc-text, var(--sc));
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'><path d='M6 8l4 4 4-4' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 12px;
  cursor: pointer;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.icon-btn-blue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  color: #2563eb;
  background: #eff6ff;
  margin-right: 3px;
  cursor: pointer;
  font-size: 12px;
  transition: 0.15s;
}
.icon-btn-blue:hover { background: #dbeafe; }
.icon-btn-blue.icon-btn-danger { color: #e11d48; background: #fff1f2; }
.icon-btn-blue.icon-btn-danger:hover { background: #ffe4e6; }
.row-checkbox { width: 15px; height: 15px; cursor: pointer; }

.mini-select {
  font-size: 11px;
  font-weight: 600;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #334155;
  cursor: pointer;
}
.mini-select:focus { outline: none; box-shadow: 0 0 0 2px #6366f155; border-color: #6366f1; }

.link-filter-pill {
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #64748b;
  cursor: pointer;
  transition: 0.15s;
}
.link-filter-pill:hover { background: #f1f5f9; }
.link-filter-pill-active {
  background: #eef2ff;
  border-color: #a5b4fc;
  color: #4338ca;
}
/* Celular/tablet: menú de Configuración en cuadrícula pareja */
@media (max-width: 1023px) {
  .settings-nav-item { height: 44px; padding: 6px 10px; background: #fff; border-color: #e2e8f0; }
}
/* En celular: selector segmentado (la opción activa en blanco) */
@media (max-width: 639px) {
  .quick-month-btn { padding: 8px 6px; text-align: center; white-space: nowrap; }
  .link-filter-pill { border-color: transparent; background: transparent; border-radius: 9px; padding: 7px 4px; text-align: center; white-space: nowrap; }
  .link-filter-pill-active { background: #fff; color: #4338ca; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12); border-color: transparent; }
  .mini-select { padding: 9px 10px; font-size: 12px; }
}

.quick-month-btn {
  padding: 5px 12px;
  border-radius: 999px;
  font-weight: 700;
  background: #eef2ff;
  color: #4338ca;
  border: 1px solid #c7d2fe;
  transition: 0.15s;
  cursor: pointer;
}
.quick-month-btn:hover { background: #e0e7ff; }

/* Tarjeta de registro — tema oscuro completo, como en la referencia */
.dark-card-header {
  padding: 20px 24px;
  background: linear-gradient(90deg, #0f172a, #1e1b4b 55%, #0f172a);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.dark-card-body {
  background: linear-gradient(180deg, #0f172a, #131c37);
  color: #e2e8f0;
}
.light-field-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.dfield-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.dfield {
  width: 100%;
  padding: 9px 12px;
  font-size: 13px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color: #f1f5f9;
  transition: 0.15s;
}
.dfield::placeholder { color: #64748b; }
.dfield:focus {
  outline: none;
  background: rgba(255,255,255,0.1);
  border-color: #818cf8;
  box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.25);
}
.dfield option { color: #0f172a; }

.shift-btn-dark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 9px 6px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #475569;
  transition: 0.15s;
}
.shift-btn-dark:hover { background: #f1f5f9; }
.shift-btn-dark-active {
  background: #eef2ff;
  border-color: #6366f1;
  color: #3730a3;
}

.hours-quick-btn {
  padding: 7px 4px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #475569;
  cursor: pointer;
  transition: 0.15s;
}
.hours-quick-btn:hover { background: #f1f5f9; }
.hours-quick-btn-active {
  background: #6366f1;
  border-color: #6366f1;
  color: #fff;
}

.status-quick-btn {
  display: flex;
  align-items: center;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid var(--sc-45);
  background: var(--sc-14);
  color: var(--sc-75b);
  cursor: pointer;
  transition: 0.15s;
  text-align: left;
}
.status-quick-btn:hover { background: var(--sc-24); }
.status-quick-btn-active {
  background: var(--sc-30);
  border-color: var(--sc);
  box-shadow: 0 0 0 2px var(--sc-40a);
  color: var(--sc-80b);
}

/* Modal de actividad en celular: botones de guardar fijos abajo */
@media (max-width: 639px) {
  #activityForm .form-actions {
    position: sticky; bottom: 0; z-index: 10;
    margin: 0 -16px -16px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.96); backdrop-filter: blur(6px);
    border-top: 1px solid #e2e8f0;
  }
}

.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
@media (max-width: 639px) {
  #activityForm .shift-btn-dark { padding-left: 4px; padding-right: 4px; font-size: 12px; white-space: nowrap; }
}
@media (max-width: 639px) {
  #activityForm .light-field-label { margin-bottom: 4px; font-size: 10.5px; }
  #activityForm .field { padding-top: 7px; padding-bottom: 7px; }
  #activityForm .shift-btn-dark { padding-top: 7px; padding-bottom: 7px; }
  #templatesBlock .template-card { padding: 6px 10px; }
  #activityForm .form-actions { margin: 0 -14px -14px; padding-left: 14px; padding-right: 14px; }
}

/* Modal de progreso */
.progress-track { position: relative; height: 10px; border-radius: 999px; background: #e0e7ff; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #6366f1, #8b5cf6); transition: width .3s ease; }
.progress-indeterminate .progress-fill { position: absolute; animation: progress-slide 1.2s ease-in-out infinite; }
@keyframes progress-slide { 0% { left: -40%; } 100% { left: 100%; } }
.progress-spin { display: inline-block; animation: progress-pulse 1.4s ease-in-out infinite; }
@keyframes progress-pulse { 50% { transform: scale(1.15); opacity: .7; } }

/* Filtros plegables de la tabla */
.filters-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 14px; border-radius: 8px; font-size: 12px; font-weight: 700;
  border: 1px solid #e2e8f0; background: #fff; color: #334155; cursor: pointer; transition: 0.15s;
}
.filters-toggle:hover { background: #f8fafc; }
.filters-toggle-active { border-color: #a5b4fc; background: #eef2ff; color: #4338ca; }
.filters-count {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: #4f46e5; color: #fff; font-size: 10px; display: inline-flex; align-items: center; justify-content: center;
}
.filters-caret { display: inline-block; transition: transform 0.15s; font-size: 10px; opacity: 0.7; }
.filters-clear {
  padding: 8px 12px; border-radius: 8px; font-size: 12px; font-weight: 700;
  color: #e11d48; background: #fff1f2; border: 1px solid #fecdd3; cursor: pointer; white-space: nowrap;
}
.filters-clear:hover { background: #ffe4e6; }
.filters-panel { padding: 12px; border-radius: 12px; background: #f8fafc; border: 1px solid #e2e8f0; }
.filter-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.filter-field > span { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #94a3b8; }
.filters-panel .mini-select { background: #fff; }
.filter-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; background: #eef2ff; color: #4338ca; border: 1px solid #c7d2fe; cursor: pointer;
}
.filter-chip:hover { background: #e0e7ff; }

/* ================= MODO OSCURO =================
   Se activa con la clase "dark" en <html> (botón en Mi cuenta).
   Repinta las clases claras de Tailwind y los estilos propios. */
@media screen {
html.dark { color-scheme: dark; }
html.dark body { background: #0b1120 !important; color: #e2e8f0; }
html.dark .bg-white { background-color: #172033 !important; }
html.dark .bg-white\/95 { background-color: rgba(23,32,51,.95) !important; }
html.dark .bg-slate-50 { background-color: #1a2539 !important; }
html.dark .bg-slate-50\/70 { background-color: rgba(26,37,57,.7) !important; }
html.dark .bg-slate-50\/60 { background-color: rgba(26,37,57,.6) !important; }
html.dark .bg-slate-100 { background-color: #0e1626 !important; }
html.dark .bg-slate-200 { background-color: #2b3648 !important; }
html.dark .hover\:bg-slate-50:hover, html.dark .hover\:bg-white:hover { background-color: #223049 !important; }
html.dark .hover\:bg-slate-200:hover { background-color: #2b3648 !important; }
html.dark .focus\:bg-white:focus { background-color: #0e1626 !important; }
html.dark .text-slate-950, html.dark .text-slate-900, html.dark .text-slate-800 { color: #e2e8f0 !important; }
html.dark .text-slate-700, html.dark .text-slate-600 { color: #cbd5e1 !important; }
html.dark .text-slate-500 { color: #94a3b8 !important; }
html.dark .text-slate-400 { color: #7c8aa0 !important; }
html.dark .hover\:text-slate-700:hover { color: #e2e8f0 !important; }
html.dark .border-slate-50, html.dark .border-slate-100, html.dark .border-slate-200 { border-color: #263247; }
html.dark .border-slate-300 { border-color: #334155; }
html.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: #263247 !important; }
html.dark .bg-indigo-50, html.dark .bg-indigo-50\/50, html.dark .bg-indigo-50\/60, html.dark .bg-indigo-50\/70, html.dark .bg-indigo-50\/80 { background-color: rgba(99,102,241,.12) !important; }
html.dark .bg-indigo-100, html.dark .hover\:bg-indigo-50:hover { background-color: rgba(99,102,241,.2) !important; }
html.dark .hover\:bg-indigo-100:hover { background-color: rgba(99,102,241,.28) !important; }
html.dark .border-indigo-100, html.dark .border-indigo-200, html.dark .border-indigo-300 { border-color: rgba(99,102,241,.35); }
html.dark .text-indigo-700, html.dark .text-indigo-800, html.dark .text-indigo-900, html.dark .text-indigo-950 { color: #a5b4fc !important; }
html.dark .bg-emerald-50, html.dark .bg-emerald-50\/50, html.dark .bg-emerald-50\/60, html.dark .bg-emerald-50\/70, html.dark .bg-emerald-50\/80 { background-color: rgba(16,185,129,.12) !important; }
html.dark .bg-emerald-100, html.dark .hover\:bg-emerald-50:hover { background-color: rgba(16,185,129,.2) !important; }
html.dark .hover\:bg-emerald-100:hover { background-color: rgba(16,185,129,.28) !important; }
html.dark .border-emerald-100, html.dark .border-emerald-200, html.dark .border-emerald-300 { border-color: rgba(16,185,129,.35); }
html.dark .text-emerald-700, html.dark .text-emerald-800, html.dark .text-emerald-900, html.dark .text-emerald-950 { color: #6ee7b7 !important; }
html.dark .bg-amber-50, html.dark .bg-amber-50\/50, html.dark .bg-amber-50\/60, html.dark .bg-amber-50\/70, html.dark .bg-amber-50\/80 { background-color: rgba(245,158,11,.12) !important; }
html.dark .bg-amber-100, html.dark .hover\:bg-amber-50:hover { background-color: rgba(245,158,11,.2) !important; }
html.dark .hover\:bg-amber-100:hover { background-color: rgba(245,158,11,.28) !important; }
html.dark .border-amber-100, html.dark .border-amber-200, html.dark .border-amber-300 { border-color: rgba(245,158,11,.35); }
html.dark .text-amber-700, html.dark .text-amber-800, html.dark .text-amber-900, html.dark .text-amber-950 { color: #fcd34d !important; }
html.dark .bg-rose-50, html.dark .bg-rose-50\/50, html.dark .bg-rose-50\/60, html.dark .bg-rose-50\/70, html.dark .bg-rose-50\/80 { background-color: rgba(244,63,94,.12) !important; }
html.dark .bg-rose-100, html.dark .hover\:bg-rose-50:hover { background-color: rgba(244,63,94,.2) !important; }
html.dark .hover\:bg-rose-100:hover { background-color: rgba(244,63,94,.28) !important; }
html.dark .border-rose-100, html.dark .border-rose-200, html.dark .border-rose-300 { border-color: rgba(244,63,94,.35); }
html.dark .text-rose-700, html.dark .text-rose-800, html.dark .text-rose-900, html.dark .text-rose-950 { color: #fda4af !important; }
html.dark .bg-sky-50, html.dark .bg-sky-50\/50, html.dark .bg-sky-50\/60, html.dark .bg-sky-50\/70, html.dark .bg-sky-50\/80 { background-color: rgba(14,165,233,.12) !important; }
html.dark .bg-sky-100, html.dark .hover\:bg-sky-50:hover { background-color: rgba(14,165,233,.2) !important; }
html.dark .hover\:bg-sky-100:hover { background-color: rgba(14,165,233,.28) !important; }
html.dark .border-sky-100, html.dark .border-sky-200, html.dark .border-sky-300 { border-color: rgba(14,165,233,.35); }
html.dark .text-sky-700, html.dark .text-sky-800, html.dark .text-sky-900, html.dark .text-sky-950 { color: #7dd3fc !important; }
html.dark .bg-teal-50, html.dark .bg-teal-50\/50, html.dark .bg-teal-50\/60, html.dark .bg-teal-50\/70, html.dark .bg-teal-50\/80 { background-color: rgba(20,184,166,.12) !important; }
html.dark .bg-teal-100, html.dark .hover\:bg-teal-50:hover { background-color: rgba(20,184,166,.2) !important; }
html.dark .hover\:bg-teal-100:hover { background-color: rgba(20,184,166,.28) !important; }
html.dark .border-teal-100, html.dark .border-teal-200, html.dark .border-teal-300 { border-color: rgba(20,184,166,.35); }
html.dark .text-teal-700, html.dark .text-teal-800, html.dark .text-teal-900, html.dark .text-teal-950 { color: #5eead4 !important; }
html.dark .bg-violet-50, html.dark .bg-violet-50\/50, html.dark .bg-violet-50\/60, html.dark .bg-violet-50\/70, html.dark .bg-violet-50\/80 { background-color: rgba(139,92,246,.12) !important; }
html.dark .bg-violet-100, html.dark .hover\:bg-violet-50:hover { background-color: rgba(139,92,246,.2) !important; }
html.dark .hover\:bg-violet-100:hover { background-color: rgba(139,92,246,.28) !important; }
html.dark .border-violet-100, html.dark .border-violet-200, html.dark .border-violet-300 { border-color: rgba(139,92,246,.35); }
html.dark .text-violet-700, html.dark .text-violet-800, html.dark .text-violet-900, html.dark .text-violet-950 { color: #c4b5fd !important; }
html.dark .bg-blue-50, html.dark .bg-blue-50\/50, html.dark .bg-blue-50\/60, html.dark .bg-blue-50\/70, html.dark .bg-blue-50\/80 { background-color: rgba(59,130,246,.12) !important; }
html.dark .bg-blue-100, html.dark .hover\:bg-blue-50:hover { background-color: rgba(59,130,246,.2) !important; }
html.dark .hover\:bg-blue-100:hover { background-color: rgba(59,130,246,.28) !important; }
html.dark .border-blue-100, html.dark .border-blue-200, html.dark .border-blue-300 { border-color: rgba(59,130,246,.35); }
html.dark .text-blue-700, html.dark .text-blue-800, html.dark .text-blue-900, html.dark .text-blue-950 { color: #93c5fd !important; }
html.dark .bg-purple-50, html.dark .bg-purple-50\/50, html.dark .bg-purple-50\/60, html.dark .bg-purple-50\/70, html.dark .bg-purple-50\/80 { background-color: rgba(168,85,247,.12) !important; }
html.dark .bg-purple-100, html.dark .hover\:bg-purple-50:hover { background-color: rgba(168,85,247,.2) !important; }
html.dark .hover\:bg-purple-100:hover { background-color: rgba(168,85,247,.28) !important; }
html.dark .border-purple-100, html.dark .border-purple-200, html.dark .border-purple-300 { border-color: rgba(168,85,247,.35); }
html.dark .text-purple-700, html.dark .text-purple-800, html.dark .text-purple-900, html.dark .text-purple-950 { color: #d8b4fe !important; }
html.dark .text-indigo-600 { color: #a5b4fc !important; }
html.dark .hover\:text-indigo-600:hover, html.dark .hover\:text-indigo-800:hover { color: #c7d2fe !important; }
html.dark .text-rose-600, html.dark .text-rose-500 { color: #fb7185 !important; }
html.dark .text-emerald-600, html.dark .text-amber-600 { filter: brightness(1.25); }
html.dark table td, html.dark table th { border-bottom-color: #1f2a3d; }
html.dark .field, html.dark .mini-select, html.dark .period-input, html.dark .pill-outline, html.dark .link-filter-pill, html.dark .shift-btn, html.dark .shift-btn-dark, html.dark .hours-quick-btn { background: #0e1626; border-color: #334155; color: #e2e8f0; }
html.dark .field:focus { background: #0b1120; }
html.dark .field:disabled { background: #1a2539; }
html.dark .mini-select option, html.dark .field option { background: #172033; color: #e2e8f0; }
html.dark .icon-btn:hover, html.dark .link-filter-pill:hover, html.dark .shift-btn-dark:hover, html.dark .dropdown-item:hover { background: #223049; }
html.dark .shift-btn-active, html.dark .shift-btn-dark-active, html.dark .link-filter-pill-active, html.dark .period-seg-btn-active, html.dark .quick-month-btn, html.dark .bottom-tab-active, html.dark .import-drop, html.dark .ticket-copy:hover, html.dark .period-arrow:hover { background: rgba(99,102,241,.2); color: #c7d2fe; border-color: rgba(99,102,241,.45); }
html.dark .quick-month-btn:hover, html.dark .import-drop:hover { background: rgba(99,102,241,.3); }
html.dark .period-seg { background: #0e1626; }
html.dark .period-seg-btn, html.dark .period-arrow, html.dark .bottom-tab { color: #94a3b8; }
html.dark .settings-picker, html.dark .template-card, html.dark .settings-nav-icon, html.dark .settings-nav-item-active, html.dark .settings-nav-item:hover, html.dark .kbd { background: #172033; border-color: #263247; color: #e2e8f0; }
html.dark .settings-nav-item { color: #cbd5e1; }
html.dark .dropdown-item { color: #e2e8f0; }
html.dark .dropdown-item small, html.dark .light-field-label { color: #94a3b8; }
html.dark .icon-btn-blue { background: rgba(59,130,246,.15); }
html.dark .icon-btn-blue.icon-btn-danger { background: rgba(244,63,94,.15); color: #fb7185; }
html.dark tr.row-selected, html.dark tr.row-selected:hover { background: rgba(99,102,241,.18) !important; }
html.dark #activityTableBody td.cell-active, html.dark td.editing { background: rgba(99,102,241,.2); }
html.dark #activityTableBody td.editing { background: #0e1626; }
html.dark .col-toggle { background: #334155; }
html.dark .filters-toggle { background: #0e1626; border-color: #334155; color: #e2e8f0; }
html.dark .filters-toggle:hover { background: #223049; }
html.dark .filters-toggle-active, html.dark .filter-chip { background: rgba(99,102,241,.2); border-color: rgba(99,102,241,.45); color: #c7d2fe; }
html.dark .filters-clear { background: rgba(244,63,94,.12); border-color: rgba(244,63,94,.35); color: #fb7185; }
html.dark .filters-panel { background: #121b2d; border-color: #263247; }
html.dark .filters-panel .mini-select { background: #0e1626; }
}

/* Gráfico de horas por día: colores por jornada (validados para daltonismo) */
:root { --shift-day: #f59e0b; --shift-night: #4f46e5; }
html.dark { --shift-day: #d97706; --shift-night: #6366f1; }
.seg-day { background: var(--shift-day); }
.seg-night { background: var(--shift-night); }
.daily-col-weekend, .daily-bar.daily-col-weekend { background: #f1f5f9; }
.daily-col-today, .daily-bar.daily-col-today { background: #e0e7ff; }
html.dark .daily-col-weekend, html.dark .daily-bar.daily-col-weekend { background: #1a2539; }
html.dark .daily-col-today, html.dark .daily-bar.daily-col-today { background: rgba(99,102,241,.25); }

/* Jornada en filas y tarjetas */
.shift-badge {
  display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 700; white-space: nowrap; border: 1px solid transparent;
}
.shift-badge-day { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.shift-badge-night { background: #eef2ff; color: #3730a3; border-color: #c7d2fe; }
html.dark .shift-badge-day { background: rgba(245,158,11,.14); color: #fcd34d; border-color: rgba(245,158,11,.35); }
html.dark .shift-badge-night { background: rgba(99,102,241,.18); color: #c7d2fe; border-color: rgba(99,102,241,.4); }

/* Contador de evidencia (📎) */
.evidence-count { display: inline-flex; align-items: center; gap: 2px; font-size: 10px; font-weight: 700; color: #475569; background: #f1f5f9; border-radius: 999px; padding: 1px 6px; }
html.dark .evidence-count { color: #cbd5e1; background: #223049; }

/* Filas y tarjetas "esqueleto" mientras carga */
@keyframes skeletonPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.skeleton { background: #e2e8f0; border-radius: 6px; animation: skeletonPulse 1.4s ease-in-out infinite; }
html.dark .skeleton { background: #263247; }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

/* Tarjetas compactas (mismo botón que la tabla compacta) */
.cards-compact [data-card-id] { padding: 8px 10px; margin-bottom: 6px; }
.cards-compact [data-card-id] > * + * { margin-top: 4px !important; }
.cards-compact [data-card-id] p { font-size: 12px; }

/* Deslizar tarjetas en el celular: a la derecha edita, a la izquierda borra */
.swipe-wrap { position: relative; overflow: hidden; border-radius: 12px; }
.swipe-wrap > .swipe-bg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; font-size: 12px; font-weight: 700; color: #fff; border-radius: 12px; opacity: 0; transition: opacity 0.1s; }
.swipe-wrap.swiping-right > .swipe-bg { background: #4f46e5; opacity: 1; }
.swipe-wrap.swiping-left > .swipe-bg { background: #e11d48; opacity: 1; }
.swipe-wrap > [data-card-id] { position: relative; touch-action: pan-y; }

/* Evidencia en la ventana de actividad */
.evidence-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; }
.evidence-thumb { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; background: #f1f5f9; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
html.dark .evidence-item { background: #0e1626; border-color: #334155; }

/* Más contraste para los textos grises claros (modo claro). Antes #94a3b8 (2.6:1), ahora 4.8:1 sobre blanco. */
html:not(.dark) .text-slate-400 { color: #64748b; }
html:not(.dark) .placeholder\:text-slate-400::placeholder, html:not(.dark) .field::placeholder { color: #8391a7; }
/* …salvo sobre fondos oscuros (encabezado, ventanas y tarjetas oscuras), donde el gris claro se lee mejor. */
html:not(.dark) header .text-slate-400,
html:not(.dark) [class*="from-slate-9"] .text-slate-400,
html:not(.dark) .dark-card-header .text-slate-400,
html:not(.dark) .dark-card-body .text-slate-400,
html:not(.dark) .bg-slate-900 .text-slate-400,
html:not(.dark) .bg-slate-950 .text-slate-400 { color: #94a3b8; }

/* ===== Modo oscuro: ajustes encontrados revisando pantalla por pantalla ===== */
html.dark .status-select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'><path d='M6 8l4 4 4-4' stroke='%23cbd5e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
html.dark .status-select option, html.dark select option { background: #172033; color: #e2e8f0; }
html.dark .icon-btn-blue { color: #93c5fd; }
html.dark .icon-btn-blue:hover { background: rgba(59,130,246,.28); }
/* Los bordes oscuros van sin !important para no pisar el borde de color del cliente (style en línea). */
/* Textos pintados con el color del cliente (pastillas, tarjetas): más claros para que se lean sobre el fondo oscuro. */
html.dark [style^="color:"] { filter: brightness(1.45) saturate(1.1); }
/* Opción elegida: en oscuro tiene que resaltar claramente sobre las demás. */
html.dark .hours-quick-btn-active { background: #6366f1; border-color: #818cf8; color: #fff; }
html.dark .shift-btn-active, html.dark .shift-btn-dark-active, html.dark .link-filter-pill-active,
html.dark .period-seg-btn-active, html.dark .bottom-tab-active { background: rgba(99,102,241,.4); border-color: #818cf8; color: #fff; }
html.dark .bottom-tab-active { border-top-color: #818cf8; }
html.dark .evidence-thumb { background: #223049; }
/* Iconos de cantidad en el menú de Configuración: el color de cada sección, aclarado. */
html.dark .settings-nav-count { filter: brightness(1.6); }
/* Celdas del registro diario del equipo: un poco menos brillantes sobre fondo oscuro. */
html.dark td > div.rounded-sm[class*="bg-"], html.dark span.w-3.h-3.rounded[class*="bg-"] { filter: saturate(0.8) brightness(0.85); }
/* Estado elegido en la ventana de actividad: lleva ✓ en los dos temas. En oscuro,
   los no elegidos quedan neutros (solo punto y texto en color) para que el
   elegido, con fondo de color y borde marcado, se distinga de un vistazo. */
.status-quick-btn-active::after { content: '✓'; margin-left: auto; padding-left: 8px; font-size: 13px; font-weight: 900; }
html.dark .status-quick-btn { background: #0e1626; border-color: #334155; }
html.dark .status-quick-btn:hover { background: #172033; border-color: var(--sc-45); }
html.dark .status-quick-btn-active, html.dark .status-quick-btn-active:hover {
  background: var(--sc-45); border-color: var(--sc); box-shadow: 0 0 0 2px var(--sc); color: #fff;
}
/* Tipos de ticket: lo mismo, los no elegidos neutros. */
html.dark .ticket-type-btn:not(.ticket-type-btn-active) { background: #0e1626; border-color: #334155; }
html.dark .ticket-type-btn:not(.ticket-type-btn-active):hover { background: #172033; border-color: var(--sc-45); }
/* Login y restablecer contraseña en modo oscuro: los campos se distinguen de la tarjeta
   y el autocompletado del navegador no los pinta de celeste. */
html.dark input.bg-white, html.dark textarea.bg-white { background-color: #0e1626; }
html.dark input:-webkit-autofill, html.dark input:-webkit-autofill:hover, html.dark input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #0e1626 inset; -webkit-text-fill-color: #e2e8f0; caret-color: #e2e8f0;
}

/* Contador 📎 clicable: abre el visor de evidencia */
.evidence-open { cursor: pointer; border: 0; transition: background .15s, color .15s; }
.evidence-open:hover { background: #e0e7ff; color: #4338ca; }
html.dark .evidence-open:hover { background: #312e81; color: #c7d2fe; }

/* Visor de evidencia */
.ev-overlay { position: fixed; inset: 0; z-index: 90; background: rgba(2, 6, 23, .78); display: flex; align-items: center; justify-content: center; padding: 16px; margin: 0; }
.ev-box { width: 100%; max-width: 960px; max-height: calc(100dvh - 32px); display: flex; flex-direction: column; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0,0,0,.5); }
.ev-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: linear-gradient(90deg, #0f172a, #1e1b4b); color: #fff; }
.ev-title { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.ev-name { font-size: 14px; font-weight: 700; }
.ev-sub { font-size: 11px; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-counter { font-size: 12px; font-weight: 700; color: #c7d2fe; background: rgba(99,102,241,.25); border-radius: 999px; padding: 2px 10px; }
.ev-counter:empty { display: none; }
.ev-close { color: #94a3b8; font-size: 18px; line-height: 1; padding: 6px 8px; border-radius: 8px; background: transparent; border: 0; cursor: pointer; }
.ev-close:hover { color: #fff; background: rgba(255,255,255,.1); }
.ev-stage { position: relative; flex: 1; min-height: 240px; height: 65vh; display: flex; align-items: center; justify-content: center; background: #0f172a; }
.ev-img { max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; }
.ev-pdf { width: 100%; height: 100%; border: 0; background: #fff; }
.ev-loading { color: #cbd5e1; font-size: 13px; padding: 24px; text-align: center; }
.ev-error { color: #fda4af; }
.ev-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 999px; border: 0; cursor: pointer; font-size: 28px; line-height: 1; color: #fff; background: rgba(15,23,42,.65); box-shadow: 0 4px 12px rgba(0,0,0,.3); }
.ev-nav:hover { background: rgba(79,70,229,.9); }
.ev-prev { left: 12px; } .ev-next { right: 12px; }
.ev-pdf-card { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; color: #e2e8f0; font-size: 13px; padding: 24px; }
.ev-pdf-card b { word-break: break-word; }
.ev-pdf-card span { color: #94a3b8; font-size: 12px; }
.ev-pdf-icon { font-size: 48px; color: inherit !important; }
.ev-thumbs { display: flex; gap: 8px; padding: 10px 16px; overflow-x: auto; background: #f8fafc; border-top: 1px solid #e2e8f0; }
.ev-thumb { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; border: 2px solid transparent; background: #e2e8f0; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 22px; padding: 0; }
.ev-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ev-thumb-active { border-color: #6366f1; box-shadow: 0 0 0 2px rgba(99,102,241,.25); }
.ev-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 16px; border-top: 1px solid #e2e8f0; }
.ev-file { flex: 1; min-width: 0; font-size: 12px; color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-btn { display: inline-flex; align-items: center; gap: 4px; padding: 8px 14px; border-radius: 10px; font-size: 12px; font-weight: 700; color: #334155; background: #fff; border: 1px solid #e2e8f0; text-decoration: none; cursor: pointer; }
.ev-btn:hover { background: #f1f5f9; }
.ev-btn-primary { color: #fff; background: #4f46e5; border-color: #4f46e5; }
.ev-btn-primary:hover { background: #6366f1; }
html.dark .ev-box { background: #1e293b; }
html.dark .ev-thumbs { background: #172033; border-color: #334155; }
html.dark .ev-foot { border-color: #334155; }
html.dark .ev-file { color: #cbd5e1; }
html.dark .ev-btn { color: #e2e8f0; background: #273449; border-color: #334155; }
html.dark .ev-btn-primary { color: #fff; background: #4f46e5; border-color: #4f46e5; }
@media (max-width: 767px) {
  .ev-overlay { padding: 0; }
  .ev-box { max-width: none; max-height: none; height: 100dvh; border-radius: 0; }
  .ev-stage { height: auto; }
  .ev-nav { width: 38px; height: 38px; font-size: 24px; }
  .ev-file { flex-basis: 100%; }
  .ev-foot .ev-btn { flex: 1; justify-content: center; }
}