/* Piel «Suave» (neumorfismo) de CasaLogin: se activa con html[data-piel="suave"]; el modo oscuro con html[data-theme="dark"] encima. Variables --nm-* al inicio. */
/* ===== Piel «Suave»: neumorfismo (html[data-piel="suave"]). Superficie = fondo; el volumen lo dan dos sombras ===== */
html[data-piel="suave"] { --fondo: var(--nm-base); --superficie: var(--nm-base); --superficie-2: #DFE4EB; --linea: var(--nm-linea-2); --tinta: var(--nm-aviso); --tinta-2: #5B6474; --tinta-3: #8B94A5; --acento: #2F6FE4; --acento-suave: #D9E3F6; --acento-hover: #2458BE; --ok: #2E9E6B; --alerta: #C9712D; --ambar: #E0A33C; --peligro: #D64B5B;
  --nm-oscura: #C2C8D2; --nm-clara: #FFFFFF; --nm-base: #E6EAF0; --nm-base-2: #E9EDF2; --nm-acento-1: #3F7FF0; --nm-acento-2: #2A63D0; --nm-hover: rgba(255,255,255,.4); --nm-barra: #C5CBD5; --nm-aviso: #2E3440; --nm-linea-1: rgba(80,90,110,.08); --nm-linea-2: rgba(80,90,110,.10); --nm-linea-3: rgba(80,90,110,.14);
  --nm-out: 6px 6px 12px var(--nm-oscura), -6px -6px 12px var(--nm-clara);
  --nm-out-chica: 3px 3px 6px var(--nm-oscura), -3px -3px 6px var(--nm-clara);
  --nm-in: inset 4px 4px 8px var(--nm-oscura), inset -4px -4px 8px var(--nm-clara);
  --nm-in-chica: inset 2px 2px 4px var(--nm-oscura), inset -2px -2px 4px var(--nm-clara); }
