/* =====================================================================
   Panel 351 · Estilo «Consulta» (en SyS: «Consulta Silvia Sanz»).
   ---------------------------------------------------------------------
   José Carlos (19/10): «un estilo más propio de como tienen ellos la web, pero sin cambiar cómo están las cosas;
   con nuestros contenedores, pero con ese otro estilo». Como silviasanzpsicologa.com:
     · Fondo claro y limpio (blanco marfil), tarjetas blancas lisas con filo fino: nada de cristal teñido.
     · Títulos de sección en MAYÚSCULAS espaciadas, en el azul de la consulta, con una rayita coral debajo,
       como los encabezados de su web («SILVIA SANZ PSICÓLOGA Y SEXÓLOGA»).
     · El azul para lo que se pulsa (botones, pestaña activa); el coral como acento (rayas, el día de hoy, la marca
       de la opción activa del menú). Rojo y ámbar solo para avisar.
   Usa los colores de la marca de cada consulta (Ajustes → Identidad): en SyS, azul #0007DB y coral #EE7F6A.
   Solo cambia colores, letra y materiales: la colocación de todo es la de siempre. La pantalla de WhatsApp no cambia.
   ===================================================================== */

html[data-estilo="suave"][data-tema="consulta"] {
  --cs-azul: var(--marca);
  --cs-coral: var(--acento, #EE7F6A);
  --cs-azul-tinta: color-mix(in oklab, var(--cs-azul) 88%, #000);
  --cs-azul-suave: color-mix(in oklab, var(--cs-azul) 8%, #fff);
  --cs-coral-suave: color-mix(in oklab, var(--cs-coral) 14%, #fff);
  --cs-coral-tinta: color-mix(in oklab, var(--cs-coral) 72%, #000);   /* el coral como texto: se lee sobre blanco */
  --fondo: #FBF8F5;
  --text-dark: #1B1D2A;
  --text-muted: #5F6274;
  --divider: color-mix(in oklab, var(--cs-azul) 9%, rgba(0, 0, 0, .06));
  --dash-bg: color-mix(in oklab, var(--cs-azul) 4%, #F6F3F0);
  --vidrio: #FFFFFF;
  --vidrio-fuerte: #FFFFFF;
  --vidrio-borde: color-mix(in oklab, var(--cs-azul) 10%, #ECE7E2);
  --vidrio-reflejo: linear-gradient(transparent, transparent);
  --clear: #FFFFFF;
  --sombra-vidrio: 0 0 0 1px var(--vidrio-borde), 0 1px 2px rgba(20, 22, 60, .04), 0 12px 28px -22px rgba(20, 22, 60, .28);
  --sombra-flota: 0 0 0 1px var(--vidrio-borde), 0 24px 50px -26px rgba(20, 22, 60, .35);
  --t-sesion: var(--cs-azul); --t-despacho: var(--cs-azul); --t-whatsapp: var(--cs-azul);
  --t-pendiente: #B8640E;
  --t-riesgo: #C8102E;
  --accion: var(--cs-azul);
  --accion-oscura: var(--cs-azul-tinta);
  --r-xl: 18px; --r-lg: 14px; --r-md: 12px; --r-sm: 8px;
  --foto-factor: .35; --foto-saturacion: .35; --foto-brillo: 1.1;
}
html[data-estilo="suave"][data-tema="consulta"][data-theme="dark"] {
  --cs-azul: color-mix(in oklab, var(--marca) 62%, #fff);
  --cs-azul-tinta: color-mix(in oklab, var(--marca) 45%, #fff);
  --cs-azul-suave: color-mix(in oklab, var(--marca) 26%, transparent);
  --cs-coral-suave: color-mix(in oklab, var(--cs-coral) 22%, transparent);
  --cs-coral-tinta: var(--cs-coral);
  --fondo: #0A0C1F;
  --text-dark: #ECEEF8;
  --text-muted: #A2A6BF;
  --divider: rgba(255, 255, 255, .08);
  --dash-bg: rgba(255, 255, 255, .045);
  --vidrio: #12152E;
  --vidrio-fuerte: #141834;
  --vidrio-borde: rgba(255, 255, 255, .08);
  --clear: #12152E;
  --sombra-vidrio: 0 0 0 1px var(--vidrio-borde), 0 18px 40px -28px rgba(0, 0, 0, .9);
  --sombra-flota: 0 0 0 1px var(--vidrio-borde), 0 28px 60px -30px rgba(0, 0, 0, .95);
  --accion: color-mix(in oklab, var(--marca) 80%, #fff);
  --t-pendiente: #F0A956; --t-riesgo: #FF6B6B;
  --foto-factor: .3; --foto-brillo: .5; --foto-saturacion: .4;
}

/* ---------------------------------------------------------------- fondo: limpio, con un toque de su color */
html[data-estilo="suave"][data-tema="consulta"] body {
  background:
    radial-gradient(46vw 36vw at 100% 0%, color-mix(in oklab, var(--cs-azul) 9%, transparent), transparent 70%),
    radial-gradient(38vw 30vw at 0% 100%, color-mix(in oklab, var(--cs-coral) 10%, transparent), transparent 72%),
    var(--fondo);
  background-attachment: fixed;
}

/* ---------------------------------------------------------------- superficies: blancas y lisas */
html[data-estilo="suave"][data-tema="consulta"] :is(.saludo, .kpi, .mt-tarjeta, .pl-cifra, .pendientes, .hz-tarjeta, .panel, .vidrio,
     .nav-sidebar, .cajon, .tabla-wrap, #agenda-root, .mt-bloque) {
  background: var(--clear);
  border-color: var(--vidrio-borde);
  box-shadow: var(--sombra-vidrio);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-estilo="suave"][data-tema="consulta"] :is(h1, h2, h3, p, span, b, strong, small, div, a) { text-shadow: none; }
html[data-estilo="suave"][data-tema="consulta"] .lista li { background: var(--dash-bg); box-shadow: none; }
html[data-estilo="suave"][data-tema="consulta"] .tabla th { background: var(--cs-azul-suave); color: var(--cs-azul-tinta);
  text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; font-weight: 700; }

/* ---------------------------------------------------------------- títulos como los de su web */
html[data-estilo="suave"][data-tema="consulta"] :is(.view-cabecera h1, .mt-cab h1, .aj-cab h1, .tf-cab h1) {
  color: var(--cs-azul-tinta); text-transform: uppercase; letter-spacing: .06em; font-weight: 800; font-size: clamp(19px, 1.6vw, 24px);
}
html[data-estilo="suave"][data-tema="consulta"] :is(.panel, .vc-bloque, .mt-bloque, .pendientes) > :is(h2, h3):first-child,
html[data-estilo="suave"][data-tema="consulta"] .panel > h2 {
  color: var(--cs-azul-tinta); text-transform: uppercase; letter-spacing: .1em; font-size: .82rem; font-weight: 800;
}
html[data-estilo="suave"][data-tema="consulta"] :is(.panel, .vc-bloque, .mt-bloque) > h2:first-child::after {
  content: ""; display: block; width: 28px; height: 3px; margin-top: 7px; border-radius: 2px; background: var(--cs-coral);
}
/* El título de cada pantalla, como los de su web (el saludo de Inicio, no). */
html[data-estilo="suave"][data-tema="consulta"] .view:not(#view-conversaciones) h1:not(.saludo-texto h1, .cajon h1) {
  color: var(--cs-azul-tinta); text-transform: uppercase; letter-spacing: .06em; font-weight: 800; font-size: clamp(19px, 1.6vw, 24px);
}
html[data-estilo="suave"][data-tema="consulta"] .view:not(#view-conversaciones) :is(section, .panel) > h2,
html[data-estilo="suave"][data-tema="consulta"] .vc-equipo-cab h2 {
  color: var(--cs-azul-tinta); text-transform: uppercase; letter-spacing: .1em; font-size: .82rem; font-weight: 800;
}
html[data-estilo="suave"][data-tema="consulta"] .saludo-texto h1 { color: var(--cs-azul-tinta); }
html[data-estilo="suave"][data-tema="consulta"] .nav-brand strong { color: var(--cs-azul-tinta); }

/* ---------------------------------------------------------------- Inicio: tarjetas en su azul; avisos, en su color */
html[data-estilo="suave"][data-tema="consulta"] #inicio-root .kpis .kpi:nth-child(n) { --t: var(--cs-azul); }
html[data-estilo="suave"][data-tema="consulta"] #inicio-root .kpis .kpi.aviso:nth-child(n) { --t: var(--t-pendiente); }
html[data-estilo="suave"][data-tema="consulta"] #inicio-root .kpis .kpi.alerta:nth-child(n) { --t: var(--t-riesgo); }
html[data-estilo="suave"][data-tema="consulta"] .kpi .kpi-valor { color: var(--text-dark); }
html[data-estilo="suave"][data-tema="consulta"] .kpi.alerta :is(.kpi-valor, .kpi-nombre) { color: var(--t-riesgo); }
html[data-estilo="suave"][data-tema="consulta"] .kpi.aviso .kpi-valor { color: var(--t-pendiente); }
html[data-estilo="suave"][data-tema="consulta"] .kpi-nombre { color: var(--text-dark); font-weight: 700; }
html[data-estilo="suave"][data-tema="consulta"] .kpi-icono {
  color: var(--t, var(--cs-azul)); background: color-mix(in oklab, var(--t, var(--cs-azul)) 10%, transparent); box-shadow: none;
}
html[data-estilo="suave"][data-tema="consulta"] .kpi .kpi-luz { opacity: 0; }
html[data-estilo="suave"][data-tema="consulta"] .kpi { border-top: 3px solid color-mix(in oklab, var(--t, var(--cs-azul)) 80%, transparent); }
html[data-estilo="suave"][data-tema="consulta"] .kpi-tend { background: var(--dash-bg); box-shadow: none; }
html[data-estilo="suave"][data-tema="consulta"] .mt-tarjeta.destacada .mt-t-valor { color: var(--cs-azul-tinta); }

/* ---------------------------------------------------------------- menú: azul al elegir, con la raya coral */
html[data-estilo="suave"][data-tema="consulta"] .nav-item { border-radius: 10px; }
html[data-estilo="suave"][data-tema="consulta"] .nav-item.active {
  background: var(--cs-azul-suave); color: var(--cs-azul-tinta); box-shadow: inset 3px 0 0 var(--cs-coral);
}
html[data-estilo="suave"][data-tema="consulta"] .nav-item.active :is(svg, span) { color: var(--cs-azul-tinta); }
html[data-estilo="suave"][data-tema="consulta"] .nav-item:hover:not(.active) { background: var(--dash-bg); }
html[data-estilo="suave"][data-tema="consulta"] .nav-grupo { color: var(--cs-coral-tinta); letter-spacing: .12em; }

/* ---------------------------------------------------------------- botones y controles */
html[data-estilo="suave"][data-tema="consulta"] .btn { border-radius: 8px; letter-spacing: .02em; }
html[data-estilo="suave"][data-tema="consulta"] .btn-primario:not(#view-conversaciones *) {
  background: var(--accion); border-color: transparent; color: #fff; font-weight: 700;
  box-shadow: 0 8px 18px -12px color-mix(in oklab, var(--cs-azul) 80%, transparent);
}
html[data-estilo="suave"][data-tema="consulta"] .btn-primario:not(#view-conversaciones *):hover { background: var(--accion-oscura); }
html[data-estilo="suave"][data-tema="consulta"] :is(.btn-secundario, .btn-peligro):not(#view-conversaciones *) {
  background: var(--clear); border-color: var(--vidrio-borde); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-estilo="suave"][data-tema="consulta"] .btn-secundario:not(#view-conversaciones *):hover { border-color: var(--cs-azul); color: var(--cs-azul-tinta); }
html[data-estilo="suave"][data-tema="consulta"] .campo:not(#view-conversaciones *) {
  background: var(--clear); border-color: var(--vidrio-borde); border-radius: 8px; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-estilo="suave"][data-tema="consulta"] .campo:not(#view-conversaciones *):focus {
  border-color: var(--cs-azul); box-shadow: 0 0 0 3px color-mix(in oklab, var(--cs-azul) 16%, transparent);
}
html[data-estilo="suave"][data-tema="consulta"] :is(.ag-segmento, .mt-rangos, .mt-pestanas, .reloj-modos, .pa-modos) {
  background: var(--dash-bg); box-shadow: inset 0 0 0 1px var(--vidrio-borde); border-radius: 10px;
}
html[data-estilo="suave"][data-tema="consulta"] :is(.mt-rango, .mt-pestana, .reloj-modos button, .pa-modo) { border-radius: 8px; }
html[data-estilo="suave"][data-tema="consulta"] :is(.mt-rango.activo, .mt-pestana.activo, .reloj-modos button[aria-pressed="true"], .pa-modo.activo) {
  background: var(--cs-azul); color: #fff; box-shadow: none;
}
html[data-estilo="suave"][data-tema="consulta"][data-theme="dark"] :is(.mt-rango.activo, .mt-pestana.activo, .reloj-modos button[aria-pressed="true"], .pa-modo.activo) {
  color: #0A0C1F;
}
html[data-estilo="suave"][data-tema="consulta"] .chip-filtro.activo { background: var(--cs-azul); color: #fff; border-color: transparent; }

/* ---------------------------------------------------------------- agenda: cada profesional con su color, en blanco */
html[data-estilo="suave"][data-tema="consulta"] .ag-cita {
  border-radius: 8px;
  background: color-mix(in oklab, var(--ag-color, var(--cs-azul)) 8%, var(--clear));
  border-color: color-mix(in oklab, var(--ag-color, var(--cs-azul)) 18%, transparent);
  box-shadow: inset 3px 0 0 var(--ag-color, var(--cs-azul));
}
html[data-estilo="suave"][data-tema="consulta"] .ag-cita.pendiente {
  background: var(--clear); border-color: color-mix(in oklab, var(--t-pendiente) 55%, transparent);
  box-shadow: inset 3px 0 0 var(--t-pendiente);
}
html[data-estilo="suave"][data-tema="consulta"] .ag-cab.hoy strong { color: var(--cs-coral-tinta); }
html[data-estilo="suave"][data-tema="consulta"] #agenda-root { --ag-ahora: var(--cs-coral); }