/* ===========================================================================
   🎨 Librerías de terceros y contenido rich-text sobre TOKENS (marco «E · Brisa»)
   ---------------------------------------------------------------------------
   Tom Select, Choices, AsyncSelect, SweetAlert2, Flatpickr y Quill generan su
   HTML con CSS propio y no entienden utilidades de Tailwind. Antes cada una
   tenía su copia `.dark` con grises fijos; ahora leen las variables `--trz-*`
   (src/tailwind.css) UNA vez y el modo oscuro sale solo.

   Este archivo NO pasa por Tailwind: sus reglas no tienen capa y por eso ganan
   a las utilidades de las vistas (y al CSS de las librerías, que se carga antes
   o tiene menos especificidad). Es lo que permite forzar la misma piel en las
   40 vistas que pintan su propio contenedor de AsyncSelect.

   Piel común de los desplegables (= lista del select personalizable de
   tailwind.css): superficie sólida, borde `line`, radio `card`, padding 4px,
   opción con radio 10px, hover `surface-inset`, elegida en `accent-soft`.
   =========================================================================== */

/* --- Contenido renderizado (Quill / .prose / .rich-content) --- */
.ql-editor {
  font-size: 14px;
}

.rich-editor ul {
  list-style: disc;
  padding-left: 15px;
  margin-bottom: 1em;
}

#taskFullDesc,
#tpDesc,
#modalTaskDesc,
#modalDesc,
.prose,
.rich-content {
  color: var(--trz-ink-soft);
}

#taskFullDesc h1,
#tpDesc h1,
#modalTaskDesc h1,
#modalDesc h1,
.prose h1,
.rich-content h1 {
  font-size: 1.6em;
  font-weight: 700;
  color: var(--trz-ink);
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  border-bottom: 2px solid var(--trz-line-soft);
  padding-bottom: 0.25rem;
  line-height: 1.2;
}

#taskFullDesc h2,
#tpDesc h2,
#modalTaskDesc h2,
#modalDesc h2,
.prose h2,
.rich-content h2 {
  font-size: 1.35em;
  font-weight: 600;
  color: var(--trz-ink);
  margin-top: 1.25rem;
  margin-bottom: 0.6rem;
  line-height: 1.3;
}

