/*
 * Look Vintage (data-look="vintage"): el panel clásico, como era Dale al principio. Barra lateral con
 * la clínica arriba y los módulos en lista, papel cálido, tarjetas blancas con línea fina, botones de
 * píldora en cobre, Fraunces para los títulos e Instrument Sans para el trabajo. Mismas pantallas y
 * mismas acciones: solo cambia cómo se ve.
 *
 * Todo vive bajo :root[data-look='vintage'], así Helios y Futurístico no cambian.
 */

@font-face{font-family:Fraunces;src:url('./assets/Fraunces-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Fraunces;src:url('./assets/Fraunces-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url('./assets/InstrumentSans.woff2') format('woff2');font-weight:400 700;font-display:swap}

:root[data-look='vintage'] {
  --vin-lateral: #fbf8f2;
  --vin-relleno: rgba(46, 35, 21, .06);
  --vin-relleno-fuerte: rgba(46, 35, 21, .1);
  --vin-cobre: #b3551a;
  --vin-sans: "Instrument Sans", system-ui, sans-serif;
  --vin-serif: Fraunces, Georgia, serif;

  --h-cifra-familia: Fraunces, Georgia, serif;
  --h-fondo: #f6f1e8;
  --h-fondo-luz: linear-gradient(transparent, transparent);
  --h-grano: linear-gradient(transparent, transparent);
  --h-hoja: transparent;
  --h-papel: #ffffff;
  --h-papel-2: #f3ede3;
  --h-pestana: transparent;
  --h-pestana-hover: var(--vin-relleno);
  --h-bolsillo: #efe8dc;
  --h-tinta: #22190f;
  --h-tinta-2: #66594a;
  --h-tinta-3: #4a3f33;
  --h-linea: rgba(46, 35, 21, .14);
  --h-borde: rgba(46, 35, 21, .3);
  --h-acento: #b3551a;
  --h-acento-texto: #fffaf3;
  --h-acento-suave: rgba(224, 138, 74, .14);
  --h-positivo: #276d43;
  --h-positivo-suave: rgba(39, 109, 67, .1);
  --h-grafico-1: #b3551a;
  --h-grafico-2: #66594a;
  --h-boton: #e88a4a;
  --h-boton-hover: #df7d3b;
  --h-boton-texto: #221304;
  --h-foco: #b3551a;
  --h-avatar: #f3e3d3;
  --h-vidrio: rgba(253, 250, 244, .92);
  --h-vidrio-texto: rgba(253, 250, 244, .92);
  --h-vidrio-brillo: none;
  --h-luz: transparent;
  --h-luz-linea: transparent;
  --h-luz-borde: 0 0 0 1px var(--h-linea);
  --h-sombra-1: none;
  --h-sombra-2: 0 10px 30px -18px rgba(46, 35, 21, .35);
  --h-sombra-3: 0 18px 50px -24px rgba(46, 35, 21, .4);
  --h-sombra-hoja: none;
  --h-baldosa: inset 0 0 0 1px var(--h-linea);
  --h-monograma: none;
}

:root[data-look='vintage'][data-tema='noche'] {
  --vin-lateral: #1b1611;
  --vin-relleno: rgba(243, 235, 223, .07);
  --vin-relleno-fuerte: rgba(243, 235, 223, .12);
  --vin-cobre: #f0a46c;

  --h-fondo: #15110d;
  --h-papel: #221b15;
  --h-papel-2: #2a221b;
  --h-bolsillo: #1e1813;
  --h-tinta: #f3ebdf;
  --h-tinta-2: #b9ab98;
  --h-tinta-3: #d8ccbb;
  --h-linea: rgba(243, 235, 223, .12);
  --h-borde: rgba(243, 235, 223, .26);
  --h-acento: #f0a46c;
  --h-acento-texto: #221304;
  --h-acento-suave: rgba(240, 164, 108, .14);
  --h-positivo: #8fc8a2;
  --h-positivo-suave: rgba(143, 200, 162, .12);
  --h-grafico-1: #f0a46c;
  --h-grafico-2: #b9ab98;
  --h-foco: #f0a46c;
  --h-avatar: #3a2e24;
  --h-vidrio: rgba(27, 22, 17, .92);
  --h-vidrio-texto: rgba(27, 22, 17, .92);
}

/* ---------- Papel y letra ---------- */

:root[data-look='vintage'] body {
  background: var(--h-fondo);
  font-family: var(--vin-sans);
}

:root[data-look='vintage'] .h-fondo,
:root[data-look='vintage'] .h-refr-linea,
:root[data-look='vintage'] .h-tab-luz,
:root[data-look='vintage'] .h-tab-barrido,
:root[data-look='vintage'] .h-tabs-aura {
  display: none;
}

:root[data-look='vintage'] :is(h1, .serif, .entrada-card h1) {
  font-family: var(--vin-serif);
  font-weight: 600;
  letter-spacing: -.01em;
}

:root[data-look='vintage'] h1 {
  font-size: clamp(28px, 2.6vw, 34px);
  line-height: 1.15;
}

:root[data-look='vintage'] .h-monograma {
  background: #22190f;
  color: #fbf8f2;
  border-radius: 10px;
}

:root[data-look='vintage'][data-tema='noche'] .h-monograma {
  background: #f3ebdf;
  color: #22190f;
}

/* ---------- Superficies: tarjetas blancas con línea fina ---------- */

:root[data-look='vintage'] :is(.h-card, .surface) {
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px var(--h-linea);
}

:root[data-look='vintage'] .cl-dialog,
:root[data-look='vintage'] .h-mas-hoja {
  border-radius: 16px;
  box-shadow: 0 0 0 1px var(--h-linea), var(--h-sombra-3);
}

:root[data-look='vintage'] .input {
  border-radius: 12px;
  border-color: var(--h-borde);
  background: var(--h-papel);
}

:root[data-look='vintage'] :is(.badge, .cl-badge) {
  border-radius: 999px;
  background: var(--vin-relleno);
  border-color: transparent;
  color: var(--h-tinta-2);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 600;
}

/* ---------- Botones de píldora ---------- */

:root[data-look='vintage'] .btn {
  border-radius: 999px;
  font-weight: 600;
}

:root[data-look='vintage'] .btn-primary {
  box-shadow: none;
}

:root[data-look='vintage'] .btn-secondary {
  border-color: transparent;
  background: var(--vin-relleno);
}

:root[data-look='vintage'] .btn-secondary:hover,
:root[data-look='vintage'] .btn-ghost:hover {
  background: var(--vin-relleno-fuerte);
}

/* ---------- La barra lateral (escritorio y tableta) ---------- */

@media (min-width: 761px) {
  :root[data-look='vintage'] .h-app {
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    max-width: none;
    margin: 0;
    padding: 0;
    min-height: 100dvh;
  }

  :root[data-look='vintage'] .h-tabs {
    grid-column: 1;
    grid-row: 1 / -1;
    position: sticky;
    top: 0;
    z-index: 20;
    height: 100dvh;
    margin: 0;
    padding: 26px 14px 20px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    overflow-y: auto;
    background: var(--vin-lateral);
    border-right: 1px solid var(--h-linea);
  }

  :root[data-look='vintage'] .h-lateral-marca {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 12px 22px;
  }

  :root[data-look='vintage'] .h-lateral-marca strong {
    font: 600 22px/1.15 var(--vin-serif);
    color: var(--h-tinta);
  }

  :root[data-look='vintage'] .h-lateral-marca span {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--h-tinta-2);
  }

  :root[data-look='vintage'] .h-tab-wrap {
    height: auto;
    display: block;
  }

  :root[data-look='vintage'] .h-tab,
  :root[data-look='vintage'] .h-tab:hover,
  :root[data-look='vintage'] .h-tab-wrap.activa .h-tab {
    width: 100%;
    height: 40px;
    margin: 0;
    padding: 0 12px 0 28px;
    justify-content: flex-start;
    border-radius: 12px;
    background: transparent;
    box-shadow: none;
    color: var(--h-tinta-3);
    font-size: 15px;
    font-weight: 500;
    transition: background-color var(--h-dur-1) var(--h-curva);
  }

  :root[data-look='vintage'] .h-tab:hover {
    background: var(--vin-relleno);
  }

  :root[data-look='vintage'] .h-tab-wrap.activa .h-tab {
    background: var(--vin-relleno-fuerte);
    color: var(--h-tinta);
    font-weight: 600;
  }

  /* La abierta lleva el punto de cobre, como el panel clásico. */
  :root[data-look='vintage'] .h-tab-wrap.activa .h-tab::before {
    content: '';
    position: absolute;
    left: 13px;
    top: 50%;
    bottom: auto;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-radius: 50%;
    background: var(--vin-cobre);
  }

  :root[data-look='vintage'] .h-tab-wrap.activa .h-tab::after {
    display: none;
  }

  :root[data-look='vintage'] .h-topbar {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: 0;
    height: 64px;
    padding: 0 28px 0 32px;
    border: 0;
    border-bottom: 1px solid var(--h-linea);
    border-radius: 0;
    background: var(--h-vidrio);
    box-shadow: none;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  /* La clínica ya está arriba de la barra lateral. */
  :root[data-look='vintage'] .h-topbar .h-marca,
  :root[data-look='vintage'] .h-topbar .h-sep {
    display: none;
  }

  :root[data-look='vintage'] .h-hoja {
    grid-column: 2;
    grid-row: 2;
    width: 100%;
    max-width: 1160px;
    min-height: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  :root[data-look='vintage'] .h-hoja > .screen {
    padding: 30px 32px 48px;
  }

  :root[data-look='vintage'] .cl-demo-footer {
    grid-column: 2;
  }

  /* El aviso de los canales va al pie de la barra lateral, donde no tapa la acción principal de cada pantalla. */
  :root[data-look='vintage'] .cl-header-connection {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 21;
    max-width: 204px;
    margin: 0;
  }
}

/* ---------- Celular: barra inferior plana ---------- */

@media (max-width: 760px) {
  :root[data-look='vintage'] .h-topbar {
    border-radius: 14px;
    background: var(--h-vidrio);
    border-color: var(--h-linea);
    box-shadow: none;
  }

  :root[data-look='vintage'] .h-hoja {
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  :root[data-look='vintage'] .h-bottom {
    border: 1px solid var(--h-linea);
    background: var(--h-vidrio);
    box-shadow: 0 12px 30px -20px rgba(46, 35, 21, .5);
  }

  :root[data-look='vintage'] .h-bottom-btn.activa {
    background: var(--vin-relleno-fuerte);
    box-shadow: none;
  }
}

/* Con la barra lateral, entre 761 y 1023 px el nombre y la vista de la cuenta no caben en el encabezado: queda el avatar. */
@media (min-width: 761px) and (max-width: 1023px) {
  :root[data-look='vintage'] .h-cuenta-texto{display:none}
}