/* ============================================================
   Admin components — Design Kit (F9.1)
   "Componentes del kit faltantes en admin"

   Archivo ADITIVO: usa exclusivamente los tokens ya definidos en
   editorial.css (:root -- --mustard/--olive/--ok/--ko/--warn/--blue,
   etc., ya remapeados a los colores de marca reales, ver el docblock
   de ese archivo). No se define NINGUN color nuevo aqui.

   Se carga como <link> aparte desde layouts/editorial.blade.php
   (justo despues de mobile.css) para no tocar el bloque :root de
   editorial.css, tal como pide REM-14/el proceso de este repo.

   Indice:
     1. Badges de estado (reservas / solicitudes de cambio)
     2. Inputs con estados de validacion
     3. Modal destructivo (soporte visual de x-danger-modal)
     4. Segmented control (tabs pill)
     5. Tooltips (CSS puro, sin JS)
     6. Chips de filtro removibles
   ============================================================ */

/* ============================================================
   1. Badges de estado
   ============================================================ */

.badge-pendiente,
.badge-aceptada,
.badge-confirmada,
.badge-rechazada,
.badge-cancelada,
.badge-preprocesada {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.6;
  border: 1px solid transparent;
  white-space: nowrap;
}

/* Solido (default) */
.badge-pendiente    { background: var(--warn-bg); color: var(--warn); }
.badge-aceptada     { background: var(--ok-bg);   color: var(--ok); }
.badge-confirmada   { background: var(--blue-bg); color: var(--blue); }
.badge-rechazada    { background: var(--ko-bg);   color: var(--ko); }
.badge-cancelada    { background: var(--ghost);   color: var(--ink-soft); }
.badge-preprocesada { background: var(--bg-warm); color: var(--ink-faint); }

/* Outline: agregar modificador .badge-outline junto a la clase de
   estado, ej. class="badge-pendiente badge-outline" */
.badge-pendiente.badge-outline    { background: var(--card-bg); border-color: var(--warn); color: var(--warn); }
.badge-aceptada.badge-outline     { background: var(--card-bg); border-color: var(--ok);   color: var(--ok); }
.badge-confirmada.badge-outline   { background: var(--card-bg); border-color: var(--blue); color: var(--blue); }
.badge-rechazada.badge-outline    { background: var(--card-bg); border-color: var(--ko);   color: var(--ko); }
.badge-cancelada.badge-outline    { background: var(--card-bg); border-color: var(--rule); color: var(--ink-soft); }
.badge-preprocesada.badge-outline { background: var(--card-bg); border-color: var(--rule); color: var(--ink-faint); }

/* ============================================================
   2. Inputs con estados de validacion
   Se aplican junto a las clases nativas ya usadas en el proyecto
   (.form-control, input[type=...], select, textarea -- ver
   editorial.css lineas ~360) como modificador, ej.
   <input class="form-control input-error" ...>
   ============================================================ */

.form-control.input-success,
input.input-success,
select.input-success,
textarea.input-success {
  border-color: var(--ok) !important;
}
.form-control.input-success:focus,
input.input-success:focus,
select.input-success:focus,
textarea.input-success:focus {
  border-color: var(--ok) !important;
  box-shadow: 0 0 0 3px var(--ok-bg) !important;
}

.form-control.input-error,
input.input-error,
select.input-error,
textarea.input-error {
  border-color: var(--ko) !important;
}
.form-control.input-error:focus,
input.input-error:focus,
select.input-error:focus,
textarea.input-error:focus {
  border-color: var(--ko) !important;
  box-shadow: 0 0 0 3px var(--ko-bg) !important;
}

.input-help-text {
  display: block;
  margin-top: 5px;
  font-size: 0.78rem;
  color: var(--ink-soft);
}
.input-help-text.input-help-success { color: var(--ok); }
.input-help-text.input-help-error   { color: var(--ko); }

/* ============================================================
   3. Modal destructivo — soporte visual de
   resources/views/components/danger-modal.blade.php
   ============================================================ */

.danger-modal-confirm {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 16px;
  padding: 11px 13px;
  background: var(--ko-bg);
  border: 1px solid var(--ko);
  border-radius: 8px;
  font-size: 0.85rem;
  color: var(--ink);
  cursor: pointer;
}
.danger-modal-confirm input[type="checkbox"] {
  accent-color: var(--ko);
  margin-top: 2px;
  flex-shrink: 0;
  cursor: pointer;
}
.danger-modal-confirm span { line-height: 1.4; }

/* El boton destructivo del slot "action" se deshabilita via
   x-bind:disabled="!confirmed" (ver docblock del componente) hasta
   que el checkbox de arriba se marque -- estilo generico de
   :disabled para cualquier boton del admin. */
button:disabled,
.btn:disabled,
.btn.btn-danger:disabled,
.btn.btn-outline-danger:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  pointer-events: none;
}

/* ============================================================
   4. Segmented control (tabs pill) — ej. selector MULTI/MES/AÑO
   de calendarios
   ============================================================ */

.segmented-control {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--ghost);
  border-radius: 999px;
  padding: 3px;
}
.segmented-control button,
.segmented-control .segmented-option {
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font-family: 'Epilogue', 'Epilogue Fallback', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 6px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color var(--dur-pop) var(--ease-color), color var(--dur-pop) var(--ease-color);
}
.segmented-control button:hover:not(.active):not(:disabled),
.segmented-control .segmented-option:hover:not(.active) {
  color: var(--ink);
}
.segmented-control button.active,
.segmented-control .segmented-option.active {
  background: var(--ink);
  color: var(--sobre-tinta);
}

/* ============================================================
   5. Tooltips — CSS puro, sin JS. Uso:
   <span class="tooltip" data-tooltip="Texto de ayuda">...</span>
   ============================================================ */

.tooltip {
  position: relative;
  cursor: help;
}
.tooltip::after,
.tooltip::before {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-pop) var(--ease-out), transform var(--dur-pop) var(--ease-out);
  position: absolute;
  left: 50%;
  z-index: 60;
}
.tooltip::after {
  content: attr(data-tooltip);
  bottom: calc(100% + 9px);
  transform: translate(-50%, 4px);
  background: var(--ink);
  color: var(--sobre-tinta);
  font-family: 'Epilogue', 'Epilogue Fallback', sans-serif;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0,0,0,0.16);
}
.tooltip::before {
  content: '';
  bottom: calc(100% + 3px);
  transform: translate(-50%, 4px);
  border: 5px solid transparent;
  border-top-color: var(--ink);
}
.tooltip:hover::after,
.tooltip:hover::before,
.tooltip:focus-visible::after,
.tooltip:focus-visible::before {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* ============================================================
   6. Chips de filtro removibles — paneles de filtros de listados
   ============================================================ */

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ghost);
  color: var(--ink);
  padding: 4px 8px 4px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
  margin: 2px 4px 2px 0;
}
.filter-chip .filter-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 0;
  background: var(--ink-faint);
  color: var(--card-bg); /* DARK-01: token (claro = #fff) */
  font-size: 0.6rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.filter-chip .filter-chip-remove:hover { background: var(--ko); }