/* =====================================================================
   paskaymind-bootstrap-theme.css  --  Kit UI PaskayMind, re-tema de Bootstrap 5.3.3
   Migracion a Dinamica, fase F1. Guia: 04-guia-design-system-zolvia §6.1, §7.4.
   ---------------------------------------------------------------------
   ORDEN DE CARGA (K2, obligatorio): bootstrap.min.css primero, esta hoja
   despues. Se carga SIN @layer a proposito -- tiene que competir de igual a
   igual con Bootstrap, y estilo sin capa siempre gana a estilo en capa.

   POR QUE .zv-app Y NO :root: los tokens de PaskayMind cuelgan de .zv-app
   (zv-tokens.css). Un `:root { --bs-primary: var(--primary) }` resolveria
   var(--primary) contra :root, donde ese token NO existe, y Bootstrap se
   quedaria con el valor invalido (o sea, con el default azul). Todo el
   re-tema baja de .zv-app para que los tokens esten en alcance.

   POR QUE HAY SELECTORES COMPUESTOS `.zv-app .btn-primary`: Bootstrap 5.3
   no lee --bs-primary dentro del boton; cada variante fija SUS PROPIAS
   variables locales (`.btn-primary { --bs-btn-bg: var(--bs-primary) }`).
   Una custom property declarada sobre el propio elemento gana a la heredada,
   asi que re-tematizar el boton exige pisar esas variables locales con mas
   especificidad. Es la razon de que este archivo no sea una lista de :root.

   ASCII ONLY (K5): se sirve como ISO-8859-1. Sin tildes ni en comentarios.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Paleta y superficies globales
   --------------------------------------------------------------------- */
.zv-app {
  --bs-primary: #3A4199;
  --bs-primary-rgb: 58, 65, 153;
  --bs-secondary: #545874;
  --bs-secondary-rgb: 84, 88, 116;
  --bs-success: #23774A;
  --bs-success-rgb: 35, 119, 74;
  --bs-danger: #B1382B;
  --bs-danger-rgb: 177, 56, 43;
  --bs-warning: #A86B12;
  --bs-warning-rgb: 168, 107, 18;
  --bs-info: #545874;
  --bs-info-rgb: 84, 88, 116;
  --bs-light: #F3ECE1;
  --bs-light-rgb: 241, 233, 220;
  --bs-dark: #1B1D36;
  --bs-dark-rgb: 27, 29, 54;

  --bs-body-bg: var(--bg);
  --bs-body-bg-rgb: 250, 246, 240;
  --bs-body-color: var(--text);
  --bs-body-color-rgb: 27, 29, 54;
  --bs-body-font-family: var(--font);
  --bs-body-font-size: 15px;
  --bs-body-line-height: 1.55;

  --bs-emphasis-color: var(--primary-dark);
  --bs-secondary-color: var(--text-muted);
  --bs-secondary-bg: var(--surface-alt);
  --bs-tertiary-bg: var(--primary-soft);

  --bs-border-color: var(--border);
  --bs-border-color-translucent: var(--border);
  --bs-border-radius: var(--r-input);
  --bs-border-radius-sm: 8px;
  --bs-border-radius-lg: var(--r-card);
  --bs-border-radius-xl: var(--r-panel);

  --bs-link-color: var(--primary-dark);
  --bs-link-color-rgb: 70, 59, 110;
  --bs-link-hover-color: var(--primary);
  --bs-link-hover-color-rgb: 58, 65, 153;

  --bs-heading-color: var(--primary-dark);

  /* `code` se habia quedado con el #d63384 de Bootstrap: un magenta que NO
     existe en la paleta PaskayMind y que ademas mide 3.74:1 sobre --surface (AA
     pide 4.5). --accent-dark esta documentado en zv-tokens como "legible como
     texto" y mide 5.70:1 sobre --surface, 5.4:1 sobre --bg y 4.9:1 sobre
     --surface-alt: pasa en las tres superficies del kit. Se elige el coral y no
     --primary-dark para que un <code> no se confunda con un enlace, que ya usa
     ese token (--bs-link-color, arriba). */
  --bs-code-color: var(--accent-dark);

  --bs-box-shadow: var(--shadow-md);
  --bs-box-shadow-sm: var(--shadow-sm);
  --bs-box-shadow-lg: var(--shadow-lg);

  --bs-focus-ring-color: rgba(58, 65, 153, .25);
  --bs-focus-ring-width: 3px;
}

