/* ============================================================
   CAUTIO · capa rd: el cromado de la casa nueva con la marca de Cautio
   De Santgar se toma la ESTRUCTURA y la lógica (menú lateral con grupos
   que se abren donde estás, barra con buscador ⌘K y la persona, muelle
   plegable, esqueletos de carga, cifras con su variación, tablas limpias)
   y las reglas: un solo acento (aquí, ninguno: la tinta), color sólo como
   señal y nunca solo, nada se sale de su caja, movimiento corto, celular
   con inputs de 16 px.
   La piel es MARCA.md: Jost en todo, lo chico en mayúsculas con tracking,
   lo grande en peso normal, nunca negritas; Hueso / Carbón / Blanca; las
   tres señales (óxido, ámbar, oliva) sólo en texto, filetes y puntos;
   tarjetas que flotan por tono, sin sombra; sin íconos decorativos (los
   del lateral son funcionales: sostienen el menú plegado).
   Va después de panel.css y hereda sus tokens: no los cambia.
   ============================================================ */
html.rd body,body.rd{ --rd-ancho:248px; --rd-ancho-min:72px;
  --lat-fondo:#212225; --lat-tinta:#F0F0F0; --lat-apoyo:#8E9093; --lat-linea:rgba(240,240,240,.10); --lat-activo:rgba(246,245,241,.10) }
body.rd.oscuro{ --lat-fondo:#1A1B1D; --lat-linea:rgba(240,240,240,.08); --lat-activo:rgba(246,245,241,.12) }

/* ---------- Disposición ---------- */
body.rd .barra{ display:none }
body.rd main{ max-width:none; margin-left:var(--rd-ancho); padding:28px max(36px,calc((100vw - var(--rd-ancho) - 1380px)/2)) 90px; transition:margin-left .2s cubic-bezier(.22,.61,.36,1) }
body.rd .apertura{ max-width:none; margin-bottom:34px }
body.rd .apertura.conmarca{ grid-template-columns:1fr; gap:0 }
body.rd .apertura.conmarca .monofig{ display:none }
body.rd .apertura h1{ max-width:24ch }
body.rd .tablero{ gap:22px } body.rd .columna{ gap:22px }
body.rd .resumen{ margin-bottom:34px }

/* ============ MENÚ LATERAL (Carbón) ============ */
.rd-lat{ position:fixed; left:0; top:0; bottom:0; width:var(--rd-ancho); z-index:96; background:var(--lat-fondo); color:var(--lat-tinta); display:flex; flex-direction:column; overflow:hidden; transition:width .2s cubic-bezier(.22,.61,.36,1) }
.rd-marca{ display:flex; align-items:center; gap:14px; height:74px; padding:0 22px; flex:none; color:var(--lat-tinta); text-decoration:none }
.rd-marca .mono{ width:28px; height:auto; flex:none; stroke:var(--lat-tinta); fill:none; overflow:visible }
.rd-marca .mono .m-arco{ stroke:var(--lat-apoyo) }
.rd-marca b{ display:block; font-weight:400; font-size:13px; letter-spacing:.42em; line-height:1; text-transform:uppercase; padding-left:.42em }
.rd-marca small{ display:block; font-size:9px; letter-spacing:.3em; text-transform:uppercase; color:var(--lat-apoyo); margin-top:7px; padding-left:.3em }
.rd-nav{ flex:1; min-height:0; overflow-y:auto; padding:4px 14px 18px; scrollbar-width:thin; scrollbar-color:var(--lat-linea) transparent }
.rd-nav h5{ font-size:9.5px; font-weight:400; letter-spacing:.3em; text-transform:uppercase; color:var(--lat-apoyo); padding:22px 10px 8px; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.rd-nav h5:first-child{ padding-top:8px }
.rd-nav a,.rd-nav button.nav{ display:flex; align-items:center; gap:12px; width:100%; padding:9px 10px; margin:1px 0; border-radius:10px; border:0; background:transparent; text-align:left; cursor:pointer; text-decoration:none;
  font-family:inherit; font-size:14px; font-weight:400; color:var(--lat-tinta); line-height:1.3; opacity:.78; transition:opacity .25s, background .25s }
.rd-nav a svg,.rd-nav button.nav svg{ flex:none; width:17px; height:17px; color:var(--lat-apoyo) }
.rd-nav a .t,.rd-nav button.nav .t{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1 }
.rd-nav a:hover,.rd-nav button.nav:hover{ opacity:1; background:var(--lat-activo) }
.rd-nav a.on,.rd-nav button.nav.on{ opacity:1; background:var(--lat-activo); font-weight:500 }
.rd-nav a.on svg,.rd-nav button.nav.on svg{ color:var(--lat-tinta) }
.rd-nav .hijo{ font-size:13.5px; padding:7px 10px 7px 39px }
.rd-nav .hijo svg{ width:14px; height:14px }
.rd-nav .n{ font-size:10px; letter-spacing:.08em; color:var(--lat-apoyo); border:1px solid var(--lat-linea); border-radius:999px; padding:1px 7px }
.rd-pie{ flex:none; padding:10px 14px 14px; border-top:1px solid var(--lat-linea) }
.rd-yo-lat{ display:flex; align-items:center; gap:11px; width:100%; background:transparent; border:0; border-radius:12px; padding:8px 10px; color:var(--lat-tinta); text-align:left; cursor:pointer; font-family:inherit; transition:background .25s }
.rd-yo-lat:hover{ background:var(--lat-activo) }
.rd-yo-lat .t{ min-width:0; flex:1 }
.rd-yo-lat b{ display:block; font-size:10.5px; font-weight:400; letter-spacing:.24em; text-transform:uppercase; line-height:1.25 }
.rd-yo-lat small{ display:block; font-size:12.5px; color:var(--lat-apoyo); line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:3px }
.rd-min{ position:fixed; top:25px; left:calc(var(--rd-ancho) - 12px); width:24px; height:24px; border-radius:50%; z-index:97; background:var(--fondo); border:1px solid var(--linea); color:var(--apoyo); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:left .2s cubic-bezier(.22,.61,.36,1), color .25s }
.rd-min:hover{ color:var(--tinta); border-color:var(--tinta) }
.rd-min svg{ width:13px; height:13px }
body.rd.lat-min{ --rd-ancho:var(--rd-ancho-min) }
body.rd.lat-min .rd-marca{ padding:0; justify-content:center }
body.rd.lat-min .rd-marca > div,body.rd.lat-min .rd-nav h5,body.rd.lat-min .rd-nav .t,body.rd.lat-min .rd-nav .n,body.rd.lat-min .rd-yo-lat .t,body.rd.lat-min .rd-yo-lat .avt-pt{ display:none }
body.rd.lat-min .rd-nav{ padding:4px 10px 18px }
body.rd.lat-min .rd-nav a,body.rd.lat-min .rd-nav button.nav{ justify-content:center; padding:10px 0 }
body.rd.lat-min .rd-nav .hijo{ display:none }
body.rd.lat-min .rd-yo-lat{ justify-content:center; padding:8px 0 }
body.rd.lat-min .rd-min svg{ transform:rotate(180deg) }

/* ============ BARRA SUPERIOR (Hueso) ============ */
.rd-top{ position:sticky; top:0; z-index:40; margin-left:var(--rd-ancho); height:74px; display:flex; align-items:center; gap:16px; padding:0 clamp(16px,2.6vw,36px);
  background:color-mix(in srgb, var(--fondo) 90%, transparent); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid var(--linea-suave); transition:margin-left .2s cubic-bezier(.22,.61,.36,1) }
.rd-top-izq{ flex:1; min-width:0; display:flex; align-items:center; gap:14px }
.rd-busca{ display:flex; align-items:center; gap:10px; min-width:0; width:min(400px,100%); height:40px; padding:0 10px 0 16px; border-radius:var(--r-pildora); background:var(--placa); border:1px solid var(--linea); color:var(--apoyo); font:inherit; font-size:14px; cursor:text; text-align:left; transition:border-color .25s }
.rd-busca:hover{ border-color:var(--tinta) }
.rd-busca span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.rd-busca kbd{ font-family:inherit; font-size:9.5px; letter-spacing:.14em; color:var(--apoyo); border:1px solid var(--linea); border-radius:6px; padding:3px 6px }
.rd-busca svg{ width:15px; height:15px; flex:none; color:var(--apoyo) }
.rd-ic{ width:40px; height:40px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:transparent; border:1px solid transparent; color:var(--apoyo); position:relative; cursor:pointer; flex:none; transition:color .25s, border-color .25s }
.rd-ic:hover{ color:var(--tinta); border-color:var(--linea) }
.rd-ic svg{ width:18px; height:18px }
.rd-ic .pt{ position:absolute; top:4px; right:2px; min-width:16px; height:16px; padding:0 4px; border-radius:999px; font-size:9.5px; line-height:16px; letter-spacing:.04em; color:var(--fondo); background:var(--tinta); text-align:center }
.rd-yo{ display:flex; align-items:center; gap:11px; background:transparent; border:0; border-left:1px solid var(--linea-suave); margin-left:6px; padding:2px 4px 2px 18px; color:var(--tinta); cursor:pointer; font-family:inherit; text-align:left; height:44px }
.rd-yo-t b{ display:block; font-size:10.5px; font-weight:400; letter-spacing:.24em; text-transform:uppercase; line-height:1.2; color:var(--tinta) }
.rd-yo-t small{ display:block; font-size:12.5px; color:var(--apoyo); line-height:1.25; max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:3px }
.rd-yo > svg{ color:var(--apoyo); width:14px; height:14px }
.rd-yo:hover .rd-yo-t small{ color:var(--tinta) }
/* la persona: iniciales sobre tinta; el color es identidad, no señal */
.avt{ display:inline-flex; align-items:center; justify-content:center; overflow:hidden; flex:none; color:var(--fondo); background:var(--tinta); font-family:inherit; font-weight:400; letter-spacing:.06em; line-height:1; border-radius:50%; user-select:none }
.rd-lat .avt{ color:var(--lat-fondo); background:var(--lat-tinta) }
.avt-pt{ display:inline-block; width:8px; height:8px; border-radius:50%; flex:none; background:var(--senal-bien); margin-left:auto }
/* el selector de cliente sigue siendo el control más importante de la barra */
body.rd .b-contexto{ display:flex; align-items:center; gap:12px; position:relative }
body.rd .b-cliente{ height:40px; padding:0 14px 0 18px; border-radius:var(--r-pildora); background:var(--placa); border:1px solid var(--linea); font-size:14.5px; font-weight:500; gap:12px }
body.rd .b-abrir{ padding:10px 18px 9px }

/* menú de la persona */
.rd-menu{ position:fixed; z-index:120; background:var(--placa); border-radius:var(--r-caja); border:1px solid var(--linea); padding:6px; min-width:240px; animation:rdIn .3s cubic-bezier(.22,.61,.36,1) }
@keyframes rdIn{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }
.rd-menu button{ display:flex; align-items:center; gap:11px; width:100%; border:0; background:transparent; border-radius:10px; font:inherit; font-size:14px; padding:9px 12px; color:var(--tinta); cursor:pointer; text-align:left; transition:background .25s }
.rd-menu button svg{ width:15px; height:15px; color:var(--apoyo) }
.rd-menu button:hover{ background:var(--fondo) }
.rd-menu .sep{ height:1px; background:var(--linea-suave); margin:5px 6px }
.rd-menu-cab{ display:flex; gap:12px; align-items:center; padding:10px 12px 12px; border-bottom:1px solid var(--linea-suave); margin-bottom:5px }
.rd-menu-cab b{ display:block; font-size:14px; font-weight:500; line-height:1.3 }
.rd-menu-cab small{ display:block; font-size:12.5px; color:var(--apoyo); line-height:1.35; max-width:210px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

/* ============ MUELLE ============ */
#rdDock{ position:fixed; right:22px; bottom:22px; z-index:400; display:flex; flex-direction:column; align-items:flex-end; gap:10px }
.rd-dock-b{ display:flex; align-items:center; gap:10px; background:transparent; border:0; padding:0; cursor:pointer; font-family:inherit }
.rd-dock-b .lbl{ opacity:0; transform:translateX(6px); transition:opacity .3s, transform .3s; background:var(--placa); color:var(--tinta); border:1px solid var(--linea); border-radius:var(--r-pildora); padding:6px 13px; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; white-space:nowrap; pointer-events:none }
#rdDock.abierto .rd-dock-b .lbl,.rd-dock-b:hover .lbl{ opacity:1; transform:none }
.rd-dock-b .ico{ position:relative; width:46px; height:46px; border-radius:50%; background:var(--placa); border:1px solid var(--linea); display:inline-flex; align-items:center; justify-content:center; color:var(--tinta); transition:border-color .25s }
.rd-dock-b .ico svg{ width:18px; height:18px }
.rd-dock-b:hover .ico{ border-color:var(--tinta) }
.rd-dock-b .ico .pt{ position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 5px; border-radius:999px; font-size:10px; line-height:18px; color:var(--fondo); background:var(--tinta); text-align:center }
#rdDock:not(.abierto) #rdDockBtns{ display:none }
#rdDock.abierto #rdDockBtns{ display:flex; flex-direction:column; align-items:flex-end; gap:10px; animation:rdIn .3s cubic-bezier(.22,.61,.36,1) }
.rd-dock-tog .ico{ background:var(--tinta); color:var(--fondo); border-color:var(--tinta) }

/* ============ PANTALLA DE CARGA Y ESQUELETOS ============ */
.vista-sk{ animation:skIn .3s cubic-bezier(.22,.61,.36,1) }
@keyframes skIn{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }
.sk{ background:linear-gradient(90deg,var(--linea-suave) 25%,var(--linea) 50%,var(--linea-suave) 75%); background-size:400% 100%; animation:skShine 1.6s ease infinite; border-radius:var(--r-caja) }
@keyframes skShine{ 0%{ background-position:100% 0 } 100%{ background-position:0 0 } }
.vsk-k{ width:120px; height:10px; margin-bottom:14px }
.vsk-t{ width:min(460px,70%); height:26px; margin-bottom:26px }
.vsk-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:26px }
.vsk-kpi{ height:96px; border-radius:var(--r-tarjeta) }
.vsk-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px }
.vsk-card{ height:190px; border-radius:var(--r-tarjeta) }
.vsk-filas{ display:flex; flex-direction:column; gap:12px }
.vsk-fila{ height:56px; border-radius:var(--r-tarjeta) }
@media(prefers-reduced-motion:reduce){ .sk,.vista-sk,.rd-menu,#rdDock.abierto #rdDockBtns{ animation:none } }

/* ============ CELULAR ============ */
.rd-hamb{ display:none }
@media(max-width:1079px){
  .rd-lat{ width:280px; left:-300px; transition:left .25s cubic-bezier(.22,.61,.36,1) }
  body.rd.lat-abierto .rd-lat{ left:0 }
  body.rd main,.rd-top{ margin-left:0 }
  body.rd main{ padding:20px 18px 70px }
  .rd-min{ display:none }
  .rd-hamb{ display:inline-flex }
  .rd-busca{ width:auto; flex:1 } .rd-busca kbd{ display:none }
  body.rd.lat-abierto::after{ content:''; position:fixed; inset:0; background:rgba(33,34,37,.45); z-index:95 }
}
@media(max-width:720px){
  .rd-top{ height:62px; padding:0 10px; gap:6px }
  .rd-busca{ height:38px; width:40px; flex:none; padding:0; justify-content:center }
  .rd-busca span{ display:none }
  .rd-ic{ width:36px; height:36px }
  .rd-yo{ border-left:0; margin-left:0; padding:0 2px }
  .rd-yo-t,.rd-yo > svg{ display:none }
  body.rd .b-etiqueta,body.rd .b-abrir{ display:none }
  body.rd input,body.rd select,body.rd .campo input{ font-size:16px }
  .rd-dock-b .lbl{ display:none } .rd-dock-b .ico{ width:44px; height:44px }
}
@media print{ .rd-lat,.rd-top,.rd-min,#rdDock{ display:none!important } body.rd main{ margin-left:0!important; padding:0!important } }

/* ============================================================
   QUINTA PALETA · acentos de la plataforma (28-sep-2026)
   Luis: «quiero que sí haya colores como en Santgar Legal, con el estilo
   de Cautio, no aburrido». Tonos apagados que conviven con el Hueso; en
   Carbón suben de luz. Un acento (azul) para lo interactivo y activo, y
   cuatro categóricos para mosaicos y tarjetas. Las señales siguen siendo
   estado. Regla que se conserva: el color nunca va solo.
   ============================================================ */
html.rd body,body.rd{
  --acc:#2B4C7E; --acc-soft:rgba(43,76,126,.10); --acc-line:rgba(43,76,126,.28);
  --t-azul:#2B4C7E; --t-azul-soft:rgba(43,76,126,.11);
  --t-ciruela:#6B4C7A; --t-ciruela-soft:rgba(107,76,122,.11);
  --t-cobre:#A8683A; --t-cobre-soft:rgba(168,104,58,.12);
  --t-petroleo:#2E6B6B; --t-petroleo-soft:rgba(46,107,107,.11);
  --t-oliva:var(--senal-bien); --t-oliva-soft:rgba(74,107,79,.12);
  --t-ambar:var(--senal-atencion); --t-ambar-soft:rgba(127,92,19,.12);
  --t-oxido:var(--senal-alerta); --t-oxido-soft:rgba(140,58,43,.11);
}
body.rd.oscuro{
  --acc:#8FB0E0; --acc-soft:rgba(143,176,224,.14); --acc-line:rgba(143,176,224,.35);
  --t-azul:#8FB0E0; --t-azul-soft:rgba(143,176,224,.13);
  --t-ciruela:#C2A3D1; --t-ciruela-soft:rgba(194,163,209,.13);
  --t-cobre:#E0A878; --t-cobre-soft:rgba(224,168,120,.13);
  --t-petroleo:#7FC1C1; --t-petroleo-soft:rgba(127,193,193,.13);
  --t-oliva-soft:rgba(143,184,148,.13); --t-ambar-soft:rgba(217,169,74,.13); --t-oxido-soft:rgba(217,138,120,.13);
}
/* lo activo lleva el acento */
.rd-nav a.on,.rd-nav button.nav.on{ background:var(--acc); color:#fff; opacity:1 }
.rd-nav a.on svg,.rd-nav button.nav.on svg{ color:#fff }
body.rd.oscuro .rd-nav a.on,body.rd.oscuro .rd-nav button.nav.on{ color:var(--lat-fondo) } body.rd.oscuro .rd-nav a.on svg,body.rd.oscuro .rd-nav button.nav.on svg{ color:var(--lat-fondo) }
.rd-nav .n{ border-color:transparent; background:var(--lat-activo); color:var(--lat-tinta) }
body.rd .subnav .sub.on{ border-bottom-color:var(--acc); color:var(--acc) }
body.rd .chip.on,body.rd .periodos .chip.on{ background:var(--acc-soft); border-color:var(--acc-line); color:var(--acc) }
body.rd .miga #migaSec,body.rd .miga #migaCliente:last-child,body.rd .entrar,body.rd .b-abrir{ color:var(--acc) }
body.rd .b-abrir{ border-color:var(--acc) }
body.rd .b-abrir:hover{ background:var(--acc); color:#fff }
body.rd input:focus,body.rd .campo input:focus,body.rd .buscador input:focus,body.rd .doc-nombre:focus,body.rd .captura:focus{ border-color:var(--acc); box-shadow:0 0 0 3px var(--acc-soft) }
body.rd .rd-busca:hover,body.rd .b-cliente:hover{ border-color:var(--acc) }
body.rd .tarjeta:hover{ border-color:var(--acc) }
body.rd .tarjeta:hover .t-fl,body.rd .fila:hover .f-asunto,body.rd .celda:hover{ color:var(--acc) }
body.rd .rd-ic .pt,body.rd .rd-dock-b .ico .pt{ background:var(--acc) }
body.rd .avt{ background:var(--acc) }
body.rd .aj-celda b{ background:var(--acc) }
body.rd .traza-svg .banda{ fill:var(--acc-soft) } body.rd .traza-svg .pago{ fill:var(--acc) }
body.rd .linea24 .hito{ fill:var(--acc) } body.rd .linea24 .hoy{ stroke:var(--acc) }
body.rd .rango{ border-color:var(--acc); color:var(--acc) }
body.rd .dona .seg.val,body.rd .mini-dona .seg{ stroke:var(--acc) }
/* mosaicos: icono con tono, como las cifras y tarjetas de Santgar */
.rd-tile{ width:42px; height:42px; border-radius:12px; flex:none; display:inline-flex; align-items:center; justify-content:center; background:var(--acc-soft); color:var(--acc) }
.rd-tile svg{ width:20px; height:20px }
.rd-tile.azul{ background:var(--t-azul-soft); color:var(--t-azul) } .rd-tile.ciruela{ background:var(--t-ciruela-soft); color:var(--t-ciruela) }
.rd-tile.cobre{ background:var(--t-cobre-soft); color:var(--t-cobre) } .rd-tile.petroleo{ background:var(--t-petroleo-soft); color:var(--t-petroleo) }
.rd-tile.oliva{ background:var(--t-oliva-soft); color:var(--t-oliva) } .rd-tile.ambar{ background:var(--t-ambar-soft); color:var(--t-ambar) } .rd-tile.oxido{ background:var(--t-oxido-soft); color:var(--t-oxido) }
body.rd .cifra{ display:flex; gap:16px; align-items:flex-start }
body.rd .cifra > .rd-tile{ margin-top:2px }
body.rd .cifra .rd-c{ min-width:0; flex:1 }
body.rd .cifra.t-oxido .n{ color:var(--t-oxido) } body.rd .cifra.t-ambar .n{ color:var(--t-ambar) }
body.rd .tarjeta{ padding-top:22px }
body.rd .tarjeta > .rd-tile{ position:absolute; right:22px; top:22px; width:38px; height:38px; border-radius:11px }
body.rd .tarjeta .t-num{ color:var(--apoyo) }
/* pastillas de estatus con tono */
body.rd .chip.e-azul{ background:var(--t-azul-soft); border-color:transparent; color:var(--t-azul) }
body.rd .chip.e-ciruela{ background:var(--t-ciruela-soft); border-color:transparent; color:var(--t-ciruela) }
body.rd .chip.e-cobre{ background:var(--t-cobre-soft); border-color:transparent; color:var(--t-cobre) }
body.rd .chip.e-petroleo{ background:var(--t-petroleo-soft); border-color:transparent; color:var(--t-petroleo) }
body.rd .chip.e-oliva,body.rd .chip.on.e-oliva{ background:var(--t-oliva-soft); border-color:transparent; color:var(--t-oliva) }
body.rd .chip.e-ambar{ background:var(--t-ambar-soft); border-color:transparent; color:var(--t-ambar) }
body.rd .chip.e-oxido,body.rd .chip.falta{ background:var(--t-oxido-soft); border-color:transparent; color:var(--t-oxido) }
body.rd .riesgo.alto{ border-left:3px solid var(--t-oxido) } body.rd .riesgo.medio{ border-left:3px solid var(--t-ambar) }
body.rd .aj-celda.s7,body.rd .aj-celda.s8{ background:var(--t-oxido-soft) } body.rd .aj-celda.s5,body.rd .aj-celda.s6{ background:var(--t-ambar-soft) }
body.rd .aviso-linea{ background:var(--t-oxido-soft); border-radius:12px; border-left:3px solid var(--t-oxido); padding:10px 14px }
/* el escritorio: cada cliente de la cartera con su tono */
body.rd .lista-cartera .fila .c-nombre::before{ content:''; display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:9px; background:var(--tono,var(--acc)); vertical-align:middle }

/* ============================================================
   PIEL v3 (28-sep-2026, tarde) · «el mejor hijo»
   De Santgar: el escritorio (saludo, tarjeta de alertas en contra, cifras
   con mosaico, activo en acento). De Olarus: papel cálido, tarjetas con
   sombra suave, filtros en píldora con conteo, cabeceras de grupo.
   De Cautio: Jost, monograma, hueso, señales. Va al final: gana.
   ============================================================ */
html.rd body,body.rd{ --r-tarjeta:14px; --r-caja:10px;
  --som:0 1px 2px rgba(20,20,20,.04),0 6px 20px rgba(20,20,20,.05); --som-2:0 18px 44px rgba(20,20,20,.14);
  --contra:#212225; --contra-tinta:#F6F5F1; --contra-apoyo:#A9ABAE; --contra-linea:rgba(246,245,241,.14) }
body.rd.oscuro{ --fondo:#1A1B1E; --placa:#232427; --linea:rgba(240,240,240,.11); --linea-suave:rgba(240,240,240,.06);
  --som:none; --som-2:0 18px 44px rgba(0,0,0,.5); --contra:#2A2B30; --contra-linea:rgba(246,245,241,.12); --lat-fondo:#141517 }

/* tipografía: peso 500 donde manda, 400 en cuerpo, kickers cortos */
body.rd{ font-size:14.5px; line-height:1.55 }
body.rd h1{ font-size:32px; font-weight:500; letter-spacing:-.01em; line-height:1.15 }
body.rd .apertura{ margin-bottom:26px }
body.rd .apertura .eyebrow{ font-size:10.5px; letter-spacing:.22em; margin-bottom:12px }
body.rd .apertura h1{ max-width:none }
body.rd .apertura-sub{ margin-top:8px; font-size:15px; color:var(--apoyo); line-height:1.55; max-width:80ch }
body.rd .apertura-sub b{ font-weight:500; color:var(--tinta) }
body.rd .apertura.chica .eyebrow{ margin-bottom:8px }
body.rd .apertura.chica .c-linea{ font-size:14.5px; margin-top:6px }
body.rd .b-titulo h2,body.rd .eyebrow,body.rd .b-etiqueta,body.rd .t-num,body.rd .sol-detalle h4,body.rd .sol-h4{ font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; font-weight:500; color:var(--apoyo) }
body.rd .sol-detalle h4,body.rd .sol-h4{ margin:26px 0 12px }
body.rd .b-cuenta{ font-size:12.5px; letter-spacing:0; text-transform:none; color:var(--apoyo) }
body.rd h3,body.rd .ficha h3,body.rd .t-nombre,body.rd .riesgo-cab h3,body.rd .c-titulo{ font-weight:500 }
body.rd .f-asunto,body.rd .c-nombre,body.rd .m-nombre{ font-weight:400 }
body.rd .f-asunto{ font-size:15px }

/* superficies: tarjetas con cuerpo */
body.rd .bloque,body.rd .ficha.sol,body.rd .riesgo,body.rd .como,body.rd .linea24,body.rd .conexion,body.rd .sol-forma.nueva,body.rd .cifras .cifra,body.rd .tarjeta,body.rd .puente,body.rd .resumen{
  border-radius:var(--r-tarjeta); box-shadow:var(--som); border:1px solid var(--linea); background:var(--placa) }
body.rd .bloque{ padding:20px 22px 16px }
body.rd .b-titulo{ padding-bottom:14px; margin-bottom:4px }
body.rd .tablero{ gap:20px } body.rd .columna{ gap:20px }
body.rd .fila{ padding:12px 0 }
body.rd .bloque .fila:last-child{ padding-bottom:4px }

/* cifras: mosaico + número con peso */
body.rd .resumen{ grid-template-columns:repeat(4,1fr); gap:14px; background:none; border:0; box-shadow:none; padding:0; overflow:visible; margin-bottom:26px }
body.rd .resumen .cifra{ background:var(--placa); border:1px solid var(--linea); border-radius:var(--r-tarjeta); box-shadow:var(--som); padding:18px 18px 16px }
body.rd .resumen .cifra:first-child{ padding-left:18px }
body.rd .cifra{ gap:14px }
body.rd .cifra .n,body.rd .resumen .cifra .n{ font-size:27px; font-weight:500; letter-spacing:-.02em; line-height:1.05 }
body.rd .cifra .t,body.rd .resumen .cifra .t{ font-size:13px; letter-spacing:0; text-transform:none; color:var(--apoyo); margin-top:5px; line-height:1.3 }
.rd-tile{ width:40px; height:40px; border-radius:11px }
.rd-tile svg{ width:19px; height:19px }

/* corre plazo: la tarjeta en contra (como «Recordatorios y alertas» en Santgar) */
body.rd section.bloque:has(#plazos){ background:var(--contra); color:var(--contra-tinta); border-color:var(--contra) }
body.rd section.bloque:has(#plazos) .b-titulo{ border-bottom:1px solid var(--contra-linea) }
body.rd section.bloque:has(#plazos) .b-titulo h2,body.rd section.bloque:has(#plazos) .b-cuenta,body.rd section.bloque:has(#plazos) .f-pie,body.rd section.bloque:has(#plazos) .dias .u{ color:var(--contra-apoyo) }
body.rd section.bloque:has(#plazos) .fila{ border-bottom-color:var(--contra-linea) }
body.rd section.bloque:has(#plazos) .f-asunto,body.rd section.bloque:has(#plazos) .dias .n{ color:var(--contra-tinta) }
body.rd section.bloque:has(#plazos) .fila:hover .f-asunto{ color:#fff }
body.rd section.bloque:has(#plazos) .f-pie .div{ color:var(--contra-linea) }
body.rd section.bloque:has(#plazos) .dias.vencido .n{ color:#D98A78 }
body.rd section.bloque:has(#plazos) .punto.medio{ background:#D9A94A } body.rd section.bloque:has(#plazos) .punto.ok{ background:#8FB894 } body.rd section.bloque:has(#plazos) .punto.alerta{ background:#D98A78 }
/* los días como pastilla, rellena cuando urge */
body.rd .dias{ width:auto; min-width:64px; display:inline-flex; align-items:baseline; gap:4px; padding:5px 11px; border-radius:999px; border:1px solid var(--linea); white-space:nowrap }
body.rd .dias .n{ font-size:15px; font-weight:500; letter-spacing:0 }
body.rd .dias .u{ font-size:10.5px; letter-spacing:.06em }
body.rd .dias.vencido{ background:var(--t-oxido); border-color:var(--t-oxido) }
body.rd .dias.vencido .n{ color:#fff; font-size:10.5px; letter-spacing:.12em }
body.rd section.bloque:has(#plazos) .dias{ border-color:var(--contra-linea) }
body.rd section.bloque:has(#plazos) .dias.vencido{ background:#8C3A2B; border-color:#8C3A2B }
body.rd section.bloque:has(#plazos) .dias.vencido .n{ color:#fff }

/* cartera: cada cliente con su punto, estado en pastilla, «Entrar» en acento */
body.rd .lista-cartera .fila{ padding:13px 0 }
body.rd .c-nombre{ font-size:15px; font-weight:500 }
body.rd .c-nombre .c-marca{ margin-left:8px; font-size:9.5px; letter-spacing:.18em; padding:2px 8px; border-radius:999px; border:1px solid var(--linea); color:var(--apoyo) }
body.rd .c-pie{ font-size:12.5px }
body.rd .c-derecha .estado{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; padding:3px 10px; border-radius:999px; border:1px solid transparent }
body.rd .estado.ok{ background:var(--t-oliva-soft); color:var(--t-oliva) } body.rd .estado.medio{ background:var(--t-ambar-soft); color:var(--t-ambar) } body.rd .estado.alerta{ background:var(--t-oxido-soft); color:var(--t-oxido) }
body.rd .entrar{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--acc) }
body.rd .mini-dona .pista{ stroke:var(--linea) }
/* esperando al cliente: contador como anillo de avance */
body.rd .contador{ width:auto; min-width:64px; font-size:19px; font-weight:500; padding:8px 12px; border-radius:12px; border:1px solid var(--linea); text-align:center; line-height:1 }
body.rd .contador small{ font-size:10px; letter-spacing:.12em; margin-top:4px }
body.rd .pendientes li{ font-size:13.5px }
body.rd .casilla{ border-radius:5px; border:1.5px solid var(--linea) }
body.rd .pendientes li.hecho .casilla{ background:var(--t-oliva); border-color:var(--t-oliva) }

/* filtros como en Olarus: píldoras con conteo, la activa rellena */
body.rd .periodos .chip{ padding:6px 13px; font-size:12.5px; letter-spacing:0; text-transform:none; background:var(--placa); border:1px solid var(--linea); color:var(--tinta) }
body.rd .periodos .chip b{ font-weight:400; color:var(--apoyo); margin-left:5px }
body.rd .periodos .chip.on{ background:var(--tinta); border-color:var(--tinta); color:var(--fondo) }
body.rd .periodos .chip.on b{ color:var(--fondo); opacity:.7 }
body.rd.oscuro .periodos .chip.on{ background:var(--contra-tinta); color:var(--contra) }
body.rd .subnav{ margin:-4px 0 24px }
body.rd .subnav .sub{ font-size:13.5px; letter-spacing:0; text-transform:none; padding:10px 2px 12px; margin-right:22px; font-weight:400 }
body.rd .subnav .sub.on{ font-weight:500 }
/* botones: primario en tinta (Olarus «+ Company»), secundario contorno */
body.rd .btn{ font-size:12.5px; letter-spacing:.02em; text-transform:none; font-weight:500; padding:10px 18px; border-radius:999px }
body.rd .btn.sec{ box-shadow:none }
body.rd .btn.ancho{ padding:13px 18px }
body.rd .mas{ border-radius:50% }

/* tarjetas de sección: cabecera con mosaico y flecha en acento */
body.rd .tarjeta{ padding:20px 20px 18px; min-height:172px }
body.rd .tarjeta > .rd-tile{ top:18px; right:18px; width:36px; height:36px }
body.rd .t-num{ margin-bottom:12px }
body.rd .t-nombre{ font-size:16.5px; margin-bottom:6px }
body.rd .t-desc{ font-size:13px; line-height:1.5 }
body.rd .t-fl{ width:30px; height:30px; right:18px; bottom:16px; border-color:var(--linea); color:var(--acc) }
body.rd .tarjeta:hover{ box-shadow:0 10px 26px rgba(43,76,126,.10) }
body.rd .rejilla{ gap:14px }
/* fichas, riesgos, tablas */
body.rd .ficha.sol.abierta{ border-color:var(--acc-line); box-shadow:0 8px 22px rgba(43,76,126,.08) }
body.rd .sol-cab{ padding:18px 22px }
body.rd .sol-detalle{ padding:4px 22px 22px }
body.rd .riesgo{ padding:18px 20px 16px }
body.rd .riesgo-n,body.rd .riesgo-monto{ font-weight:500 }
body.rd .tabla th{ font-size:10.5px; letter-spacing:.14em; font-weight:500; background:var(--fondo) }
body.rd .tabla td{ font-size:13.5px }
body.rd .tabla tr.fuerte td,body.rd .tabla tfoot td,body.rd .p-linea.total,body.rd .p-linea.total b{ font-weight:500 }
body.rd .puente{ padding:6px 20px }
body.rd .buscador input{ height:44px; border-radius:999px; padding:0 18px; box-shadow:var(--som) }

/* cromado afinado */
.rd-top{ height:70px; background:color-mix(in srgb, var(--fondo) 92%, transparent) }
.rd-busca{ height:42px; box-shadow:var(--som) }
.rd-busca kbd{ font-size:10px }
body.rd .b-cliente{ height:42px; box-shadow:var(--som) }
.rd-yo-t b{ font-size:12.5px; letter-spacing:.06em; font-weight:500 }
.rd-yo-t small{ margin-top:1px }
.avt{ font-weight:500 }
.rd-lat{ width:var(--rd-ancho) }
.rd-nav a,.rd-nav button.nav{ opacity:.82; font-size:13.5px; padding:8px 10px }
.rd-nav a svg,.rd-nav button.nav svg{ width:16px; height:16px }
.rd-nav h5{ font-size:9.5px; padding-top:20px }
.rd-menu{ box-shadow:var(--som-2) }
.rd-dock-b .ico{ box-shadow:var(--som) }
body.rd .aviso{ font-size:13px; letter-spacing:.02em; text-transform:none; background:var(--contra); color:var(--contra-tinta); border-radius:12px; padding:11px 16px; box-shadow:var(--som-2) }
body.rd .capa-caja{ box-shadow:var(--som-2) }
body.rd .cargando-bloque{ font-size:12px; letter-spacing:.12em; text-transform:uppercase }
/* oscuro: el contra sube de luz y las tarjetas se separan del fondo por tono */
body.rd.oscuro .cifras .cifra,body.rd.oscuro .resumen .cifra,body.rd.oscuro .bloque,body.rd.oscuro .tarjeta,body.rd.oscuro .ficha.sol{ background:var(--placa) }
body.rd.oscuro .periodos .chip{ background:transparent }

/* ============================================================
   PIEL v4 · BLANCA Y VIBRANTE (28-sep-2026, noche)
   Luis: «para la app, el blanco de las reglas de Cautio; el hueso es del
   sitio. Y colores vibrantes: odio que todo sea tan apagado». Paleta Blanca
   de MARCA.md como base; acentos vivos para lo activo y lo categórico; las
   señales suben de saturación. Carbón en oscuro.
   ============================================================ */
html.rd body,body.rd{
  --fondo:#FCFCFC; --placa:#FFFFFF; --tinta:#1F262A; --medio:#2D3237; --apoyo:#7A7D80; --piedra:#A6A9AD;
  --placa-tinta:#1F262A; --placa-sec:#2D3237; --placa-apoyo:#7A7D80;
  --linea:#E6E8EC; --linea-suave:#F0F1F4;
  --som:0 1px 2px rgba(31,38,42,.05),0 8px 24px rgba(31,38,42,.06);
  --acc:#3056F5; --acc-soft:rgba(48,86,245,.10); --acc-line:rgba(48,86,245,.30);
  --t-azul:#3056F5; --t-azul-soft:rgba(48,86,245,.10);
  --t-ciruela:#8B3DFF; --t-ciruela-soft:rgba(139,61,255,.10);
  --t-cobre:#FF7A1A; --t-cobre-soft:rgba(255,122,26,.12);
  --t-petroleo:#0EA5E9; --t-petroleo-soft:rgba(14,165,233,.12);
  --senal-bien:#16A34A; --senal-atencion:#E0A100; --senal-alerta:#E11D48;
  --t-oliva:#16A34A; --t-oliva-soft:rgba(22,163,74,.12); --t-ambar:#C98A00; --t-ambar-soft:rgba(224,161,0,.14); --t-oxido:#E11D48; --t-oxido-soft:rgba(225,29,72,.10);
  --lat-fondo:#1F262A; --lat-tinta:#FFFFFF; --lat-apoyo:#8C949B; --lat-linea:rgba(255,255,255,.10); --lat-activo:rgba(255,255,255,.08);
  --contra:#1F262A; --contra-tinta:#FFFFFF; --contra-apoyo:#A7AEB5; --contra-linea:rgba(255,255,255,.14);
}
body.rd.oscuro{
  --fondo:#16191C; --placa:#1F2327; --tinta:#F2F4F6; --medio:#C9CED3; --apoyo:#8C949B; --piedra:#5F676E;
  --linea:rgba(242,244,246,.10); --linea-suave:rgba(242,244,246,.06); --som:none;
  --acc:#6D8BFF; --acc-soft:rgba(109,139,255,.16); --acc-line:rgba(109,139,255,.38);
  --t-azul:#6D8BFF; --t-azul-soft:rgba(109,139,255,.16); --t-ciruela:#B08CFF; --t-ciruela-soft:rgba(176,140,255,.16);
  --t-cobre:#FF9A4D; --t-cobre-soft:rgba(255,154,77,.16); --t-petroleo:#4CC3F5; --t-petroleo-soft:rgba(76,195,245,.16);
  --senal-bien:#4ADE80; --senal-atencion:#FBBF24; --senal-alerta:#FB7185;
  --t-oliva:#4ADE80; --t-oliva-soft:rgba(74,222,128,.14); --t-ambar:#FBBF24; --t-ambar-soft:rgba(251,191,36,.14); --t-oxido:#FB7185; --t-oxido-soft:rgba(251,113,133,.14);
  --lat-fondo:#111417; --contra:#262B30; --contra-linea:rgba(255,255,255,.12);
}
/* lo activo, en color de verdad */
.rd-nav a.on,.rd-nav button.nav.on{ background:var(--acc); color:#fff; box-shadow:0 6px 18px rgba(48,86,245,.35) }
body.rd.oscuro .rd-nav a.on,body.rd.oscuro .rd-nav button.nav.on{ color:#0F1420 }
body.rd .periodos .chip.on{ background:var(--acc); border-color:var(--acc); color:#fff }
body.rd.oscuro .periodos .chip.on{ color:#0F1420 }
body.rd .periodos .chip.on b{ color:#fff; opacity:.75 }
body.rd .btn{ background:var(--tinta); border-color:var(--tinta) }
body.rd .b-abrir{ background:var(--acc); border-color:var(--acc); color:#fff }
body.rd .avt,.rd-lat .avt,body.rd .rd-lat .avt{ background:var(--acc); color:#fff }
body.rd .rd-ic .pt,body.rd .rd-dock-b .ico .pt{ background:var(--senal-alerta) }
body.rd .rd-dock-tog .ico{ background:var(--acc); border-color:var(--acc); color:#fff }
body.rd .tarjeta:hover{ border-color:var(--acc); box-shadow:0 12px 30px rgba(48,86,245,.12) }
body.rd .ficha.sol.abierta{ border-color:var(--acc-line) }
body.rd .subnav .sub.on{ color:var(--acc); border-bottom-color:var(--acc) }
body.rd .dias.vencido{ background:var(--senal-alerta); border-color:var(--senal-alerta) }
body.rd .dias{ border-color:var(--linea); background:var(--placa) }
body.rd section.bloque:has(#plazos) .dias.vencido{ background:#E11D48; border-color:#E11D48 }
body.rd section.bloque:has(#plazos) .punto.medio{ background:#FBBF24 } body.rd section.bloque:has(#plazos) .punto.ok{ background:#4ADE80 } body.rd section.bloque:has(#plazos) .punto.alerta{ background:#FB7185 }
body.rd section.bloque:has(#plazos) .dias.vencido .n{ color:#fff }
body.rd .cifra.t-oxido .n{ color:var(--senal-alerta) }
body.rd .rd-tile{ border-radius:12px }
/* señales con más presencia */
body.rd .punto{ width:9px; height:9px }
body.rd .estado.ok{ background:var(--t-oliva-soft); color:#15803D } body.rd .estado.medio{ background:var(--t-ambar-soft); color:#A16207 } body.rd .estado.alerta{ background:var(--t-oxido-soft); color:#BE123C }
body.rd.oscuro .estado.ok{ color:var(--t-oliva) } body.rd.oscuro .estado.medio{ color:var(--t-ambar) } body.rd.oscuro .estado.alerta{ color:var(--t-oxido) }
body.rd .riesgo.alto{ background:rgba(225,29,72,.04); border-left-color:var(--senal-alerta) } body.rd .riesgo.medio{ background:rgba(224,161,0,.05); border-left-color:var(--senal-atencion) }
body.rd .aviso-linea{ background:rgba(225,29,72,.07); border-left-color:var(--senal-alerta) }
body.rd .chip.e-ambar{ color:#A16207 }
body.rd .mini-dona .seg,body.rd .dona .seg.val{ stroke:var(--acc) }
body.rd .lista-cartera .fila .c-nombre::before{ width:9px; height:9px }
.rd-busca,body.rd .b-cliente,body.rd .buscador input{ border-color:var(--linea) }
.rd-top{ background:rgba(252,252,252,.9) }
body.rd.oscuro .rd-top{ background:rgba(22,25,28,.9) }
body.rd section.bloque:has(#plazos) .dias{ background:transparent; border-color:var(--contra-linea) }
body.rd section.bloque:has(#plazos) .dias .n,body.rd section.bloque:has(#plazos) .dias .u{ color:var(--contra-tinta) }
body.rd section.bloque:has(#plazos) .dias .u{ opacity:.7 }

/* ============================================================
   PIEL v5 · EQUILIBRIO (28-sep-2026, noche)
   Luis: «un poco menos casual que Santgar; en colores ya me gusta, pero
   más profesional». Mismos colores, con disciplina: radios cortos (12 en
   tarjeta, 8 en control), el acento sólo donde hay que mirar (activo,
   enlace, foco), botones rectos en tinta, mosaicos discretos, números
   tabulares, pastillas sólo para estado.
   ============================================================ */
html.rd body,body.rd{ --r-tarjeta:12px; --r-caja:8px; --r-pildora:999px; --som:0 1px 2px rgba(31,38,42,.04),0 4px 14px rgba(31,38,42,.05) }
/* controles rectos */
body.rd .btn,body.rd .btn.sec,body.rd .btn.ancho,body.rd .periodos .chip,body.rd .chip.sel,body.rd .doc-nombre,body.rd .captura,body.rd .campo input,body.rd .buscador input,body.rd .agregar input,body.rd .sol-forma .campo select,.rd-busca,body.rd .b-cliente,body.rd .b-abrir,.rd-busca kbd{ border-radius:8px }
body.rd .btn{ padding:9px 16px; font-size:12.5px; letter-spacing:.04em; font-weight:500 }
body.rd .btn.sec{ background:var(--placa); border:1px solid var(--linea); color:var(--tinta) }
body.rd .btn.sec:hover{ border-color:var(--tinta) }
body.rd .mas{ border-radius:8px }
body.rd .periodos .chip{ padding:6px 12px; font-size:12.5px }
body.rd .periodos .chip.on{ background:var(--tinta); border-color:var(--tinta); color:var(--fondo) }
body.rd .periodos .chip.on b{ color:var(--fondo) }
body.rd.oscuro .periodos .chip.on{ background:var(--tinta); color:var(--fondo) }
/* pastillas de estado sí redondas; lo demás no */
body.rd .chip,body.rd .vis,body.rd .c-marca,body.rd .estado,body.rd .dias,body.rd .c-derecha .estado{ border-radius:999px }
body.rd .chip{ font-size:11.5px; padding:3px 9px }
/* acento con disciplina */
.rd-nav a.on,.rd-nav button.nav.on{ background:var(--acc-soft); color:#fff; box-shadow:none; border-left:2px solid var(--acc); border-radius:0 8px 8px 0; padding-left:10px }
.rd-nav a.on svg,.rd-nav button.nav.on svg{ color:var(--acc) }
body.rd.oscuro .rd-nav a.on,body.rd.oscuro .rd-nav button.nav.on{ color:#fff }
body.rd .rd-dock-tog .ico{ background:var(--tinta); border-color:var(--tinta); color:var(--fondo) }
body.rd .avt,.rd-lat .avt,body.rd .rd-lat .avt{ background:var(--tinta); color:var(--fondo) }
body.rd .rd-lat .avt{ background:var(--lat-tinta); color:var(--lat-fondo) }
body.rd .b-abrir{ background:transparent; color:var(--acc); border:1px solid var(--acc-line) }
body.rd .b-abrir:hover{ background:var(--acc); color:#fff }
body.rd .tarjeta:hover{ box-shadow:0 8px 22px rgba(31,38,42,.08); border-color:var(--acc-line) }
body.rd .tarjeta > .rd-tile{ width:32px; height:32px; border-radius:8px; top:16px; right:16px }
body.rd .tarjeta > .rd-tile svg{ width:16px; height:16px }
.rd-tile{ border-radius:9px; width:38px; height:38px }
.rd-tile svg{ width:17px; height:17px }
body.rd .t-fl{ border-radius:8px; color:var(--apoyo) }
body.rd .tarjeta:hover .t-fl{ background:var(--tinta); border-color:var(--tinta); color:var(--fondo) }
body.rd .entrar{ color:var(--acc); font-size:11.5px }
/* números y tipografía sobrios */
body.rd .cifra .n,body.rd .resumen .cifra .n,body.rd .dias .n,body.rd .riesgo-n,body.rd .riesgo-monto,body.rd .contador{ font-variant-numeric:tabular-nums }
body.rd .cifra .n,body.rd .resumen .cifra .n{ font-size:25px }
body.rd h1{ font-size:29px }
body.rd .apertura-sub{ font-size:14.5px }
body.rd .b-titulo h2,body.rd .eyebrow,body.rd .b-etiqueta,body.rd .t-num,body.rd .sol-detalle h4,body.rd .sol-h4{ letter-spacing:.18em; font-size:10px }
body.rd .t-nombre{ font-size:15.5px }
body.rd .f-asunto{ font-size:14.5px }
body.rd .rd-yo-t b{ letter-spacing:.04em }
body.rd .lista-cartera .fila .c-nombre::before{ width:7px; height:7px; border-radius:2px }
/* cromado más sobrio */
.rd-top{ height:64px }
.rd-busca,body.rd .b-cliente{ height:38px; box-shadow:none }
.rd-ic{ border-radius:8px }
.rd-menu{ border-radius:10px }
.rd-menu button{ border-radius:6px }
body.rd .aviso{ border-radius:8px }
.rd-marca b{ letter-spacing:.36em; font-size:12.5px }
.rd-dock-b .ico{ box-shadow:0 4px 14px rgba(31,38,42,.14) }

/* ============ MATERIALIDAD ============ */
.mat-grid{ display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:16px }
@media(max-width:1100px){ .mat-grid{ grid-template-columns:1fr } }
.mat-dona{ display:flex; gap:18px; align-items:center }
.dona-mat{ width:110px; height:110px; flex:none }
.dona-mat .seg.oliva{ stroke:var(--t-oliva) } .dona-mat .seg.ambar{ stroke:var(--t-ambar) } .dona-mat .seg.cobre{ stroke:var(--t-cobre) } .dona-mat .seg.oxido{ stroke:var(--t-oxido) }
.sol-lista.sin-punto li{ padding-left:0; display:flex; align-items:center; gap:8px; flex-wrap:wrap } .sol-lista.sin-punto li::before{ display:none }
.sol-fecha.inline{ display:inline; margin-left:4px }
.cifra .n .de{ font-size:13px; color:var(--apoyo); font-weight:400; letter-spacing:0 }
.mat-rel,.mat-op,.mat-fila{ cursor:pointer }
.mat-ops th.c,.mat-ops td.c{ text-align:center }
.si-no{ display:inline-block; min-width:30px; padding:2px 7px; border-radius:6px; font-size:11px; letter-spacing:.06em; text-transform:uppercase }
.si-no.si{ background:var(--t-oliva-soft); color:var(--t-oliva) } .si-no.no{ background:var(--t-oxido-soft); color:var(--t-oxido) }
.traza-svg.alta{ height:44px }
.traza-svg .evid{ fill:var(--t-ciruela) }
.mat-contrato{ border:1px solid var(--linea); border-radius:var(--r-caja); padding:12px 14px; margin-bottom:10px; font-size:13.5px }
.mat-contrato .sol-texto{ margin:6px 0 }
.falta-txt{ color:var(--t-oxido) }
.capa.lateral{ justify-content:flex-end; padding:0 }
.capa.lateral .capa-caja{ max-width:640px; width:100%; height:100%; border-radius:0; border-left:1px solid var(--linea); animation:rdIn .3s cubic-bezier(.22,.61,.36,1) }
.mat-dims{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:14px 0 18px }
.mat-dim{ border:1px solid var(--linea); border-radius:var(--r-caja); padding:10px 12px; font-size:12.5px; line-height:1.4 }
.mat-dim.no{ border-color:var(--t-oxido-soft); background:var(--t-oxido-soft) }
.mat-dim.si{ background:var(--t-oliva-soft); border-color:transparent }
.mat-dim b{ display:block; font-weight:500; margin-top:4px } .mat-dim small{ display:block; color:var(--apoyo) } .mat-dim em{ display:block; font-style:normal; font-size:11px; color:var(--piedra); margin-top:3px }
.mat-subir{ margin-top:14px; display:grid; gap:10px }
.soltar.chica{ display:block; border:1px dashed var(--linea); border-radius:var(--r-caja); padding:18px; text-align:center; color:var(--apoyo); font-size:13px; cursor:pointer }
.soltar.chica.encima,.soltar.chica:hover{ border-color:var(--acc); color:var(--acc) }
.aviso-linea.ok{ background:var(--t-oliva-soft); border-left-color:var(--t-oliva); color:var(--tinta) }
.tabla .sub2{ display:block; font-size:11.5px; color:var(--apoyo); margin-top:2px; font-weight:400 }
@media(max-width:720px){ .mat-dims{ grid-template-columns:1fr } .capa.lateral .capa-caja{ max-width:100% } }

/* ============ MI PERFIL (editor de avatar) ============ */
.avt img{ width:100%; height:100%; object-fit:cover; display:block }
.avt svg{ display:block }
.avt.avt-px,.avt.avt-foto{ background:transparent }
.rd-menu-cab .rd-est{ display:inline-flex; align-items:center; gap:6px; margin-top:3px; color:var(--medio) }
.rd-menu-cab .avt-pt{ margin-left:0 }
.avt-bg{ position:fixed; inset:0; z-index:9100; background:rgba(31,38,42,.5); display:flex; align-items:center; justify-content:center; padding:18px; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px) }
.avt-caja{ width:min(960px,100%); max-height:94vh; display:flex; flex-direction:column; background:var(--placa); color:var(--tinta); border-radius:16px; box-shadow:var(--som-2); overflow:hidden }
.avt-cab{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; padding:20px 24px 14px; border-bottom:1px solid var(--linea) }
.avt-cab h3{ margin:0; font-size:19px; font-weight:500 } .avt-cab p{ margin:3px 0 0; font-size:13.5px; color:var(--apoyo) }
.avt-x{ width:36px; height:36px; border-radius:8px; border:0; background:transparent; color:var(--apoyo); cursor:pointer; font-size:16px } .avt-x:hover{ background:var(--fondo); color:var(--tinta) }
.avt-cuerpo{ display:grid; grid-template-columns:260px 1fr; min-height:0; flex:1; overflow:hidden }
.avt-izq{ padding:22px; border-right:1px solid var(--linea); display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; background:var(--fondo) }
.avt-prev{ margin:4px 0 10px } .avt-izq b{ font-size:15px; font-weight:500; line-height:1.3 } .avt-izq small{ font-size:12.5px; color:var(--apoyo); line-height:1.45; overflow-wrap:anywhere }
.avt-est{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; padding:5px 11px; border-radius:999px; background:var(--placa); border:1px solid var(--linea); margin-top:6px }
.avt-est .avt-pt,.avt-estados .avt-pt{ margin:0 }
.avt-trab{ font-size:12.5px; color:var(--medio); line-height:1.45; margin-top:2px; max-width:220px }
.avt-izq .btn{ margin-top:auto }
.avt-der{ padding:16px 24px 20px; overflow-y:auto; min-height:0 }
.avt-modos{ display:inline-flex; gap:4px; padding:4px; border-radius:10px; background:var(--fondo); border:1px solid var(--linea); margin-bottom:6px }
.avt-modos button{ border:0; background:transparent; border-radius:7px; padding:7px 14px; font:inherit; font-size:13px; color:var(--apoyo); cursor:pointer }
.avt-modos button.on{ background:var(--placa); color:var(--tinta); box-shadow:var(--som); font-weight:500 }
.avt-sec{ padding:12px 0 4px } .avt-sec + .avt-sec{ border-top:1px solid var(--linea-suave) }
.avt-sec h4{ margin:0 0 9px; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--apoyo); font-weight:500 }
.avt-sws{ display:flex; flex-wrap:wrap; gap:8px }
.avt-sw{ width:30px; height:30px; border-radius:50%; border:2px solid transparent; box-shadow:inset 0 0 0 1px rgba(31,38,42,.12); cursor:pointer; padding:0; transition:transform .12s }
.avt-sw:hover{ transform:scale(1.08) } .avt-sw.on{ border-color:var(--placa); box-shadow:0 0 0 2px var(--acc) }
.avt-ops{ display:flex; flex-wrap:wrap; gap:8px }
.avt-op{ display:flex; flex-direction:column; align-items:center; gap:6px; width:92px; padding:8px 6px 7px; border-radius:10px; border:1px solid var(--linea); background:var(--placa); cursor:pointer; font:inherit; font-size:11.5px; line-height:1.25; color:var(--medio); text-align:center }
.avt-op svg{ border-radius:8px } .avt-op:hover{ border-color:var(--acc-line) } .avt-op.on{ border-color:var(--acc); box-shadow:0 0 0 1px var(--acc); color:var(--tinta); font-weight:500 }
.avt-foto-f{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; padding:6px 0 4px } .avt-foto-f p{ font-size:13px; color:var(--apoyo); margin:0 0 8px; max-width:46ch; line-height:1.55 }
.avt-estados{ display:flex; flex-wrap:wrap; gap:8px }
.avt-estados button{ display:inline-flex; align-items:center; gap:8px; padding:7px 13px; border-radius:999px; border:1px solid var(--linea); background:var(--placa); font:inherit; font-size:13px; color:var(--medio); cursor:pointer }
.avt-estados button.on{ border-color:var(--acc); color:var(--tinta); box-shadow:0 0 0 1px var(--acc); font-weight:500 }
.avt-der input[type=text]{ width:100%; margin-top:2px }
.avt-pie{ display:flex; justify-content:flex-end; gap:10px; padding:14px 24px; border-top:1px solid var(--linea); background:var(--placa) }
@media(max-width:760px){ .avt-cuerpo{ grid-template-columns:1fr } .avt-izq{ border-right:0; border-bottom:1px solid var(--linea); flex-direction:row; flex-wrap:wrap; text-align:left; align-items:center; gap:4px 14px; padding:14px 16px } .avt-izq .avt-prev{ margin:0 } .avt-izq .btn{ margin-top:0 } .avt-op{ width:78px } }
/* La capa lateral deja ver la página detrás, atenuada; y el expediente de
   materialidad no se desborda: la tabla ancha se desliza dentro de su columna. */
body.rd .capa.lateral{ background:rgba(31,38,42,.42); -webkit-backdrop-filter:blur(1.5px); backdrop-filter:blur(1.5px) }
body.rd .sol-detalle > .sol-col{ min-width:0 }
body.rd .sol-detalle{ grid-template-columns:minmax(0,1.6fr) minmax(220px,1fr) }
.mat-ops td, .mat-ops th{ white-space:nowrap } .mat-ops td:nth-child(2){ white-space:normal; min-width:160px }