/* =============================================================================
   Componentes de UI del dashboard que no se pueden expresar solo con utilidades
   de Tailwind: necesitan estado (abierto/activo) alternado desde JavaScript,
   posicionamiento calculado o animaciones propias.

   1. Ayuda contextual  -> componente cotton <c-ayuda> + setupAyuda() en project.js
   2. Pestañas          -> componentes <c-tabs>/<c-tab>/<c-tab-panel> + setupTabs()
   3. Historial         -> <c-historial> + modal único + setupHistorial()
   4. Correcciones de base (el cursor de los botones en Tailwind 4)

   Los colores salen de los tokens `@theme` de Tailwind 4 (project/theme/…/styles.css),
   así que la marca se sigue cambiando en un único sitio.
   ============================================================================= */

/* == 1. Ayuda contextual =====================================================
   Un icono "?" junto a aquello que explica; al pulsarlo abre una burbuja
   flotante. La burbuja va en `position: fixed` y la coloca el JS: si fuese
   absoluta la recortarían los `overflow-hidden` de las tarjetas de sección.
   ========================================================================== */

.ayuda {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  line-height: 0;
}

.ayuda-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: var(--color-oluxblue-500, #556aeb);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.ayuda-trigger:hover { color: var(--color-oluxblue-700, #1d2f99); }

.ayuda-trigger:focus-visible {
  outline: 2px solid var(--color-oluxblue-400, #6e82fe);
  outline-offset: 2px;
}

.ayuda-trigger[aria-expanded="true"] { color: var(--color-oluxblue-700, #1d2f99); }

.ayuda-icono {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
}

.ayuda-etiqueta {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
}

/* Variante para la barra de navegación (fondo azul, icono blanco y área de
   pulsación mayor, como el resto de botones del navbar). */
.ayuda-trigger--nav {
  width: 2rem;
  height: 2rem;
  justify-content: center;
  color: var(--color-oluxblue-100, #ebefff);
}
.ayuda-trigger--nav:hover,
.ayuda-trigger--nav[aria-expanded="true"] {
  color: #fff;
  background: rgb(255 255 255 / 0.1);
}
.ayuda-trigger--nav .ayuda-icono { width: 1.25rem; height: 1.25rem; }
.ayuda-trigger--nav:focus-visible { outline-color: #fff; }

/* Destello con el que el "?" del navbar señala dónde hay ayuda en la página. */
.ayuda-trigger.is-signaled {
  animation: ayuda-signal 1.1s ease-out 3;
  color: var(--color-oluxorange-500, #ff9500);
}

@keyframes ayuda-signal {
  0%   { box-shadow: 0 0 0 0 rgb(255 149 0 / 0.55); transform: scale(1); }
  45%  { box-shadow: 0 0 0 0.5rem rgb(255 149 0 / 0); transform: scale(1.25); }
  100% { box-shadow: 0 0 0 0 rgb(255 149 0 / 0); transform: scale(1); }
}

/* --- La burbuja --- */
.ayuda-pop {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  width: min(22rem, calc(100vw - 1.5rem));
  max-height: min(70vh, 32rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  border: 1px solid var(--color-oluxblue-100, #ebefff);
  border-radius: 1rem;
  box-shadow: 0 18px 40px rgb(2 10 51 / 0.18), 0 2px 6px rgb(2 10 51 / 0.08);
  text-align: left;
  line-height: 1.5;
}

.ayuda[data-open="true"] .ayuda-pop {
  display: block;
  animation: ayuda-in 0.14s ease-out;
}

@keyframes ayuda-in {
  from { opacity: 0; transform: translateY(-0.25rem); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Flecha: cuadrado girado que el JS alinea con el "?" vía --ayuda-flecha-x. */
.ayuda-flecha {
  position: absolute;
  left: var(--ayuda-flecha-x, 50%);
  width: 0.75rem;
  height: 0.75rem;
  margin-left: -0.375rem;
  background: #fff;
  border: 1px solid var(--color-oluxblue-100, #ebefff);
  transform: rotate(45deg);
}
.ayuda-pop[data-placement="bottom"] .ayuda-flecha {
  top: -0.4rem;
  border-right: 0;
  border-bottom: 0;
}
.ayuda-pop[data-placement="top"] .ayuda-flecha {
  bottom: -0.4rem;
  border-left: 0;
  border-top: 0;
}

.ayuda-cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.875rem 1rem 0.5rem;
}

.ayuda-titulo {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-oluxblue-700, #1d2f99);
}

.ayuda-cerrar {
  flex: none;
  display: inline-flex;
  padding: 0.25rem;
  margin: -0.25rem -0.25rem 0 0;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.ayuda-cerrar:hover { color: #374151; background: #f3f4f6; }
.ayuda-cerrar svg { width: 1rem; height: 1rem; }

.ayuda-cuerpo {
  padding: 0 1rem 1rem;
  font-size: 0.8125rem;
  color: #4b5563;
}

/* El contenido lo escribe cada página como HTML suelto (<p>, <ul>, <strong>):
   se le da tipografía aquí para no repetir clases en cada uso. */
.ayuda-cuerpo > * + * { margin-top: 0.5rem; }
.ayuda-cuerpo strong { color: #111827; font-weight: 600; }
.ayuda-cuerpo ul { list-style: disc; padding-left: 1.125rem; }
.ayuda-cuerpo ol { list-style: decimal; padding-left: 1.25rem; }
.ayuda-cuerpo li + li { margin-top: 0.25rem; }
.ayuda-cuerpo a { color: var(--color-oluxblue-600, #354acb); text-decoration: underline; }
.ayuda-cuerpo code {
  padding: 0.05rem 0.3rem;
  border-radius: 0.25rem;
  background: var(--color-oluxblue-50, #f5f7ff);
  font-size: 0.75rem;
}

/* Muestra del icono dentro del texto de una ayuda (lo usa el "?" del navbar
   al explicar cómo se reconocen las ayudas). */
.ayuda-muestra {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  vertical-align: -0.25rem;
  border-radius: 9999px;
  background: var(--color-oluxblue-50, #f5f7ff);
  color: var(--color-oluxblue-500, #556aeb);
}
.ayuda-muestra svg { width: 0.875rem; height: 0.875rem; }

/* Fila de enlaces al pie de una burbuja: "y desde aquí puedes ir a…". Se usa
   como <p class="ayuda-enlaces"><a href="…">Pacientes</a>…</p> — píldoras
   compactas para que la ayuda pueda llevar a la pantalla que menciona sin
   convertirse en un párrafo de enlaces sueltos. */
.ayuda-enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid #f3f4f6;
}
.ayuda-enlaces a {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--color-oluxblue-100, #ebefff);
  border-radius: 9999px;
  background: var(--color-oluxblue-50, #f5f7ff);
  color: var(--color-oluxblue-700, #1d2f99);
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.ayuda-enlaces a::after { content: "→"; font-weight: 400; }
.ayuda-enlaces a:hover {
  background: var(--color-oluxblue-100, #ebefff);
  border-color: var(--color-oluxblue-200, #b9c4ff);
  text-decoration: none;
}

/* == 2. Pestañas =============================================================
   Compartimentan una página larga sin recargarla. El estado activo vive en la
   clase `is-active`, que pone y quita setupTabs().
   ========================================================================== */

/* Fila de la cabecera: el tablist ocupa el ancho y la ayuda queda a su derecha,
   FUERA del role="tablist" (dentro rompería el patrón ARIA de pestañas). */
.tabs-cabecera {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tabs-cabecera > .tabs-nav { flex: 1 1 auto; min-width: 0; }

.tabs-ayuda { flex: none; display: inline-flex; }

.tabs-nav {
  display: flex;
  gap: 0.375rem;
  padding: 0.375rem;
  border-radius: 1rem;
  background: #f9fafb;
  border: 1px solid #f3f4f6;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs-nav::-webkit-scrollbar { display: none; }

.tab-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex: 1 1 auto;
  white-space: nowrap;
  padding: 0.625rem 1rem;
  border: 0;
  border-radius: 0.75rem;
  background: transparent;
  color: #4b5563;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.tab-trigger:hover { color: var(--color-oluxblue-700, #1d2f99); }
.tab-trigger:focus-visible {
  outline: 2px solid var(--color-oluxblue-400, #6e82fe);
  outline-offset: -2px;
}
.tab-trigger svg { width: 1.125rem; height: 1.125rem; flex: none; }

.tab-trigger.is-active {
  background: #fff;
  color: var(--color-oluxblue-700, #1d2f99);
  box-shadow: 0 1px 3px rgb(2 10 51 / 0.12);
}

/* Contador opcional a la derecha del rótulo (p. ej. análisis pendientes). */
.tab-contador {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.375rem;
  border-radius: 9999px;
  background: var(--color-oluxorange-500, #ff9500);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
}

.tab-panel { display: none; }
.tab-panel.is-active { display: block; animation: tab-in 0.18s ease-out; }

@keyframes tab-in {
  from { opacity: 0; transform: translateY(0.25rem); }
  to   { opacity: 1; transform: translateY(0); }
}

/* En pantallas pequeñas las pestañas se hacen scrollables y compactas. */
@media (max-width: 640px) {
  .tab-trigger { flex: 0 0 auto; padding: 0.5rem 0.75rem; font-size: 0.8125rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ayuda[data-open="true"] .ayuda-pop,
  .tab-panel.is-active,
  .ayuda-trigger.is-signaled { animation: none; }
}

/* == 3. Historial de cambios =================================================
   El botón discreto que abre la ventana, y la ventana misma. Va aquí y no en
   Tailwind porque el estado abierto/cerrado lo alterna setupHistorial() con la
   clase `is-open`, y Tailwind 4 no genera clases que solo existen en el JS.
   ========================================================================== */

/* -- Disparador ------------------------------------------------------------ */
.historial-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--color-gray-200, #e5e7eb);
  border-radius: 9999px;
  background: #fff;
  color: var(--color-gray-500, #6b7280);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.25rem;
  transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}

.historial-trigger:hover {
  border-color: var(--color-oluxblue-300, #93a4f0);
  color: var(--color-oluxblue-700, #1d2f99);
  background: var(--color-oluxblue-50, #eef1fe);
}

.historial-trigger:focus-visible {
  outline: 2px solid var(--color-oluxblue-400, #6d83e8);
  outline-offset: 2px;
}

.historial-trigger__icono { width: 0.875rem; height: 0.875rem; flex: none; }

/* -- Ventana --------------------------------------------------------------- */
.modal-historial {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.modal-historial.is-open { display: flex; }

.modal-historial__fondo {
  position: absolute;
  inset: 0;
  background: rgb(2 10 51 / 0.45);
}

.modal-historial__caja {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(42rem, 100%);
  max-height: min(80vh, 44rem);
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 20px 50px rgb(2 10 51 / 0.25);
  overflow: hidden;
  animation: historial-in 0.18s ease-out;
}

@keyframes historial-in {
  from { opacity: 0; transform: translateY(0.5rem); }
  to   { opacity: 1; transform: translateY(0); }
}

.modal-historial__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--color-gray-100, #f3f4f6);
}

.modal-historial__titulo {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-gray-900, #111827);
}

.modal-historial__cerrar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex: none;
  border-radius: 9999px;
  color: var(--color-gray-400, #9ca3af);
  background: transparent;
  border: 0;
}

.modal-historial__cerrar:hover {
  background: var(--color-gray-100, #f3f4f6);
  color: var(--color-gray-700, #374151);
}

.modal-historial__cerrar svg { width: 1.125rem; height: 1.125rem; }

.modal-historial__cuerpo {
  padding: 1.25rem;
  overflow-y: auto;
}

/* -- Contenido ------------------------------------------------------------- */
.historial-descripcion {
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  color: var(--color-gray-500, #6b7280);
}

.historial-filtro {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.historial-filtro label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-gray-500, #6b7280);
}

.historial-filtro select {
  flex: 1;
  min-width: 0;
  padding: 0.375rem 0.625rem;
  border: 1px solid var(--color-gray-300, #d1d5db);
  border-radius: 0.625rem;
  background: #fff;
  font-size: 0.8125rem;
  color: var(--color-gray-700, #374151);
}

.historial-linea {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.historial-edicion {
  border: 1px solid var(--color-gray-200, #e5e7eb);
  border-radius: 0.875rem;
  padding: 0.875rem 1rem;
}

.historial-edicion[hidden] { display: none; }

.historial-edicion__cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.625rem;
}

.historial-edicion__fecha {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-gray-900, #111827);
}

.historial-edicion__autor {
  margin: 0;
  font-size: 0.75rem;
  color: var(--color-gray-500, #6b7280);
}

.historial-edicion__etiquetas {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.375rem;
}

.historial-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  background: var(--color-gray-100, #f3f4f6);
  color: var(--color-gray-600, #4b5563);
  font-size: 0.6875rem;
  font-weight: 600;
  white-space: nowrap;
}

.historial-chip--analisis {
  background: var(--color-oluxblue-50, #eef1fe);
  color: var(--color-oluxblue-700, #1d2f99);
}

.historial-chip--alta {
  background: var(--color-oluxorange-100, #ffe8c2);
  color: var(--color-oluxorange-600, #cc7700);
}

.historial-cambios {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.historial-cambio {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  font-size: 0.8125rem;
}

.historial-cambio__campo {
  min-width: 9rem;
  color: var(--color-gray-500, #6b7280);
}

.historial-cambio__valores {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  min-width: 0;
}

.historial-valor {
  padding: 0.0625rem 0.4375rem;
  border-radius: 0.375rem;
  word-break: break-word;
}

.historial-valor em { color: var(--color-gray-400, #9ca3af); font-style: normal; }

/* Rojo y verde suaves: se lee de un vistazo qué se fue y qué entró, sin que la
   ventana parezca un diff de código. */
.historial-valor--antes {
  background: #fef2f2;
  color: #9f1239;
  text-decoration: line-through;
  text-decoration-color: rgb(159 18 57 / 0.4);
}

.historial-valor--despues {
  background: #f0fdf4;
  color: #14532d;
  font-weight: 600;
}

.historial-flecha {
  width: 0.875rem;
  height: 0.875rem;
  flex: none;
  color: var(--color-gray-300, #d1d5db);
}

.historial-alta {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-gray-600, #4b5563);
}

.historial-motivo {
  margin: 0.75rem 0 0;
  padding: 0.5rem 0.75rem;
  border-left: 3px solid var(--color-oluxblue-200, #c3ccf7);
  background: var(--color-gray-50, #f9fafb);
  border-radius: 0 0.5rem 0.5rem 0;
  font-size: 0.8125rem;
  color: var(--color-gray-700, #374151);
}

.historial-motivo__rotulo {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-gray-400, #9ca3af);
}

.historial-vacio {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--color-gray-400, #9ca3af);
}

.historial-vacio svg { width: 2.5rem; height: 2.5rem; margin: 0 auto 0.75rem; }

.historial-vacio__titulo {
  margin: 0 0 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-gray-600, #4b5563);
}

.historial-vacio__texto { margin: 0; font-size: 0.8125rem; }

.historial-cargando {
  padding: 2rem 1rem;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--color-gray-400, #9ca3af);
}

/* El textarea del motivo, en los formularios de edición. */
.campo-motivo {
  margin-top: 0.25rem;
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--color-gray-300, #d1d5db);
  border-radius: 0.75rem;
  background: #fff;
  font: inherit;
  font-size: 0.875rem;
  color: var(--color-gray-700, #374151);
  resize: vertical;
}

.campo-motivo:focus {
  outline: none;
  border-color: var(--color-oluxblue-400, #6d83e8);
  box-shadow: 0 0 0 2px var(--color-oluxblue-100, #dfe5fc);
}

@media (max-width: 640px) {
  .historial-cambio__campo { min-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .modal-historial__caja { animation: none; }
}

/* == 4. Correcciones de base ==================================================
   Tailwind 4 cambió el preflight y ahora los <button> llevan `cursor: default`
   en vez de la mano. En esta app todos los botones son interactivos, así que se
   devuelve el puntero (y se marca el deshabilitado como tal) en un solo sitio
   en vez de acordarse de `cursor-pointer` en cada botón.
   ========================================================================== */

button:not(:disabled),
summary,
[role="button"]:not([aria-disabled="true"]),
label[for],
input[type="checkbox"]:not(:disabled),
input[type="radio"]:not(:disabled),
input[type="submit"]:not(:disabled),
input[type="file"]:not(:disabled) { cursor: pointer; }

button:disabled,
input[type="submit"]:disabled { cursor: not-allowed; }