/* Titulares de marca: la unica pila que no es --font.
   SIN `color` a proposito (decision F12): esta regla esta SIN CAPA y es (0,1,1),
   asi que un `color` aca le ganaria a cualquier `.zv-*` de @layer zv-components
   aplicado sobre un <h1>..<h3> -- el mismo mecanismo que dejo los botones en
   2.13:1. El color de los titulares ya lo pone `--bs-heading-color`, que este
   mismo archivo mapea a var(--primary-dark) mas arriba y que Bootstrap aplica
   en su reboot: el resultado pintado es identico y el componente recupera el
   derecho a pisarlo. Re-teñir por variable, no por selector, es como funciona
   el resto de este tema. */
.zv-app h1,
.zv-app h2,
.zv-app h3,
.zv-app .h1,
.zv-app .h2,
.zv-app .h3 {
  font-family: var(--font-display);
  font-weight: 700;
}

/* ---------------------------------------------------------------------
   2. Botones -- variables locales por variante (ver cabecera)
   --------------------------------------------------------------------- */
.zv-app .btn {
  --bs-btn-border-radius: var(--r-input);
  --bs-btn-font-weight: 600;
  --bs-btn-font-size: 14.5px;
  --bs-btn-padding-y: .5rem;
  --bs-btn-padding-x: 1rem;
  --bs-btn-focus-box-shadow: var(--ring);
  transition: background-color var(--t), border-color var(--t), color var(--t), box-shadow var(--t);
}

.zv-app .btn-primary {
  --bs-btn-bg: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-color: var(--zv-on-primary);
  --bs-btn-hover-bg: var(--primary-dark);
  --bs-btn-hover-border-color: var(--primary-dark);
  --bs-btn-hover-color: var(--zv-on-primary);
  --bs-btn-active-bg: var(--primary-dark);
  --bs-btn-active-border-color: var(--primary-dark);
  --bs-btn-active-color: var(--zv-on-primary);
  --bs-btn-disabled-bg: var(--primary-line);
  --bs-btn-disabled-border-color: var(--primary-line);
  --bs-btn-disabled-color: var(--zv-on-primary);
}

/* GRABAR: el framework Dinamica emite .btn-info como boton de guardado en
   todos los editores. Sin este selector BS5 ignora --bs-info y lo pinta con
   su cyan de fabrica (#0dcaf0). Calca .btn-primary: en Psico el boton de
   guardar es la ciruela de marca, no un acento distinto.
   NO renombrar .btn-info ni .text-info: dinamica.js compara className con
   igualdad exacta (R5 del handoff). */
/* ---------------------------------------------------------------------
   MENU LATERAL -- el aspecto vive ACA, no en el <style> del template.
   Tres razones, las tres medidas:
   (1) CASCADA: zv-tokens.css declara `body.zv-app { background: var(--bg) }`
       FUERA de toda @layer a proposito (ver su linea 150), y lo no apilado le
       gana a `.zv-sidebar`, que si esta en una capa.
   (2) CACHE DEL FRAMEWORK: las plantillas se sirven desde una cache en
       memoria que NO siempre se relee de disco -- ni tocando el archivo ni
       cambiandole el tamanio. Se observo la misma URL devolviendo la version
       vieja y la nueva de forma alternada. Los .css, en cambio, los sirve el
       DefaultServlet con cachingAllowed=false y salen frescos siempre.
   (3) Por eso los selectores se anclan en .menuBody, que existe en LAS DOS
       versiones de la plantilla, y no solo en .zv-sidebar, que existe en la
       nueva. Asi el menu se ve igual sirva la que sirva. Con dos clases
       (0,2,0) le ganan al `.menuItem` suelto (0,1,0) que trae la vieja.
   --------------------------------------------------------------------- */
