/* =====================================================================
   Panel 209 · Estilo «Calma».
   ---------------------------------------------------------------------
   El más «de consulta»: salvia, arena y piedra; formas muy redondeadas,
   letra con más aire y un fondo que respira despacio (un ciclo de unos
   12 s, como una respiración guiada). El color de la consulta entra
   templado con salvia, para que nada grite. Los avisos van en terracota
   (el riesgo, en un terracota más intenso), no en rojo chillón.
   ===================================================================== */

html[data-estilo="suave"][data-tema="calma"] {
  --salvia: #7E9C86;
  --arena: #E9E2D3;
  --piedra: #EEF0EA;
  --sereno: color-mix(in oklab, var(--marca) 45%, var(--salvia));   /* el acento de este estilo */
  --sereno-tinta: color-mix(in oklab, var(--sereno) 70%, #1d2a22);
  --fondo: var(--piedra);
  --text-dark: #26302A;
  --text-muted: #67736B;
  --divider: rgba(38, 48, 42, .09);
  --dash-bg: rgba(38, 48, 42, .04);
  --vidrio: rgba(252, 251, 247, .66);
  --vidrio-fuerte: rgba(252, 251, 247, .86);
  --vidrio-borde: rgba(255, 255, 255, .85);
  --vidrio-reflejo: linear-gradient(180deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 45%);
  --clear: rgba(252, 251, 247, .7);
  --sombra-vidrio: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(38, 48, 42, .05), 0 22px 48px -30px rgba(38, 60, 45, .35);
  --sombra-flota: inset 0 1px 0 rgba(255, 255, 255, .9), 0 30px 60px -30px rgba(38, 60, 45, .4);
  --t-sesion: var(--sereno); --t-despacho: var(--sereno); --t-whatsapp: var(--sereno);
  --t-pendiente: #B5713D;
  --t-riesgo: #B4452F;
  --accion: color-mix(in oklab, var(--sereno) 82%, #000);
  --accion-oscura: color-mix(in oklab, var(--sereno) 68%, #000);
  --r-xl: 30px; --r-lg: 24px; --r-md: 16px; --r-sm: 12px;
  --foto-factor: .6; --foto-saturacion: .45;
}
html[data-estilo="suave"][data-tema="calma"][data-theme="dark"] {
  --piedra: #161B17;
  --fondo: #161B17;
  --text-dark: #E6EBE4;
  --text-muted: #A3AEA4;
  --divider: rgba(230, 240, 230, .09);
  --dash-bg: rgba(230, 240, 230, .05);
  --vidrio: rgba(30, 38, 32, .6);
  --vidrio-fuerte: rgba(28, 35, 30, .85);
  --vidrio-borde: rgba(230, 240, 230, .08);
  --clear: rgba(30, 38, 32, .62);
  --sombra-vidrio: inset 0 1px 0 rgba(255, 255, 255, .06), 0 22px 48px -28px rgba(0, 0, 0, .8);
  --sereno: color-mix(in oklab, var(--marca) 40%, #9DBBA4);
  --sereno-tinta: color-mix(in oklab, var(--sereno) 70%, #fff);
  --t-pendiente: #D99A62; --t-riesgo: #E07A63;
}

/* ---------------------------------------------------------------- el fondo que respira
   Los halos van en una capa aparte (body::after) que solo cambia de tamaño y de opacidad: eso lo hace
   la tarjeta gráfica sola, así que respirar no cuesta nada ni en el móvil. */
html[data-estilo="suave"][data-tema="calma"] body { background: var(--fondo); }
html[data-estilo="suave"][data-tema="calma"] body::after {
  content: ""; position: fixed; inset: -10%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(42% 40% at 86% 10%, color-mix(in oklab, var(--salvia) 36%, transparent), transparent 70%),
    radial-gradient(40% 38% at 8% 92%, color-mix(in oklab, var(--arena) 95%, transparent), transparent 72%),
    radial-gradient(30% 28% at 50% 52%, color-mix(in oklab, var(--sereno) 14%, transparent), transparent 70%);
  animation: calma-respira 12s ease-in-out infinite;
  will-change: transform, opacity;
}
html[data-estilo="suave"][data-tema="calma"][data-theme="dark"] body::after {
  background:
    radial-gradient(42% 40% at 86% 10%, color-mix(in oklab, var(--salvia) 22%, transparent), transparent 70%),
    radial-gradient(40% 38% at 8% 92%, color-mix(in oklab, var(--sereno) 18%, transparent), transparent 72%);
}
/* Inspira (6 s): el halo crece y se aviva; espira (6 s): vuelve. */
@keyframes calma-respira { 0%, 100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.12); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { html[data-estilo="suave"][data-tema="calma"] body::after { animation: none; } }

/* ---------------------------------------------------------------- superficies, letra y aire */
html[data-estilo="suave"][data-tema="calma"] :is(.saludo, .kpi, .mt-tarjeta, .pl-cifra, .pendientes, .hz-tarjeta, .panel) {
  background: var(--vidrio-reflejo), var(--clear);
  box-shadow: var(--sombra-vidrio);
  border-color: var(--vidrio-borde);
}
html[data-estilo="suave"][data-tema="calma"] :is(h1, h2, p, span, b, strong, small, div, a) { text-shadow: none; }
html[data-estilo="suave"][data-tema="calma"] :is(.vista, .view) { line-height: 1.55; }
html[data-estilo="suave"][data-tema="calma"] :is(.view-cabecera h1, .mt-cab h1, .saludo-texto h1) { font-weight: 600; letter-spacing: -.015em; }
html[data-estilo="suave"][data-tema="calma"] .kpi { padding: 22px 24px; }
html[data-estilo="suave"][data-tema="calma"] .kpi .kpi-valor { color: var(--text-dark); font-weight: 600; }
html[data-estilo="suave"][data-tema="calma"] .kpi-nombre { color: var(--text-dark); font-weight: 600; }
html[data-estilo="suave"][data-tema="calma"] .lista li { background: rgba(255, 255, 255, .55); border-radius: 18px; box-shadow: none; }
html[data-estilo="suave"][data-tema="calma"][data-theme="dark"] .lista li { background: rgba(255, 255, 255, .04); }

/* ---------------------------------------------------------------- Inicio */
html[data-estilo="suave"][data-tema="calma"] #inicio-root .kpis .kpi:nth-child(n) { --t: var(--sereno); }
html[data-estilo="suave"][data-tema="calma"] #inicio-root .kpis .kpi.aviso:nth-child(n) { --t: var(--t-pendiente); }
html[data-estilo="suave"][data-tema="calma"] #inicio-root .kpis .kpi.alerta:nth-child(n) { --t: var(--t-riesgo); }
html[data-estilo="suave"][data-tema="calma"] .kpi.alerta :is(.kpi-valor, .kpi-nombre) { color: var(--t-riesgo); }
html[data-estilo="suave"][data-tema="calma"] .kpi.aviso .kpi-valor { color: var(--t-pendiente); }
html[data-estilo="suave"][data-tema="calma"] .kpi-icono {
  color: var(--sereno-tinta); background: color-mix(in oklab, var(--t, var(--sereno)) 14%, transparent);
  box-shadow: none; border-radius: 50%;
}
html[data-estilo="suave"][data-tema="calma"] .kpi.alerta .kpi-icono { color: var(--t-riesgo); }
html[data-estilo="suave"][data-tema="calma"] .kpi-tend { background: rgba(255, 255, 255, .5); box-shadow: none; }
html[data-estilo="suave"][data-tema="calma"] .kpi .kpi-luz::before { opacity: .55; }
html[data-estilo="suave"][data-tema="calma"] .kpi .kpi-luz::after { opacity: .4; }
html[data-estilo="suave"][data-tema="calma"] .reloj-s { color: var(--sereno-tinta); }

/* ---------------------------------------------------------------- menú, botones, controles */
html[data-estilo="suave"][data-tema="calma"] .nav-item { border-radius: 999px; }
html[data-estilo="suave"][data-tema="calma"] .nav-item.active {
  background: color-mix(in oklab, var(--sereno) 18%, transparent); color: var(--sereno-tinta); box-shadow: none;
}
html[data-estilo="suave"][data-tema="calma"] .nav-item:hover:not(.active) { background: rgba(255, 255, 255, .45); }
html[data-estilo="suave"][data-tema="calma"][data-theme="dark"] .nav-item:hover:not(.active) { background: rgba(255, 255, 255, .05); }
html[data-estilo="suave"][data-tema="calma"] .btn { border-radius: 999px; }
html[data-estilo="suave"][data-tema="calma"] .btn-primario:not(#view-conversaciones *) {
  background: var(--accion); border-color: transparent; color: #fff;
  box-shadow: 0 10px 22px -12px color-mix(in oklab, var(--sereno) 90%, transparent);
}
html[data-estilo="suave"][data-tema="calma"] .btn-primario:not(#view-conversaciones *):hover { background: var(--accion-oscura); }
html[data-estilo="suave"][data-tema="calma"] :is(.btn-secundario, .btn-peligro):not(#view-conversaciones *) {
  background: rgba(255, 255, 255, .7); border-color: rgba(38, 48, 42, .1); box-shadow: none;
}
html[data-estilo="suave"][data-tema="calma"][data-theme="dark"] :is(.btn-secundario, .btn-peligro):not(#view-conversaciones *) {
  background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .1);
}
html[data-estilo="suave"][data-tema="calma"] .campo:not(#view-conversaciones *) { border-radius: 14px; }
html[data-estilo="suave"][data-tema="calma"] .campo:not(#view-conversaciones *):focus {
  border-color: var(--sereno); box-shadow: 0 0 0 4px color-mix(in oklab, var(--sereno) 18%, transparent);
}
html[data-estilo="suave"][data-tema="calma"] :is(.ag-segmento, .mt-rangos, .mt-pestanas, .reloj-modos, .pa-modos) {
  background: color-mix(in oklab, var(--salvia) 14%, transparent); box-shadow: none; border-radius: 999px;
}
html[data-estilo="suave"][data-tema="calma"] :is(.mt-rango, .mt-pestana, .reloj-modos button, .pa-modo) { border-radius: 999px; }
html[data-estilo="suave"][data-tema="calma"] :is(.mt-rango.activo, .mt-pestana.activo, .reloj-modos button[aria-pressed="true"], .pa-modo.activo) {
  background: var(--vidrio-fuerte); color: var(--sereno-tinta); box-shadow: 0 4px 12px -6px rgba(38, 60, 45, .35);
}

/* ---------------------------------------------------------------- agenda: tonos templados */
html[data-estilo="suave"][data-tema="calma"] .ag-cita {
  border-radius: 14px;
  background: color-mix(in oklab, var(--ag-color, var(--sereno)) 10%, rgba(252, 251, 247, .92));
  border-color: color-mix(in oklab, var(--ag-color, var(--sereno)) 20%, transparent);
  box-shadow: inset 3px 0 0 color-mix(in oklab, var(--ag-color, var(--sereno)) 75%, var(--salvia)), 0 4px 12px -10px rgba(38, 60, 45, .4);
}
html[data-estilo="suave"][data-tema="calma"][data-theme="dark"] .ag-cita { background: color-mix(in oklab, var(--ag-color, var(--sereno)) 16%, rgba(30, 38, 32, .9)); }
html[data-estilo="suave"][data-tema="calma"] .ag-cab.hoy strong { color: var(--sereno-tinta); }