/* ============================================================
   Club Amistad — Estilos corporativos
   Paleta oficial del manual:
     Azul    #00398b   (Pantone Ref. BlueC)   color principal
     Morado  #85007c   (Pantone 2415C)        secundario
     Amarillo #efcd41  (Pantone 123C)         acento
   Tipografía: DM Sans (Google Fonts) — la más cercana a Formata
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap');

:root {
  /* ── Paleta corporativa ── */
  --ca-blue:         #00398b;
  --ca-blue-dark:    #002a69;
  --ca-blue-soft:    #e8eef7;
  --ca-blue-alpha:   rgba(0, 57, 139, 0.08);

  --ca-purple:       #85007c;
  --ca-purple-soft:  #faecf8;

  --ca-yellow:       #efcd41;
  --ca-yellow-dark:  #d9b724;
  --ca-yellow-soft:  #fef6d1;

  /* ── Grises (escala consistente) ── */
  --ca-gray-50:  #f8fafc;
  --ca-gray-100: #f1f5f9;
  --ca-gray-200: #e2e8f0;
  --ca-gray-300: #cbd5e1;
  --ca-gray-400: #94a3b8;
  --ca-gray-500: #64748b;
  --ca-gray-600: #475569;
  --ca-gray-700: #334155;
  --ca-gray-800: #1e293b;
  --ca-gray-900: #0f172a;

  /* ── Estados ── */
  --ca-success:      #059669;
  --ca-success-soft: #d1fae5;
  --ca-warn:         #d97706;
  --ca-warn-soft:    #fef3c7;
  --ca-danger:       #dc2626;
  --ca-danger-soft:  #fee2e2;

  /* ── Sombras estandarizadas (suaves, con tinte azul) ── */
  --ca-shadow-sm: 0 1px 2px rgba(0, 57, 139, 0.05);
  --ca-shadow:    0 1px 3px rgba(0, 57, 139, 0.06), 0 1px 2px rgba(0, 57, 139, 0.04);
  --ca-shadow-md: 0 4px 12px rgba(0, 57, 139, 0.08), 0 2px 4px rgba(0, 57, 139, 0.04);
  --ca-shadow-lg: 0 10px 25px rgba(0, 57, 139, 0.10), 0 4px 8px rgba(0, 57, 139, 0.05);

  /* ── Radius ── */
  --ca-radius-sm: 0.375rem;
  --ca-radius:    0.5rem;
  --ca-radius-md: 0.625rem;
  --ca-radius-lg: 0.875rem;

  /* ── Alias históricos (compatibilidad con código existente) ── */
  --brand:        var(--ca-blue);
  --brand-accent: var(--ca-blue);
  --brand-light:  #f4f7fb;

  /* ── Fondo de página: azul Club muy suave para que las tarjetas blancas
        destaquen sin saturar la vista (90% del uso es móvil). ── */
  --ca-bg:        #dfe7f1;
}

* { box-sizing: border-box; }

body {
  font-family: 'DM Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--ca-bg);
  color: var(--ca-gray-900);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  opacity: 0;
  transition: opacity 0.18s ease;
  font-feature-settings: 'cv11', 'ss01';
}
body.page-ready { opacity: 1; }

/* Línea fina superior con la marca del club (azul → amarillo) */
body::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--ca-blue) 0%, var(--ca-blue) 70%, var(--ca-yellow) 100%);
}

h1, h2, h3, h4 {
  letter-spacing: -0.015em;
  color: var(--ca-gray-900);
  font-weight: 700;
}
h1 { font-weight: 800; }

/* ============================================================
   Botones
   ============================================================ */

.btn-primary {
  background-color: var(--ca-blue);
  color: white;
  padding: 0.625rem 1.15rem;
  border-radius: var(--ca-radius);
  font-weight: 600;
  font-size: 0.9rem;
  transition: background-color 0.15s, box-shadow 0.15s, transform 0.06s;
  border: 1px solid var(--ca-blue);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.2;
  box-shadow: var(--ca-shadow-sm);
}
.btn-primary:hover {
  background-color: var(--ca-blue-dark);
  border-color: var(--ca-blue-dark);
  box-shadow: var(--ca-shadow);
}
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.btn-accent {
  background-color: var(--ca-yellow);
  color: var(--ca-blue);
  padding: 0.625rem 1.15rem;
  border-radius: var(--ca-radius);
  font-weight: 700;
  font-size: 0.9rem;
  transition: background-color 0.15s, box-shadow 0.15s, transform 0.06s;
  border: 1px solid var(--ca-yellow);
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.2;
  box-shadow: var(--ca-shadow-sm);
}
.btn-accent:hover {
  background-color: var(--ca-yellow-dark);
  border-color: var(--ca-yellow-dark);
  box-shadow: var(--ca-shadow);
}
.btn-accent:active { transform: translateY(1px); }