body.zv-app.menuBody,
body.zv-app.zv-sidebar {
  background: var(--zv-sidebar-bg);
  color: var(--zv-sidebar-text);
}

.menuBody .menuTitle,
.zv-sidebar .menuTitle {
  color: var(--zv-sidebar-text);
  background: transparent;
}

.menuBody .menuItem,
.menuBody .submenuTitle,
.zv-sidebar .menuItem,
.zv-sidebar .submenuTitle {
  color: var(--zv-sidebar-muted);
  background: transparent;
  border-left: 0;
}

.menuBody .menuTitle:hover,
.menuBody .menuItem:hover,
.menuBody .submenuTitle:hover,
.zv-sidebar .menuTitle:hover,
.zv-sidebar .menuItem:hover,
.zv-sidebar .submenuTitle:hover {
  background: rgba(255,255,255,.07);
  color: var(--zv-sidebar-text);
}

.menuBody .menuTitle.active,
.menuBody .menuItem.active,
.menuBody .submenuTitle.active,
.zv-sidebar .menuTitle.active,
.zv-sidebar .menuItem.active,
.zv-sidebar .submenuTitle.active {
  background: rgba(255,255,255,.12);
  color: var(--zv-sidebar-text);
  border-left-color: transparent;
}

/* Los contenedores colapsables de la version vieja traian fondo blanco. */
.menuBody .menuItems,
.zv-sidebar .menuItems { background: transparent; }

.zv-app .btn-info {
  --bs-btn-bg: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-color: var(--zv-on-primary);
  --bs-btn-hover-bg: var(--primary-dark);
  --bs-btn-hover-border-color: var(--primary-dark);
  --bs-btn-hover-color: var(--zv-on-primary);
  --bs-btn-active-bg: var(--primary-dark);
  --bs-btn-active-border-color: var(--primary-dark);
  --bs-btn-active-color: var(--zv-on-primary);
  --bs-btn-disabled-bg: var(--primary-line);
  --bs-btn-disabled-border-color: var(--primary-line);
  --bs-btn-disabled-color: var(--zv-on-primary);
}

.zv-app .btn-outline-secondary {
  --bs-btn-color: var(--primary-dark);
  --bs-btn-border-color: var(--primary-line);
  --bs-btn-bg: var(--surface);
  --bs-btn-hover-bg: var(--primary-soft);
  --bs-btn-hover-border-color: var(--primary);
  --bs-btn-hover-color: var(--primary-dark);
  --bs-btn-active-bg: var(--primary-soft);
  --bs-btn-active-border-color: var(--primary);
  --bs-btn-active-color: var(--primary-dark);
  --bs-btn-disabled-color: var(--text-muted);
  --bs-btn-disabled-border-color: var(--border);
}

/* Exito: fondo --success-strong, no --success. El derivado tonal es el que
   cumple AA con texto blanco encima; --success a secas no llega. */
.zv-app .btn-success {
  --bs-btn-bg: var(--success-strong);
  --bs-btn-border-color: var(--success-strong);
  --bs-btn-color: var(--zv-on-primary);
  /* SANEADO: el origen hardcodeaba #1B5C39 en .btn.accent:hover (styles.css:175). */
  --bs-btn-hover-bg: var(--success-on-soft);
  --bs-btn-hover-border-color: var(--success-on-soft);
  --bs-btn-hover-color: var(--zv-on-primary);
  --bs-btn-active-bg: var(--success-on-soft);
  --bs-btn-active-border-color: var(--success-on-soft);
  --bs-btn-active-color: var(--zv-on-primary);
}

