/* =====================================================================
   Panel 206 · Estilo «claro» (sobre el suave del 166). Desde el 207 se elige en
   Ajustes → Estilo del panel: todo va bajo html[data-tema="claro"].
   ---------------------------------------------------------------------
   Lo de antes tenía demasiados colores a la vez: cada tarjeta su tono
   (naranja, verde azulado, verde, rojo), manchas de color en el fondo,
   cristal teñido… y el rojo del riesgo, que es lo que importa, se perdía.
   Ahora, como Apple:
     1. Base neutra: gris muy claro de fondo, superficies blancas de cristal
        esmerilado, filos finos y sombras cortas y neutras. Texto casi negro.
     2. UN acento: el color de la consulta (Ajustes → Identidad), o el propio
        de «Mi cuenta» si alguien lo cambia. Iconos, luz de las tarjetas,
        botones, pestaña activa, día de hoy, mapas de calor… todo con él.
     3. Color de aviso solo cuando avisa: rojo si hay riesgo sin revisar,
        naranja si os toca responder. Si no hay nada, la tarjeta es como las demás.
   Los colores de cada profesional (agenda, estadísticas) se quedan, más
   suaves, porque ahí sí dicen algo. La pantalla de WhatsApp no cambia.
   Va cargado después de todo lo demás: solo sobrescribe colores y materiales.
   ===================================================================== */

