/*
 * componentes.css — Gestionator UI Components v1.0
 * Biblioteca de componentes globales.
 * Cargado tras base_general.css en base_general.html.
 * Aplica a zona pública Y privada.
 * Requiere tokens.css cargado antes.
 */


/* ============================================================
   ALERTAS BOOTSTRAP (sobreescritura semántica)
   Bootstrap 5.3 lee --bs-alert-* en cada variante.
   Mapeamos a tokens semánticos del sistema.
============================================================ */
.alert {
  border-radius: var(--radius-lg);
  border-left-width: 4px;
  font-size: 0.875rem;
}

.alert-success {
  --bs-alert-color:        var(--color-success-text);
  --bs-alert-bg:           var(--color-success-bg);
  --bs-alert-border-color: var(--color-success-main);
  --bs-alert-link-color:   var(--color-success-text);
}

.alert-warning {
  --bs-alert-color:        var(--color-warning-text);
  --bs-alert-bg:           var(--color-warning-bg);
  --bs-alert-border-color: var(--color-warning-main);
  --bs-alert-link-color:   var(--color-warning-text);
}

.alert-danger {
  --bs-alert-color:        var(--color-danger-text);
  --bs-alert-bg:           var(--color-danger-bg);
  --bs-alert-border-color: var(--color-danger-main);
  --bs-alert-link-color:   var(--color-danger-text);
}

.alert-info {
  --bs-alert-color:        var(--color-info-text);
  --bs-alert-bg:           var(--color-info-bg);
  --bs-alert-border-color: var(--color-info-main);
  --bs-alert-link-color:   var(--color-info-text);
}


/* ============================================================
   BADGES BOOTSTRAP
   Bootstrap 5.3 ya usa --bs-primary para bg-primary.
   Sólo ajustamos forma y peso tipográfico.
============================================================ */
.badge {
  border-radius: var(--radius-full);
  font-weight: var(--font-weight-medium);
}


/* ============================================================
   MODALES BOOTSTRAP
   Bootstrap 5.3: override directo sobre .modal-content y derivados.
============================================================ */
.modal-content {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2xl);
  border-color: var(--color-border-subtle);
}

.modal-header {
  border-bottom-color: var(--color-border-subtle);
  padding: var(--space-6) var(--space-7);
}

.modal-body {
  padding: var(--space-6) var(--space-7);
}

.modal-footer {
  border-top-color: var(--color-border-subtle);
  padding: var(--space-5) var(--space-7);
  gap: var(--space-3);
}

.modal-title {
  font-weight: var(--font-weight-semibold);
  font-size: 1.05rem;
}


/* ============================================================
   PROGRESS BOOTSTRAP
   --bs-progress-bar-bg hereda --bs-primary (ya teal).
   Ajustamos radio y fondo de pista.
============================================================ */
.progress {
  border-radius: var(--radius-full);
  background-color: var(--color-neutral-100);
}


/* ============================================================
   DROPDOWN BOOTSTRAP
============================================================ */
.dropdown-menu {
  border-color: var(--color-border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2) 0;
}

.dropdown-item {
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  padding: var(--space-3) var(--space-5);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--color-bg-tertiary);
  color: var(--color-text-primary);
}

/* Bootstrap 5.3 ya aplica --bs-primary para .active via --bs-dropdown-link-active-bg */


/* ============================================================
   UTILIDADES GLOBALES
   Disponibles en zona pública y privada.
   Zona privada amplía este set en privada-layout.css.
============================================================ */
.radius-12 { border-radius: 12px; }  /* compat. navbar_superior.html */

.text-xs  { font-size: 0.75rem;  line-height: 1.2; }
.text-sm  { font-size: 0.875rem; line-height: 1.35; }
.text-lg  { font-size: 1.125rem; line-height: 1.4; }

.text-neutral-500 { color: var(--color-neutral-500); }
.text-neutral-600 { color: var(--color-neutral-600); }
.text-neutral-800 { color: var(--color-neutral-800); }


/* ============================================================
   TOAST UNIFICADO (.gtn-toast)
   Posición: fixed top-right desktop / top-center móvil (para llamar la atención).
   Fondo corporativo teal-100; borde izquierdo semántico 3px. Desaparece ~4s vía JS.
   Usa clase .gtn-toast (no .toast de Bootstrap) para evitar
   conflictos con el widget Bootstrap Toast JS.
   La migración del JS de servicios se hará en Fase 4.
============================================================ */
.gtn-toast-area {
  position: fixed;
  /* Anclado bajo la cabecera (64px) para no taparla. */
  top: calc(64px + var(--space-4));
  right: var(--space-6);
  z-index: 1090;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 360px;
  pointer-events: none;
  width: 100%;
}

@media (max-width: 575px) {
  .gtn-toast-area {
    right: 0;
    left: 0;
    top: calc(64px + var(--space-3));
    padding: 0 var(--space-5);
    max-width: 100%;
  }
}

.gtn-toast {
  /* Esquema semántico de 3 colores; el fondo por defecto es teal corporativo
     (éxito/informativo). El borde izquierdo es SIEMPRE coherente con el fondo. */
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  background-color: var(--color-primary-100);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  border-left: 3px solid var(--color-primary-500);
  padding: var(--space-4) var(--space-5);
  pointer-events: all;
  animation: gtn-toast-in var(--duration-normal) var(--ease-decelerate) both;
  font-size: 0.875rem;
  color: var(--color-primary-900);
  line-height: var(--leading-normal);
}

.gtn-toast.is-leaving {
  animation: gtn-toast-out var(--duration-fast) var(--ease-accelerate) both;
}