.zv-app .btn-danger {
  --bs-btn-bg: var(--danger);
  --bs-btn-border-color: var(--danger);
  --bs-btn-color: var(--zv-on-primary);
  /* SANEADO: el origen hardcodeaba #932E23 en .btn.danger:hover (styles.css:317). */
  --bs-btn-hover-bg: var(--zv-danger-dark);
  --bs-btn-hover-border-color: var(--zv-danger-dark);
  --bs-btn-hover-color: var(--zv-on-primary);
  --bs-btn-active-bg: var(--zv-danger-dark);
  --bs-btn-active-border-color: var(--zv-danger-dark);
  --bs-btn-active-color: var(--zv-on-primary);
}

/* Coral de marca. REGLA MANUAL DEL MANUAL DE MARCA, ahora en el kit:
   NUNCA texto blanco sobre --accent -- no llega a 4.5:1. El texto va con
   --accent-dark sobre --accent-soft, o tinta sobre el coral. */
.zv-app .btn-accent {
  --bs-btn-bg: var(--accent-soft);
  --bs-btn-border-color: var(--accent);
  --bs-btn-color: var(--accent-dark);
  --bs-btn-hover-bg: var(--accent);
  --bs-btn-hover-border-color: var(--accent-dark);
  --bs-btn-hover-color: var(--text);
  --bs-btn-active-bg: var(--accent);
  --bs-btn-active-border-color: var(--accent-dark);
  --bs-btn-active-color: var(--text);
}

.zv-app .btn-sm { --bs-btn-font-size: 13px; --bs-btn-padding-y: .3rem; --bs-btn-padding-x: .65rem; }
.zv-app .btn-lg { --bs-btn-font-size: 16px; --bs-btn-padding-y: .65rem; --bs-btn-padding-x: 1.35rem; }

/* ---------------------------------------------------------------------
   3. Formularios
   --------------------------------------------------------------------- */
.zv-app .form-control,
.zv-app .form-select {
  background-color: var(--surface);
  /* --zv-control-line y no --border: el contorno es lo unico que identifica
     al campo, y el hairline de marca da 1.30:1 (WCAG 1.4.11 pide 3:1). */
  border-color: var(--zv-control-line);
  border-radius: var(--r-input);
  color: var(--text);
  font-size: 15px;
  transition: border-color var(--t), box-shadow var(--t);
}
.zv-app .form-control:focus,
.zv-app .form-select:focus {
  border-color: var(--primary);
  box-shadow: var(--ring);
}
.zv-app .form-control::placeholder { color: var(--text-muted); opacity: 1; }
.zv-app .form-label {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: var(--sp-1);
}
.zv-app .form-text { color: var(--text-muted); font-size: 12.5px; }
.zv-app .form-check-input:checked {
  background-color: var(--primary);
  border-color: var(--primary);
}
.zv-app .form-check-input { border-color: var(--zv-control-line); }
.zv-app .form-check-input:focus { box-shadow: var(--ring); border-color: var(--primary); }
.zv-app .input-group-text {
  background-color: var(--primary-soft);
  border-color: var(--zv-control-line);
  color: var(--primary-on-soft);
}

/* ---------------------------------------------------------------------
   4. Tablas -- table.table.table-hover.table-striped (guia §6.1)
   El `tbody tr:hover` propio del origen (styles.css:247) NO se hereda:
   Bootstrap ya lo resuelve con .table-hover re-tematizado (SANEADO).
   --------------------------------------------------------------------- */
.zv-app .table {
  --bs-table-color: var(--text);
  --bs-table-bg: var(--surface);
  --bs-table-border-color: var(--border);
  --bs-table-striped-bg: #F9F9FD;
  --bs-table-striped-color: var(--text);
  --bs-table-hover-bg: var(--primary-soft);
  --bs-table-hover-color: var(--primary-on-soft);
  margin-bottom: 0;
}
.zv-app .table > thead {
  --bs-table-bg: var(--surface-alt);
  --bs-table-color: var(--primary-dark);
}
.zv-app .table > thead th {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .01em;
  text-transform: none;
  border-bottom-width: 1px;
  white-space: nowrap;
}
.zv-app .table > tbody td { font-size: 14px; vertical-align: middle; }

