/* ============================================
   CITAS — TEMA COMPARTIDO
   Editorial, cálido, sofisticado.
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Color */
  --ink:        #1C1114;   /* fondo principal, negro cálido */
  --wine:       #2C1A20;   /* superficie de tarjetas */
  --wine-2:     #3A232B;   /* superficie elevada / hover */
  --wine-3:     #4A2C35;   /* bordes sutiles */
  --paper:      #F3E9DC;   /* texto principal sobre fondo oscuro */
  --paper-dim:  #C8B9AF;   /* texto secundario */
  --muted:      #9C8985;   /* texto terciario / placeholders */
  --gold:       #C6A15B;   /* acento principal — enlaces, bordes, detalles */
  --gold-dim:   #8E7443;   /* acento en reposo, menos saturado */
  --rose:       #B15E4F;   /* acento de acción — CTAs primarias */
  --rose-hover: #C06E5E;
  --online:     #7FA66B;   /* estado conectado */
  --offline:    #C6A15B;   /* estado desconectado (dorado apagado, no rojo alarmante) */
  --danger:     #A94438;   /* bloquear */
  --warn:       #B0793B;   /* reportar */

  /* Tipografía */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Forma */
  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 22px;
  --hairline: 1px solid var(--wine-3);
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--ink);
  color: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.2px;
}

::selection {
  background: var(--gold);
  color: var(--ink);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--wine-3);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--gold-dim);
}

a {
  color: var(--gold);
}

button {
  font-family: var(--font-body);
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Eyebrow / etiqueta pequeña versalitas, motivo recurrente del tema */
.eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Filete dorado — el motivo de firma del sistema de diseño */
.hairline-gold {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, var(--gold) 0%, transparent 85%);
  margin: 0;
}