.btn-ghost {
  color: var(--ca-blue);
  padding: 0.5rem 0.9rem;
  border-radius: var(--ca-radius);
  font-weight: 500;
  font-size: 0.875rem;
  transition: background-color 0.15s, color 0.15s;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.2;
}
.btn-ghost:hover { background: var(--ca-blue-soft); }

.btn-secondary {
  color: var(--ca-blue);
  background: white;
  padding: 0.55rem 1.05rem;
  border-radius: var(--ca-radius);
  font-weight: 600;
  font-size: 0.875rem;
  transition: background-color 0.15s, border-color 0.15s;
  border: 1px solid var(--ca-blue);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.2;
}
.btn-secondary:hover { background: var(--ca-blue-soft); }

.btn-danger {
  background-color: white;
  color: var(--ca-danger);
  padding: 0.55rem 1.05rem;
  border-radius: var(--ca-radius);
  font-weight: 600;
  font-size: 0.875rem;
  transition: background-color 0.15s, color 0.15s;
  border: 1px solid var(--ca-danger);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  line-height: 1.2;
}
.btn-danger:hover { background: var(--ca-danger-soft); }

/* ============================================================
   Inputs
   ============================================================ */

.input {
  width: 100%;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--ca-gray-300);
  border-radius: var(--ca-radius);
  font-size: 0.92rem;
  outline: none;
  background: white;
  font-family: inherit;
  color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.input:focus {
  border-color: var(--ca-blue);
  box-shadow: 0 0 0 3px rgba(0, 57, 139, 0.13);
}
.input[readonly], .input:disabled {
  background-color: var(--ca-gray-100);
}

/* ============================================================
   Cards
   ============================================================ */

/* Tarjetas Tailwind genéricas (bg-white + border + rounded-*) reciben
   sombra suave para destacarse del fondo azul Club. */
nav.bg-white { box-shadow: none; }  /* el nav blanco antiguo no necesita sombra */
main .bg-white.rounded-xl,
main .bg-white.rounded-2xl,
main .bg-white.rounded-lg {
  box-shadow: var(--ca-shadow-sm);
}

.card {
  background: white;
  border-radius: var(--ca-radius-lg);
  box-shadow: var(--ca-shadow);
  padding: 1.5rem;
  border: 1px solid var(--ca-blue-alpha);
}

/* Variante con borde lateral azul para destacar */
.card-highlight {
  background: white;
  border-radius: var(--ca-radius-lg);
  box-shadow: var(--ca-shadow);
  padding: 1.5rem;
  border: 1px solid var(--ca-blue-alpha);
  border-left: 4px solid var(--ca-blue);
}

/* Cards del dashboard (clickables, con hover) */
.card-stat {
  background: white;
  border-radius: var(--ca-radius-lg);
  box-shadow: var(--ca-shadow);
  padding: 1.5rem;
  border: 1px solid var(--ca-blue-alpha);
  cursor: pointer;
  transition: box-shadow 0.18s, border-color 0.18s, transform 0.12s;
  text-decoration: none;
  display: block;
  color: inherit;
}
.card-stat:hover {
  box-shadow: var(--ca-shadow-md);
  border-color: rgba(0, 57, 139, 0.22);
  transform: translateY(-1px);
}
.card-stat .stat-arrow {
  font-size: 0.75rem;
  color: var(--ca-gray-400);
  margin-top: 0.5rem;
  display: inline-block;
  transition: color 0.15s;
}
.card-stat:hover .stat-arrow {
  color: var(--ca-blue);
}

/* ============================================================
   Badges (sistematizadas)
   ============================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.4;
}
.badge-blue    { background: var(--ca-blue-soft);   color: var(--ca-blue); }
.badge-purple  { background: var(--ca-purple-soft); color: var(--ca-purple); }
.badge-yellow  { background: var(--ca-yellow-soft); color: #92400e; }
.badge-gray    { background: var(--ca-gray-100);    color: var(--ca-gray-600); }
.badge-success { background: var(--ca-success-soft); color: #065f46; }
.badge-warn    { background: var(--ca-warn-soft);   color: #92400e; }
.badge-danger  { background: var(--ca-danger-soft); color: #991b1b; }

/* ============================================================
   Errores
   ============================================================ */