/* ---------------------------------------------------------------------
   5. Cards, badges, alertas, paginacion, modales, dropdowns, navs
   --------------------------------------------------------------------- */
.zv-app .card {
  --bs-card-bg: var(--surface);
  --bs-card-border-color: var(--border);
  --bs-card-border-radius: var(--r-card);
  --bs-card-cap-bg: var(--surface-alt);
  --bs-card-color: var(--text);
  box-shadow: var(--shadow-sm);
}

.zv-app .badge { --bs-badge-border-radius: var(--r-full); font-weight: 600; }
.zv-app .text-bg-primary { background-color: var(--primary-soft) !important; color: var(--primary-on-soft) !important; }
.zv-app .text-bg-success { background-color: var(--success-soft) !important; color: var(--success-on-soft) !important; }
.zv-app .text-bg-danger  { background-color: var(--danger-soft)  !important; color: var(--danger-on-soft)  !important; }
.zv-app .text-bg-warning { background-color: #F6EAD4             !important; color: var(--warning-on-soft) !important; }
.zv-app .text-bg-info    { background-color: var(--info-soft)    !important; color: var(--primary-on-soft) !important; }
/* Los !important de arriba son la UNICA excepcion del kit y estan acotados a
   las utilidades .text-bg-*, que Bootstrap define ella misma con !important:
   sin el, la declaracion propia de Bootstrap gana y el badge queda azul. No
   es un atajo de especificidad, es la unica forma de empatar la regla. */

.zv-app .alert-danger  { --bs-alert-bg: var(--danger-soft);  --bs-alert-border-color: var(--danger);  --bs-alert-color: var(--danger-on-soft); }
.zv-app .alert-success { --bs-alert-bg: var(--success-soft); --bs-alert-border-color: var(--success); --bs-alert-color: var(--success-on-soft); }
.zv-app .alert-warning { --bs-alert-bg: #F6EAD4;             --bs-alert-border-color: var(--warning); --bs-alert-color: var(--warning-on-soft); }
.zv-app .alert-info    { --bs-alert-bg: var(--info-soft);    --bs-alert-border-color: var(--primary-line); --bs-alert-color: var(--primary-on-soft); }
.zv-app .alert { --bs-alert-border-radius: var(--r-card); border-width: 1px; }

.zv-app .pagination {
  --bs-pagination-color: var(--primary-dark);
  --bs-pagination-bg: var(--surface);
  --bs-pagination-border-color: var(--border);
  --bs-pagination-hover-bg: var(--primary-soft);
  --bs-pagination-hover-color: var(--primary-on-soft);
  --bs-pagination-hover-border-color: var(--primary-line);
  --bs-pagination-active-bg: var(--primary);
  --bs-pagination-active-border-color: var(--primary);
  --bs-pagination-active-color: var(--zv-on-primary);
  --bs-pagination-disabled-color: var(--text-muted);
  --bs-pagination-disabled-bg: var(--surface-alt);
  --bs-pagination-focus-box-shadow: var(--ring);
  --bs-pagination-border-radius: var(--r-input);
}

.zv-app .modal-content {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-modal);
  box-shadow: var(--shadow-lg);
}
.zv-app .modal-header { background: var(--surface-alt); border-bottom-color: var(--border); }
.zv-app .modal-title { font-family: var(--font-display); color: var(--primary-dark); }
.zv-app .modal-footer { border-top-color: var(--border); }

.zv-app .dropdown-menu {
  --bs-dropdown-bg: var(--surface);
  --bs-dropdown-border-color: var(--border);
  --bs-dropdown-border-radius: var(--r-card);
  --bs-dropdown-link-color: var(--text);
  --bs-dropdown-link-hover-bg: var(--primary-soft);
  --bs-dropdown-link-hover-color: var(--primary-on-soft);
  --bs-dropdown-link-active-bg: var(--primary);
  --bs-dropdown-link-active-color: var(--zv-on-primary);
  box-shadow: var(--shadow-md);
}

.zv-app .nav-link { color: var(--text-muted); font-weight: 500; }
.zv-app .nav-link:hover { color: var(--primary-dark); }
.zv-app .nav-link.active { color: var(--primary-dark); font-weight: 600; }
.zv-app .nav-tabs {
  --bs-nav-tabs-border-color: var(--border);
  --bs-nav-tabs-link-active-bg: var(--surface);
  --bs-nav-tabs-link-active-color: var(--primary-dark);
  --bs-nav-tabs-link-active-border-color: var(--border) var(--border) var(--surface);
}

.zv-app .spinner-border { --bs-spinner-border-width: .18em; color: var(--primary); }
.zv-app .progress { --bs-progress-bg: var(--primary-soft); --bs-progress-bar-bg: var(--primary); border-radius: var(--r-full); }

/* ---------------------------------------------------------------------
   FULLCALENDAR -- va en ESTA hoja, no en zv-components.css, porque
   FullCalendar inyecta su propio CSS en runtime como un <style> SIN @layer,
   y en la cascada lo no apilado le gana a cualquier capa. Metido en
   @layer zv-components perdian justo las reglas que compiten con las suyas
   (el boton seguia saliendo azul pizarra y el titulo a 26px), mientras que
   las que no competian -- la textura, el visto -- si aplicaban: un verde
   a medias facil de dar por bueno. Los selectores anteponen .zv-app para
   ganar por especificidad y no por orden de aparicion.
   --------------------------------------------------------------------- */
/* ===================================================================
   N. FULLCALENDAR  (tanda T4 -- portado de public/styles.css:501-540
   y 724-733 de Psico)
   PaskayMind no tenia FullCalendar: pintaba la reticula propia .zv-cal. El
   vendor vive en js/fullcalendar.min.js, transcodificado a ASCII con
   escapes uXXXX porque Tomcat sirve los .js sin charset dentro de
   documentos ISO-8859-1 (R4). Verificado en el navegador: el guion largo
   del titulo y los acentos del locale es vuelven correctos.
   El visto de "realizada" va escapado por la misma razon.
   =================================================================== */
.zv-app .fc {
  --fc-border-color: var(--border);
  --fc-today-bg-color: var(--primary-soft);
  --fc-now-indicator-color: var(--danger);
  --fc-page-bg-color: var(--surface);
  font-size: 13px;
}
.zv-app .fc .fc-toolbar-title {
  font-size: 17px; font-weight: 700; letter-spacing: -.01em;
  font-family: var(--font-display);
}
.zv-app .fc .fc-button {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--primary-dark);
  font-weight: 600; box-shadow: none;
  text-transform: capitalize; padding: 6px 12px;
  transition: background var(--t), border-color var(--t);
}
.zv-app .fc .fc-button:hover {
  background: var(--primary-soft); border-color: var(--primary-line);
  color: var(--primary-on-soft);
}
.zv-app .fc .fc-button-primary:not(:disabled).fc-button-active,
.zv-app .fc .fc-button-primary:not(:disabled):active {
  background: var(--primary); border-color: var(--primary);
  color: var(--zv-on-primary);
}
.zv-app .fc .fc-button:focus,
.zv-app .fc .fc-button-primary:focus { box-shadow: var(--ring); }
.zv-app .fc .fc-col-header-cell-cushion {
  color: var(--text-muted); font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: .05em; padding: 8px 4px;
}
.zv-app .fc .fc-timegrid-slot-label-cushion,
.zv-app .fc .fc-daygrid-day-number { color: var(--text-muted); }
.zv-app .fc .fc-event {
  border-radius: 7px; border: 0; padding: 1px 2px;
  font-weight: 600; box-shadow: var(--shadow-xs);
}
.zv-app .fc .fc-event .fc-event-main { padding: 1px 4px; color: var(--zv-on-primary); }