#taskFullDesc h3,
#tpDesc h3,
#modalTaskDesc h3,
#modalDesc h3,
.prose h3,
.rich-content h3 {
  font-size: 1.15em;
  font-weight: 600;
  color: var(--trz-ink-soft);
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

/* Soporte para listas en descripción (si no tienen Tailwind prose) */
#taskFullDesc ul,
#tpDesc ul,
#modalTaskDesc ul,
#modalDesc ul,
.rich-content ul {
  list-style-type: disc;
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

#taskFullDesc ol,
#tpDesc ol,
#modalTaskDesc ol,
#modalDesc ol,
.rich-content ol {
  list-style-type: decimal;
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

#taskFullDesc li,
#tpDesc li,
#modalTaskDesc li,
#modalDesc li,
.rich-content li {
  margin-bottom: 0.25rem;
}

/* CSP-safe dynamic widths via CSS custom properties (avoid inline `style="width:..%"`). */
.progress-bar-fill {
  width: var(--progress, 0%);
}

/* CSP-safe dynamic background color via custom property (avoid inline style="background-color: #xxx"). */
.bg-dynamic {
  background-color: var(--bg-dynamic, transparent);
}

.dark .bg-gray-900\/60.backdrop-blur-sm {
  background: #ffffff0f;
}

/* Un `.input-field` con `bg-white` suelto en la vista (editores Quill, etc.). */
.input-field.bg-white {
  background-color: var(--trz-surface) !important;
  color: var(--trz-ink) !important;
}

/* --- Tom Select ---
   (`body` delante: algunas vistas cargan tom-select.css / choices.min.css DESPUÉS
   de este archivo y, a igual especificidad, ganarían.)
   Tom Select copia las clases del <select> original al envoltorio: si el select
   llevaba `.input-field`, el envoltorio recibiría un segundo borde y padding.
   Se neutraliza y la piel va en `.ts-control`. */
body .ts-wrapper.input-field,
body .ts-wrapper.trz-field {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  min-height: 0;
}
body .ts-wrapper .ts-control,
body .ts-wrapper.single.input-active .ts-control {
  min-height: 38px;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--trz-line-strong);
  border-radius: var(--trz-radius-control);
  background: var(--trz-surface);
  color: var(--trz-ink);
  font-size: 0.875rem;
  box-shadow: 0 1px 2px rgba(14, 22, 48, 0.05);
}
/* Con varias fichas el control crece en alto: una píldora se vería ovalada. */
body .ts-wrapper.multi .ts-control {
  border-radius: var(--trz-radius-card);
  padding: 0.35rem 0.5rem;
}
body .ts-wrapper.focus .ts-control {
  border-color: var(--trz-accent);
  box-shadow: 0 0 0 1px var(--trz-accent);
}
body .ts-wrapper.disabled .ts-control {
  background: var(--trz-surface-inset);
  color: var(--trz-ink-muted);
}
body .ts-control input,
body .ts-control input::placeholder {
  color: var(--trz-ink);
}
body .ts-control input::placeholder {
  color: var(--trz-ink-faint);
}
/* Flecha: el mismo chevron que el select nativo (ver ::picker-icon en tailwind.css). */
body .ts-wrapper.single .ts-control {
  padding-right: 2.5rem;
}
body .ts-wrapper.single .ts-control:after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0.95rem;
  width: 0.8rem;
  height: 0.8rem;
  margin-top: -0.4rem;
  border: 0;
  background-color: var(--trz-ink-muted);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80a8 8 0 0 1 11.32-11.32L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32Z'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: rotate 0.2s ease;
}
body .ts-wrapper.single.dropdown-active .ts-control:after {
  rotate: 180deg;
}
body .ts-wrapper.multi .ts-control > div {
  cursor: pointer;
  margin: 0 4px 4px 0;
  padding: 2px 8px;
  background: var(--trz-accent-soft);
  color: var(--trz-accent);
  border: 0;
  border-radius: var(--trz-radius-control);
  font-weight: 500;
}
body .ts-wrapper.multi .ts-control > div.active {
  background: var(--trz-accent);
  color: #fff;
}
body .ts-wrapper.plugin-remove_button .item .remove {
  border-left-color: color-mix(in oklab, var(--trz-accent) 30%, transparent);
}
body .ts-dropdown {
  margin-top: 0.25rem;
  padding: 0.25rem;
  border: 1px solid var(--trz-line);
  border-radius: var(--trz-radius-card);
  background: var(--trz-surface-solid);
  color: var(--trz-ink);
  box-shadow: 0 12px 32px -8px rgba(14, 22, 48, 0.22), 0 2px 6px rgba(14, 22, 48, 0.06);
  font-size: 0.875rem;
}
body .ts-dropdown .dropdown-input-wrap {
  padding: 0 0 0.25rem;
}
body .ts-dropdown .dropdown-input {
  width: 100%;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--trz-line-strong);
  border-radius: var(--trz-radius-control);
  background: var(--trz-surface);
  color: var(--trz-ink);
  font-size: 0.875rem;
  box-shadow: none;
}
body .ts-dropdown .dropdown-input:focus {
  outline: none;
  border-color: var(--trz-accent);
  box-shadow: 0 0 0 1px var(--trz-accent);
}
body .ts-dropdown .dropdown-input::placeholder {
  color: var(--trz-ink-faint);
}
body .ts-dropdown .option,
body .ts-dropdown .create,
body .ts-dropdown .no-results {
  padding: 0.5rem 0.75rem;
  border-radius: 10px;
  color: var(--trz-ink-soft);
}
body .ts-dropdown .active {
  background: var(--trz-surface-inset);
  color: var(--trz-ink);
}
body .ts-dropdown .selected {
  background: var(--trz-accent-soft);
  color: var(--trz-accent);
  font-weight: 500;
}
body .ts-dropdown .optgroup-header {
  background: transparent;
  color: var(--trz-ink-muted);
  font-size: 0.75rem;
  font-weight: 500;
}
body .ts-dropdown [data-selectable] .highlight {
  background: color-mix(in oklab, var(--trz-warning) 25%, transparent);
  border-radius: 2px;
}