html[data-estilo="suave"][data-tema="claro"]:not([data-theme="dark"]) {
  --fondo: #F2F2F5;
  --text-dark: #1D1D1F;
  --text-muted: #6E6E73;
  --divider: rgba(0, 0, 0, .075);
  --dash-bg: rgba(0, 0, 0, .035);
  --vidrio: rgba(255, 255, 255, .74);
  --vidrio-fuerte: rgba(255, 255, 255, .86);
  --vidrio-borde: rgba(255, 255, 255, .9);
  --vidrio-reflejo: linear-gradient(180deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 40%);
  --clear: rgba(255, 255, 255, .72);
  --canto: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(255, 255, 255, .5);
  --sombra-vidrio: var(--canto), 0 0 0 1px rgba(0, 0, 0, .045), 0 1px 2px rgba(0, 0, 0, .04), 0 14px 34px -20px rgba(0, 0, 0, .22);
  --sombra-flota: var(--canto), 0 0 0 1px rgba(0, 0, 0, .05), 0 24px 50px -24px rgba(0, 0, 0, .3);
  /* Un solo acento: todo lo que antes tenía su color por tipo, ahora el de la consulta. */
  --t-sesion: var(--marca);
  --t-despacho: var(--marca);
  --t-whatsapp: var(--marca);
  --acento-tinta: color-mix(in oklab, var(--marca) 78%, #000);   /* el acento como texto: se lee sobre blanco */
  --acento-suave: color-mix(in oklab, var(--marca) 11%, #fff);
  /* Solo para avisar. */
  --t-pendiente: #C2620A;
  --t-riesgo: #D70015;
  --foto-opacidad: .22;
}
html[data-estilo="suave"][data-tema="claro"][data-theme="dark"] {
  --t-sesion: var(--marca-texto);
  --t-despacho: var(--marca-texto);
  --t-whatsapp: var(--marca-texto);
  --acento-tinta: var(--marca-texto);
  --acento-suave: color-mix(in oklab, var(--marca) 22%, transparent);
}

/* ---------------------------------------------------------------- fondo
   Gris claro con un solo resplandor del acento (arriba a la derecha) y otro
   más leve abajo: el cristal tiene algo que dejar ver, sin carnaval de manchas.
   La foto de la consulta queda como un susurro, sin color. */
html[data-estilo="suave"][data-tema="claro"]:not([data-theme="dark"]) body {
  background:
    radial-gradient(48vw 40vw at 96% 0%, color-mix(in oklab, var(--marca) 16%, transparent), transparent 70%),
    radial-gradient(40vw 34vw at 0% 100%, color-mix(in oklab, var(--marca) 9%, transparent), transparent 72%),
    var(--fondo);
  background-attachment: fixed;
}
/* El fondo (css/fondos.css): aquí se deja ver la mitad y casi sin color. */
html[data-estilo="suave"][data-tema="claro"] { --foto-factor: .45; }
html[data-estilo="suave"][data-tema="claro"]:not([data-theme="dark"]) { --foto-saturacion: .2; --foto-brillo: 1.08; }

/* ---------------------------------------------------------------- superficies
   Cristal blanco esmerilado, igual en todas: menú, saludo, tarjetas, paneles. */
html[data-estilo="suave"][data-tema="claro"]:not([data-theme="dark"]) :is(.saludo, .kpi, .mt-tarjeta, .pl-cifra, .pendientes, .hz-tarjeta) {
  background: var(--vidrio-reflejo), var(--clear);
  box-shadow: var(--sombra-vidrio);
  border-color: var(--vidrio-borde);
}
html[data-estilo="suave"][data-tema="claro"]:not([data-theme="dark"]) #inicio-root .paneles .panel:is(:nth-child(1), :nth-child(2)) {
  background: var(--vidrio-reflejo), var(--clear);
}
html[data-estilo="suave"][data-tema="claro"]:not([data-theme="dark"]) .mt-tarjeta.destacada { background: var(--vidrio-reflejo), var(--clear); }
html[data-estilo="suave"][data-tema="claro"]:not([data-theme="dark"]) .mt-tarjeta.destacada .mt-t-valor { color: var(--acento-tinta); }
html[data-estilo="suave"][data-tema="claro"]:not([data-theme="dark"]) .wa-resumen { background: rgba(255, 255, 255, .45); box-shadow: var(--canto), 0 0 0 1px rgba(0, 0, 0, .04); }
html[data-estilo="suave"][data-tema="claro"]:not([data-theme="dark"]) :is(.nav-sidebar, .saludo, .kpi, .mt-tarjeta, .pl-cifra) {
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
}
html[data-estilo="suave"][data-tema="claro"]:not([data-theme="dark"]) .nav-sidebar { background: rgba(255, 255, 255, .62); }
/* Sobre blanco ya no hace falta el halo detrás de las letras. */
html[data-estilo="suave"][data-tema="claro"]:not([data-theme="dark"]) :is(.nav-sidebar, .saludo, .kpi, .mt-tarjeta, .pl-cifra) :is(h1, h2, p, span, b, strong, small, div, a),
html[data-estilo="suave"][data-tema="claro"]:not([data-theme="dark"]) :is(.mt-t-valor, .mt-cifra, .alm-grande, .sg-n, .pl-cifra b) { text-shadow: none; }
html[data-estilo="suave"][data-tema="claro"]:not([data-theme="dark"]) .lista li { background: rgba(255, 255, 255, .8); box-shadow: 0 0 0 1px rgba(0, 0, 0, .04); }
html[data-estilo="suave"][data-tema="claro"]:not([data-theme="dark"]) :is(.tabla-wrap, #agenda-root, .cajon) { background: rgba(255, 255, 255, .84); }
html[data-estilo="suave"][data-tema="claro"]:not([data-theme="dark"]) .tabla th { background: rgba(0, 0, 0, .025); color: var(--text-muted); }

/* ---------------------------------------------------------------- Inicio: tarjetas
   Todas iguales y en el acento. Rojo solo con riesgo sin revisar; naranja
   solo cuando os toca responder. */
/* (:nth-child(n) solo sube la especificidad para ganar a las de cada tarjeta del 166) */
html[data-estilo="suave"][data-tema="claro"] #inicio-root .kpis .kpi:nth-child(n) { --t: var(--marca); }
html[data-estilo="suave"][data-tema="claro"][data-theme="dark"] #inicio-root .kpis .kpi:nth-child(n) { --t: var(--marca-texto); }
html[data-estilo="suave"][data-tema="claro"] #inicio-root .kpis .kpi.aviso:nth-child(n) { --t: var(--t-pendiente); }
html[data-estilo="suave"][data-tema="claro"] #inicio-root .kpis .kpi.alerta:nth-child(n) { --t: var(--t-riesgo); }
html[data-estilo="suave"][data-tema="claro"]:not([data-theme="dark"]) .kpi {
  background: var(--vidrio-reflejo), var(--clear);
  box-shadow: var(--sombra-vidrio);
}
html[data-estilo="suave"][data-tema="claro"]:not([data-theme="dark"]) .kpi .kpi-valor { color: var(--text-dark); text-shadow: none; }
html[data-estilo="suave"][data-tema="claro"]:not([data-theme="dark"]) .kpi.alerta .kpi-valor,
html[data-estilo="suave"][data-tema="claro"]:not([data-theme="dark"]) .kpi.alerta .kpi-nombre { color: var(--t-riesgo); }
html[data-estilo="suave"][data-tema="claro"]:not([data-theme="dark"]) .kpi.aviso .kpi-valor { color: var(--t-pendiente); }
html[data-estilo="suave"][data-tema="claro"]:not([data-theme="dark"]) .kpi.alerta {
  background: var(--vidrio-reflejo), color-mix(in oklab, var(--t-riesgo) 6%, var(--clear));
}
html[data-estilo="suave"][data-tema="claro"]:not([data-theme="dark"]) .kpi.aviso {
  box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--t-pendiente) 40%, transparent), var(--sombra-vidrio);
}
html[data-estilo="suave"][data-tema="claro"]:not([data-theme="dark"]) .kpi-detalle { color: var(--text-muted); }
html[data-estilo="suave"][data-tema="claro"]:not([data-theme="dark"]) .kpi-nombre { color: var(--text-dark); }
/* El icono: baldosa plana en el acento, sin brillos. */
html[data-estilo="suave"][data-tema="claro"]:not([data-theme="dark"]) .kpi-icono {
  color: color-mix(in oklab, var(--t, var(--marca)) 82%, #000);
  background: color-mix(in oklab, var(--t, var(--marca)) 11%, #fff);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--t, var(--marca)) 14%, transparent);
}
html[data-estilo="suave"][data-tema="claro"]:not([data-theme="dark"]) .kpi-tend {
  background: rgba(0, 0, 0, .04); box-shadow: none; --tc: #8E8E93;
}
html[data-estilo="suave"][data-tema="claro"]:not([data-theme="dark"]) .kpi-tend.bien { --tc: #248A3D; }
html[data-estilo="suave"][data-tema="claro"]:not([data-theme="dark"]) .kpi-tend.mal { --tc: #D70015; }
html[data-estilo="suave"][data-tema="claro"]:not([data-theme="dark"]) .saludo { background: var(--vidrio-reflejo), var(--clear); }

/* ---------------------------------------------------------------- menú */
html[data-estilo="suave"][data-tema="claro"]:not([data-theme="dark"]) .nav-item.active {
  background: var(--acento-suave);
  color: var(--acento-tinta);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--marca) 14%, transparent);
}
html[data-estilo="suave"][data-tema="claro"]:not([data-theme="dark"]) .nav-item.active :is(svg, span) { color: var(--acento-tinta); }
html[data-estilo="suave"][data-tema="claro"]:not([data-theme="dark"]) .nav-item:hover:not(.active) { background: rgba(0, 0, 0, .04); }

/* ---------------------------------------------------------------- botones y controles */
html[data-estilo="suave"][data-tema="claro"]:not([data-theme="dark"]) .btn-primario:not(#view-conversaciones *) {
  background: var(--accion);
  border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(0, 0, 0, .12), 0 8px 18px -10px color-mix(in oklab, var(--marca) 70%, transparent);
}
html[data-estilo="suave"][data-tema="claro"]:not([data-theme="dark"]) .btn-primario:not(#view-conversaciones *):hover {
  background: var(--accion-oscura);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(0, 0, 0, .12), 0 12px 24px -12px color-mix(in oklab, var(--marca) 80%, transparent);
}
html[data-estilo="suave"][data-tema="claro"]:not([data-theme="dark"]) :is(.btn-secundario, .btn-peligro):not(#view-conversaciones *) {
  background: #fff;
  border-color: rgba(0, 0, 0, .09);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
html[data-estilo="suave"][data-tema="claro"]:not([data-theme="dark"]) .btn-secundario:not(#view-conversaciones *):hover { background: #fafafa; border-color: rgba(0, 0, 0, .14); }
html[data-estilo="suave"][data-tema="claro"]:not([data-theme="dark"]) .btn-secundario:not(#view-conversaciones *):active { box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); }
html[data-estilo="suave"][data-tema="claro"]:not([data-theme="dark"]) .campo:not(#view-conversaciones *) {
  background: #fff;
  border-color: rgba(0, 0, 0, .1);
  box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-estilo="suave"][data-tema="claro"]:not([data-theme="dark"]) .campo:not(#view-conversaciones *):focus {
  border-color: color-mix(in oklab, var(--marca) 60%, #fff);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--marca) 16%, transparent);
}
/* Selectores de varias posiciones: el de iOS (carril gris, pieza blanca). */
html[data-estilo="suave"][data-tema="claro"]:not([data-theme="dark"]) :is(.ag-segmento, .mt-rangos, .mt-pestanas, .reloj-modos, .pa-modos) {
  background: rgba(118, 118, 128, .12);
  box-shadow: none;
}
html[data-estilo="suave"][data-tema="claro"]:not([data-theme="dark"]) :is(.mt-rango.activo, .mt-pestana.activo, .reloj-modos button[aria-pressed="true"], .pa-modo.activo) {
  background: #fff;
  color: var(--text-dark);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .12), 0 3px 1px rgba(0, 0, 0, .04);
}

/* ---------------------------------------------------------------- agenda
   Los colores de cada profesional se quedan (dicen de quién es la cita),
   pero más suaves: la tarjeta casi blanca con su raya de color. */
html[data-estilo="suave"][data-tema="claro"]:not([data-theme="dark"]) .ag-cita {
  background: color-mix(in oklab, var(--ag-color, var(--marca)) 9%, #fff);
  border-color: color-mix(in oklab, var(--ag-color, var(--marca)) 18%, rgba(0, 0, 0, .05));
  box-shadow: inset 3px 0 0 var(--ag-color, var(--marca)), 0 1px 2px rgba(0, 0, 0, .05);
}
html[data-estilo="suave"][data-tema="claro"]:not([data-theme="dark"]) .ag-cita.pendiente {
  background: #fff; border-color: color-mix(in oklab, var(--t-pendiente) 55%, transparent);
  box-shadow: inset 3px 0 0 var(--t-pendiente), 0 1px 2px rgba(0, 0, 0, .05);
}
html[data-estilo="suave"][data-tema="claro"]:not([data-theme="dark"]) .ag-cita.realizada { background: rgba(255, 255, 255, .7); }
html[data-estilo="suave"][data-tema="claro"]:not([data-theme="dark"]) .ag-cab.hoy strong { color: var(--acento-tinta); }

/* ---------------------------------------------------------------- avisos que siguen siendo avisos */
html[data-estilo="suave"][data-tema="claro"]:not([data-theme="dark"]) .pendientes { background: var(--vidrio-reflejo), var(--clear); }