/*
 * ProClass Design System — v1.0
 * Importar en todas las páginas con:
 *   <link rel="stylesheet" href="/proclass.css">
 * Este archivo es la fuente única de verdad para colores, tipografía y utilidades base.
 */

/* ── GOOGLE FONTS ──────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ── VARIABLES ─────────────────────────────────────── */
:root {
  /* Brand colors */
  --navy:       #0E2433;   /* texto principal, fondos oscuros */
  --navy2:      #16344A;   /* variante navy para badges/dark elements */
  --blue:       #335FFF;   /* acento principal, CTAs */
  --blue-d:     #274ED6;   /* hover del azul */
  --blue-t:     #EDF1FF;   /* fondo tint azul */
  --lime:       #CCFF00;   /* acento secundario (logo, highlights) */
  --lime-ink:   #243300;   /* texto sobre fondo lime */
  --lime-t:     #F4FFCB;   /* fondo tint lime */

  /* UI surfaces */
  --page:       #F3F5F7;   /* fondo de página */
  --card:       #FFFFFF;   /* fondo de tarjeta */
  --line:       #E6E9EC;   /* bordes normales */
  --line2:      #F0F2F4;   /* bordes suaves / divisores internos */

  /* Aliases de compatibilidad (landing y páginas legacy) */
  --white:      #FFFFFF;   /* alias de --card */
  --border:     #E6E9EC;   /* alias de --line */
  --bg:         #F3F5F7;   /* alias de --page */
  --text2:      #43525E;   /* alias de --soft */

  /* Texto */
  --mute:       #6B7681;   /* texto secundario / placeholders */
  --soft:       #43525E;   /* texto terciario */

  /* Estados */
  --green:      #1FA463;
  --green-t:    #ECFDF3;
  --red:        #E53935;
  --red-t:      #FEF3F2;
  --gold:       #F5B301;
  --gold-t:     #FFFBEB;
  --blocked:    #8A9AA7;
  --blocked-t:  #F0F2F4;
}

/* ── RESET ─────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

/* ── BASE ──────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--page);
  color: var(--navy);
  -webkit-font-smoothing: antialiased;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
}

svg {
  display: block;
}

/* Icono inline estándar */
.ic {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 1.85;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── LOGO ──────────────────────────────────────────── */
/*
  Uso: <a href="/" class="pc-logo">
         <svg class="pc-logo-mark" ...></svg>
         ProClass
       </a>

  O bien el SVG embebido estándar:
  <svg class="pc-logo-mark" width="26" height="26" viewBox="0 0 100 100">
    <rect width="100" height="100" rx="22" fill="#0E2433"/>
    <path d="M38 30L64 50L38 70" fill="none" stroke="#CCFF00"
          stroke-width="13" stroke-linecap="round" stroke-linejoin="round"/>
  </svg>
*/
.pc-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.03em;
  color: var(--navy);
  text-decoration: none;
}

.pc-logo-mark {
  flex-shrink: 0;
  border-radius: 6px;
}

/* ── BOTONES ───────────────────────────────────────── */
.pc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  border-radius: 13px;
  padding: 14px 20px;
  cursor: pointer;
  border: 0;
  text-decoration: none;
  transition: opacity 0.15s, transform 0.12s;
  width: 100%;
}

.pc-btn:active {
  transform: scale(0.97);
}

.pc-btn-primary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 4px 16px rgba(51, 95, 255, 0.28);
}

.pc-btn-primary:hover {
  opacity: 0.88;
}

.pc-btn-ghost {
  background: var(--card);
  color: var(--soft);
  border: 1px solid var(--line);
}

.pc-btn-ghost:hover {
  border-color: #B8C4FF;
  background: var(--blue-t);
}

.pc-btn-navy {
  background: var(--navy);
  color: #fff;
}

.pc-btn-navy:hover {
  opacity: 0.84;
}

/* ── TARJETA ───────────────────────────────────────── */
.pc-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 1px 3px rgba(14, 36, 51, 0.05), 0 8px 24px rgba(14, 36, 51, 0.06);
}

/* ── CHIPS / BADGES ────────────────────────────────── */
.pc-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  padding: 3px 10px;
}

.pc-chip-blue   { background: var(--blue-t); color: var(--blue);  border: 1px solid #C3D2FF; }
.pc-chip-green  { background: var(--green-t); color: var(--green); border: 1px solid #A6F4C5; }
.pc-chip-red    { background: var(--red-t);   color: var(--red);   border: 1px solid #FECDCA; }
.pc-chip-gold   { background: var(--gold-t);  color: #92580A;      border: 1px solid #FDE68A; }
.pc-chip-navy   { background: var(--navy);    color: #fff; }
.pc-chip-lime   { background: var(--lime);    color: var(--lime-ink); }

/* ── LAYOUT HELPERS ────────────────────────────────── */
/* Columna centrada para páginas mobile (reservas, confirmación) */
.pc-col {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 16px 140px;
}

/* Topbar mobile */
.pc-top {
  max-width: 480px;
  margin: 0 auto;
  padding: 14px 18px;
  display: flex;
  align-items: center;
}

/* Contenedor desktop */
.pc-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── SKELETONS ─────────────────────────────────────── */
.pc-skeleton {
  height: 14px;
  background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
  background-size: 200% 100%;
  animation: pc-shimmer 1.4s infinite;
  border-radius: 6px;
  margin: 6px 0;
}

@keyframes pc-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}