html[data-piel="suave"] body { background: var(--nm-base); }
html[data-piel="suave"] h1 { color: var(--nm-aviso); } html[data-piel="suave"] .ceja { color: var(--tinta-3); }
/* barra lateral: misma superficie, sección activa hundida */
html[data-piel="suave"] .lateral { background: var(--nm-base); border-right: 0; box-shadow: 8px 0 16px -8px var(--nm-oscura); }
html[data-piel="suave"] .nav a { border-radius: 12px; padding: 9px 14px; }
html[data-piel="suave"] .nav a:hover { background: transparent; box-shadow: var(--nm-out-chica); }
html[data-piel="suave"] .nav a.activa { background: transparent; color: var(--acento); box-shadow: var(--nm-in-chica); }
html[data-piel="suave"] .logomarca { box-shadow: var(--nm-out-chica); }
/* botones: extruidos; al pulsar, hundidos */
html[data-piel="suave"] button, html[data-piel="suave"] .btn { border: 0; border-radius: 12px; background: var(--nm-base); color: var(--tinta); box-shadow: var(--nm-out-chica); }
html[data-piel="suave"] button:hover, html[data-piel="suave"] .btn:hover { background: var(--nm-base-2); box-shadow: var(--nm-out); }
html[data-piel="suave"] button:active { box-shadow: var(--nm-in-chica); }
html[data-piel="suave"] .btn-primario, html[data-piel="suave"] .btn-primario:hover { background: linear-gradient(145deg, var(--nm-acento-1), var(--nm-acento-2)); color: #fff; box-shadow: 4px 4px 10px rgba(47,111,228,.35), -4px -4px 10px var(--nm-clara); }
html[data-piel="suave"] .btn-primario:active { box-shadow: inset 3px 3px 6px rgba(0,0,0,.25); }
html[data-piel="suave"] .btn-menu, html[data-piel="suave"] .btn-liga, html[data-piel="suave"] .btn-liga-azul, html[data-piel="suave"] .ver-mas, html[data-piel="suave"] .hito .edit button, html[data-piel="suave"] .add, html[data-piel="suave"] .tira-semana button, html[data-piel="suave"] .mas-dia, html[data-piel="suave"] .vistas button, html[data-piel="suave"] .segmentado button { background: transparent; box-shadow: none; }
html[data-piel="suave"] .btn-menu:hover, html[data-piel="suave"] .tira-semana button:hover { box-shadow: var(--nm-out-chica); background: transparent; }
html[data-piel="suave"] .btn-terminar { color: var(--ok); } html[data-piel="suave"] .btn-peligro { color: var(--peligro); }
/* selector de vistas: carril hundido con la pestaña activa en relieve */
html[data-piel="suave"] .vistas, html[data-piel="suave"] .segmentado { background: var(--nm-base); box-shadow: var(--nm-in-chica); padding: 5px; border-radius: 980px; }
html[data-piel="suave"] .vistas button.activa, html[data-piel="suave"] .segmentado button.activa { background: var(--nm-base); color: var(--acento); box-shadow: var(--nm-out-chica); }
html[data-piel="suave"] .chip { border: 0; background: var(--nm-base); box-shadow: var(--nm-out-chica); }
html[data-piel="suave"] .chip:hover { background: var(--nm-base-2); }
html[data-piel="suave"] .chip.activa { background: var(--nm-base); color: var(--acento); box-shadow: var(--nm-in-chica); font-weight: 600; }
html[data-piel="suave"] .chip.activa .ini { background: var(--acento); color: #fff; }
html[data-piel="suave"] #f-quien, html[data-piel="suave"] select, html[data-piel="suave"] input:not([type=checkbox]), html[data-piel="suave"] textarea { background: var(--nm-base) !important; border: 0 !important; border-radius: 12px !important; box-shadow: var(--nm-in-chica); color: var(--tinta); }
html[data-piel="suave"] input:focus, html[data-piel="suave"] textarea:focus, html[data-piel="suave"] select:focus { box-shadow: var(--nm-in-chica), 0 0 0 2px rgba(47,111,228,.25) !important; outline: 0; }
/* bloques y cifras */
html[data-piel="suave"] .bloque { border: 0; border-radius: 22px; box-shadow: var(--nm-out); padding: 22px; }
html[data-piel="suave"] .cifra { border: 0; border-radius: 18px; box-shadow: var(--nm-out); transition: box-shadow .15s; }
html[data-piel="suave"] .cifra:hover { box-shadow: var(--nm-in); }
html[data-piel="suave"] .cifra .v { font-size: 26px; }
/* lista */
html[data-piel="suave"] .pend { border-bottom: 1px solid var(--nm-linea-1); padding: 12px 0; }
html[data-piel="suave"] .pend input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; border-radius: 7px; border: 0; background: var(--nm-base); box-shadow: var(--nm-in-chica); position: relative; cursor: pointer; }
html[data-piel="suave"] .pend input[type=checkbox]:checked { background: var(--acento); box-shadow: var(--nm-out-chica); }
html[data-piel="suave"] .pend input[type=checkbox]:checked::after { content: "✓"; color: #fff; font-size: 13px; font-weight: 700; position: absolute; left: 4px; top: 0; }
html[data-piel="suave"] .pend .acciones button { padding: 4px 11px; border-radius: 10px; }
html[data-piel="suave"] .capsula { border: 0; box-shadow: var(--nm-in-chica); background: var(--nm-base); }
html[data-piel="suave"] .capsula.vencido { color: var(--peligro); } html[data-piel="suave"] .capsula.hoy { color: var(--acento); } html[data-piel="suave"] .capsula.alta { color: var(--alerta); }
html[data-piel="suave"] .grupo { border-top: 0; } html[data-piel="suave"] .grupo > summary .n { background: var(--nm-base); box-shadow: var(--nm-in-chica); }
html[data-piel="suave"] .filtros-lista .chip b { color: var(--tinta-3); }
html[data-piel="suave"] .dia7, html[data-piel="suave"] .aviso-auto { border-bottom-color: var(--nm-linea-1); }
html[data-piel="suave"] .dia7.hoy .fecha b { color: var(--acento); }
/* calendario */
html[data-piel="suave"] .tira-semana button { border-radius: 14px; }
html[data-piel="suave"] .tira-semana .dd { width: 36px; height: 36px; }
html[data-piel="suave"] .tira-semana button.sel .dd { background: linear-gradient(145deg, var(--nm-acento-1), var(--nm-acento-2)); box-shadow: 3px 3px 8px rgba(47,111,228,.4), -3px -3px 8px var(--nm-clara); }
html[data-piel="suave"] .tira-semana button:not(.sel) .dd { box-shadow: var(--nm-out-chica); }
html[data-piel="suave"] .dia-cab { border-top: 0; }
html[data-piel="suave"] .horario { border-top: 0; border-radius: 16px; box-shadow: var(--nm-in-chica); padding: 10px 10px 10px 0; }
html[data-piel="suave"] .hora-fila { border-bottom: 1px solid var(--nm-linea-1); } html[data-piel="suave"] .hora-fila .slot { border-left: 1px solid var(--nm-linea-2); }
html[data-piel="suave"] .hora-fila .slot:hover { background: transparent; }
html[data-piel="suave"] .bloque-ev { background: var(--nm-base); border-left: 0; border-radius: 12px; box-shadow: var(--nm-out-chica); padding: 7px 12px; position: relative; }
html[data-piel="suave"] .bloque-ev::before { content: ""; position: absolute; left: 6px; top: 50%; width: 6px; height: 60%; transform: translateY(-50%); border-radius: 3px; background: var(--acento); }
html[data-piel="suave"] .bloque-ev { padding-left: 20px; }
html[data-piel="suave"] .bloque-ev.pago::before { background: var(--ok); } html[data-piel="suave"] .bloque-ev.cumple::before { background: var(--alerta); } html[data-piel="suave"] .bloque-ev.contrato::before, html[data-piel="suave"] .bloque-ev.vencido::before { background: var(--peligro); }
html[data-piel="suave"] .bloque-ev.hecho { box-shadow: var(--nm-in-chica); }
/* Fase 4: en Suave la cita va en relieve (relleno) y el pendiente hundido con contorno */
html[data-piel="suave"] .bloque-ev.pendiente { background: transparent; box-shadow: var(--nm-in-chica); border: 1px solid var(--nm-linea-3); border-left: 0; }
html[data-piel="suave"] .pt.pendiente { border-color: var(--acento); }
html[data-piel="suave"] .ahora { background: #F07A86; } html[data-piel="suave"] .ahora::before { background: #F07A86; }
html[data-piel="suave"] .cal-mes { border-radius: 20px; box-shadow: var(--nm-in); padding: 14px; }
html[data-piel="suave"] .cal-num .dd { width: 38px; height: 38px; }
html[data-piel="suave"] .cal-num:hover { background: transparent; } html[data-piel="suave"] .cal-num:hover .dd { box-shadow: var(--nm-out-chica); }
html[data-piel="suave"] .cal-num.hoy .dd { background: linear-gradient(145deg, var(--nm-acento-1), var(--nm-acento-2)); box-shadow: 3px 3px 8px rgba(47,111,228,.4), -3px -3px 8px var(--nm-clara); }
html[data-piel="suave"] .cal-num.sel { background: transparent; } html[data-piel="suave"] .cal-num.sel:not(.hoy) .dd { box-shadow: var(--nm-in-chica); color: var(--acento); }
html[data-piel="suave"] .cal-num .mas-dia { border: 0; box-shadow: var(--nm-out-chica); background: var(--nm-base); }
html[data-piel="suave"] .cifra-mini { background: var(--nm-base); border-radius: 14px; box-shadow: var(--nm-in-chica); }
html[data-piel="suave"] .mes-dia.sel { background: transparent; box-shadow: var(--nm-in-chica); border-radius: 14px; padding: 10px 12px; }
html[data-piel="suave"] .mes-lista { padding: 6px; }
/* tablero */
html[data-piel="suave"] .matriz { border: 0; border-radius: 22px; background: var(--nm-base); box-shadow: var(--nm-in); padding: 10px; overflow: visible; }
html[data-piel="suave"] .matriz .enc { background: transparent; border-bottom: 0; }
html[data-piel="suave"] .fila-p > div { border-color: var(--nm-linea-1); }
html[data-piel="suave"] .fila-p .persona { background: transparent; }
html[data-piel="suave"] .fila-p.sin .persona { background: transparent; } html[data-piel="suave"] .fila-p.sin .av { background: #F3D8B8; color: var(--alerta); }
html[data-piel="suave"] .fila-p .av { box-shadow: var(--nm-out-chica); background: var(--nm-base); }
html[data-piel="suave"] .fila-p .carga { box-shadow: var(--nm-in-chica); background: var(--nm-base); height: 8px; border-radius: 4px; }
html[data-piel="suave"] .fila-p .celda.venc { background: transparent; }
html[data-piel="suave"] .fila-p .celda.sobre { background: transparent; box-shadow: var(--nm-in-chica); border-radius: 14px; }
html[data-piel="suave"] .tk { border: 0; border-radius: 16px; background: var(--nm-base); box-shadow: var(--nm-out); padding: 12px 14px; margin-bottom: 12px; }
html[data-piel="suave"] .tk:hover { border: 0; box-shadow: var(--nm-out-chica); }
/* panel, modal, menú */
html[data-piel="suave"] .detalle { background: var(--nm-base); border-left: 0; box-shadow: -10px 0 30px rgba(120,130,150,.35); }
html[data-piel="suave"] .detalle .cab, html[data-piel="suave"] .detalle .captura, html[data-piel="suave"] .detalle .pie-detalle { border-color: var(--nm-linea-1); }
html[data-piel="suave"] .detalle .captura { background: transparent; }
html[data-piel="suave"] .hito { border-left-color: var(--nm-linea-3); }
html[data-piel="suave"] .modal { background: var(--nm-base); border-radius: 26px; box-shadow: var(--nm-out), 0 30px 60px rgba(60,70,90,.3); }
html[data-piel="suave"] .velo { background: rgba(70,80,100,.25); }
html[data-piel="suave"] .menu-flotante { background: var(--nm-base); border: 0; border-radius: 14px; box-shadow: var(--nm-out); }
html[data-piel="suave"] .bloque-form, html[data-piel="suave"] details.relacionar-det { border-top-color: var(--nm-linea-2); }
html[data-piel="suave"] .ligas-resumen span, html[data-piel="suave"] .detalle .ligas a { background: var(--nm-base); box-shadow: var(--nm-in-chica); }

/* ---- Suave, segunda pasada: contraste, estados, transiciones y detalles ---- */
html[data-piel="suave"] { --tinta-2: #4F586A; --tinta-3: #7C8597; --linea: var(--nm-linea-3); }
html[data-piel="suave"] button, html[data-piel="suave"] .btn, html[data-piel="suave"] .chip, html[data-piel="suave"] .cifra, html[data-piel="suave"] .tk, html[data-piel="suave"] .bloque-ev, html[data-piel="suave"] .nav a, html[data-piel="suave"] .cal-num .dd, html[data-piel="suave"] .tira-semana .dd, html[data-piel="suave"] .pend input[type=checkbox] { transition: box-shadow .18s ease, transform .18s ease, background .18s ease, color .18s ease; }
html[data-piel="suave"] :focus-visible { outline: 2px solid rgba(47,111,228,.45); outline-offset: 2px; }
html[data-piel="suave"] .ceja, html[data-piel="suave"] .cifra .e, html[data-piel="suave"] .grupo > summary, html[data-piel="suave"] .matriz .enc, html[data-piel="suave"] .ceja-form, html[data-piel="suave"] .mes-dia h4, html[data-piel="suave"] .tira-semana .dn, html[data-piel="suave"] .cal-dias { letter-spacing: .07em; }
/* barra lateral: un tono más clara, logo y cuenta en relieve */
html[data-piel="suave"] .lateral { background: var(--nm-base-2); box-shadow: 10px 0 20px -10px var(--nm-oscura), inset -1px 0 0 rgba(255,255,255,.6); }
html[data-piel="suave"] .lateral .perfil, html[data-piel="suave"] .lateral .cuenta { border-radius: 14px; }
html[data-piel="suave"] .lateral .av, html[data-piel="suave"] .lateral .avatar { box-shadow: var(--nm-out-chica); }
html[data-piel="suave"] .nav a { font-weight: 500; }
html[data-piel="suave"] .nav a.activa { font-weight: 600; }
html[data-piel="suave"] .menu-movil { background: var(--nm-base); border: 0; box-shadow: var(--nm-out-chica); border-radius: 12px; }
html[data-piel="suave"] .lateral.abierto .menu-movil { background: var(--nm-base); color: var(--acento); box-shadow: var(--nm-in-chica); }
/* botones: levantan al pasar, se hunden al pulsar */
html[data-piel="suave"] button:not(.btn-primario):not(.btn-menu):not(.chip):hover { transform: translateY(-1px); }
html[data-piel="suave"] button:active { transform: translateY(0); }
html[data-piel="suave"] .btn-primario { font-weight: 600; letter-spacing: .01em; }
html[data-piel="suave"] .btn-primario:hover { box-shadow: 6px 6px 14px rgba(47,111,228,.4), -4px -4px 10px var(--nm-clara); transform: translateY(-1px); }
html[data-piel="suave"] .btn-menu { width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; padding: 0 0 3px; }
html[data-piel="suave"] .pend .acciones button:not(.btn-menu) { padding: 5px 12px; border-radius: 980px; font-size: 12px; font-weight: 500; }
html[data-piel="suave"] .pend:hover .acciones button { box-shadow: var(--nm-out-chica); }
/* cifras: punto de color y número en negrita */
html[data-piel="suave"] .cifra { padding: 16px 18px; }
html[data-piel="suave"] .cifra .e { display: flex; align-items: center; gap: 7px; }
html[data-piel="suave"] .cifra .e::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tinta-3); box-shadow: 0 0 0 3px rgba(255,255,255,.6); }
html[data-piel="suave"] #cifras .cifra:nth-child(1) .e::before { background: var(--peligro); } html[data-piel="suave"] #cifras .cifra:nth-child(2) .e::before { background: var(--acento); } html[data-piel="suave"] #cifras .cifra:nth-child(4) .e::before { background: var(--alerta); }
html[data-piel="suave"] #hist-cifras .cifra:nth-child(1) .e::before { background: var(--ok); } html[data-piel="suave"] #hist-cifras .cifra:nth-child(2) .e::before { background: var(--acento); }
html[data-piel="suave"] .cifra .v { font-weight: 700; font-variant-numeric: tabular-nums; margin: 4px 0 2px; }
html[data-piel="suave"] .cifra .s { color: var(--tinta-2); }
/* lista */
html[data-piel="suave"] .vistas button { font-weight: 500; padding: 7px 16px; } html[data-piel="suave"] .vistas button.activa { font-weight: 600; }
html[data-piel="suave"] .pend { border-bottom: 1px solid var(--linea); }
html[data-piel="suave"] .pend input[type=checkbox] { width: 22px; height: 22px; border-radius: 8px; margin-top: 2px; }
html[data-piel="suave"] .pend input[type=checkbox]:hover { box-shadow: var(--nm-in-chica), 0 0 0 3px rgba(47,111,228,.12); }
html[data-piel="suave"] .pend input[type=checkbox]:checked::after { left: 5px; top: 1px; font-size: 14px; }
html[data-piel="suave"] .pend .t { font-weight: 600; }
html[data-piel="suave"] .pend .meta { color: var(--tinta-2); }
html[data-piel="suave"] .capsula { padding: 2px 9px 2px 7px; font-weight: 600; }
html[data-piel="suave"] .capsula::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 5px; vertical-align: 1px; }
html[data-piel="suave"] .capsula.tipo { color: var(--tinta-2); }
html[data-piel="suave"] .grupo > summary { color: var(--tinta-2); padding: 12px 0 8px; }
html[data-piel="suave"] .grupo > summary .n { padding: 2px 9px; }
html[data-piel="suave"] .filtros-lista .chip { padding: 5px 13px; font-weight: 500; }
html[data-piel="suave"] .dia7 .fecha b { font-weight: 700; } html[data-piel="suave"] .dia7.hoy .fecha b { color: var(--acento); }
html[data-piel="suave"] .dia7:hover { background: var(--nm-hover); border-radius: 10px; }
/* calendario */
html[data-piel="suave"] .tira-semana button:not(.sel) .dd { box-shadow: none; }
html[data-piel="suave"] .tira-semana button:not(.sel):hover .dd { box-shadow: var(--nm-out-chica); }
html[data-piel="suave"] .tira-semana button.hoy:not(.sel) .dd { color: var(--acento); font-weight: 700; box-shadow: var(--nm-in-chica); }
html[data-piel="suave"] .tira-semana .dn { font-weight: 600; }
html[data-piel="suave"] .hora-fila .h { color: var(--tinta-3); font-weight: 500; }
html[data-piel="suave"] .hora-fila .slot:hover { background: var(--nm-hover); }
html[data-piel="suave"] .hora-fila.pasada .h { opacity: .5; }
html[data-piel="suave"] .bloque-ev { font-weight: 500; } html[data-piel="suave"] .bloque-ev:hover { transform: translateY(-1px); box-shadow: var(--nm-out); filter: none; }
html[data-piel="suave"] .cal-dias { color: var(--tinta-3); font-weight: 600; }
html[data-piel="suave"] .cal-num .dd { font-weight: 600; }
html[data-piel="suave"] .cal-num.fin .dd { color: var(--tinta-3); }
html[data-piel="suave"] .cal-num .pts i { box-shadow: 0 1px 1px rgba(0,0,0,.15); }
html[data-piel="suave"] .mes-lado h3 { font-weight: 600; }
html[data-piel="suave"] .cifra-mini b { font-weight: 700; }
html[data-piel="suave"] .mes-dia { border-radius: 14px; padding: 8px 10px; }
html[data-piel="suave"] .mes-dia.hoy h4 span { color: var(--acento); }
html[data-piel="suave"] .mes-dia.sel { box-shadow: var(--nm-in-chica); }
/* tablero */
html[data-piel="suave"] .matriz { padding: 14px; }
html[data-piel="suave"] .matriz .enc { color: var(--tinta-3); font-weight: 700; }
html[data-piel="suave"] .fila-p > div { border-color: var(--linea); }
html[data-piel="suave"] .fila-p .nm { font-weight: 700; }
html[data-piel="suave"] .fila-p.sin .nm { color: var(--alerta); }
html[data-piel="suave"] .fila-p .cnts .mal { color: var(--peligro); }
html[data-piel="suave"] .mas-celda { border: 0; box-shadow: var(--nm-in-chica); border-radius: 12px; }
html[data-piel="suave"] .hecho-fila .marca { background: var(--nm-base); box-shadow: var(--nm-out-chica); }
html[data-piel="suave"] .barra-h .pista-barra { background: var(--nm-base); box-shadow: var(--nm-in-chica); }
html[data-piel="suave"] .hecho-fila.res-peligro .marca, html[data-piel="suave"] .hecho-fila.res-tinta .marca { box-shadow: var(--nm-in-chica); }
html[data-piel="suave"] .hist-cab2 input { border: 0 !important; border-radius: 980px !important; }
html[data-piel="suave"] .hecho-grupo h5 .n { background: var(--nm-base); box-shadow: var(--nm-in-chica); }
html[data-piel="suave"] .hecho-fila .acciones button:not(.btn-menu) { padding: 4px 11px; border-radius: 980px; font-size: 12px; }
html[data-piel="suave"] .tk { padding: 12px 14px 12px 18px; position: relative; }
html[data-piel="suave"] .tk::before { content: ""; position: absolute; left: 8px; top: 12px; bottom: 12px; width: 4px; border-radius: 2px; background: var(--acento); opacity: .75; }
html[data-piel="suave"] .fila-p .celda.venc .tk::before { background: var(--peligro); }
html[data-piel="suave"] .fila-p .celda.semana .tk::before { background: var(--ambar); } html[data-piel="suave"] .fila-p .celda.despues .tk::before { background: var(--tinta-3); }
html[data-piel="suave"] .tk:hover { transform: translateY(-2px); box-shadow: var(--nm-out); }
html[data-piel="suave"] .tk .t { font-weight: 600; }
/* campos de fecha y hora nativos, textarea y selects */
html[data-piel="suave"] input[type=date], html[data-piel="suave"] input[type=time] { color-scheme: light; padding: 8px 10px; }
html[data-piel="suave"] .cuando input[type="time"] { width: 128px; } html[data-piel="suave"] .cuando input[type="date"] { width: 156px; }
html[data-piel="suave"] input::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
html[data-piel="suave"] select { padding-right: 28px; }
html[data-piel="suave"] .campo label, html[data-piel="suave"] .etq-form { color: var(--tinta-2); font-weight: 600; font-size: 12px; }
html[data-piel="suave"] .pista { color: var(--tinta-3); }
/* panel de detalle y línea de tiempo */
html[data-piel="suave"] .detalle .cab h3 { font-weight: 700; }
html[data-piel="suave"] .detalle .cab .dato { color: var(--tinta-2); }
html[data-piel="suave"] .linea-tiempo::before { border-left: 2px solid var(--nm-linea-2); left: 4px; }
html[data-piel="suave"] .hito::before { background: var(--nm-base); border: 0; box-shadow: var(--nm-out-chica); width: 10px; height: 10px; left: -18px; }
html[data-piel="suave"] .hito.reciente::before { background: var(--acento); box-shadow: 2px 2px 5px rgba(47,111,228,.4), -2px -2px 5px var(--nm-clara); }
html[data-piel="suave"] .hito.sistema::before { box-shadow: var(--nm-in-chica); }
html[data-piel="suave"] .hito .txt { color: var(--tinta); }
html[data-piel="suave"] .detalle .captura textarea { min-height: 52px; }
html[data-piel="suave"] .detalle .pie-detalle { padding-top: 12px; }
html[data-piel="suave"] .btn-terminar { box-shadow: var(--nm-out-chica); font-weight: 600; }
html[data-piel="suave"] .btn-terminar:hover { box-shadow: 4px 4px 10px rgba(46,158,107,.3), -4px -4px 10px var(--nm-clara); }
/* avisos, menús y barras de desplazamiento */
html[data-piel="suave"] .aviso { background: var(--nm-aviso); border-radius: 14px; box-shadow: 0 10px 30px rgba(46,52,64,.35); font-weight: 500; }
html[data-piel="suave"] .menu-flotante button:hover { background: var(--nm-hover); }
html[data-piel="suave"] .horario, html[data-piel="suave"] .mes-lista, html[data-piel="suave"] .detalle .cuerpo, html[data-piel="suave"] .modal { scrollbar-width: thin; scrollbar-color: var(--nm-barra) transparent; }
html[data-piel="suave"] .horario::-webkit-scrollbar, html[data-piel="suave"] .mes-lista::-webkit-scrollbar, html[data-piel="suave"] .detalle .cuerpo::-webkit-scrollbar, html[data-piel="suave"] .modal::-webkit-scrollbar { width: 8px; }
html[data-piel="suave"] .horario::-webkit-scrollbar-thumb, html[data-piel="suave"] .mes-lista::-webkit-scrollbar-thumb, html[data-piel="suave"] .detalle .cuerpo::-webkit-scrollbar-thumb, html[data-piel="suave"] .modal::-webkit-scrollbar-thumb { background: var(--nm-barra); border-radius: 4px; border: 2px solid var(--nm-base); }
/* Relieve deslizante: un solo «botón» en relieve que sigue al cursor por la barra lateral y las pestañas */
.brillo-desliz { display: none; }
html[data-piel="suave"] .brillo-desliz { display: block; position: absolute; left: 0; top: 0; border-radius: 12px; background: var(--nm-base); box-shadow: var(--nm-out-chica); pointer-events: none; opacity: 0; z-index: 0; will-change: transform, width, height, opacity; }
html[data-piel="suave"] .nav { position: relative; }
html[data-piel="suave"] .nav a { position: relative; z-index: 1; transition: color .25s ease, box-shadow .25s ease; }
html[data-piel="suave"] .nav a:hover { box-shadow: none; color: var(--tinta); }
html[data-piel="suave"] .nav a.activa:hover { color: var(--acento); }
html[data-piel="suave"] .vistas { position: relative; }
html[data-piel="suave"] .vistas button { position: relative; z-index: 1; transition: color .25s ease; }
html[data-piel="suave"] .vistas button.activa { box-shadow: none; }
html[data-piel="suave"] .vistas button:hover { color: var(--acento); }
html[data-piel="suave"] .vistas .brillo-desliz { border-radius: 980px; }
html[data-piel="suave"] .vistas.sin-desliz button.activa { box-shadow: var(--nm-out-chica); }
@media (max-width: 760px) {
  html[data-piel="suave"] .lateral { box-shadow: 0 10px 20px -12px var(--nm-oscura); }
  html[data-piel="suave"] .bloque { border-radius: 18px; padding: 16px; }
  html[data-piel="suave"] .cifra { border-radius: 16px; }
}

/* ===== Suave en modo oscuro (html[data-theme="dark"][data-piel="suave"]): grafito azulado; relieve con sombra negra abajo-derecha y brillo tenue arriba-izquierda ===== */
html[data-theme="dark"][data-piel="suave"] { --fondo: #1F242C; --superficie: #1F242C; --superficie-2: #252B34; --linea: rgba(255,255,255,.07); --tinta: #E6E9EF; --tinta-2: #AEB5C2; --tinta-3: #7F8795; --acento: #6AA6FF; --acento-suave: rgba(106,166,255,.16); --acento-hover: #86B6FF; --ok: #4CD08A; --alerta: #F0B35A; --ambar: #F0B35A; --peligro: #FF7A8E; --plata: #C9CED8; --plata-suave: rgba(201,206,216,.14);
  --nm-oscura: #141820; --nm-clara: #2B323D; --nm-base: #1F242C; --nm-base-2: #232931; --nm-acento-1: #4F8EF7; --nm-acento-2: #2F67D6; --nm-hover: rgba(255,255,255,.04); --nm-barra: #3A424E; --nm-aviso: #E6E9EF; --nm-linea-1: rgba(255,255,255,.06); --nm-linea-2: rgba(255,255,255,.08); --nm-linea-3: rgba(255,255,255,.11);
  --nm-out: 6px 6px 14px var(--nm-oscura), -5px -5px 12px var(--nm-clara);
  --nm-out-chica: 3px 3px 7px var(--nm-oscura), -2px -2px 6px var(--nm-clara);
  --nm-in: inset 4px 4px 9px var(--nm-oscura), inset -3px -3px 8px var(--nm-clara);
  --nm-in-chica: inset 2px 2px 5px var(--nm-oscura), inset -2px -2px 4px var(--nm-clara); color-scheme: dark; }
html[data-theme="dark"][data-piel="suave"] body { background: #1F242C; }
html[data-theme="dark"][data-piel="suave"] .lateral { background: #22272F; box-shadow: 10px 0 20px -10px var(--nm-oscura), inset -1px 0 0 rgba(255,255,255,.04); }
html[data-theme="dark"][data-piel="suave"] .logomarca { background: var(--acento); }
html[data-theme="dark"][data-piel="suave"] .avatar-yo, html[data-theme="dark"][data-piel="suave"] .fila-p .av, html[data-theme="dark"][data-piel="suave"] .chip .ini { background: rgba(106,166,255,.18); color: var(--acento); }
html[data-theme="dark"][data-piel="suave"] .chip.activa .ini { background: var(--acento); color: #0F1218; }
html[data-theme="dark"][data-piel="suave"] .btn-primario, html[data-theme="dark"][data-piel="suave"] .btn-primario:hover { color: #fff; box-shadow: 4px 4px 12px rgba(0,0,0,.45), -3px -3px 8px rgba(106,166,255,.12); }
html[data-theme="dark"][data-piel="suave"] .aviso { color: #1F242C; }
html[data-theme="dark"][data-piel="suave"] .velo { background: rgba(0,0,0,.45); }
html[data-theme="dark"][data-piel="suave"] .modal { box-shadow: var(--nm-out), 0 30px 60px rgba(0,0,0,.55); }
html[data-theme="dark"][data-piel="suave"] .detalle { box-shadow: -10px 0 30px rgba(0,0,0,.5); }
html[data-theme="dark"][data-piel="suave"] .menu-flotante, html[data-theme="dark"][data-piel="suave"] .sugerencias { box-shadow: var(--nm-out), 0 14px 30px rgba(0,0,0,.45); }
html[data-theme="dark"][data-piel="suave"] .capsula.vencido { color: var(--peligro); } html[data-theme="dark"][data-piel="suave"] .capsula.hoy { color: var(--acento); } html[data-theme="dark"][data-piel="suave"] .capsula.alta { color: var(--alerta); }
html[data-theme="dark"][data-piel="suave"] .capsula.ok { color: var(--ok); } html[data-theme="dark"][data-piel="suave"] .capsula.peligro { color: var(--peligro); } html[data-theme="dark"][data-piel="suave"] .capsula.ambar { color: var(--alerta); }
html[data-theme="dark"][data-piel="suave"] .pastilla.cero { opacity: .55; }
html[data-theme="dark"][data-piel="suave"] .tira-semana button.sel .dd, html[data-theme="dark"][data-piel="suave"] .cal-num.hoy .dd { box-shadow: 3px 3px 9px rgba(0,0,0,.5), -2px -2px 7px rgba(106,166,255,.12); }
html[data-theme="dark"][data-piel="suave"] .bloque-ev { color: var(--tinta); }
html[data-theme="dark"][data-piel="suave"] .ahora { background: #FF7A8E; } html[data-theme="dark"][data-piel="suave"] .ahora::before { background: #FF7A8E; }
html[data-theme="dark"][data-piel="suave"] .hecho-fila .marca, html[data-theme="dark"][data-piel="suave"] details.hist > summary .ico-ok { color: var(--ok); }
html[data-theme="dark"][data-piel="suave"] .guardado-aviso b { color: var(--ok); }
html[data-theme="dark"][data-piel="suave"] .hereda { color: var(--tinta-2); } html[data-theme="dark"][data-piel="suave"] .hereda b { color: var(--tinta); }
html[data-theme="dark"][data-piel="suave"] .fila-p.sin .av { background: rgba(240,179,90,.18); color: var(--alerta); }
html[data-theme="dark"][data-piel="suave"] .fila-p .celda.no-permitido { box-shadow: var(--nm-in-chica), inset 0 0 0 2px rgba(255,122,142,.55); }
html[data-theme="dark"][data-piel="suave"] .vistas button[data-v="completadas"]:hover:not(.activa) { color: #5EE0A0; text-shadow: 0 0 8px rgba(94,224,160,.55), 0 0 18px rgba(94,224,160,.3); }
html[data-theme="dark"][data-piel="suave"] .hora-fila .slot:hover, html[data-theme="dark"][data-piel="suave"] .dia7:hover, html[data-theme="dark"][data-piel="suave"] .menu-flotante button:hover { background: var(--nm-hover); }
html[data-theme="dark"][data-piel="suave"] input::-webkit-calendar-picker-indicator { filter: invert(.85); }
html[data-theme="dark"][data-piel="suave"] .modal select, html[data-theme="dark"][data-piel="suave"] .campo select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23AEB5C2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
html[data-theme="dark"][data-piel="suave"] .ico-nav, html[data-theme="dark"][data-piel="suave"] .nav a .ico-nav { color: var(--tinta-3); } html[data-theme="dark"][data-piel="suave"] .nav a.activa .ico-nav, html[data-theme="dark"][data-piel="suave"] .nav a:hover .ico-nav { color: var(--acento); }
html[data-theme="dark"][data-piel="suave"] .nav a.activa { color: var(--acento); background: transparent; }
html[data-theme="dark"][data-piel="suave"] .cifra .e::before { box-shadow: 0 0 0 3px rgba(255,255,255,.08); }
html[data-theme="dark"][data-piel="suave"] .cifra-mini, html[data-theme="dark"][data-piel="suave"] .mes-dia.sel { color: var(--tinta); }