/* =====================================================================
   Panel 208 · Estilo «Cuaderno».
   ---------------------------------------------------------------------
   Lo contrario de la moda del cristal: el panel como el cuaderno de notas
   de una psicóloga. Papel cálido con una pauta muy tenue, tinta casi negra,
   titulares y cifras con tipografía editorial (Newsreader, la de la marca),
   filetes finos en vez de sombras, y el color de la consulta usado como un
   rotulador: subraya lo importante (el nombre de cada cifra, el apartado
   del menú en el que estás, el día de hoy) en lugar de teñirlo todo.
   Avisos igual que en «Claro»: rojo solo con riesgo, naranja solo si os toca.
   Sin desenfoques ni transparencias: también es el más ligero para el móvil.
   Todo va bajo html[data-tema="cuaderno"] (Ajustes → Estilo del panel).
   ===================================================================== */

html[data-estilo="suave"][data-tema="cuaderno"] {
  --papel: #FFFDF8;
  --tinta: #22201C;
  --fondo: #F6F1E8;
  --text-dark: var(--tinta);
  --text-muted: #6B6358;
  --divider: rgba(70, 52, 30, .13);
  --dash-bg: rgba(70, 52, 30, .045);
  --filete: 1px solid rgba(70, 52, 30, .16);
  --vidrio: var(--papel);
  --vidrio-fuerte: var(--papel);
  --vidrio-borde: rgba(70, 52, 30, .16);
  --vidrio-reflejo: linear-gradient(transparent, transparent);
  --clear: var(--papel);
  --canto: none;
  --sombra-vidrio: 0 1px 0 rgba(70, 52, 30, .06);
  --sombra-flota: 0 1px 0 rgba(70, 52, 30, .06), 0 18px 40px -26px rgba(60, 40, 20, .35);
  --desenfoque: none;
  --t-sesion: var(--marca);
  --t-despacho: var(--marca);
  --t-whatsapp: var(--marca);
  --t-pendiente: #B4570B;
  --t-riesgo: #C4161C;
  --rotulador: color-mix(in oklab, var(--marca) 26%, transparent);   /* el subrayado de rotulador */
  --tinta-acento: color-mix(in oklab, var(--marca) 75%, #000);
  --accion: color-mix(in oklab, var(--marca) 82%, #000);
  --accion-oscura: color-mix(in oklab, var(--marca) 68%, #000);
  --r-xl: 18px; --r-lg: 14px; --r-md: 11px; --r-sm: 8px;
  --foto-opacidad: 0;
  --margen: calc(var(--nav-w, 240px) + 21px);    /* la línea de margen, en el hueco entre el menú y el contenido */
}
html[data-estilo="suave"][data-tema="cuaderno"][data-theme="dark"] {
  --papel: #24211D;
  --tinta: #EFE8DC;
  --fondo: #1A1815;
  --text-muted: #A89F92;
  --divider: rgba(255, 240, 215, .11);
  --dash-bg: rgba(255, 240, 215, .05);
  --filete: 1px solid rgba(255, 240, 215, .13);
  --vidrio-borde: rgba(255, 240, 215, .13);
  --sombra-vidrio: none;
  --sombra-flota: 0 18px 40px -24px rgba(0, 0, 0, .8);
  --t-sesion: var(--marca-texto); --t-despacho: var(--marca-texto); --t-whatsapp: var(--marca-texto);
  --t-pendiente: #E8A04F;
  --t-riesgo: #F2706A;
  --rotulador: color-mix(in oklab, var(--marca) 40%, transparent);
  --tinta-acento: var(--marca-texto);
}

/* ---------------------------------------------------------------- papel pautado
   El fondo es una hoja: color papel, una pauta horizontal casi invisible y
   una línea de margen del color de la consulta a la izquierda del contenido.
   Sin foto de fondo. */
html[data-estilo="suave"][data-tema="cuaderno"] body {
  background:
    linear-gradient(90deg, transparent calc(var(--margen) - 1px), color-mix(in oklab, var(--marca) 22%, transparent) calc(var(--margen) - 1px), color-mix(in oklab, var(--marca) 22%, transparent) var(--margen), transparent var(--margen)),
    repeating-linear-gradient(180deg, transparent 0 31px, rgba(70, 52, 30, .055) 31px 32px),
    var(--fondo);
  background-attachment: fixed;
}
html[data-estilo="suave"][data-tema="cuaderno"][data-theme="dark"] body {
  background:
    linear-gradient(90deg, transparent calc(var(--margen) - 1px), color-mix(in oklab, var(--marca) 30%, transparent) calc(var(--margen) - 1px), color-mix(in oklab, var(--marca) 30%, transparent) var(--margen), transparent var(--margen)),
    repeating-linear-gradient(180deg, transparent 0 31px, rgba(255, 240, 215, .035) 31px 32px),
    var(--fondo);
}
@media (max-width: 860px) { html[data-estilo="suave"][data-tema="cuaderno"] { --margen: 14px; } }
html[data-estilo="suave"][data-tema="cuaderno"] body::before { display: none; }

/* ---------------------------------------------------------------- hojas (superficies)
   Papel liso con un filete fino. Nada de cristal ni desenfoque. */
html[data-estilo="suave"][data-tema="cuaderno"] :is(.vidrio, .nav-sidebar, .panel, .kpi, .tabla-wrap, .saludo, .cajon, .agenda-raiz,
    .mt-tarjeta, .pl-cifra, .pendientes, .hz-tarjeta, .wa-resumen),
html[data-estilo="suave"][data-tema="cuaderno"] #agenda-root {
  background: var(--papel);
  border: var(--filete);
  box-shadow: var(--sombra-vidrio);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-estilo="suave"][data-tema="cuaderno"] #inicio-root .paneles .panel:is(:nth-child(1), :nth-child(2)),
html[data-estilo="suave"][data-tema="cuaderno"] .mt-tarjeta.destacada { background: var(--papel); }
html[data-estilo="suave"][data-tema="cuaderno"] :is(h1, h2, h3, p, span, b, strong, small, div, a) { text-shadow: none; }
html[data-estilo="suave"][data-tema="cuaderno"] .lista li { background: transparent; box-shadow: none; border-bottom: var(--filete); border-radius: 0; }
html[data-estilo="suave"][data-tema="cuaderno"] .brillo::before, html[data-estilo="suave"][data-tema="cuaderno"] .brillo::after { display: none; }

/* ---------------------------------------------------------------- tipografía editorial */
html[data-estilo="suave"][data-tema="cuaderno"] :is(.view-cabecera h1, .mt-cab h1, .hz-cab h1, .saludo-texto h1, .mt-titulo, .panel > h2, .cajon header h2) {
  font-family: var(--font-marca); font-weight: 500; letter-spacing: -.01em;
}
html[data-estilo="suave"][data-tema="cuaderno"] .saludo-texto h1 { font-size: 40px; }
html[data-estilo="suave"][data-tema="cuaderno"] :is(.reloj-hm, .kpi-valor, .mt-t-valor, .mt-cifra, .alm-grande, .sg-n, .pl-cifra b) {
  font-family: var(--font-marca); font-weight: 500; font-variation-settings: normal; letter-spacing: -.02em;
}
html[data-estilo="suave"][data-tema="cuaderno"] .kpi .kpi-valor { font-size: 50px; line-height: 1; color: var(--tinta); text-shadow: none; }
html[data-estilo="suave"][data-tema="cuaderno"] .reloj-s { color: var(--tinta-acento); }
html[data-estilo="suave"][data-tema="cuaderno"] :is(.tabla th, .es-matriz thead th) {
  background: transparent; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; font-size: 11px; font-weight: 700;
}

/* ---------------------------------------------------------------- el rotulador
   El color de la consulta subraya, no pinta: el nombre de cada cifra, el
   apartado del menú en el que estás, la pestaña activa, el día de hoy. */
html[data-estilo="suave"][data-tema="cuaderno"] .kpi-nombre {
  display: block; width: fit-content; color: var(--tinta); font-weight: 600;
  background: linear-gradient(180deg, transparent 58%, var(--rotulador) 58%, var(--rotulador) 92%, transparent 92%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 2px;
}
html[data-estilo="suave"][data-tema="cuaderno"] .nav-item.active {
  background: transparent; box-shadow: none; color: var(--tinta);
}
html[data-estilo="suave"][data-tema="cuaderno"] .nav-item.active > span:first-of-type {
  background: linear-gradient(180deg, transparent 55%, var(--rotulador) 55%, var(--rotulador) 92%, transparent 92%);
  padding: 0 3px; margin-left: -3px; font-weight: 700;
}
html[data-estilo="suave"][data-tema="cuaderno"] .nav-item.active svg { color: var(--tinta-acento); }
html[data-estilo="suave"][data-tema="cuaderno"] .nav-item:hover:not(.active) { background: var(--dash-bg); }
html[data-estilo="suave"][data-tema="cuaderno"] :is(.ag-cab.hoy strong, .agl-dia h2 span) {
  color: var(--tinta);
  background: linear-gradient(180deg, transparent 55%, var(--rotulador) 55%, var(--rotulador) 92%, transparent 92%);
}

/* ---------------------------------------------------------------- Inicio: tarjetas como columnas de periódico */
html[data-estilo="suave"][data-tema="cuaderno"] #inicio-root .kpis .kpi:nth-child(n) { --t: var(--marca); }
html[data-estilo="suave"][data-tema="cuaderno"][data-theme="dark"] #inicio-root .kpis .kpi:nth-child(n) { --t: var(--marca-texto); }
html[data-estilo="suave"][data-tema="cuaderno"] #inicio-root .kpis .kpi.aviso:nth-child(n) { --t: var(--t-pendiente); }
html[data-estilo="suave"][data-tema="cuaderno"] #inicio-root .kpis .kpi.alerta:nth-child(n) { --t: var(--t-riesgo); }
html[data-estilo="suave"][data-tema="cuaderno"] .kpi {
  background: var(--papel);
  border-top: 3px solid var(--tinta);
  border-radius: 4px 4px var(--r-lg) var(--r-lg);
}
html[data-estilo="suave"][data-tema="cuaderno"] .kpi.alerta { border-top-color: var(--t-riesgo); }
html[data-estilo="suave"][data-tema="cuaderno"] .kpi.aviso { border-top-color: var(--t-pendiente); box-shadow: var(--sombra-vidrio); }
html[data-estilo="suave"][data-tema="cuaderno"] .kpi.alerta :is(.kpi-valor, .kpi-nombre) { color: var(--t-riesgo); }
html[data-estilo="suave"][data-tema="cuaderno"] .kpi.alerta .kpi-nombre { --rotulador: color-mix(in oklab, var(--t-riesgo) 18%, transparent); }
html[data-estilo="suave"][data-tema="cuaderno"] .kpi.aviso .kpi-valor { color: var(--t-pendiente); }
html[data-estilo="suave"][data-tema="cuaderno"] .kpi.aviso .kpi-nombre { --rotulador: color-mix(in oklab, var(--t-pendiente) 20%, transparent); }
html[data-estilo="suave"][data-tema="cuaderno"] .kpi-detalle { color: var(--text-muted); }
html[data-estilo="suave"][data-tema="cuaderno"] .kpi-icono {
  color: var(--tinta); background: transparent; box-shadow: none; border: var(--filete); border-radius: 50%;
}
html[data-estilo="suave"][data-tema="cuaderno"] .kpi-tend { background: transparent; box-shadow: none; border: var(--filete); --tc: var(--text-muted); }
html[data-estilo="suave"][data-tema="cuaderno"] .kpi-tend.bien { --tc: #2E7D46; }
html[data-estilo="suave"][data-tema="cuaderno"] .kpi-tend.mal { --tc: var(--t-riesgo); }
html[data-estilo="suave"][data-tema="cuaderno"] .kpi-tend-punto { stroke: var(--papel); }
/* La luz que gira: aquí, un trazo fino de tinta del color de la consulta. */
html[data-estilo="suave"][data-tema="cuaderno"] .kpi .kpi-luz::before { padding: 1.5px; opacity: .8; }
html[data-estilo="suave"][data-tema="cuaderno"] .kpi .kpi-luz::after { display: none; }
html[data-estilo="suave"][data-tema="cuaderno"] .kpi.novedad .kpi-luz::before { padding: 2.5px; opacity: 1; }
html[data-estilo="suave"][data-tema="cuaderno"] .kpi .kpi-resplandor { box-shadow: none;
  background: linear-gradient(180deg, color-mix(in oklab, var(--kpi-c) 12%, transparent), transparent 60%); }

/* ---------------------------------------------------------------- botones y controles */
html[data-estilo="suave"][data-tema="cuaderno"] .btn { border-radius: 10px; }
html[data-estilo="suave"][data-tema="cuaderno"] .btn-primario:not(#view-conversaciones *) {
  background: var(--accion); border: 1px solid var(--accion-oscura); color: #fff;
  box-shadow: 0 2px 0 var(--accion-oscura);
}
html[data-estilo="suave"][data-tema="cuaderno"] .btn-primario:not(#view-conversaciones *):hover { background: var(--accion-oscura); box-shadow: 0 2px 0 color-mix(in oklab, var(--accion-oscura) 70%, #000); }
html[data-estilo="suave"][data-tema="cuaderno"] .btn-primario:not(#view-conversaciones *):active { transform: translateY(2px); box-shadow: none; }
html[data-estilo="suave"][data-tema="cuaderno"] :is(.btn-secundario, .btn-peligro):not(#view-conversaciones *) {
  background: var(--papel); border: var(--filete); color: var(--tinta);
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 2px 0 var(--divider);
}
html[data-estilo="suave"][data-tema="cuaderno"] .btn-secundario:not(#view-conversaciones *):hover { background: var(--fondo); }
html[data-estilo="suave"][data-tema="cuaderno"] .btn-secundario:not(#view-conversaciones *):active { transform: translateY(2px); box-shadow: none; }
html[data-estilo="suave"][data-tema="cuaderno"] .campo:not(#view-conversaciones *) {
  background: var(--papel); border: var(--filete); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-estilo="suave"][data-tema="cuaderno"] .campo:not(#view-conversaciones *):focus {
  border-color: var(--tinta-acento); box-shadow: 0 0 0 3px var(--rotulador);
}
/* Pestañas: como las de un archivador, subrayadas por el rotulador. */
html[data-estilo="suave"][data-tema="cuaderno"] :is(.ag-segmento, .mt-rangos, .mt-pestanas, .reloj-modos, .pa-modos) {
  background: transparent; box-shadow: none; border-bottom: var(--filete); border-radius: 0;
}
html[data-estilo="suave"][data-tema="cuaderno"] :is(.mt-rango, .mt-pestana, .reloj-modos button, .pa-modo) { border-radius: 6px 6px 0 0; }
html[data-estilo="suave"][data-tema="cuaderno"] :is(.mt-rango.activo, .mt-pestana.activo, .reloj-modos button[aria-pressed="true"], .pa-modo.activo) {
  background: transparent; color: var(--tinta); font-weight: 700;
  box-shadow: inset 0 -3px 0 var(--marca);
}

/* ---------------------------------------------------------------- agenda: fichas de papel con la raya de cada profesional */
html[data-estilo="suave"][data-tema="cuaderno"] #agenda-root { background: var(--papel); }
html[data-estilo="suave"][data-tema="cuaderno"] .ag-cita {
  background: var(--papel);
  border: 1px solid color-mix(in oklab, var(--ag-color, var(--marca)) 30%, var(--divider));
  box-shadow: inset 4px 0 0 var(--ag-color, var(--marca)), 0 1px 0 var(--divider);
  border-radius: 8px;
}
html[data-estilo="suave"][data-tema="cuaderno"] .ag-cita.pendiente { border-style: dashed; border-color: var(--t-pendiente); box-shadow: inset 4px 0 0 var(--t-pendiente); }
html[data-estilo="suave"][data-tema="cuaderno"] .ag-cita .n { font-family: var(--font-marca); font-weight: 500; font-size: 13.5px; }

/* ---------------------------------------------------------------- estadísticas */
html[data-estilo="suave"][data-tema="cuaderno"] .mt-tarjeta.destacada .mt-t-valor { color: var(--tinta-acento); }
html[data-estilo="suave"][data-tema="cuaderno"] .es-matriz td { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- móvil: la barra de abajo, de papel */
@media (max-width: 860px) {
  html[data-estilo="suave"][data-tema="cuaderno"] .nav-sidebar {
    background: var(--papel); border: var(--filete); -webkit-backdrop-filter: none; backdrop-filter: none;
    box-shadow: 0 -1px 0 var(--divider), 0 10px 30px -18px rgba(60, 40, 20, .4);
  }
  html[data-estilo="suave"][data-tema="cuaderno"] .saludo-texto h1 { font-size: 30px; }
  html[data-estilo="suave"][data-tema="cuaderno"] .kpi-valor { font-size: 40px; }
}