/* COLOR = TIPO, ESTADO = TEXTURA. El fondo lo pone el tipo de sesion
   desde JS; el estado se lee por textura y no por tono, asi funciona
   sobre cualquiera de los colores de tipo y no depende del color para
   transmitir informacion. */
.zv-app .fc .fc-event.cita-realizada {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,.28) 0, rgba(255,255,255,.28) 2px,
    transparent 2px, transparent 7px);
  outline: 1.5px dashed rgba(255,255,255,.85);
  outline-offset: -3px;
}
.zv-app .fc .fc-event.cita-realizada .fc-event-main { position: relative; }
.zv-app .fc .fc-event.cita-realizada .fc-event-main::after {
  content: "\2713";
  position: absolute; top: 1px; right: 3px;
  font-size: 11px; font-weight: 800; line-height: 1;
  color: var(--zv-on-primary); text-shadow: 0 1px 1px rgba(0,0,0,.35);
  pointer-events: none;
}

/* HOLD de pago (cita en estado 'E'): rayado en direccion opuesta al de
   "realizada", para que las dos texturas no se confundan. */
.zv-app .fc .fc-event.cita-hold {
  opacity: .6;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255,255,255,.35) 0, rgba(255,255,255,.35) 2px,
    transparent 2px, transparent 7px);
  outline: 1.5px dashed rgba(255,255,255,.85);
  outline-offset: -3px;
}