/* --- Choices.js --- */
body .choices {
  margin-bottom: 0;
  font-size: 0.875rem;
}
body .choices__inner {
  min-height: 38px;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--trz-line-strong);
  border-radius: var(--trz-radius-control);
  background: var(--trz-surface);
  color: var(--trz-ink);
  font-size: 0.875rem;
}
body .choices[data-type*="select-multiple"] .choices__inner,
body .choices[data-type*="text"] .choices__inner {
  border-radius: var(--trz-radius-card);
}
body .is-open .choices__inner,
body .is-flipped.is-open .choices__inner {
  border-radius: var(--trz-radius-control);
}
body .choices[data-type*="select-multiple"].is-open .choices__inner {
  border-radius: var(--trz-radius-card);
}
body .is-focused .choices__inner,
body .is-open .choices__inner {
  border-color: var(--trz-accent);
  box-shadow: 0 0 0 1px var(--trz-accent);
}
body .choices__input,
body .choices[data-type*="select-one"] .choices__input {
  background: transparent;
  color: var(--trz-ink);
}
body .choices[data-type*="select-one"] .choices__input {
  margin-bottom: 0.25rem;
  border: 1px solid var(--trz-line-strong);
  border-radius: var(--trz-radius-control);
  padding: 0.4rem 0.75rem;
}
body .choices[data-type*="select-one"]::after {
  border-color: var(--trz-ink-muted) transparent transparent;
}
body .choices[data-type*="select-one"].is-open::after {
  border-color: transparent transparent var(--trz-ink-muted);
}
body .choices__list--multiple .choices__item {
  border: 0;
  border-radius: var(--trz-radius-control);
  background: var(--trz-accent-soft);
  color: var(--trz-accent);
}
body .choices__list--multiple .choices__item.is-highlighted {
  border: 0;
  background: var(--trz-accent);
  color: #fff;
}
body .choices[data-type*="select-multiple"] .choices__button,
body .choices[data-type*="text"] .choices__button {
  border-left-color: color-mix(in oklab, var(--trz-accent) 30%, transparent);
}
body .choices.is-disabled .choices__inner,
body .choices.is-disabled .choices__input {
  background: var(--trz-surface-inset);
}
body .choices__list--dropdown,
body .choices__list[aria-expanded] {
  margin-top: 0.25rem;
  padding: 0.25rem;
  border: 1px solid var(--trz-line);
  border-radius: var(--trz-radius-card);
  background: var(--trz-surface-solid);
  color: var(--trz-ink);
  box-shadow: 0 12px 32px -8px rgba(14, 22, 48, 0.22), 0 2px 6px rgba(14, 22, 48, 0.06);
  word-break: normal;
}
body .is-open .choices__list--dropdown,
body .is-open .choices__list[aria-expanded] {
  border-color: var(--trz-line);
}
body .choices__list--dropdown .choices__item,
body .choices__list[aria-expanded] .choices__item {
  padding: 0.5rem 0.75rem;
  border-radius: 10px;
  color: var(--trz-ink-soft);
  font-size: 0.875rem;
}
body .choices__list--dropdown .choices__item--selectable.is-highlighted,
body .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
  background: var(--trz-surface-inset);
  color: var(--trz-ink);
}
body .choices__heading {
  border-bottom-color: var(--trz-line);
  color: var(--trz-ink-muted);
}

/* --- Select personalizable: control en flex ---
   La lista abierta y la flecha (::picker-icon) se estilan en src/tailwind.css. Aquí
   solo el `display`: la flecha va en el flujo, a la derecha, y necesita flex. Muchas
   vistas ponen `block` al select; esta regla no tiene capa y gana. Quedan fuera los
   selects ocultos con `.hidden` (un `style.display` inline sigue ganando). */
@supports (appearance: base-select) {
  select:not([multiple], [size], [data-native-select], .hidden, .flatpickr-monthDropdown-months, [class*="gjs-"]) {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap; /* el texto elegido no salta de línea en selects estrechos */
  }
  select:not([multiple], [size], [data-native-select], .flatpickr-monthDropdown-months, [class*="gjs-"])::picker-icon {
    align-self: center;
  }
  select:is(.block, .w-full, .input-field, .trz-field):not([multiple], [size], [data-native-select], .hidden, .flatpickr-monthDropdown-months, [class*="gjs-"]) {
    display: flex;
  }
}

/* --- Barra de scroll fina en los desplegables de librerías ---
   Misma que la lista del select nativo y que `.trz-scroll` (src/tailwind.css). */
body .ts-dropdown-content,
body .choices__list--dropdown .choices__list,
body .choices__list[aria-expanded] .choices__list,
.async-select .as-results,
body .ql-snow .ql-picker-options,
body .flatpickr-monthDropdown-months,
.swal2-container .swal2-select {
  scrollbar-width: thin;
  scrollbar-color: var(--trz-line-strong) transparent;
}

/* --- AsyncSelect (public/js/components/AsyncSelect.js) ---
   Cada vista pinta su propio contenedor; la piel se fuerza aquí para que las
   40 vistas se vean igual sin tocar su marcado. */