/* Teal corporativo = éxito e informativo · Ámbar = aviso · Rojo = error.
   En cada caso, fondo, borde y texto son de la MISMA familia de color. */
.gtn-toast--success,
.gtn-toast--info {
  background-color: var(--color-primary-100);
  border-left-color: var(--color-primary-500);
  color: var(--color-primary-900);
}
.gtn-toast--warning {
  background-color: var(--color-warning-bg);
  border-left-color: var(--color-warning-main);
  color: var(--color-warning-text);
}
.gtn-toast--danger {
  background-color: var(--color-danger-bg);
  border-left-color: var(--color-danger-main);
  color: var(--color-danger-text);
}

.gtn-toast__text {
  flex: 1 1 auto;
  min-width: 0;
}

.gtn-toast__close {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: inherit;
  opacity: 0.55;
  cursor: pointer;
  font-size: 1.125rem;
  line-height: 1;
  padding: 0;
  margin-top: -1px;
}
.gtn-toast__close:hover { opacity: 1; }

.gtn-toast__title {
  font-weight: var(--font-weight-semibold);
  font-size: 0.875rem;
  margin-bottom: var(--space-1);
}

.gtn-toast__body {
  font-size: 0.8125rem;
  color: inherit;
}

/* Entra deslizando desde arriba (el área está ahora anclada arriba). */
@keyframes gtn-toast-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes gtn-toast-out {
  from { opacity: 1; transform: translateY(0); max-height: 120px; margin-bottom: 0; }
  to   { opacity: 0; transform: translateY(-4px); max-height: 0; padding: 0; }
}


/* ============================================================
   EMPTY STATE (.gtn-empty-state)
   Tabla o lista sin datos: icono + título + descripción opcional.
============================================================ */
.gtn-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-10) var(--space-8);
  gap: var(--space-4);
}

.gtn-empty-state__icon {
  font-size: 2.5rem;
  color: var(--color-neutral-300);
  line-height: 1;
}

.gtn-empty-state__title {
  font-size: 0.9375rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  margin: 0;
}

.gtn-empty-state__desc {
  font-size: 0.8125rem;
  color: var(--color-text-tertiary);
  margin: 0;
  max-width: 320px;
  line-height: var(--leading-relaxed);
}


/* ============================================================
   SKELETON LOADER (.gtn-skeleton)
   Placeholder animado mientras carga contenido.
   Uso: <div class="gtn-skeleton" style="height:20px;width:120px;"></div>
============================================================ */
.gtn-skeleton {
  background: linear-gradient(
    90deg,
    var(--color-neutral-100) 25%,
    var(--color-neutral-200) 50%,
    var(--color-neutral-100) 75%
  );
  background-size: 200% 100%;
  animation: gtn-skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
}

@keyframes gtn-skeleton-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}


/* ============================================================
   CHIPS SECTORIALES (.gtn-chip-sector)
   3 colores con marca del logo: Belleza, Salud, Motor.
   Cualquier otro sector usa el chip neutral (slate-100).
============================================================ */
.gtn-chip-sector {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 2px var(--space-4);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
  background-color: var(--color-neutral-100);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.gtn-chip-sector--belleza {
  background-color: var(--color-sector-belleza-100);
  color: var(--color-sector-belleza-700);
}

.gtn-chip-sector--salud {
  background-color: var(--color-sector-salud-100);
  color: var(--color-sector-salud-700);
}

.gtn-chip-sector--motor {
  background-color: var(--color-sector-motor-100);
  color: var(--color-sector-motor-700);
}


/* ============================================================
   KPI STAT (.gtn-kpi)
   Número grande + etiqueta + delta opcional.
   Uso típico: tarjetas de métricas en dashboards del área privada.
============================================================ */
.gtn-kpi {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.gtn-kpi__value {
  font-size: 2rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: var(--leading-tight);
}

.gtn-kpi__label {
  font-size: 0.75rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.gtn-kpi__delta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 0.75rem;
  font-weight: var(--font-weight-medium);
}

.gtn-kpi__delta--up   { color: var(--color-success-text); }
.gtn-kpi__delta--down { color: var(--color-danger-text); }


/* ============================================================
   PAGE HEADER (.gtn-page-header)
   Título + subtítulo + acciones: patrón app-like del área privada.
   Compacto por defecto para densidad de datos.
============================================================ */
.gtn-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.gtn-page-header__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.gtn-page-header__title {
  font-size: 1.1875rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
  line-height: var(--leading-snug);
}

.gtn-page-header__subtitle {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  margin: 0;
  line-height: var(--leading-normal);
}

.gtn-page-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* ============================================================
   CAMPO NO EDITABLE (solo lectura) — convención global
   Forma estándar de mostrar un valor no editable en toda la web.
   El texto es seleccionable (no parece "prohibido"); admite un
   botón opcional de copiar al final, dentro del área.
   Uso:
     <div class="gtn-readonly">
       <span class="gtn-readonly__text">VALOR</span>
       <button class="gtn-readonly__copy" type="button">…</button>  (opcional)
     </div>
   ============================================================ */
.gtn-readonly {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 38px;
  padding: 0 var(--space-2) 0 var(--space-3);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
  font-size: 0.8125rem;
}

.gtn-readonly__text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: text;
  user-select: all;            /* seleccionar el valor de un solo clic */
}

.gtn-readonly__copy {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-bg-surface);
  color: var(--color-text-tertiary);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}

.gtn-readonly__copy:hover {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
}

.gtn-readonly__copy.is-copied {
  color: var(--color-success-main);
  border-color: var(--color-success-main);
}