/* BLOQUEO (psi_m_blo) sobre la reticula: evento de FONDO, no un evento normal.
   Va aca y no en zv-components.css a proposito: ese archivo entero esta dentro
   de @layer zv-components y FullCalendar inyecta su css en runtime SIN capa,
   asi que gana la libreria por mas especificidad que uno ponga. Medido el
   2026-08-01: con la regla en la capa, el bloqueo salia verde (#8fdf82, el
   default --fc-bg-event-color) en vez de rojo suave.
   Se pisa la VARIABLE de la libreria y no el background, para no pelearle a su
   propia regla de opacity. */
.zv-app .fc .fc-bg-event.zv-blo {
  --fc-bg-event-color: var(--danger-soft);
  --fc-bg-event-opacity: .85;
}
.zv-app .fc .fc-bg-event.zv-blo .fc-event-title {
  color: var(--danger-on-soft);
  font-size: 11px; font-weight: 700; font-style: normal;
  padding: 2px 4px;
}

@media (max-width: 768px) {
  .zv-app .fc .fc-toolbar.fc-header-toolbar {
    flex-direction: column; align-items: stretch; gap: 8px; margin-bottom: 12px;
  }
  .zv-app .fc .fc-toolbar-chunk {
    display: flex; justify-content: center; flex-wrap: wrap; gap: 6px;
  }
  .zv-app .fc .fc-toolbar-title { font-size: 15px; text-align: center; }
  .zv-app .fc .fc-button { padding: 9px 14px; min-height: 40px; font-size: 14px; }
  .zv-app .fc .fc-col-header-cell-cushion {
    font-size: 9px; letter-spacing: 0; text-transform: none; padding: 6px 1px;
  }
  .zv-app .fc .fc-timegrid-slot-label-cushion,
  .zv-app .fc .fc-timegrid-axis-cushion { font-size: 10px; }
  .zv-app .fc .fc-event .fc-event-main { padding: 1px 2px; }
  /* El .zv-content vuelve las tablas display:block para que scrollen; la
     reticula de FullCalendar necesita seguir siendo tabla. */
  .zv-app .fc table { display: table; white-space: normal; overflow: visible; }
}

/* ---------------------------------------------------------------------
   MOVIL: 16px en los campos para que iOS Safari no haga zoom al enfocar.
   La regla equivalente existia en zv-components.css, dentro de
   @layer zv-components, y NUNCA se aplicaba: `body.zv-app input` de
   zv-tokens.css va sin capa (su linea 150 explica por que) y lo no apilado
   le gana a cualquier @layer. Medido: los campos se quedaban en 15px a
   375px. Aca, sin capa y con mas especificidad, si manda.
   --------------------------------------------------------------------- */