.async-select > div:first-child {
  border: 1px solid var(--trz-line-strong);
  border-radius: var(--trz-radius-control);
  background-color: var(--trz-surface);
  color: var(--trz-ink);
}
.async-select[data-type="multi"] > div:first-child {
  border-radius: var(--trz-radius-card);
}
.async-select > div:first-child:focus-within {
  border-color: var(--trz-accent);
  box-shadow: 0 0 0 1px var(--trz-accent);
}
.async-select .as-search {
  color: var(--trz-ink);
  background: transparent;
}
.async-select .as-search::placeholder {
  color: var(--trz-ink-faint);
}
.async-select .as-results {
  padding: 0.25rem;
  border: 1px solid var(--trz-line);
  border-radius: var(--trz-radius-card);
  background-color: var(--trz-surface-solid);
  box-shadow: 0 12px 32px -8px rgba(14, 22, 48, 0.22), 0 2px 6px rgba(14, 22, 48, 0.06);
  --tw-ring-shadow: 0 0 #0000;
}
.async-select .as-results > div {
  border-radius: 10px;
}

/* --- 🌙 Switch de tema (3 estados) ---
   theme.js marca el segmento activo con aria-pressed. */
.theme-seg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.6rem;
  border-radius: 9999px;
  color: var(--trz-ink-muted, #6b7280);
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
  cursor: pointer;
}
.theme-seg:hover {
  color: var(--trz-ink, #111827);
}
.theme-seg[aria-pressed="true"] {
  background: var(--trz-surface-solid, #ffffff);
  color: var(--trz-ink, #111827);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

/* --- SweetAlert2 (showAlert / showToast / confirmDialog) ---
   El CSS de SweetAlert lo inyecta su JS al final del <head>: los selectores
   llevan `.swal2-container` delante para ganarle por especificidad. */
.swal2-container .swal2-popup {
  border-radius: var(--trz-radius-box);
  background: var(--trz-surface-solid);
  color: var(--trz-ink-soft);
  font-family: var(--font-text);
}
.swal2-container .swal2-popup.swal2-toast {
  border-radius: var(--trz-radius-card);
  border: 1px solid var(--trz-line);
  box-shadow: 0 12px 32px -8px rgba(14, 22, 48, 0.22);
}
.swal2-container .swal2-title {
  color: var(--trz-ink);
  font-weight: 600;
}
.swal2-container .swal2-html-container {
  color: var(--trz-ink-soft);
}
.swal2-container .swal2-close {
  color: var(--trz-ink-faint);
}
.swal2-container .swal2-footer {
  border-top-color: var(--trz-line);
  color: var(--trz-ink-muted);
}
.swal2-container .swal2-styled {
  border-radius: var(--trz-radius-control);
  padding: 0.55rem 1.25rem;
  font-weight: 500;
}
/* Confirmar sin color explícito = color de marca del configurador. Las llamadas
   que pasan `confirmButtonColor` (p. ej. rojo de borrado) lo ponen inline y ganan. */
.swal2-container .swal2-styled.swal2-confirm {
  background-color: var(--trz-brand);
  color: var(--trz-brand-ink);
}
.swal2-container .swal2-styled.swal2-cancel {
  background-color: var(--trz-surface-inset);
  color: var(--trz-ink-soft);
}
.swal2-container .swal2-styled:focus,
.swal2-container .swal2-styled.swal2-confirm:focus {
  box-shadow: 0 0 0 3px var(--trz-accent-soft);
}
.swal2-container .swal2-input,
.swal2-container .swal2-textarea,
.swal2-container .swal2-select,
.swal2-container .swal2-file {
  border: 1px solid var(--trz-line-strong);
  border-radius: var(--trz-radius-control);
  background: var(--trz-surface);
  color: var(--trz-ink);
  box-shadow: none;
}
.swal2-container .swal2-textarea {
  border-radius: var(--trz-radius-card);
}
.swal2-container .swal2-input:focus,
.swal2-container .swal2-textarea:focus,
.swal2-container .swal2-select:focus {
  border-color: var(--trz-accent);
  box-shadow: 0 0 0 1px var(--trz-accent);
}
.swal2-container .swal2-input::placeholder,
.swal2-container .swal2-textarea::placeholder {
  color: var(--trz-ink-faint);
}
.swal2-container .swal2-validation-message {
  background: var(--trz-danger-soft);
  color: var(--trz-danger);
}
.swal2-container .swal2-timer-progress-bar {
  background: var(--trz-accent-soft);
}

/* --- Flatpickr (calendario flotante) ---
   El tema `airbnb.css` pinta una cuadrícula (`span.flatpickr-day` con bordes y radio 0)
   y marca «hoy» con un subrayado rojo. `body .flatpickr-calendar` delante para ganarle
   por especificidad: días en círculo sin cuadrícula, hoy con aro de acento, elegido
   con el color de marca. */
body .flatpickr-calendar {
  padding: 0.5rem;
  width: auto;
  border: 1px solid var(--trz-line);
  border-radius: var(--trz-radius-card);
  background: var(--trz-surface-solid);
  color: var(--trz-ink);
  font-family: var(--font-text);
  box-shadow: 0 12px 32px -8px rgba(14, 22, 48, 0.22), 0 2px 6px rgba(14, 22, 48, 0.06);
}
body .flatpickr-calendar.arrowTop:before,
body .flatpickr-calendar.arrowTop:after,
body .flatpickr-calendar.arrowBottom:before,
body .flatpickr-calendar.arrowBottom:after {
  display: none;
}
body .flatpickr-calendar .flatpickr-months {
  padding-bottom: 0.25rem;
}
body .flatpickr-calendar .flatpickr-months .flatpickr-month {
  height: 40px;
  color: var(--trz-ink);
  fill: var(--trz-ink);
  background: transparent;
}
body .flatpickr-calendar .flatpickr-current-month {
  padding-top: 6px;
  font-size: 1rem;
  font-weight: 500;
}
body .flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months,
body .flatpickr-calendar .flatpickr-current-month input.cur-year {
  color: var(--trz-ink);
  font-weight: 500;
  background: transparent;
  border-radius: var(--trz-radius-control);
}
body .flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months:hover,
body .flatpickr-calendar .flatpickr-current-month input.cur-year:hover {
  background: var(--trz-surface-inset);
}
body .flatpickr-calendar .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
  background: var(--trz-surface-solid);
  color: var(--trz-ink);
}
body .flatpickr-calendar .numInputWrapper span {
  border-color: transparent;
}
body .flatpickr-calendar .numInputWrapper span.arrowUp:after {
  border-bottom-color: var(--trz-ink-muted);
}
body .flatpickr-calendar .numInputWrapper span.arrowDown:after {
  border-top-color: var(--trz-ink-muted);
}
body .flatpickr-calendar .flatpickr-months .flatpickr-prev-month,
body .flatpickr-calendar .flatpickr-months .flatpickr-next-month {
  top: 0.5rem;
  margin: 0 0.25rem;
  padding: 8px;
  height: 32px;
  width: 32px;
  border-radius: 9999px;
  color: var(--trz-ink-soft);
  fill: var(--trz-ink-soft);
}
body .flatpickr-calendar .flatpickr-months .flatpickr-prev-month:hover,
body .flatpickr-calendar .flatpickr-months .flatpickr-next-month:hover {
  background: var(--trz-surface-inset);
}
body .flatpickr-calendar .flatpickr-months .flatpickr-prev-month svg,
body .flatpickr-calendar .flatpickr-months .flatpickr-next-month svg {
  fill: var(--trz-ink-soft);
}
body .flatpickr-calendar .flatpickr-months .flatpickr-prev-month:hover svg,
body .flatpickr-calendar .flatpickr-months .flatpickr-next-month:hover svg {
  fill: var(--trz-accent);
}
body .flatpickr-calendar span.flatpickr-weekday {
  color: var(--trz-ink-muted);
  font-size: 0.75rem;
  font-weight: 500;
  background: transparent;
}
body .flatpickr-calendar .dayContainer {
  gap: 2px 0;
  padding: 0;
  border: 0;
  box-shadow: none;
}
body .flatpickr-calendar span.flatpickr-day,
body .flatpickr-calendar span.flatpickr-day.prevMonthDay,
body .flatpickr-calendar span.flatpickr-day.nextMonthDay {
  margin: 0;
  border: 1px solid transparent;
  border-radius: 9999px !important; /* airbnb.css lo fija a 0 con !important */
  box-shadow: none;
  color: var(--trz-ink-soft);
  font-variant-numeric: tabular-nums;
}
body .flatpickr-calendar span.flatpickr-day:hover,
body .flatpickr-calendar span.flatpickr-day:focus {
  background: var(--trz-surface-inset);
  border-color: transparent;
  color: var(--trz-ink);
}
body .flatpickr-calendar span.flatpickr-day.today:not(.selected),
body .flatpickr-calendar span.flatpickr-day.today:not(.selected):hover {
  border-color: var(--trz-accent);
  color: var(--trz-ink);
  font-weight: 600;
}
body .flatpickr-calendar span.flatpickr-day.selected,
body .flatpickr-calendar span.flatpickr-day.selected:hover,
body .flatpickr-calendar span.flatpickr-day.startRange,
body .flatpickr-calendar span.flatpickr-day.endRange,
body .flatpickr-calendar span.flatpickr-day.selected.inRange,
body .flatpickr-calendar span.flatpickr-day.startRange.inRange,
body .flatpickr-calendar span.flatpickr-day.endRange.inRange {
  background: var(--trz-brand);
  border-color: var(--trz-brand);
  color: var(--trz-brand-ink);
  font-weight: 600;
}
body .flatpickr-calendar span.flatpickr-day.inRange {
  border-radius: 0 !important;
  background: var(--trz-accent-soft);
  border-color: transparent;
  box-shadow: -5px 0 0 var(--trz-accent-soft), 5px 0 0 var(--trz-accent-soft);
  color: var(--trz-ink);
}
body .flatpickr-calendar span.flatpickr-day.prevMonthDay,
body .flatpickr-calendar span.flatpickr-day.nextMonthDay,
body .flatpickr-calendar span.flatpickr-day.flatpickr-disabled,
body .flatpickr-calendar span.flatpickr-day.flatpickr-disabled:hover {
  color: var(--trz-ink-faint);
}
body .flatpickr-calendar span.flatpickr-day.flatpickr-disabled,
body .flatpickr-calendar span.flatpickr-day.flatpickr-disabled:hover {
  background: transparent;
  opacity: 0.5;
}
body .flatpickr-calendar .flatpickr-time {
  margin-top: 0.25rem;
  border-top: 1px solid var(--trz-line) !important;
}
body .flatpickr-calendar .flatpickr-time input,
body .flatpickr-calendar .flatpickr-time .flatpickr-am-pm,
body .flatpickr-calendar .flatpickr-time .flatpickr-time-separator {
  color: var(--trz-ink);
  background: transparent;
}
body .flatpickr-calendar .flatpickr-time input:hover,
body .flatpickr-calendar .flatpickr-time input:focus,
body .flatpickr-calendar .flatpickr-time .flatpickr-am-pm:hover,
body .flatpickr-calendar .flatpickr-time .flatpickr-am-pm:focus {
  background: var(--trz-surface-inset);
  border-radius: 10px;
}

/* --- Quill (editor de texto enriquecido) ---
   quill.snow.css se carga en cada vista DESPUÉS de este archivo: `body` delante para
   ganarle. El editor es un campo: barra arriba, separador tenue, sin el borde gris
   de Quill. Si la vista ya lo envuelve en una caja con `border`, Quill no pinta el
   suyo (evita el doble marco). */
body .ql-toolbar.ql-snow,
body .ql-container.ql-snow {
  border: 1px solid var(--trz-line-strong);
}
body .ql-toolbar.ql-snow {
  border-bottom: 1px solid var(--trz-line-soft);
  border-radius: var(--trz-radius-card) var(--trz-radius-card) 0 0;
  background: var(--trz-surface-inset);
  font-family: var(--font-text);
}
body .ql-container.ql-snow {
  border-top: 0;
  border-radius: 0 0 var(--trz-radius-card) var(--trz-radius-card);
  font-family: var(--font-text);
}
body .border > .ql-toolbar.ql-snow {
  border: 0;
  border-bottom: 1px solid var(--trz-line-soft);
  border-radius: 0;
}
body .border > .ql-container.ql-snow,
body .border > * > .ql-container.ql-snow,
body .border > .ql-container.ql-snow .ql-editor,
body .border > * > .ql-container.ql-snow .ql-editor {
  border: 0;
  border-radius: 0;
}
/* La caja de la vista recorta a la barra y al editor (si no, sus esquinas rectas
   asoman por fuera del borde redondeado) y usa el radio de tarjeta de los campos. */
body .border:has(> .ql-toolbar.ql-snow) {
  overflow: hidden;
  border-radius: var(--trz-radius-card);
}
body .ql-editor {
  color: var(--trz-ink);
  background: var(--trz-surface);
}
/* Editor de emails por bloques: Quill fija `.ql-container { height: 100% }` y,
   dentro de una caja sin altura propia, la caja medía solo el área de texto: la
   barra quedaba fuera y se recortaba al enfocar. Altura natural + mínimo. */
body .email-blocks-quill .ql-container.ql-snow {
  height: auto;
}
body .email-blocks-quill .ql-editor {
  min-height: 10rem;
}
body .ql-container.ql-snow .ql-editor {
  border-radius: 0 0 var(--trz-radius-card) var(--trz-radius-card);
}
body .ql-editor.ql-blank::before {
  color: var(--trz-ink-faint);
  font-style: normal;
}
body .ql-snow .ql-stroke {
  stroke: var(--trz-ink-muted);
}
body .ql-snow .ql-fill,
body .ql-snow .ql-stroke.ql-fill {
  fill: var(--trz-ink-muted);
}
body .ql-snow .ql-picker,
body .ql-snow .ql-picker-label {
  color: var(--trz-ink-muted);
}
body .ql-snow .ql-picker-label {
  border-color: transparent;
  border-radius: 8px;
}
body .ql-snow .ql-picker-options {
  padding: 0.25rem;
  border-radius: var(--trz-radius-card);
  background: var(--trz-surface-solid);
  border: 1px solid var(--trz-line) !important;
  box-shadow: 0 12px 32px -8px rgba(14, 22, 48, 0.22);
}
body .ql-snow .ql-picker.ql-expanded .ql-picker-label {
  border-color: var(--trz-line-strong);
}
body .ql-snow.ql-toolbar button,
body .ql-snow .ql-toolbar button {
  border-radius: 8px;
}
body .ql-snow.ql-toolbar button:hover,
body .ql-snow.ql-toolbar button.ql-active {
  background: var(--trz-surface);
}
body .ql-snow.ql-toolbar button:hover .ql-stroke,
body .ql-snow.ql-toolbar button.ql-active .ql-stroke,
body .ql-snow .ql-picker-label:hover .ql-stroke {
  stroke: var(--trz-accent);
}
body .ql-snow.ql-toolbar button:hover .ql-fill,
body .ql-snow.ql-toolbar button.ql-active .ql-fill {
  fill: var(--trz-accent);
}
body .ql-snow.ql-toolbar button:hover,
body .ql-snow.ql-toolbar button.ql-active,
body .ql-snow .ql-picker-label:hover,
body .ql-snow .ql-picker-label.ql-active,
body .ql-snow .ql-picker-item:hover,
body .ql-snow .ql-picker-item.ql-selected {
  color: var(--trz-accent);
}
body .ql-snow .ql-tooltip {
  border: 1px solid var(--trz-line);
  border-radius: var(--trz-radius-card);
  background: var(--trz-surface-solid);
  color: var(--trz-ink-soft);
  box-shadow: 0 12px 32px -8px rgba(14, 22, 48, 0.22);
}
body .ql-snow .ql-tooltip input[type="text"] {
  border: 1px solid var(--trz-line-strong);
  border-radius: var(--trz-radius-control);
  background: var(--trz-surface);
  color: var(--trz-ink);
}
body .ql-snow a {
  color: var(--trz-accent);
}

/* Incluye `translate`: esta regla va sin capa y pisa el `transition-transform` de la
   utilidad; sin él, el cajón del menú en móvil aparecía de golpe en vez de deslizarse.
   En Tailwind v4 `-translate-x-full` usa la propiedad `translate`, no `transform`. */
.sidebar-transition {
  transition:
    width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    translate 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.link-text,
.logo-text {
  transition: opacity 0.2s ease-in-out;
}

/* CSS PARA ANIMACIÓN SUAVE */
.accordion-content {
  transition:
    max-height 0.4s ease-in-out,
    opacity 0.4s ease-in-out;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}
.accordion-content--open {
  max-height: 500px;
  opacity: 1;
}

.sidebar-expanded .flyout-menu {
  display: none !important;
}
.sidebar-collapsed .logo-icon {
  display: block !important;
  max-width: 32px;
  margin: 0 auto;
}

.sidebar-collapsed .logo-text {
  display: none !important;
}

/* 🟢 Previene el crecimiento brusco durante la transición */
.sidebar-transition img {
  transition:
    transform 0.3s ease,
    opacity 0.2s ease;
}
[x-cloak] {
  display: none !important;
}

/* 🧭 Barra superior del panel (layouts/main.php, `.app-topbar`): h-16 (4rem).
   `--app-topbar-h` lo descuentan las vistas de alto completo
   (`calc(100vh - … - var(--app-topbar-h))`) y los toasts de arriba a la derecha. */
:root {
  --app-topbar-h: 0px;
}
:root:has(.app-topbar) {
  --app-topbar-h: 4rem;
}

/* La barra superior flota sobre <main> (absolute) y se detiene justo antes de la
   barra de scroll de <main> (`--main-scrollbar-w`, medido en main.php): no la tapa
   y el avatar queda alineado con el borde derecho del contenido. */
.app-topbar {
  right: var(--main-scrollbar-w, 0px);
  transition:
    background-color 0.2s ease,
    backdrop-filter 0.2s ease,
    -webkit-backdrop-filter 0.2s ease;
}

/* Velo solo con scroll: en reposo la barra es transparente (sin parche sobre el
   degradado); al bajar, el contenido que pasa por detrás se difumina. */
.app-topbar.is-scrolled {
  background-color: color-mix(in oklab, var(--trz-canvas) 30%, transparent);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

/* SweetAlert toasts arriba-derecha: debajo de la barra, no encima del avatar. */
.swal2-container.swal2-top-end,
.swal2-container.swal2-top-right {
  top: var(--app-topbar-h) !important;
}

/* Menú lateral: los últimos ítems se difuminan en vez de cortarse en seco mientras
   queda menú por debajo (el JS de main.php quita la clase al llegar al final).
   Es una máscara, no un color: vale para cualquier tema y plantilla. */
.sidebar-nav--fade {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 3.5rem), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 3.5rem), transparent);
}

/* 🟣 PRELOADER */
#global-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--trz-canvas, #eef1f6); /* fondo de la app (marco E) */
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    opacity 0.5s ease,
    visibility 0.5s ease;
}
#global-loader.hidden-loader {
  opacity: 0;
  visibility: hidden;
}
.loader-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--trz-track, #e5e7eb);
  border-top: 4px solid var(--trz-accent, #2563eb);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* ── 🎨 Caja del logo del sidebar ───────────────────────────────────────────
   Alto, alineación y fondo de la caja del logo se configuran en
   Admin → Apariencia y llegan como variables desde theme-generated.css
   (--sidebar-logo-height / --sidebar-brand-height / --sidebar-logo-justify,
   --color-logo-bg).

   Cada var() lleva fallback al valor histórico (3rem desde 2026-10-02, logo h-8 = 2rem,
   fondo = el antiguo --color-app-secondary, que un theme-generated.css anterior
   a la cápsula configurable todavía emite): así esas instalaciones se ven igual
   hasta su próximo guardado en Apariencia. */
.sidebar__brand {
  height: var(--sidebar-brand-height, 3rem);
  background-color: var(--color-logo-bg, var(--color-app-secondary, #162556));
  transition:
    height 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.2s ease;
}

.sidebar__brand-link {
  justify-content: var(--sidebar-logo-justify, flex-start);
}

/* Rail colapsado (w-20): la cápsula ocupa todo el ancho con el icono centrado y el
   botón de expandir baja debajo. Antes el botón vivía dentro de la cápsula y dejaba
   al enlace del logo con ~8px: el icono desaparecía. */
.sidebar-collapsed .sidebar__head {
  flex-direction: column;
  gap: 0.25rem;
}
.sidebar-collapsed .sidebar__brand {
  width: 100%;
  height: min(var(--sidebar-brand-height, 3rem), 3.5rem);
  padding-inline: 0;
  justify-content: center;
}
.sidebar-collapsed .sidebar__brand-link {
  flex: none;
  justify-content: center;
}

/* Ítems del menú en el rail: píldora de 44px centrada con el icono en medio. Sin
   esto la píldora ocupaba todo el ancho con el icono pegado a la izquierda (el
   padding del modo expandido) y el fondo del activo se veía descentrado. */
.sidebar-collapsed .trz-nav-item {
  width: 2.75rem;
  margin-inline: auto;
  justify-content: center;
}
.sidebar-collapsed .trz-nav-item > a {
  flex-grow: 0;
  justify-content: center;
  gap: 0;
  padding-inline: 0;
  width: 100%;
}

.sidebar__brand-logo {
  height: var(--sidebar-logo-height, 2rem);
  width: auto;
  max-width: 100%;
}

/* Rail colapsado: el icono no puede pasar del ancho del rail (w-20 menos el
   padding), así que se acota aunque el alto configurado sea mayor. La regla
   `.sidebar-collapsed .logo-icon` de más arriba lo afina a 32px. */
.sidebar__brand-icon {
  height: min(var(--sidebar-logo-height, 2rem), 2.5rem);
  width: auto;
  max-width: 2.5rem;
}

/* Cajón del menú en móvil (< lg): cápsula y logo más compactos que en escritorio.
   Se topan con min() para respetar un alto configurado menor en Apariencia. */
@media (width < 64rem) {
  .sidebar__head {
    margin-top: 0.75rem;
  }
  /* La cápsula abraza el logo en vez de estirarse; la X queda a la derecha. */
  .sidebar__brand {
    flex: 0 1 auto;
    height: min(var(--sidebar-brand-height, 3rem), 2.5rem);
    padding-inline: 0.75rem;
  }
  .sidebar__brand-link {
    flex: none;
  }
  .sidebar__brand-logo {
    height: min(var(--sidebar-logo-height, 2rem), 1.25rem);
  }
  #btnCloseMobile {
    margin-left: auto;
  }
}

/* Header móvil: comparte el alto configurado, con tope de 1.5rem para que la
   píldora del logo (py-1.5 → 36 px) mida lo mismo que los botones redondos de
   la derecha (h-9) y quede alineada con ellos. */
.brand-logo--mobile {
  height: min(var(--sidebar-logo-height, 2rem), 1.5rem);
  width: auto;
}


/* Slider del alto del logo (Admin → Apariencia): el "pulgar" toma el color de
   marca. Va aquí y no en una utilidad arbitraria de Tailwind para no depender
   de un `npm run build` cuando cambia la paleta. */
.range-brand {
  accent-color: var(--color-app-primary, #1c398e);
}