.error-box {
  background: var(--ca-danger-soft);
  color: #991b1b;
  padding: 0.75rem 1rem;
  border-radius: var(--ca-radius);
  font-size: 0.9rem;
  border: 1px solid #fecaca;
}

/* ============================================================
   Tabs (nav principal)
   ============================================================ */

.tab-btn {
  padding: 0.75rem 1.1rem;
  color: var(--ca-gray-500);
  font-weight: 500;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  font-size: 0.9rem;
}
.tab-btn:hover { color: var(--ca-blue); }
.tab-btn.active {
  color: var(--ca-blue);
  border-bottom-color: var(--ca-blue);
  font-weight: 600;
}

/* Barras de pestañas con scroll horizontal en móvil */
nav.bg-white > div {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
nav.bg-white > div::-webkit-scrollbar { height: 3px; }
nav.bg-white > div::-webkit-scrollbar-thumb { background: var(--ca-gray-300); }

/* ============================================================
   Nav corporativo (fondo azul Club, inspirado en el dosier)
   - Fondo azul sólido con barra superior amarilla fina
   - Tabs en blanco semitransparente; activo con underline amarillo
   - Separación blanca entre header y nav (margin-top)
   ============================================================ */

.nav-club {
  background: var(--ca-blue);
  margin-top: 0.5rem;              /* separación blanca con el header */
  border-top: 3px solid var(--ca-yellow);  /* franja amarilla fina arriba */
  position: relative;
  box-shadow: var(--ca-shadow-sm);
}
.nav-club > div {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.nav-club > div::-webkit-scrollbar { height: 3px; }
.nav-club > div::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); }

.nav-club .tab-btn {
  color: rgba(255, 255, 255, 0.78);
  padding: 0.85rem 1.15rem;
  border-bottom: 3px solid transparent;
  font-weight: 500;
  position: relative;
  background: transparent;
}
.nav-club .tab-btn:hover {
  color: white;
}

/* Tab activo: "pestaña" blanca que sobresale del bloque azul, con borde
   inferior amarillo (acento de marca). Texto en azul Club. */
/* Mayor especificidad (nav.nav-club + dos clases) para vencer overrides
   inline tipo .tab-color-azul.active {background: ...} que vienen de
   admin.html y profesor.html. */
nav.nav-club .tab-btn.active,
nav.nav-club .tab-color-azul.active,
nav.nav-club .tab-color-amarillo.active,
nav.nav-club .tab-color-rosa.active,
nav.nav-club .tab-color-gris.active {
  background: white;
  color: var(--ca-blue);
  border-bottom: 3px solid var(--ca-yellow);
  border-radius: 6px 6px 0 0;
  font-weight: 700;
}

/* Sub-menús desplegables del nav-club siguen en blanco (más legibles) */
.nav-club + .nav-club-submenu,
.nav-club ~ .nav-club-submenu {
  background: white;
  border-bottom: 1px solid var(--ca-gray-200);
}

/* ============================================================
   Filtros tipo chip / botón activo
   ============================================================ */

.dispo-filter.active,
.mat-filter.active,
.liq-filter.active,
.alu-filter.active {
  background: var(--ca-blue);
  color: white;
}

/* ============================================================
   Tablas
   ============================================================ */

.card.p-0,
.overflow-x-auto {
  -webkit-overflow-scrolling: touch;
}
table {
  border-collapse: collapse;
}

/* Acento amarillo para destacar zonas clave (opcional) */
.accent-bar {
  height: 3px;
  background: linear-gradient(90deg, var(--ca-blue) 0%, var(--ca-yellow) 100%);
}

/* ============================================================
   Responsive — móvil
   ============================================================ */