@media (max-width: 860px) {
  .zv-app .zv-field input,
  .zv-app .zv-field select,
  .zv-app .zv-field textarea,
  .zv-app .zv-field-row input,
  .zv-app .zv-field-row select,
  .zv-app .zv-field-row textarea,
  .zv-app .form-control,
  .zv-app .form-select { font-size: 16px; }
}

/* EDITOR DE CITAS: la semana para elegir el horario (rediseno 2026-09-25).
   Vive aca y no en zv-components.css por la misma razon que .zv-blo:
   FullCalendar inyecta su css sin capa y le gana a todo lo que este en
   @layer. Hueco libre = verde punteado y clicable; hueco ocupado = trama de
   fondo; sesion agendada = color de su tipo; tu sesion = blanca con borde
   ciruela y halo, para destacar sobre cualquier color de tipo (roja si se
   cruza con otra). */
.zv-app .zv-cal-editor { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 12px 0; }
.zv-app .zv-cal-editor #zv-grilla { min-width: 620px; }
.zv-app .fc .fc-event.zv-ev-libre {
  background: var(--success-soft); border: 1px dashed var(--success); box-shadow: none;
}
.zv-app .fc .fc-event.zv-ev-libre .fc-event-main { padding: 0; }
.zv-app .fc .zv-hueco {
  display: block; width: 100%; height: 100%; min-height: 16px; padding: 1px 4px;
  background: transparent; border: 0; border-radius: 6px; cursor: pointer;
  color: var(--success-on-soft); font: inherit; font-size: 11px; font-weight: 700;
  line-height: 1.2; text-align: left;
}
.zv-app .fc .zv-hueco:hover { background: rgba(35,119,74,.16); }
.zv-app .fc .zv-hueco:focus-visible { outline: 2px solid var(--success); outline-offset: -2px; }
.zv-app .fc .fc-bg-event.zv-ev-ocu {
  --fc-bg-event-color: var(--surface-alt);
  --fc-bg-event-opacity: .9;
  background-image: repeating-linear-gradient(45deg,
    transparent, transparent 4px, rgba(84,88,116,.14) 4px, rgba(84,88,116,.14) 8px);
}
.zv-app .fc .fc-event.zv-ev-cita { opacity: .92; cursor: default; }
.zv-app .fc .fc-event.zv-ev-sel {
  background: #fff; border: 2px solid var(--primary);
  box-shadow: 0 0 0 3px var(--primary-line);
}
.zv-app .fc .fc-event.zv-ev-sel .fc-event-main { color: var(--primary-dark); font-weight: 700; }
.zv-app .fc .fc-event.zv-ev-sel--choque {
  background: var(--danger-soft); border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft);
}
.zv-app .fc .fc-event.zv-ev-sel--choque .fc-event-main { color: var(--danger-on-soft); }
.zv-app .zv-leyenda-swatch.zv-sw-libre { background: var(--success-soft); border: 1px dashed var(--success); }
.zv-app .zv-leyenda-swatch.zv-sw-sel   { background: #fff; border: 2px solid var(--primary); }
.zv-app .zv-leyenda-swatch.zv-sw-cita  { background: #7A5C99; border-color: #7A5C99; }
.zv-app .zv-leyenda-swatch.zv-sw-ocu {
  background: var(--surface-alt);
  background-image: repeating-linear-gradient(45deg,
    transparent, transparent 2px, rgba(84,88,116,.30) 2px, rgba(84,88,116,.30) 4px);
}
.zv-app .zv-leyenda-swatch.zv-sw-blo   { background: var(--danger-soft); border-color: var(--danger); }
.zv-app .zv-cuando-campos {
  display: grid; gap: 12px; align-items: end;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr);
}
.zv-app .zv-cuando-campos .zv-chips { margin-bottom: 0; align-items: center; }
@media (max-width: 700px) {
  .zv-app .zv-cuando-campos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .zv-app .zv-cuando-dur { grid-column: 1 / -1; }
}