/* assets/tema.css — Capa visual común de todo el sistema (claro / oscuro).
   Se carga desde shellMenu() (Agendav2/backend/shell.php), así llega a TODAS las pantallas con menú.
   Mantiene los colores de marca (--brand, definidos en Apariencia) y el logotipo; solo ordena espacios, tipografía,
   tarjetas, formularios, tablas y agrega el modo oscuro (Bootstrap 5.3 data-bs-theme). */

:root {
  --t-font: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --t-bg: #f6f8fc;
  --t-surface: #ffffff;
  --t-surface-2: #f1f4fa;
  --t-border: #e2e7f1;
  --t-text: #1b2233;
  --t-muted: #5b6579;
  --t-brand-text: var(--brand, #1c2454);   /* color de marca usado COMO TEXTO (en oscuro se aclara) */
  --t-accent: #0040A8;
  --t-ring: rgba(0, 64, 168, .35);
  --t-radius: 14px;
  --t-radius-sm: 10px;
  --t-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 6px 20px rgba(16, 24, 40, .05);
  --t-ease: cubic-bezier(.2, .7, .2, 1);
  --bs-body-font-family: var(--t-font);
  --bs-body-bg: var(--t-bg);
  --bs-body-color: var(--t-text);
  --bs-border-color: var(--t-border);
  --bs-border-radius: var(--t-radius-sm);
  --bs-border-radius-lg: var(--t-radius);
}

[data-bs-theme="dark"] {
  color-scheme: dark;
  --t-bg: #0d1220;
  --t-surface: #151b30;
  --t-surface-2: #1b2340;
  --t-border: #2a3354;
  --t-text: #e7eaf6;
  --t-muted: #9ba5c2;
  --t-brand-text: #a9bcff;
  --t-accent: #7ea3ff;
  --t-ring: rgba(126, 163, 255, .45);
  --t-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
  --brand-light: #1e2750;
  --bs-body-bg: var(--t-bg);
  --bs-body-color: var(--t-text);
  --bs-secondary-color: var(--t-muted);
  --bs-border-color: var(--t-border);
  --bs-tertiary-bg: var(--t-surface-2);
  --bs-emphasis-color: #fff;
  --bs-link-color: #a9bcff;
  --bs-link-hover-color: #cfdaff;
}

/* ───────── base ───────── */
html body { background: var(--t-bg); color: var(--t-text); font-family: var(--t-font); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--t-font); font-weight: 650; letter-spacing: -.012em; }
.shell, .shell-drawer, .shell-pie { font-family: var(--t-font) !important; }
:focus-visible { outline: 3px solid var(--t-ring); outline-offset: 2px; border-radius: 6px; }
a { text-underline-offset: 3px; }
::selection { background: var(--t-ring); }

/* ───────── tarjetas ───────── */
.card, .card-adm, .stat-card {
  background: var(--t-surface); border: 1px solid var(--t-border) !important; border-radius: var(--t-radius) !important; box-shadow: var(--t-shadow) !important;
  --bs-card-bg: var(--t-surface); --bs-card-border-color: var(--t-border); --bs-card-cap-bg: var(--t-surface-2);
}
.card-header { background: var(--t-surface-2); border-bottom: 1px solid var(--t-border); font-weight: 600; }
.modulo-card { transition: transform .2s var(--t-ease), box-shadow .2s var(--t-ease); }