@media (max-width: 768px) {
  .card, .card-highlight, .card-stat {
    padding: 1rem;
    border-radius: var(--ca-radius-md);
  }
  h1 { font-size: 1.25rem !important; }
  h2 { font-size: 1.35rem !important; }
  h3 { font-size: 1.05rem !important; }

  .card.p-0 { overflow-x: auto; }
  .card.p-0 table { min-width: 560px; }

  /* Botones un poco más altos para uso táctil cómodo */
  .btn-primary, .btn-accent, .btn-ghost, .btn-secondary, .btn-danger {
    min-height: 42px;
  }

  header .max-w-4xl, header .max-w-5xl, header .max-w-7xl {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* ============================================================
   Toast global (notificaciones de guardado, error...)
   ============================================================ */

#toastContainer {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  min-width: 220px;
  max-width: 360px;
  padding: 0.75rem 1rem;
  border-radius: var(--ca-radius);
  font-size: 0.9rem;
  font-weight: 500;
  color: white;
  box-shadow: var(--ca-shadow-lg);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  animation: toast-in 0.2s ease-out;
}
.toast.toast-success { background: var(--ca-success); }
.toast.toast-error   { background: var(--ca-danger); }
.toast.toast-info    { background: var(--ca-blue); }
.toast.toast-warn    { background: var(--ca-warn); }
.toast.toast-out { animation: toast-out 0.2s ease-in forwards; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes toast-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-8px); }
}

/* ============================================================
   Pestañas internas de la ficha de viaje
   ============================================================ */

.viaje-tabs {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--ca-gray-200);
  background: white;
  padding: 0.25rem 0 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  position: sticky;
  z-index: 25;
}
.viaje-tabs::-webkit-scrollbar { height: 3px; }
.viaje-tabs::-webkit-scrollbar-thumb { background: var(--ca-gray-300); }

/* Mientras el JS decide qué pestañas mostrar (y, en Xanadú, mueve
   Alumnos antes de Equipo), el nav se mantiene invisible pero
   ocupando su espacio para no producir un salto de layout. */
.viaje-tabs.preparando { visibility: hidden; }

.viaje-tab {
  padding: 0.7rem 1rem;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ca-gray-500);
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.viaje-tab:hover { color: var(--ca-blue); }
.viaje-tab.active {
  color: var(--ca-blue);
  border-bottom-color: var(--ca-blue);
  font-weight: 600;
}

.viaje-panel { display: none; }
.viaje-panel.active { display: block; }

/* Cabecera fija del viaje (dentro del form) */
.viaje-sticky-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: white;
  border-bottom: 1px solid var(--ca-gray-200);
  padding: 0.85rem 0 0.55rem;
  margin-left: -1.5rem;
  margin-right: -1.5rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.viaje-sticky-header .viaje-title-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.viaje-sticky-header h2 { margin: 0; }
.viaje-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.8rem;
  font-size: 0.78rem;
  color: var(--ca-gray-500);
  margin-top: 0.4rem;
}
.viaje-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.viaje-meta .badge {
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.viaje-meta .badge-abierto    { background: var(--ca-warn-soft);   color: #92400e; }
.viaje-meta .badge-confirmado { background: #dbeafe;               color: #1e40af; }
.viaje-meta .badge-finalizado { background: var(--ca-success-soft); color: #065f46; }
.viaje-meta .badge-cancelado  { background: var(--ca-danger-soft);  color: #991b1b; }
.viaje-meta .badge-borrador   { background: var(--ca-warn-soft);    color: #92400e; }
.viaje-meta .badge-publicado  { background: var(--ca-success-soft); color: #065f46; }

.viaje-tabs {
  position: sticky;
  top: 58px;
  z-index: 25;
  margin-left: -1.5rem;
  margin-right: -1.5rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* Barra de acciones fija inferior */
.action-bar {
  position: sticky;
  bottom: 0;
  z-index: 25;
  background: white;
  border-top: 1px solid var(--ca-gray-200);
  margin-left: -1.5rem;
  margin-right: -1.5rem;
  padding: 0.7rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.04);
}
.action-bar .left  { margin-right: auto; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.action-bar .right { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }

@media (max-width: 768px) {
  .viaje-sticky-header {
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.7rem;
    padding-bottom: 0.4rem;
  }
  .viaje-tabs {
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .action-bar {
    margin-left: -1rem;
    margin-right: -1rem;
    padding: 0.6rem 1rem;
  }
  .viaje-tab { padding: 0.55rem 0.7rem; font-size: 0.85rem; }
}

/* ============================================================
   Logo
   ============================================================ */

img[src*="logo"] {
  margin-top: 4px;
}

/* ============================================================
   Impresión
   ============================================================ */

@media print {
  body { background: white !important; }
  header, nav, .no-print, button, .btn-primary, .btn-ghost, .btn-accent, .btn-secondary, .btn-danger {
    display: none !important;
  }
  #viajeForm > section:not(.print-section) { display: none !important; }
  #viajeForm > div#errorBox, #viajeForm > div.flex { display: none !important; }
  .card, .card-highlight, .card-stat { box-shadow: none !important; border: 1px solid var(--ca-gray-200); }
}