/* ───────── botones ───────── */
.btn { border-radius: var(--t-radius-sm); font-weight: 550; letter-spacing: .005em; transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .1s; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled, .btn.disabled { cursor: not-allowed; }
.btn-lg { border-radius: 12px; }
.btn-group > .btn, .input-group > .btn { border-radius: 0; }
.btn-group > .btn:first-child, .input-group > .btn:first-child { border-radius: var(--t-radius-sm) 0 0 var(--t-radius-sm); }
.btn-group > .btn:last-child, .input-group > .btn:last-child { border-radius: 0 var(--t-radius-sm) var(--t-radius-sm) 0; }
.btn-group > .btn:only-child { border-radius: var(--t-radius-sm); }
[data-bs-theme="dark"] .btn-primary { --bs-btn-bg: #3558cf; --bs-btn-border-color: #3558cf; --bs-btn-hover-bg: #4668e0; --bs-btn-hover-border-color: #4668e0; --bs-btn-active-bg: #5176ee; --bs-btn-active-border-color: #5176ee; --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-disabled-bg: #3558cf; --bs-btn-disabled-border-color: #3558cf; }
[data-bs-theme="dark"] .btn-outline-primary { --bs-btn-color: #a9bcff; --bs-btn-border-color: #5a74d6; --bs-btn-hover-bg: #3558cf; --bs-btn-hover-border-color: #3558cf; --bs-btn-hover-color: #fff; --bs-btn-active-bg: #4668e0; --bs-btn-active-color: #fff; }
[data-bs-theme="dark"] .btn-brand { background: #3558cf; color: #fff; }
[data-bs-theme="dark"] .btn-brand:hover { background: #4668e0; color: #fff; }
[data-bs-theme="dark"] .btn-outline-brand { color: #a9bcff; border-color: #5a74d6; }
[data-bs-theme="dark"] .btn-outline-brand:hover { background: #3558cf; color: #fff; }

/* ───────── formularios ───────── */
.form-control, .form-select { border-radius: var(--t-radius-sm); border-color: var(--t-border); background-color: var(--t-surface); color: var(--t-text); transition: border-color .15s, box-shadow .15s; }
.form-control:focus, .form-select:focus { border-color: var(--t-accent) !important; box-shadow: 0 0 0 .22rem var(--t-ring) !important; background-color: var(--t-surface); color: var(--t-text); }
.form-control:disabled, .form-select:disabled, .form-control[readonly] { background-color: var(--t-surface-2); opacity: .85; }
.form-label, label { font-weight: 550; font-size: .86rem; color: var(--t-text); }
.form-control::placeholder { color: var(--t-muted); opacity: .8; }
.input-group-text { background: var(--t-surface-2); border-color: var(--t-border); color: var(--t-muted); }
.form-check-input:checked { background-color: var(--t-accent); border-color: var(--t-accent); }
.form-check-input:focus { box-shadow: 0 0 0 .22rem var(--t-ring); border-color: var(--t-accent); }

/* ───────── tablas ───────── */
.table { --bs-table-bg: transparent; --bs-table-color: var(--t-text); --bs-table-border-color: var(--t-border); --bs-table-hover-bg: var(--brand-light, rgba(0, 64, 168, .06)); --bs-table-hover-color: var(--t-text); --bs-table-striped-bg: var(--t-surface-2); }
.table > thead > tr > th, .table-light, .table-light > th, .table > thead.table-light th {
  background: var(--t-surface-2) !important; color: var(--t-muted) !important; font-size: .74rem; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--t-border);
}
.table > :not(caption) > * > * { padding-top: .6rem; padding-bottom: .6rem; }
.table-hover > tbody > tr:hover > * { color: var(--t-text); }
.table-responsive { border-radius: var(--t-radius); }

/* ───────── navegación interna (pills/tabs) ───────── */
.nav-pills .nav-link { border-radius: 999px; font-weight: 550; transition: background-color .15s, color .15s; }
.nav-pills .nav-link.active { background: var(--brand, #1c2454); color: #fff; }
.nav-tabs { border-bottom-color: var(--t-border); }
.nav-tabs .nav-link.active { background: var(--t-surface); border-color: var(--t-border) var(--t-border) var(--t-surface); color: var(--t-text); }
.sec-lbl { color: var(--t-brand-text) !important; border-bottom-color: var(--t-brand-text) !important; letter-spacing: .01em; }

/* ───────── modales, dropdowns, toasts ───────── */
.modal-content { background: var(--t-surface); border: 1px solid var(--t-border); border-radius: 18px; box-shadow: 0 24px 60px rgba(8, 12, 30, .35); overflow: hidden; }
.modal-header { border-bottom: 0; padding: 1rem 1.25rem; }
.modal-footer { border-top: 1px solid var(--t-border); background: var(--t-surface); }
.dropdown-menu { background: var(--t-surface); border: 1px solid var(--t-border); border-radius: 12px; box-shadow: var(--t-shadow); }
.dropdown-item { color: var(--t-text); } .dropdown-item:hover { background: var(--t-surface-2); }
.toast { background: var(--t-surface); color: var(--t-text); border: 1px solid var(--t-border); border-radius: 12px; }
.alert { border-radius: var(--t-radius-sm); }
.badge { font-weight: 600; letter-spacing: .01em; }
.list-group-item { background: var(--t-surface); color: var(--t-text); border-color: var(--t-border); }
.progress { background: var(--t-surface-2); border-radius: 999px; }

/* ───────── menú del marco (shell.php) ───────── */
.shell-top, .shell-bar { border-bottom: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 8px 24px rgba(10, 14, 36, .12) !important; }
.shell-link { border-radius: var(--t-radius-sm) !important; transition: background-color .15s; }
.shell-top .shell-sub { border-radius: 14px !important; border: 1px solid rgba(255, 255, 255, .1); }
.shell-pie { border-top: 1px solid var(--t-border) !important; }
.shell-drawer { background: var(--t-bg) !important; color: var(--t-text) !important; }
.shell-drawer h2 { color: var(--t-brand-text) !important; }
.shell-mod { background: var(--t-surface) !important; border: 1px solid var(--t-border); box-shadow: var(--t-shadow) !important; }
.shell-mod-ico { color: var(--t-brand-text) !important; }
.shell-mod-head small { color: var(--t-muted) !important; }
.shell-mod-subs a { background: var(--t-surface-2) !important; color: var(--t-text) !important; }
.shell-mod-subs a:hover { background: var(--brand, #1c2454) !important; color: #fff !important; }
[data-bs-theme="dark"] .shell-pie { background: var(--t-surface) !important; color: var(--t-muted) !important; }
[data-bs-theme="dark"] .shell-mod.activo { outline-color: var(--t-accent); }

/* Botón claro/oscuro (lo inserta tema.js en la zona de usuario del menú) */
.tema-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: inherit; cursor: pointer; transition: background-color .15s; }
.tema-toggle:hover { background: var(--shell-hover, rgba(255, 255, 255, .16)); }
.tema-toggle.flotante { position: fixed; right: 16px; bottom: 16px; z-index: 1080; width: 44px; height: 44px; border-radius: 50%; background: var(--t-surface); color: var(--t-text); border: 1px solid var(--t-border); box-shadow: var(--t-shadow); }

/* ───────── texto con color de marca → legible en oscuro ───────── */
[data-bs-theme="dark"] a:not(.btn):not(.nav-link):not(.shell-link):not(.dropdown-item):not(.list-group-item):not(.shell-brand):not(.page-link) { color: var(--bs-link-color); }
[data-bs-theme="dark"] .text-primary, [data-bs-theme="dark"] .text-brand { color: var(--t-brand-text) !important; }
[data-bs-theme="dark"] .nav-pills .nav-link:not(.active) { color: var(--t-brand-text); }
[data-bs-theme="dark"] .nav-pills .nav-link:hover:not(.active) { background: var(--t-surface-2); color: #fff; }
[data-bs-theme="dark"] .timer-display { color: var(--t-brand-text); }
[data-bs-theme="dark"] .bg-light, [data-bs-theme="dark"] .bg-white { background-color: var(--t-surface-2) !important; color: var(--t-text) !important; }
[data-bs-theme="dark"] .text-dark { color: var(--t-text) !important; }
[data-bs-theme="dark"] .modal-header { background-color: #1a2250; }
[data-bs-theme="dark"] .page-link { background: var(--t-surface); border-color: var(--t-border); color: var(--t-text); }

/* ───────── Agenda: indicador de pasos, acciones, calendario ───────── */
#progresoCita { background: var(--t-surface-2) !important; border-bottom: 1px solid var(--t-border) !important; }
#barraAcciones { background: var(--t-surface-2) !important; border-bottom: 1px solid var(--t-border) !important; }
.paso-circle { background: var(--t-surface) !important; border-color: var(--t-border); color: var(--t-muted); }
.paso-label { color: var(--t-muted) !important; }
.paso-connector { background: var(--t-border) !important; }
.paso-step.paso-done .paso-circle { background: var(--t-accent) !important; border-color: var(--t-accent) !important; color: #fff; }
.paso-step.paso-done .paso-label { color: var(--t-accent) !important; }
.paso-step.paso-activo .paso-circle { background: var(--brand, #1c2454) !important; border-color: var(--brand, #1c2454) !important; color: #fff; box-shadow: 0 0 0 4px var(--t-ring); }
.paso-step.paso-activo .paso-label { color: var(--t-text) !important; }
.paso-connector.done { background: var(--t-accent) !important; }
[data-bs-theme="dark"] .paso-step.paso-activo .paso-circle { background: #3558cf !important; border-color: #3558cf !important; }

.fc { --fc-border-color: var(--t-border); --fc-page-bg-color: var(--t-surface); --fc-neutral-bg-color: var(--t-surface-2); --fc-neutral-text-color: var(--t-muted); --fc-today-bg-color: color-mix(in srgb, var(--t-accent) 12%, transparent); --fc-list-event-hover-bg-color: var(--t-surface-2); --fc-button-bg-color: var(--brand, #1c2454); --fc-button-border-color: var(--brand, #1c2454); --fc-button-hover-bg-color: var(--brand-hover, #141840); --fc-button-hover-border-color: var(--brand-hover, #141840); --fc-button-active-bg-color: var(--t-accent); --fc-button-active-border-color: var(--t-accent); }
.fc .fc-toolbar-title { font-weight: 650; letter-spacing: -.01em; font-size: 1.3rem; }
.fc .fc-button { border-radius: var(--t-radius-sm); font-weight: 550; text-transform: capitalize; }
.fc-theme-bootstrap5 a, .fc a { color: inherit; }
.fc .fc-scrollgrid { border-radius: var(--t-radius); overflow: hidden; }
.fc-event { border-radius: 6px !important; }

/* ───────── Select2 / selector de fecha y hora ───────── */
.select2-container--bootstrap-5 .select2-selection { border-radius: var(--t-radius-sm); background-color: var(--t-surface); border-color: var(--t-border); color: var(--t-text); min-height: 38px; }
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered { color: var(--t-text); }
.select2-container--bootstrap-5 .select2-dropdown { background: var(--t-surface); border-color: var(--t-border); border-radius: 12px; box-shadow: var(--t-shadow); overflow: hidden; }
.select2-container--bootstrap-5 .select2-search__field { background: var(--t-surface); color: var(--t-text); border-color: var(--t-border) !important; border-radius: 8px; }
.select2-container--bootstrap-5 .select2-results__option { color: var(--t-text); padding: .5rem .8rem; }
.select2-container--bootstrap-5 .select2-results__option--highlighted { background-color: var(--brand, #1c2454) !important; color: #fff !important; }
.select2-container--bootstrap-5 .select2-results__option--selected:not(.select2-results__option--highlighted) { background-color: var(--t-surface-2) !important; color: var(--t-brand-text) !important; font-weight: 600; }
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder { color: var(--t-muted); }
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-results__option--highlighted { background-color: #3558cf !important; }
[data-bs-theme="dark"] .select2-container--bootstrap-5.select2-container--disabled .select2-selection { background: var(--t-surface-2); }
.flatpickr-calendar { background: var(--t-surface); color: var(--t-text); border-radius: 14px; box-shadow: var(--t-shadow); }
[data-bs-theme="dark"] .flatpickr-calendar, [data-bs-theme="dark"] .flatpickr-months .flatpickr-month, [data-bs-theme="dark"] .flatpickr-weekday { background: var(--t-surface); color: var(--t-text); fill: var(--t-text); }
[data-bs-theme="dark"] .flatpickr-day { color: var(--t-text); }
[data-bs-theme="dark"] .flatpickr-day:hover { background: var(--t-surface-2); border-color: var(--t-surface-2); }
[data-bs-theme="dark"] .flatpickr-day.flatpickr-disabled, [data-bs-theme="dark"] .flatpickr-day.prevMonthDay, [data-bs-theme="dark"] .flatpickr-day.nextMonthDay { color: var(--t-muted); }
[data-bs-theme="dark"] .flatpickr-day.selected { background: #3558cf; border-color: #3558cf; color: #fff; }
.ui-timepicker-container .ui-timepicker { background: var(--t-surface); color: var(--t-text); border: 1px solid var(--t-border); border-radius: 10px; overflow: hidden; }
.ui-timepicker-container .ui-timepicker li { color: var(--t-text); }
.ui-timepicker-container .ui-timepicker li:hover, .ui-timepicker-container .ui-timepicker li.ui-timepicker-selected { background: var(--brand, #1c2454); color: #fff; }

/* ───────── Editor de correos (Summernote) y bloques de código ───────── */
[data-bs-theme="dark"] .note-editor.note-frame { border-color: var(--t-border); background: var(--t-surface); }
[data-bs-theme="dark"] .note-editor .note-toolbar { background: var(--t-surface-2) !important; border-color: var(--t-border); }
[data-bs-theme="dark"] .note-editor .note-btn { background: var(--t-surface); color: var(--t-text); border-color: var(--t-border); }
[data-bs-theme="dark"] .note-editor .note-editing-area .note-editable { background: var(--t-surface); color: var(--t-text); }
[data-bs-theme="dark"] .note-editor .note-statusbar { background: var(--t-surface-2); }
[data-bs-theme="dark"] .topbar { background: #141a38; }
[data-bs-theme="dark"] .ticket-mock, [data-bs-theme="dark"] #logoPreview { background: #f4f4f4; color: #111; }   /* simulan papel impreso */
[data-bs-theme="dark"] .adm-header { background: #141a38; }

/* ───────── carga al guardar (Agenda) ───────── */
.guardando-overlay { position: absolute; inset: 0; z-index: 30; display: none; flex-direction: column; align-items: center; justify-content: center; background: color-mix(in srgb, var(--t-surface) 82%, transparent); backdrop-filter: blur(2px); color: var(--t-text); border-radius: inherit; }

/* ───────── movimiento reducido ───────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ───────── móvil ───────── */
@media (max-width: 575px) {
  .modal-dialog { margin: .5rem; }
  .table-responsive { -webkit-overflow-scrolling: touch; }
}

/* iconos de módulos / pantallas en oscuro (el degradado «brand-light» claro se define por página) */
[data-bs-theme="dark"] .modulo-icono, [data-bs-theme="dark"] .shell-mod-ico { background: var(--t-surface-2) !important; color: var(--t-brand-text) !important; }
[data-bs-theme="dark"] .table-hover tbody tr:hover { background: var(--t-surface-2); }

/* Calendario: el día de hoy resalta (encabezado y columna) */
.fc .fc-day-today { background: color-mix(in srgb, var(--t-accent) 10%, transparent) !important; }
.fc .fc-col-header-cell.fc-day-today a { color: var(--t-accent); font-weight: 700; }
.fc-dayGridWeek-view .fc-daygrid-day-frame { min-height: 70vh; }