/* Sistema de interfaz del portal MCMA.
   Se apoya en las variables de color de mcma-tema.css (paleta costera) y le
   suma el lenguaje espacial: aire, radios grandes, pildoras y chips.
   Cargar SIEMPRE despues de mcma-tema.css. */

/* Radios, elevacion y tipografia los define mcma-marca.css.
   Aca solo lo estructural, para que cambiar de marca no toque componentes. */
:root{ --rail-w:66px; --tope:74px; --gap:18px; }

*,*::before,*::after{box-sizing:border-box}
/* display:flex de .u-app le gana a [hidden] por especificidad. Sin esto, una
   seccion oculta se sigue viendo. Ya paso una vez. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
}

/* ---------- Estructura ---------- */
.u-app{display:flex; min-height:100vh}

.u-rail{
  position:fixed; inset:14px auto 14px 14px; width:var(--rail-w);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:14px 0; background:var(--card); border:1px solid var(--bd);
  border-radius:var(--r-lg); box-shadow:var(--e-2); z-index:30;
}
.u-rail .sep{flex:1}
.u-rail button{
  width:42px; height:42px; display:grid; place-items:center; cursor:pointer;
  border:0; border-radius:var(--r-sm); background:transparent; color:var(--mut);
  transition:background .15s, color .15s;
}
.u-rail button:hover{background:var(--card2); color:var(--text)}
.u-rail button.on{background:var(--deep); color:#fff}
.u-rail button svg{width:19px; height:19px; stroke-width:1.7}

.u-main{flex:1; margin-left:calc(var(--rail-w) + 28px); padding:14px 20px 48px 0; min-width:0}
.u-ancho{max-width:1360px; margin:0 auto}

/* ---------- Barra superior ---------- */
.u-tope{
  display:flex; align-items:center; gap:16px; height:var(--tope);
  position:sticky; top:0; z-index:20; background:var(--bg);
}
.u-marca{display:flex; align-items:center; gap:9px; font-weight:700; font-size:16px; letter-spacing:-.2px; flex:none}
.u-marca .g{
  width:32px; height:32px; border-radius:7px; display:grid; place-items:center;
  background:var(--deep); color:#fff; font-size:14px; font-weight:700;
}
.u-marca span{color:var(--accent)}
.u-tope .sep{flex:1}

.u-nav{
  display:flex; gap:2px; padding:4px; overflow-x:auto; scrollbar-width:none;
  background:var(--card); border:1px solid var(--bd); border-radius:var(--r-full);
  box-shadow:var(--e-1);
}
.u-nav::-webkit-scrollbar{display:none}
.u-nav button{
  border:0; background:transparent; color:var(--mut); cursor:pointer;
  font:inherit; font-size:13.5px; font-weight:500; white-space:nowrap;
  padding:8px 15px; border-radius:var(--r-full); transition:background .15s, color .15s;
}
.u-nav button:hover{background:var(--card2); color:var(--text)}
.u-nav button.on{background:var(--deep); color:#fff; font-weight:600}

.u-yo{
  display:flex; align-items:center; gap:9px; flex:none;
  background:var(--card); border:1px solid var(--bd); border-radius:var(--r-full);
  padding:4px 5px 4px 13px; box-shadow:var(--e-1);
}
.u-yo .n{font-size:13px; font-weight:600; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.u-yo .r{font-size:11px; color:var(--mut)}
.u-av{
  width:30px; height:30px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:var(--accent); color:#fff; font-size:12px; font-weight:700;
}

/* ---------- Encabezado de pagina ---------- */
.u-saludo{padding:12px 0 22px}
.u-saludo h1{margin:0 0 5px; font-size:33px; line-height:1.1; font-weight:600; letter-spacing:-1.1px}
.u-saludo p{margin:0; color:var(--mut); font-size:14.5px}

/* ---------- Aviso ---------- */
.u-aviso{
  display:flex; align-items:center; gap:13px; padding:14px 16px; margin-bottom:var(--gap);
  background:var(--card); border:1px solid var(--bd); border-radius:var(--r-md);
}
.u-aviso .i{
  width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex:none;
  background:var(--in-bg); color:var(--accent);
}
.u-aviso .t{flex:1; font-size:13.5px}
.u-aviso .t b{font-weight:650}

/* ---------- Rejilla y tarjetas ---------- */
.u-rej{display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.u-rej.dos{grid-template-columns:repeat(auto-fill,minmax(420px,1fr))}

.u-card{
  background:var(--card); border:1px solid var(--bd); border-radius:var(--r-md);
  padding:18px; box-shadow:var(--e-1);
}
.u-card.aire{padding:22px}
.u-card h2{margin:0 0 3px; font-size:15.5px; font-weight:650; letter-spacing:-.2px}
.u-card .sub{margin:0 0 14px; font-size:13px; color:var(--mut)}

/* Tarjeta compacta con icono, cifra y etiqueta */
.u-dato{display:flex; align-items:center; gap:13px; cursor:default}
.u-dato .i{
  width:40px; height:40px; border-radius:var(--r-sm); display:grid; place-items:center; flex:none;
  background:var(--card2); color:var(--accent); border:1px solid var(--bd);
}
.u-dato .v{font-size:19px; font-weight:700; line-height:1.2; letter-spacing:-.4px; font-variant-numeric:tabular-nums}
.u-dato .k{font-size:12.5px; color:var(--mut)}
a.u-dato,button.u-dato{
  width:100%; text-align:left; font:inherit; color:inherit; text-decoration:none;
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
a.u-dato:hover,button.u-dato:hover{border-color:var(--bd2); box-shadow:var(--e-2); transform:translateY(-1px)}

/* ---------- Chips ---------- */
.u-chip{
  display:inline-flex; align-items:center; gap:6px; flex:none;
  font-size:11.5px; font-weight:600; line-height:1.45; white-space:nowrap;
  padding:2px 9px; border-radius:var(--r-full);
  background:var(--nt-bg); color:var(--subt);
  /* Sin esto el chip se alinea por su linea base, que en una caja inline-flex
     es el borde de abajo: al lado de un texto queda 23 px mas abajo que el
     centro, y parece montado sobre la linea siguiente. */
  vertical-align:middle;
}
.u-chip::before{content:""; width:5px; height:5px; border-radius:50%; background:currentColor; flex:none}
.u-chip.ok{background:var(--ok-bg); color:var(--ok)}
.u-chip.wn{background:var(--wn-bg); color:var(--warn)}
.u-chip.dg{background:var(--dg-bg); color:var(--bad)}
.u-chip.in{background:var(--in-bg); color:var(--accent)}
.u-chip.pl{background:var(--card2); color:var(--mut); border:1px solid var(--bd)}
.u-chip.pl::before{display:none}

/* ---------- Progreso ---------- */
.u-prog{height:6px; border-radius:var(--r-full); background:var(--card2); overflow:hidden; border:1px solid var(--bd)}
.u-prog i{display:block; height:100%; border-radius:var(--r-full); background:var(--accent); transition:width .35s ease}
.u-prog.ok i{background:var(--ok)} .u-prog.wn i{background:var(--warn)} .u-prog.dg i{background:var(--bad)}

/* ---------- Botones ---------- */
.u-btn{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  font:inherit; font-size:13.5px; font-weight:600; white-space:nowrap;
  padding:9px 17px; border-radius:var(--r-full);
  border:1px solid var(--bd); background:var(--card); color:var(--text);
  transition:background .15s, border-color .15s, transform .1s;
}
.u-btn:hover{background:var(--card2); border-color:var(--bd2)}
.u-btn:active{transform:scale(.985)}
.u-btn.pri{background:var(--deep); border-color:var(--deep); color:#fff}
.u-btn.pri:hover{background:var(--accent); border-color:var(--accent)}
.u-btn.acc{background:var(--accent); border-color:var(--accent); color:#fff}
.u-btn.acc:hover{filter:brightness(1.08)}
.u-btn svg{width:16px; height:16px; stroke-width:1.9}
/* Boton de fila: acompaña a un dato, no encabeza una pantalla. */
.u-btn.mini{padding:6px 11px; font-size:12px; border-radius:8px; letter-spacing:0}

/* ---------- Tablero por estados ---------- */
.u-tablero{display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); align-items:start}
.u-col{min-width:0}
.u-col .cab{display:flex; align-items:center; gap:8px; padding:0 3px 11px}
.u-col .cab .n{
  margin-left:auto; font-size:11.5px; font-weight:700; color:var(--mut);
  background:var(--card2); border:1px solid var(--bd); border-radius:var(--r-full); padding:1px 8px;
}
.u-tarea{
  background:var(--card); border:1px solid var(--bd); border-radius:var(--r-md);
  padding:15px; margin-bottom:11px; box-shadow:var(--e-1);
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.u-tarea:hover{border-color:var(--bd2); box-shadow:var(--e-2); transform:translateY(-1px)}
.u-tarea .t{font-size:14px; font-weight:650; margin:9px 0 2px; letter-spacing:-.2px}
.u-tarea .d{font-size:12.5px; color:var(--mut); margin-bottom:12px}
.u-tarea .pie{display:flex; align-items:center; gap:8px; margin-top:11px; font-size:12px; color:var(--mut)}

/* ---------- Tabla ---------- */
.u-tabla{width:100%; border-collapse:collapse; font-size:13.5px}
/* El encabezado no tenia padding arriba -era 0 12px 10px-, asi que dentro de
   una u-card con padding:0 el rotulo quedaba pegado al borde de la tarjeta.
   Y sin fondo propio no se leia como una banda: se leia como una fila mas.
   Lo mismo que ya hace .u-activos .th en el resto del portal. */
.u-tabla thead th{
  text-align:left; font-size:11px; letter-spacing:.6px; text-transform:uppercase;
  color:var(--mut); font-weight:700; padding:12px; border-bottom:1px solid var(--bd);
  background:var(--card2); white-space:nowrap;
}
.u-tabla th{
  text-align:left; font-size:11px; letter-spacing:.6px; text-transform:uppercase;
  color:var(--mut); font-weight:700; padding:12px; border-bottom:1px solid var(--bd);
}
.u-tabla td{padding:12px; border-bottom:1px solid var(--line)}
.u-tabla tr:last-child td{border-bottom:0}
.u-tabla tbody tr:hover{background:var(--card2)}
.u-tabla td[align="right"],.u-tabla .num{font-variant-numeric:tabular-nums}

/* ---------- Estado vacio ---------- */
.u-vacio{
  background:var(--card); border:1px dashed var(--bd2); border-radius:var(--r-md);
  padding:44px 24px; text-align:center;
}
.u-vacio .i{
  width:44px; height:44px; margin:0 auto 13px; border-radius:var(--r-sm);
  display:grid; place-items:center; background:var(--card2); color:var(--mut);
}
.u-vacio .t{font-size:15px; font-weight:650; margin-bottom:4px}
.u-vacio .d{font-size:13px; color:var(--mut); max-width:420px; margin:0 auto}

/* ---------- Ingreso ---------- */
.u-ingreso{min-height:100vh; display:grid; place-items:center; padding:24px}
.u-ingreso .caja{width:100%; max-width:380px}
.u-campo{margin-bottom:14px}
.u-campo label{display:block; font-size:12.5px; font-weight:600; color:var(--mut); margin-bottom:6px}
.u-campo input,.u-campo select,.u-campo textarea{
  width:100%; font:inherit; font-size:14px; padding:11px 13px;
  border:1px solid var(--bd2); border-radius:var(--r-sm);
  background:var(--bg); color:var(--text); transition:border-color .15s, box-shadow .15s;
}
.u-campo textarea{min-height:82px; resize:vertical; line-height:1.55}
.u-campo select{appearance:none; cursor:pointer; padding-right:34px;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 17px) 51%, calc(100% - 12px) 51%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat}
.u-campo input:focus,.u-campo select:focus,.u-campo textarea:focus{
  outline:0; border-color:var(--accent); box-shadow:0 0 0 3px var(--in-bg)}
/* Marca la pregunta cuya respuesta no vera el jefe. Es una promesa del
   portal: si no se ve en la pantalla, no significa nada. */
.u-campo .conf{
  float:right; font-weight:600; font-size:11px; color:var(--accent);
  text-transform:none; letter-spacing:0;
}

/* ---------- Accesibilidad y foco ---------- */
:where(button,a,input,select,textarea):focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-xs);
}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}

/* ---------- Responsivo ---------- */
@media (max-width:900px){
  .u-rail{
    inset:auto 10px 10px 10px; width:auto; height:60px;
    flex-direction:row; justify-content:space-around; padding:0 8px;
  }
  .u-rail .sep{display:none}
  .u-main{margin-left:0; padding:10px 14px 90px}
  .u-tope{flex-wrap:wrap; height:auto; padding:10px 0}
  .u-nav{order:3; width:100%}
  .u-saludo h1{font-size:25px}
}

/* ================================================================
   Barra lateral · reemplaza al riel de iconos.
   Con nueve secciones o mas, una fila de pildoras se corta. Una
   lateral con etiquetas no, y ademas dice donde estas sin hover.
   ================================================================ */
.u-lado{
  position:fixed; inset:0 auto 0 0; width:var(--lado-w,236px); z-index:30;
  display:flex; flex-direction:column;
  background:var(--card); border-right:1px solid var(--bd);
}
.u-lado .cab{padding:20px 18px 16px; display:flex; align-items:center; gap:10px}
.u-lado nav{flex:1; overflow-y:auto; padding:4px 10px}
.u-lado .grupo{
  font-size:10.5px; letter-spacing:.9px; text-transform:uppercase; font-weight:600;
  color:var(--mut2); padding:16px 10px 7px;
}
.u-lado nav button{
  width:100%; display:flex; align-items:center; gap:11px; text-align:left;
  font:inherit; font-size:13.5px; font-weight:500; cursor:pointer;
  padding:9px 11px; margin-bottom:1px; border:0; border-radius:var(--r-sm);
  background:transparent; color:var(--subt); transition:background .14s, color .14s;
}
.u-lado nav button:hover{background:var(--card2); color:var(--text)}
/* El filete de oro marca donde estas parado. Va como sombra interior y no
   como borde: un borde correria el texto un par de pixeles al activarse. */
.u-lado nav button.on{background:var(--in-bg); color:var(--accent); font-weight:600;
  box-shadow:inset 2px 0 0 var(--oro)}
.u-lado nav button svg{width:17px; height:17px; stroke-width:1.75; flex:none}
.u-lado .pie{border-top:1px solid var(--bd); padding:12px 12px}
.u-lado .pie .fila{display:flex; align-items:center; gap:10px}
.u-lado .pie .n{font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.u-lado .pie .r{font-size:11px; color:var(--mut); text-transform:capitalize}
.u-lado .pie .acc{display:flex; gap:2px; margin-top:9px}
.u-lado .pie .acc button{
  flex:1; display:grid; place-items:center; padding:7px; cursor:pointer;
  border:1px solid var(--bd); border-radius:var(--r-xs);
  background:transparent; color:var(--mut); transition:background .14s, color .14s;
}
.u-lado .pie .acc button:hover{background:var(--card2); color:var(--text)}
.u-lado .pie .acc svg{width:15px; height:15px; stroke-width:1.8}

/* Pildora de entorno, al lado de la marca */
.u-entorno{
  font-size:9.5px; font-weight:700; letter-spacing:.9px; text-transform:uppercase;
  padding:3px 8px; border-radius:var(--r-full); color:#fff;
  background:linear-gradient(95deg,var(--azul),#7C4DFF);
}
.u-entorno.prod{background:var(--nt-bg); color:var(--mut)}

/* ================================================================
   Encabezado de pagina y cifra protagonista
   ================================================================ */
.u-encab{display:flex; align-items:center; gap:14px; padding:26px 0 22px}
.u-encab h1{margin:0; font-size:29px; font-weight:600; letter-spacing:-1px; line-height:1.1}
.u-encab .sep{flex:1}
.u-encab .acciones{display:flex; gap:9px}

.u-hero{padding:2px 0 26px; border-bottom:1px solid var(--bd); margin-bottom:26px}
.u-hero .et{font-size:12.5px; color:var(--mut); margin-bottom:7px}
.u-hero .n{display:flex; align-items:baseline; gap:9px}
.u-hero .n b{font-size:40px; font-weight:600; letter-spacing:-1.6px; line-height:1}
.u-hero .n span{font-size:19px; font-weight:500; color:var(--mut)}
.u-hero .ts{font-size:12px; color:var(--mut2); margin-top:8px}
.u-hero .pares{display:flex; gap:38px; flex-wrap:wrap}

/* ================================================================
   Fila de activo · como la tabla de balances de un panel cripto
   ================================================================ */
.u-activos{background:var(--card); border:1px solid var(--bd); border-radius:var(--r-md); overflow:hidden}
.u-activos .th{
  display:grid; grid-template-columns:minmax(190px,2fr) 1fr 1fr auto; gap:18px;
  padding:11px 18px; background:var(--card2); border-bottom:1px solid var(--bd);
  font-size:10.5px; letter-spacing:.8px; text-transform:uppercase; font-weight:600; color:var(--mut);
}
.u-activo{
  display:grid; grid-template-columns:minmax(190px,2fr) 1fr 1fr auto; gap:18px;
  align-items:center; padding:15px 18px; border-bottom:1px solid var(--line);
  transition:background .14s;
}
.u-activo:last-child{border-bottom:0}
.u-activo:hover{background:var(--card2)}
.u-activo .id{display:flex; align-items:center; gap:12px; min-width:0}
.u-activo .ins{
  width:34px; height:34px; border-radius:50%; flex:none; display:grid; place-items:center;
  font-size:11.5px; font-weight:700; letter-spacing:-.3px;
  background:var(--in-bg); color:var(--accent); border:1px solid var(--bd);
}
.u-activo .nm{font-size:13.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.u-activo .fu{font-size:11.5px; color:var(--mut); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.u-activo .v{font-size:15px; font-weight:600}
.u-activo .v.na{color:var(--mut2); font-weight:400}
.u-activo .mini{font-size:11px; color:var(--mut); margin-top:1px}

/* La fila de una cotizacion. Cifras y estado con ancho FIJO: con 'auto' cada
   fila media distinto y el encabezado no podia alinearse con ninguna. El
   nombre nunca baja de 190px -- antes lo pisaba un estilo en linea, y con los
   botones del ciclo quedaba en "Import...". Donde no entran, los botones bajan
   a su propio renglon en vez de aplastar al cliente. */
/* La columna de botones tambien es fija. Con 'auto', una fila con tres
   botones y otra con cinco repartian distinto el espacio del nombre, y las
   cifras de una fila caian corridas respecto de la siguiente. 370px entra el
   juego mas ancho: PDF, Editar, A comision, Cliente acepto y el historial. */
.u-activos .th.cot,
.u-activo.cot{grid-template-columns:minmax(190px,1fr) 104px 128px 140px 370px}
.u-activo.cot .cot-acc{display:flex; gap:6px; align-items:center; flex-wrap:wrap; justify-content:flex-end}
/* El corte sale de MEDIR, no de estimar: la fila necesita 1,040px y el menu
   lateral con los margenes se come 290 -> 1,330. Con 1,280 -la primera
   estimacion- a 1,300 de ancho la fila desbordaba. */
@media (max-width:1340px){
  .u-activos .th.cot, .u-activo.cot{grid-template-columns:minmax(190px,1fr) 104px 128px 140px}
  .u-activo.cot .cot-acc{grid-column:1/-1}
  .u-activos .th.cot > :last-child{display:none}
}

@media (max-width:820px){
  .u-activos .th{display:none}
  .u-activo{grid-template-columns:1fr auto; gap:10px 14px}
  .u-activo.cot{grid-template-columns:1fr auto}
  .u-activo .id{grid-column:1/-1}
}

/* Ajuste de la estructura cuando hay barra lateral */
.u-app.lado .u-main{margin-left:var(--lado-w,236px); padding:0 26px 56px}
@media (max-width:900px){
  .u-lado{inset:auto 0 0 0; width:auto; height:auto; flex-direction:row; border-right:0; border-top:1px solid var(--bd)}
  .u-lado .cab,.u-lado .pie,.u-lado .grupo{display:none}
  .u-lado nav{display:flex; gap:4px; overflow-x:auto; padding:8px}
  .u-lado nav button{width:auto; white-space:nowrap}
  .u-app.lado .u-main{margin-left:0; padding:0 14px 90px}
}

/* ---------- Modelo de usuarios ----------
   Documento de lectura dentro del portal, no un tablero. Por eso respira mas
   que el resto y se imprime en A4: el C-level lo lee, no lo opera. */
.mod-grupo{border-top:1px solid var(--line); margin-top:34px; padding-top:26px}
.mod-cab{display:grid; gap:4px; margin-bottom:18px; max-width:68ch}
.mod-eyebrow{
  margin:0; font-family:var(--mono); font-size:11px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--accent); font-weight:600;
}
.mod-cab h2{margin:0; font-size:23px; font-weight:650; letter-spacing:-.5px}
.mod-bajada{margin:0; color:var(--mut); font-size:13.5px}
.mod-cuenta{margin:2px 0 0; font-family:var(--mono); font-size:12px; color:var(--mut2)}

.mod-ficha{display:grid; gap:11px; align-content:start}
.mod-nota{
  margin:0; font-size:12.5px; color:var(--mut);
  border-left:2px solid var(--accent); padding-left:10px;
}
.mod-conteo{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--mut2); border-top:1px solid var(--line); padding-top:10px;
}
.mod-caps{list-style:none; margin:0; padding:0; display:grid; gap:7px}
.mod-caps li{display:grid; grid-template-columns:auto auto; gap:5px 7px; align-items:baseline}
.mod-caps code{font-size:12px; word-break:break-word}
.mod-caps code.muerta{color:var(--mut2); text-decoration:line-through}
.mod-que{grid-column:1/-1; font-size:12px; color:var(--mut2); line-height:1.4}
.mod-alc{
  font-family:var(--mono); font-size:9px; letter-spacing:.07em; text-transform:uppercase;
  font-weight:600; padding:2px 6px; border-radius:4px; white-space:nowrap; justify-self:start;
  background:var(--card2); color:var(--mut);
}
.mod-alc.r5{background:var(--dg-bg); color:var(--bad)}
.mod-alc.r4,.mod-alc.r3{background:var(--wn-bg); color:var(--warn)}
.mod-alc.r2{background:var(--in-bg); color:var(--accent)}

.mod-cap{
  display:inline-block; font-family:var(--mono); font-size:11.5px; background:var(--card2);
  padding:2px 7px; border-radius:5px; margin:2px 2px 2px 0;
}
.mod-cap.muerta{background:transparent; border:1px dashed var(--bd2); color:var(--mut2)}
.mod-cap.huerfana{background:var(--wn-bg); color:var(--warn); border:0}
.mod-leyenda{display:flex; gap:15px; flex-wrap:wrap; margin-top:12px; font-size:12.5px; color:var(--mut)}
.mod-leyenda span{display:flex; align-items:center; gap:6px}
.mod-leyenda .pun{width:11px; height:11px; border-radius:3px; flex:none}
.mod-leyenda .pun.a{background:var(--card2); border:1px solid var(--bd)}
.mod-leyenda .pun.b{border:1px dashed var(--mut2)}
.mod-leyenda .pun.c{background:var(--wn-bg); border:1px solid var(--warn)}

/* ---------- Impresion ----------
   El navegador hace el PDF. Mismo camino que el documento de cotizacion: sin
   una dependencia nueva para generar papel. */
@media print{
  @page{size:A4; margin:14mm 12mm}
  .u-lado,.u-rail,#ingreso,.acciones,#acciones{display:none!important}
  .u-main{margin:0!important; padding:0!important}
  .u-ancho{max-width:none}
  body{background:#fff; color:#000C3E; font-size:10.5pt}
  .u-card{break-inside:avoid; box-shadow:none; border-color:#D6DBEC}
  .mod-grupo{break-before:page; border-top:0; margin-top:0; padding-top:0}
  .mod-caps li,.u-tabla tr{break-inside:avoid}
  .u-rej{grid-template-columns:1fr 1fr}
}

/* ---------- Celda con texto y chips ----------
   Una celda que mezcla texto y chips no puede depender del alineado inline:
   el chip envuelve solo y la fila crece de a saltos. Aca van en una fila
   flexible, centrados entre si, y envuelven como bloque. */
.u-cel{display:flex; align-items:center; gap:7px; flex-wrap:wrap; row-gap:5px}
.u-tabla td .u-cel{min-height:22px}

/* ---------- Accion con explicacion ----------
   Un boton que dice "Restablecer" sin decir que pasa despues obliga a
   probarlo para saberlo. En una pantalla que da de baja gente, probar sale
   caro. */
.u-accion{
  display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap;
  padding:14px 0; border-bottom:1px solid var(--line);
}
.u-accion:last-child{border-bottom:0; padding-bottom:0}
.u-accion > div{flex:1; min-width:240px}
.u-accion b{font-size:13.5px; display:block; margin-bottom:3px}
.u-accion p{margin:0; font-size:12.5px; color:var(--mut); line-height:1.5; max-width:62ch}
.u-accion .u-btn{flex:none; margin-top:2px}
.u-btn.dg{border-color:var(--dg-bg); color:var(--bad)}
.u-btn.dg:hover{background:var(--dg-bg); border-color:var(--bad)}

/* La cinta del mercado, portada de la landing. Lo que no se opera no necesita
   una tarjeta: necesita estar a la vista. Se duplica el contenido y la
   animacion corre -50 %, asi la segunda copia entra justo cuando sale la
   primera y no hay hueco ni salto. */
.tc-cinta{
  background:var(--card2); border:1px solid var(--bd); border-radius:var(--r-sm);
  overflow:hidden; margin-bottom:24px;
}
.tc-tkv{display:flex; align-items:center}
.tc-tkl{
  display:inline-flex; align-items:center; padding:10px 16px; flex:0 0 auto; z-index:2;
  background:var(--card2); border-right:1px solid var(--bd);
  font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--mut2);
}
.tc-tkt{display:flex; white-space:nowrap; animation:tcmq 58s linear infinite; will-change:transform}
.tc-cinta:hover .tc-tkt{animation-play-state:paused}
@keyframes tcmq{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .tc-tkt{animation:none}
  .tc-tkv{overflow-x:auto}
}
.tc-tks{display:flex; flex:0 0 auto}
.tc-tki{display:inline-flex; align-items:baseline; gap:7px; padding:10px 18px; flex:0 0 auto}
.tc-tki .p{font-size:11.5px; font-weight:700; color:var(--mut)}
.tc-tki .v{
  font-family:var(--mono); font-size:12.5px; font-weight:600;
  font-variant-numeric:tabular-nums; color:var(--txt);
}
.tc-tki .v.up{color:var(--ok)}
.tc-tki .v.down{color:var(--warn)}
.tc-tki .l{font-size:10.5px; color:var(--mut2)}
.tc-tki .ch{font-family:var(--mono); font-size:11px; font-weight:600; font-variant-numeric:tabular-nums}
.tc-tki .ch.up{color:var(--ok)}
.tc-tki .ch.down{color:var(--bad)}

/* ---------- Tipo de cambio ----------
   Se lee por PRODUCTO -- Finance, fisico, remesas -- y dentro el par
   compra/venta. La version anterior ponia seis fichas del mismo peso en una
   grilla: todas decian lo mismo de fuerte y la vista no sabia por donde
   empezar. Tres anclas, y el numero manda sobre el texto. */
.tc-casa{margin-bottom:30px}
.tc-casa-cab{margin-bottom:13px}
.tc-casa-cab h2{
  font-size:13px; font-weight:700; letter-spacing:-.1px; margin:0 0 2px; color:var(--txt);
}
.tc-casa-cab p{margin:0; font-size:12.5px; color:var(--mut); line-height:1.45}

.tc-prods{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(310px,1fr))}
.tc-p{
  background:var(--card); border:1px solid var(--bd); border-radius:var(--r-md);
  padding:18px 20px 16px; display:flex; flex-direction:column; gap:14px;
}
/* El precio que manda en cotizaciones y documentos pesa distinto: es el unico
   con el que se emiten papeles. */
.tc-p.manda{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent)}
.tc-p.flojo{border-style:dashed; opacity:.7}

.tc-p-cab{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.tc-p-cab b{font-size:15px; font-weight:650; letter-spacing:-.25px}
.tc-manda{
  font-size:9.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); background:var(--card2);
  border-radius:99px; padding:3px 8px;
}

/* El par, lado a lado y separado por una linea: es como se dice en voz alta. */
.tc-p-par{display:grid; grid-template-columns:1fr 1fr; gap:0}
.tc-n{padding-right:16px; min-width:0}
.tc-n + .tc-n{padding:0 0 0 16px; border-left:1px solid var(--bd)}

.tc-n-et{
  display:flex; align-items:center; gap:6px; margin-bottom:5px;
  font-size:11px; font-weight:650; color:var(--mut); letter-spacing:-.1px;
}
.tc-dot{width:6px; height:6px; border-radius:50%; background:var(--bd2); flex:none}
/* El color lo da el VALOR, no el lado: verde el alto, rojo el bajo, como
   cualquier pizarra. Asi el dia que un spread quede cruzado el color lo
   grita en vez de taparlo. */
.tc-n.alto .tc-dot{background:var(--ok)}
.tc-n.bajo .tc-dot{background:var(--bad)}

/* El numero es lo que se vino a buscar: que se lea de lejos. */
.tc-n-v{
  font-family:var(--mono); font-size:32px; font-weight:600; letter-spacing:-1.2px;
  line-height:1.05; font-variant-numeric:tabular-nums; color:var(--txt);
  display:flex; align-items:baseline; gap:5px;
}
.tc-n-v i{font-style:normal; font-family:var(--tipo); font-size:11px; font-weight:500; color:var(--mut2)}
.tc-n.alto .tc-n-v{color:var(--ok)}
.tc-n.bajo .tc-n-v{color:var(--bad)}

.tc-n-q{margin-top:6px; font-size:11.5px; color:var(--mut); line-height:1.4}
.tc-n-q .fl{display:inline-block; font-weight:600; white-space:nowrap}
.tc-n-q .fl.entra{color:var(--ok)}
.tc-n-q .fl.sale{color:var(--warn)}
.tc-n-p{margin-top:4px; font-size:10.5px; color:var(--mut2); font-family:var(--mono)}

.tc-p-pie{
  font-size:11.5px; color:var(--mut2); border-top:1px solid var(--bd);
  padding-top:11px; margin-top:auto;
}

/* La referencia no se opera: una tira chica al pie, sin competir. */

/* ---- USDT contra USDC ---- */
.st-vs{display:grid; grid-template-columns:1fr auto 1fr; gap:16px; align-items:center}
.st-lado{display:grid; gap:4px}
/* El mercado se lee como lo que se opera; el oficial, como referencia. */
.st-lado.mercado .st-par b{color:var(--accent)}
.st-lado.oficial .st-n,.st-lado.oficial .st-par b{color:var(--mut)}
.st-d{font-size:11px; color:var(--mut2)}
.st-n{font-size:13.5px; font-weight:700; letter-spacing:-.2px}
.st-par{display:flex; gap:18px}
.st-par b{
  display:block; font-family:var(--mono); font-size:22px; font-weight:600;
  letter-spacing:-.7px; line-height:1.1; font-variant-numeric:tabular-nums;
}
.st-par span{font-size:10px; color:var(--mut2); text-transform:uppercase; letter-spacing:.05em}
.st-medio{text-align:center; display:grid; gap:3px; min-width:126px}
.st-vs-t{font-size:10px; text-transform:uppercase; letter-spacing:.12em; color:var(--mut2)}
.st-medio b{font-size:13px; letter-spacing:-.2px}
.st-medio span{font-family:var(--mono); font-size:11px; color:var(--mut)}

/* ---- Mesa OTC ---- */
.tc-esc-caja{overflow-x:auto; padding:0}
.tc-esc-t{width:100%; border-collapse:collapse; font-size:13px; min-width:420px}
.tc-esc-t th{
  text-align:left; font-size:10px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--mut2); padding:11px 16px;
  border-bottom:1px solid var(--bd); white-space:nowrap;
}
.tc-esc-t td{padding:11px 16px; border-bottom:1px solid var(--bd); vertical-align:top}
.tc-esc-t tr:last-child td{border-bottom:0}
.tc-esc-t .num{
  text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:16px; white-space:nowrap;
}
.tc-esc-t th.num{font-family:inherit; font-size:10px}
.tc-esc-u{font-size:10.5px; color:var(--mut2); margin-left:6px}
.tc-esc-lb{display:block; font-family:var(--tipo); font-size:10px; color:var(--mut2); margin-top:3px}
.tc-esc-no{font-family:var(--tipo); font-size:11.5px; color:var(--mut2)}

/* ---- Los mercados ---- */
.ac-g{margin-bottom:16px}
.ac-g h3{
  font-size:12px; font-weight:700; margin:0 0 8px; letter-spacing:-.1px;
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
}
.ac-g h3 span{font-size:11px; font-weight:400; color:var(--mut2); letter-spacing:0}
.ac-tira{display:grid; gap:9px; grid-template-columns:repeat(auto-fill,minmax(152px,1fr))}
.ac-f{
  background:var(--card); border:1px solid var(--bd); border-radius:var(--r-sm);
  padding:11px 13px; display:grid; gap:3px;
}
.ac-f.opera{box-shadow:inset 3px 0 0 var(--accent)}
.ac-n{font-size:11.5px; font-weight:600; letter-spacing:-.1px; line-height:1.25; color:var(--mut)}
.ac-p{
  font-family:var(--mono); font-size:19px; font-weight:600; letter-spacing:-.5px;
  font-variant-numeric:tabular-nums; line-height:1.15;
}
.ac-u{font-size:10px; color:var(--mut2); display:flex; gap:6px; flex-wrap:wrap}
.ac-d{font-family:var(--mono); font-variant-numeric:tabular-nums}
.ac-d.sube{color:var(--ok)}
.ac-d.baja{color:var(--bad)}

@media (max-width:620px){
  .st-vs{grid-template-columns:1fr; gap:12px; text-align:center}
  .st-par{justify-content:center}
  .tc-n-v{font-size:27px}
}
@media (max-width:400px){
  .tc-p-par{grid-template-columns:1fr; gap:14px}
  .tc-n{padding-right:0}
  .tc-n + .tc-n{padding:14px 0 0; border-left:0; border-top:1px solid var(--bd)}
}

/* Las sugerencias de destinatario: se elige de un vistazo, sin abrir nada. */
.ben-sug{list-style:none; margin:0 0 12px; padding:0; display:grid; gap:7px}
.ben-sug li{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--card); border:1px solid var(--bd); border-radius:var(--r-sm);
  padding:10px 12px;
}
.ben-sug li > div{flex:1; min-width:180px; display:grid; gap:2px}
.ben-sug b{font-size:13px; letter-spacing:-.1px}
.ben-sug span{font-size:11.5px; color:var(--mut)}
.ben-sug .u-chip{justify-self:start}
.ben-usos{font-family:var(--mono); font-size:10.5px; color:var(--mut2)}

/* ---------- Destinos ----------
   La agenda entera de a quién se le paga. Se mira para dos cosas distintas:
   qué falta verificar, y qué cuenta cobra de varios clientes. */
.ds-kpis{display:grid; gap:10px; margin-bottom:18px;
  grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
.ds-kpi{
  background:var(--card); border:1px solid var(--bd); border-radius:var(--r-sm);
  padding:12px 14px; display:grid; gap:3px;
}
.ds-kpi span{font-size:11.5px; color:var(--mut); letter-spacing:-.1px}
.ds-kpi b{
  font-family:var(--mono); font-size:22px; font-weight:600; letter-spacing:-.6px;
  line-height:1.1; font-variant-numeric:tabular-nums;
}
/* El aviso de operaciones sin ordenante: no es un error, es una deuda que
   hay que ver. Ambar, no rojo. */
.ds-aviso{border-left:3px solid var(--warn); background:var(--wn-bg); margin:14px 0}
.ds-aviso b{color:var(--warn)}
.ds-aviso .sub{margin-top:4px}

.ds-tabla{overflow-x:auto; border:1px solid var(--bd); border-radius:var(--r-sm);
  background:var(--card)}
.ds-sub{font-size:11px; color:var(--mut2); margin-top:2px}
/* Una misma cuenta cobrando de varios clientes no es ilegal -- un proveedor
   le vende a dos -- pero es lo que Cumplimiento tiene que poder ver. */
.ds-alerta{font-size:10.5px; color:var(--warn); margin-top:2px; font-weight:600}

/* ---------- Configuración ---------- */
.cf-valor{display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-bottom:10px}
.cf-txt{flex:1; min-width:240px}
.cf-txt b{font-size:14px; display:block; margin-bottom:3px}
.cf-txt p{margin:0; font-size:12.5px; color:var(--mut); line-height:1.5; max-width:70ch}
.cf-nota{margin-top:5px!important; border-left:2px solid var(--bd2); padding-left:9px}
.cf-desde{display:block; margin-top:5px; font-size:11.5px; color:var(--mut2)}
.cf-num{display:flex; align-items:baseline; gap:7px; flex:none; min-width:110px}
.cf-num b{font-size:24px; letter-spacing:-.6px; line-height:1}
.cf-num span{font-size:12px; color:var(--mut)}
.cf-modulo{display:grid; gap:8px; align-content:start}
.cf-modulo.flojo{border-style:dashed; opacity:.7}
.cf-modulo b{font-size:14.5px}
.cf-modulo p{margin:0; font-size:12.5px; color:var(--mut); line-height:1.5}
.cf-modulo .u-btn,.cf-modulo .u-chip{justify-self:start}

/* ---------- Remesas ---------- */
.rm-precios{display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); margin-bottom:8px}
.rm-p{
  background:var(--card); border:1px solid var(--bd); border-left:3px solid var(--accent);
  border-radius:var(--r-sm); padding:13px 15px; display:grid; gap:3px;
}
.rm-p .n{font-size:12.5px; font-weight:650}
.rm-p b{font-family:var(--mono); font-size:23px; letter-spacing:-.6px; line-height:1.15}
.rm-p .u{font-size:11px; color:var(--mut2); text-transform:uppercase; letter-spacing:.05em}
.rm-p .f{font-size:11.5px; color:var(--mut)}

/* La cotización, dicha como se la lee al cliente por teléfono. */
.rm-cot{
  display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:center;
  background:var(--card2); border:1px solid var(--bd); border-radius:var(--r-sm); padding:14px;
}
.rm-cot .l{display:grid; gap:2px; min-width:0}
.rm-cot .l:last-child{text-align:right}
.rm-cot .l span{font-size:11.5px; color:var(--mut2)}
.rm-cot .l b{font-family:var(--mono); font-size:17px; font-weight:600; color:var(--accent)}
.rm-cot .a{font-size:19px; color:var(--mut2)}
@media (max-width:520px){
  .rm-cot{grid-template-columns:1fr}
  .rm-cot .l:last-child{text-align:left}
  .rm-cot .a{transform:rotate(90deg)}
}

/* ---------- La matriz de cargos y capacidades ----------
   Sesenta y nueve filas por doce columnas no entra en una pantalla sin que la
   cabecera se pierda. Se queda pegada arriba, y la primera columna a la
   izquierda, que es la unica manera de saber que celda se esta tocando
   despues de bajar veinte filas. */
.mat-cab{display:flex; gap:20px; align-items:flex-end; flex-wrap:wrap; margin-bottom:14px}
.mat-regla{margin:0; font-size:12.5px; color:var(--mut); max-width:62ch; line-height:1.5}
.mat-bloq{display:flex; gap:14px; flex-wrap:wrap; margin:0 0 14px;
  font-size:12.5px; color:var(--mut)}
.mat-bloq b{color:var(--txt)}
.mat-caja{padding:0; overflow:auto; max-height:72vh}
.u-tabla.mat{border-collapse:separate; border-spacing:0}
.u-tabla.mat thead th{position:sticky; top:0; z-index:3; background:var(--card2)}
.u-tabla.mat tbody td:first-child,
.u-tabla.mat thead th:first-child{position:sticky; left:0; z-index:2; background:var(--card);
  min-width:250px; max-width:250px}
.u-tabla.mat thead th:first-child{z-index:4; background:var(--card2)}
.mat-col{font-size:11.5px; font-weight:600; text-align:center; min-width:96px;
  vertical-align:bottom; line-height:1.3}
.mat-col.fija{color:var(--mut2); font-weight:500}
.u-tabla.mat td{padding:5px 8px}
.mat-c{text-align:center}
.mat-s{width:100%; min-width:82px; font-size:11.5px; padding:3px 5px;
  border:1px solid var(--bd2); border-radius:6px; background:var(--card); color:var(--txt)}
.mat-s:focus{outline:2px solid var(--accent); outline-offset:1px}
.mat-no{color:var(--bd2)}
.mat-que{display:block; font-size:11.5px; color:var(--mut2); line-height:1.35; margin-top:1px}
.mat-sep td{background:var(--card2); padding:7px 8px!important; position:sticky; left:0}
.mat-sep code{font-size:12px; font-weight:600; color:var(--mut)}
/* Una capacidad que quien mira no tiene: se ve, no se toca, y se nota por que. */
.mat-ajena td{opacity:.5}
.mat-ajena td:first-child{opacity:1; color:var(--mut2)}
.mat-msg{margin:14px 0 0; font-size:13px; color:var(--mut); min-height:19px}
.mat-msg.mal{color:var(--bad)}
.u-chip.mini{font-size:10.5px; padding:1px 6px; margin-left:6px}

/* ---------- Auditoria ----------
   El detalle es JSON y su largo es impredecible. Va en una celda que hace
   scroll sola, para que una fila con veinte campos no estire la tabla entera. */
.u-rej.cuatro{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.aud-filtros .u-rej{margin-bottom:14px}
.aud-cuenta{font-size:12.5px; color:var(--mut2)}
.aud-det{max-width:380px}
.aud-det pre{margin:0; font-size:11px; line-height:1.45; color:var(--mut);
  max-height:110px; overflow:auto; white-space:pre-wrap; word-break:break-word}

/* ---------- Cuentas de cobro ----------
   Los datos a la izquierda y el QR a la derecha, del mismo alto. Lo que se
   copia -el alias- tiene su boton al lado: cuando hay que seleccionarlo con
   el mouse, alguien se come una letra y la plata no llega. */
.cb-c{display:flex; flex-direction:column; gap:14px}
.cb-cab{display:flex; gap:9px; align-items:center; flex-wrap:wrap}
.cb-cab b{font-size:15px; letter-spacing:-.2px}
.cb-cuerpo{display:flex; gap:22px; align-items:flex-start; flex-wrap:wrap}
.cb-datos{margin:0; flex:1 1 300px; display:flex; flex-direction:column; gap:9px}
.cb-datos div{display:flex; flex-direction:column; gap:2px}
.cb-datos dt{font-size:11.5px; color:var(--mut2); text-transform:uppercase; letter-spacing:.5px}
.cb-datos dd{margin:0; display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.cb-datos dd span{font-size:14.5px; font-weight:600; word-break:break-all}
.cb-cp{border:1px solid var(--bd2); background:var(--card2); color:var(--mut);
  font:inherit; font-size:11px; padding:2px 8px; border-radius:6px; cursor:pointer}
.cb-cp:hover{color:var(--txt); border-color:var(--bd)}
.cb-qr{margin:0; flex:0 0 172px; text-align:center}
.cb-qr img{width:172px; height:172px; background:#fff; padding:8px; border-radius:10px;
  border:1px solid var(--bd2)}
.cb-qr figcaption{font-size:11.5px; color:var(--mut2); margin-top:6px}
.cb-qr.falta{display:flex; flex-direction:column; justify-content:center; gap:5px;
  min-height:172px; padding:14px; border:1px dashed var(--bd2); border-radius:10px;
  font-size:12.5px; color:var(--mut2)}
.cb-qr.falta span{font-size:11.5px}
.cb-inst{margin:0; font-size:13px; color:var(--mut); line-height:1.55; max-width:70ch}
.cb-firma{margin:0; padding-top:11px; border-top:1px solid var(--bd2);
  font-size:11.5px; color:var(--mut2)}

/* ---------- Mi seguridad ----------
   Tres pasos numerados, porque enrolar un segundo factor es una secuencia de
   verdad: si se saltea uno, no funciona. Acá la numeracion dice algo. */
.sg-pasos{margin:0; padding-left:22px; display:flex; flex-direction:column; gap:18px;
  font-size:13.5px; line-height:1.6}
.sg-pasos li{padding-left:4px}
.sg-qr{margin:12px 0 8px; width:176px; height:176px; background:#fff; padding:9px;
  border-radius:10px; border:1px solid var(--bd2); display:flex;
  align-items:center; justify-content:center}
.sg-qr img,.sg-qr canvas{display:block}
.sg-sinqr{font-size:12px; color:#5E6C8C; text-align:center; padding:10px; line-height:1.45}
.sg-manual{font-size:12.5px; color:var(--mut)}
.sg-manual summary{cursor:pointer; color:var(--accent)}
.sg-manual code{display:inline-block; margin-top:7px; font-size:13.5px; letter-spacing:1px;
  background:var(--card2); padding:5px 9px; border-radius:6px; word-break:break-all}
.sg-conf{display:flex; gap:9px; margin-top:9px; flex-wrap:wrap}
.sg-conf input{width:132px; font-size:19px; letter-spacing:5px; text-align:center;
  padding:7px 9px; border:1px solid var(--bd2); border-radius:8px;
  background:var(--card); color:var(--txt); font-variant-numeric:tabular-nums}
.sg-nota,.sg-alerta{margin:0; font-size:13px; line-height:1.55; max-width:62ch}
.sg-nota{color:var(--mut)}
.sg-alerta{color:var(--bad)}
.sg-pista{font-size:11.5px; color:var(--mut2); margin-top:4px}
.sg-msg{margin:12px 0 0; font-size:13px; color:var(--ok, var(--mut)); min-height:19px}
.sg-msg.mal{color:var(--bad)}
.sg-pie{margin:22px 0 0; font-size:12.5px; color:var(--mut2)}

/* ---------- Canje de la invitación ----------
   Se ve dentro de la misma tarjeta del ingreso: quien llega no sabe todavia
   que es este sitio, y la marca alrededor es la mitad de la señal de que el
   enlace lo mando quien dice. */
.inv-caja h1{margin:0 0 6px; font-size:20px; letter-spacing:-.3px}
.inv-sub{margin:0 0 18px; font-size:13px; color:var(--mut); line-height:1.55}
.inv-pista{font-size:11.5px; color:var(--mut2); margin-top:4px}
.inv-msg{margin:13px 0 0; font-size:13px; color:var(--mut); min-height:19px; line-height:1.5}
.inv-msg.mal{color:var(--bad)}
.inv-caja .u-btn.pri{width:100%; justify-content:center}

/* La clave temporal se lee en voz alta o se copia. Monoespaciada y separada:
   una I y una l en la misma tipografia del resto terminan en "no me anda". */
.cl-temp{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:17px; letter-spacing:1.5px; text-align:center}

/* El activo de cada fuente, en Configuracion. */
.cf-sel{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px;
  padding:5px 9px; border:1px solid var(--bd2); border-radius:7px;
  background:var(--card); color:var(--txt); min-width:92px}
.cf-sel:focus{outline:2px solid var(--accent); outline-offset:1px}

/* ---------- Perfil ----------
   Tres pestañas y no tres pantallas: son la misma persona mirando lo suyo, y
   separarlas en secciones del menú haría buscar en tres lugares lo que es uno. */
.pf-pest{display:flex; gap:4px; margin-bottom:22px; border-bottom:1px solid var(--linea, var(--bd2)); flex-wrap:wrap}
.pf-pest button{border:0; background:none; font:inherit; font-size:14px; font-weight:500;
  color:var(--mut); padding:9px 14px; cursor:pointer; border-bottom:2px solid transparent;
  margin-bottom:-1px; display:flex; align-items:center; gap:7px}
.pf-pest button:hover{color:var(--txt)}
.pf-pest button.act{color:var(--acento, var(--accent)); border-bottom-color:var(--acento, var(--accent))}
.pf-n{background:var(--wn-bg); color:var(--warn); font-size:11px; font-weight:600;
  min-width:18px; height:18px; border-radius:9px; display:inline-flex;
  align-items:center; justify-content:center; padding:0 5px}
.pf-datos{margin:0; display:flex; flex-direction:column; gap:12px}
.pf-datos div{display:flex; flex-direction:column; gap:2px}
.pf-datos dt{font-size:11.5px; color:var(--mut2); text-transform:uppercase; letter-spacing:.5px}
.pf-datos dd{margin:0; font-size:14.5px; font-weight:500}
.pf-nota{margin:18px 0 0; padding-top:14px; border-top:1px solid var(--bd2);
  font-size:12.5px; color:var(--mut); line-height:1.55}
.pf-grupo{margin-bottom:16px}
.pf-grupo h2{margin-bottom:16px}
.pf-faltan{border-left:3px solid var(--warn); margin-bottom:18px}
.pf-faltan b{font-size:14px}
.pf-faltan p{margin:5px 0 0; color:var(--mut); font-size:13px}
.pf-quien{margin:0 0 18px; font-size:12.5px; color:var(--mut2)}
/* El punto marca lo que falta sin gritar: un campo obligatorio vacio no es un
   error, es algo por hacer. */
.pf-req{color:var(--warn); margin-left:5px; font-size:15px; line-height:1}
.pf-falta input,.pf-falta select,.pf-falta textarea{border-color:var(--warn)}
.pf-acciones{display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top:6px}
.pf-acciones .sg-msg{margin:0}


/* ---- Marketing · galeria de archivos y visor de markdown ---- */
/* La galeria existe porque un banco de graficas en filas de texto obliga a
   descargar cada archivo para saber cual es. auto-fill y no auto-fit: con
   pocos archivos las tarjetas conservan su tamaño en vez de estirarse a lo
   ancho de la pantalla. */
.ar-gal{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:14px}
.ar-c{margin:0; background:var(--card); border:1px solid var(--bd); border-radius:var(--r-sm);
      overflow:hidden; cursor:pointer; transition:border-color .14s, transform .14s}
.ar-c:hover{border-color:var(--accent); transform:translateY(-1px)}
.ar-c .ar-m{aspect-ratio:4/3; display:flex; align-items:center; justify-content:center;
            background:var(--fondo2,#f4f6f9); overflow:hidden}
.ar-c .ar-m img{width:100%; height:100%; object-fit:cover; display:block}
.ar-c .ar-ext{font-size:15px; font-weight:700; letter-spacing:1px; color:var(--mut2)}
.ar-c figcaption{padding:9px 11px; display:flex; flex-direction:column; gap:2px}
.ar-c figcaption b{font-size:12.5px; line-height:1.3; overflow-wrap:anywhere}
.ar-c figcaption span{font-size:11px; color:var(--mut2)}

.ar-md{margin-top:14px; font-size:13.5px; line-height:1.65; overflow-wrap:anywhere}
.ar-md h2{font-size:19px; margin:20px 0 8px}
.ar-md h3{font-size:16px; margin:18px 0 6px}
.ar-md h4,.ar-md h5{font-size:14px; margin:14px 0 5px}
.ar-md p{margin:0 0 10px}
.ar-md ul{margin:0 0 10px 20px}
.ar-md li{margin-bottom:3px}
.ar-md code{background:var(--fondo2,#f4f6f9); padding:1px 5px; border-radius:4px; font-size:12.5px}
/* El bloque de codigo scrollea solo: sin esto una linea larga empuja el ancho
   de toda la pagina. */
.ar-md pre{background:var(--fondo2,#f4f6f9); padding:12px 14px; border-radius:var(--r-sm);
           overflow-x:auto; margin:0 0 12px}
.ar-md pre code{background:none; padding:0}

/* Dos campos cortos en una fila. Se parte en una sola columna abajo de 560px:
   dos selectores de 200px lado a lado en un telefono quedan ilegibles. */
.ct-dos{display:grid; grid-template-columns:1fr 1fr; gap:0 14px}
@media (max-width:560px){ .ct-dos{grid-template-columns:1fr} }

/* El file input no hereda el estilo de .u-campo input: el navegador dibuja su
   propio boton y el padding de los otros campos lo deforma. */
.u-campo input[type=file]{padding:9px 11px; font-size:12.5px; cursor:pointer}

/* Fila de fuente de precio en Configuracion. cf-nota, cf-val y cf-sel ya
   existian; cf-fila y cf-que nunca se escribieron, asi que la fila caia una
   cosa debajo de la otra sin alineacion ni respiro. */
.cf-fila{display:flex; align-items:flex-start; justify-content:space-between;
         gap:16px; flex-wrap:wrap; margin-bottom:10px}
.cf-que{display:flex; flex-direction:column; gap:3px; min-width:0; flex:1}
.cf-que b{font-size:13.5px}


/* ---- Mesa OTC · los tres medidores ---- */
/* auto-fit y minmax: en escritorio entran los tres en fila, en telefono uno
   debajo del otro, sin un punto de corte escrito a mano. */
.ot-rej{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
        gap:14px; margin-bottom:18px}
.ot-m{display:flex; flex-direction:column; align-items:center; text-align:center; gap:2px}
.ot-m .k{font-size:11px; text-transform:uppercase; letter-spacing:.9px;
         font-weight:600; color:var(--mut2); margin-bottom:6px}
.ot-g{width:128px; height:74px; display:block}
.ot-v{font-size:30px; font-weight:700; letter-spacing:-1px; line-height:1; margin-top:-6px}
.ot-d{font-size:11.5px; color:var(--mut); line-height:1.5; margin-top:5px; text-wrap:balance}

/* "no lo cubre" se marca, no se deja en blanco: que el libro no alcance es un
   dato, no un hueco. */
.ot-no{color:var(--bad); font-size:12px}
.ot-s{font-size:11px; color:var(--mut2); margin-top:2px}

.ot-precio{display:flex; align-items:baseline; gap:8px; margin-top:2px}
.ot-precio b{font-size:34px; letter-spacing:-1.2px; line-height:1}
.ot-precio span{font-size:12.5px; color:var(--mut)}
.ot-total{font-size:13px; color:var(--mut); margin-top:3px}


/* ---- Mesa OTC · los dos relojes de una orden ---- */
/* Van lado a lado y con su etiqueta: son cosas distintas -- cuánto vale el
   precio y cuánto tiempo hay para completar -- y mostrarlos como uno solo
   haría creer que el precio dura lo que dura la operación. */
.ot-relojes{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:16px}
.ot-relojes > div{background:var(--bg); border:1px solid var(--bd); border-radius:var(--r-sm);
                  padding:12px 14px; display:flex; flex-direction:column; gap:2px}
.ot-relojes .k{font-size:10.5px; text-transform:uppercase; letter-spacing:.9px;
               font-weight:600; color:var(--mut2)}
.ot-relojes b{font-size:26px; letter-spacing:-.8px; line-height:1.1;
              font-variant-numeric:tabular-nums}
.ot-relojes span{font-size:11.5px; color:var(--mut)}
.ot-vencido{color:var(--bad)}
@media (max-width:480px){ .ot-relojes{grid-template-columns:1fr} }

/* Una fila de campos angostos, como la de una ventanilla: se acomodan al
   ancho y bajan de linea en el telefono en vez de desbordar. */
.u-mostrador{display:flex; gap:8px; flex-wrap:wrap; align-items:flex-end}
@media (max-width:560px){ .u-mostrador > .u-campo{width:100%!important} }

/* ===========================================================================
   OPERACIONES — el tablero de lo que el cliente ya aprobó
   Seis columnas, una por etapa del ciclo. En pantallas angostas se desplazan
   de costado dentro de su propio contenedor; la página no.
   =========================================================================== */
.op-barra{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 14px}
.op-barra #opAlta{margin-left:auto}
.op-busca{font:inherit; font-size:13px; padding:7px 11px; min-width:0; width:300px; max-width:100%;
  border:1px solid var(--bd2); border-radius:var(--r-sm); background:var(--card); color:var(--text)}
.op-resumen{display:flex; flex-wrap:wrap; gap:10px 28px; margin:0 0 16px}
.op-resumen > div{display:flex; align-items:baseline; gap:7px}
.op-resumen b{font-size:18px; font-weight:600}
.op-resumen span{font-size:13px; color:var(--mut)}
.op-resumen .op-alerta b{color:var(--warn)}

.op-tablero{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(236px,1fr);
  gap:12px; overflow-x:auto; padding-bottom:10px; align-items:start}
.op-col{background:var(--card2); border:1px solid var(--bd); border-radius:var(--r-md);
  padding:10px; display:flex; flex-direction:column; gap:8px; min-height:120px}
.op-col header{padding:2px 4px 4px}
.op-col-t{display:flex; justify-content:space-between; align-items:baseline; gap:8px}
.op-col-t b{font-size:13.5px}
.op-col-t span{font-size:12px; color:var(--mut); font-weight:600}
.op-col-a{font-size:11.5px; color:var(--mut2); margin-top:2px; line-height:1.4}
.op-col[data-col="observada"]{border-color:var(--wn-bg)}
.op-nada{font-size:12px; color:var(--mut2); padding:10px 4px}

.op-tarjeta{all:unset; box-sizing:border-box; display:flex; flex-direction:column; gap:3px; cursor:pointer;
  background:var(--card); border:1px solid var(--bd); border-radius:var(--r-sm); padding:10px 11px;
  box-shadow:var(--e-1); transition:border-color .15s, box-shadow .15s}
.op-tarjeta:hover{border-color:var(--bd2); box-shadow:var(--e-2)}
.op-tarjeta:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.op-tarjeta.quieta{border-left:3px solid var(--warn)}
.op-t1{display:flex; justify-content:space-between; align-items:center; gap:6px; font-size:11.5px; color:var(--mut)}
.op-cli{font-size:13.5px; font-weight:600; color:var(--text); overflow-wrap:anywhere}
.op-mon{font-size:13px; color:var(--text)}
.op-sub{font-size:11.5px; color:var(--mut)}
.op-pie{display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; font-size:11.5px; color:var(--mut2); margin-top:4px}
.op-quieta{color:var(--warn); font-weight:600}

/* El detalle: un panel lateral, a pantalla completa en el teléfono. */
.op-velo{position:fixed; inset:0; background:rgba(0,12,62,.28); z-index:40}
.op-detalle{position:fixed; top:0; right:0; bottom:0; width:min(560px,100%); z-index:41;
  background:var(--card); border-left:1px solid var(--bd); box-shadow:var(--e-3);
  overflow-y:auto; overscroll-behavior:contain;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px)}
.op-d-cab{display:flex; justify-content:space-between; align-items:flex-start; gap:12px;
  padding:18px 20px 14px; border-bottom:1px solid var(--bd); position:sticky; top:0; background:var(--card); z-index:1}
.op-d-num{font-size:15px; font-weight:600; display:flex; align-items:center; gap:8px}
.op-d-cli{font-size:13px; color:var(--mut); margin-top:2px}
.op-d-der{display:flex; align-items:center; gap:8px; flex:none}
.op-datos{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px 18px;
  margin:0; padding:16px 20px}
.op-datos dt{font-size:11.5px; color:var(--mut); text-transform:uppercase; letter-spacing:.04em}
.op-datos dd{margin:2px 0 0; font-size:14px; overflow-wrap:anywhere}
.op-nota{font-size:12.5px; color:var(--mut); margin:6px 0}
.op-detalle > .op-nota{padding:0 20px}
.op-bloque{padding:14px 20px 18px; border-top:1px solid var(--bd)}
.op-bloque h3{font-size:13px; font-weight:600; margin:0 0 10px; display:flex; gap:8px; align-items:baseline}
.op-bloque h3 .num{color:var(--mut); font-weight:500}
.op-botones{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px}

.op-docs{list-style:none; margin:0 0 14px; padding:0; display:flex; flex-direction:column; gap:8px}
.op-docs li{display:flex; justify-content:space-between; gap:10px; align-items:flex-start;
  padding:10px 12px; border:1px solid var(--bd); border-radius:var(--r-sm)}
.op-docs li.anulado{background:var(--card2)}
.op-docs li.anulado b{text-decoration:line-through; color:var(--mut)}
.op-doc-t{display:flex; flex-direction:column; gap:2px; min-width:0}
.op-doc-t b{font-size:13px; overflow-wrap:anywhere}
.op-doc-t span{font-size:11.5px; color:var(--mut)}
.op-doc-n{color:var(--text)!important}
.op-doc-b{display:flex; gap:6px; flex:none}
.op-subir{display:flex; flex-direction:column; gap:8px; padding:12px; background:var(--card2);
  border:1px dashed var(--bd2); border-radius:var(--r-sm)}
.op-subir .u-campo{margin:0}

.op-hist{list-style:none; margin:0; padding:0 0 0 14px; border-left:2px solid var(--bd)}
.op-hist li{display:flex; flex-direction:column; gap:1px; padding:0 0 10px; position:relative}
.op-hist li::before{content:""; position:absolute; left:-19px; top:5px; width:8px; height:8px;
  border-radius:50%; background:var(--accent)}
.op-hist li.exc::before{background:var(--warn)}
.op-hist b{font-size:13px}
.op-hist span{font-size:11.5px; color:var(--mut)}

.op-form{display:flex; flex-direction:column; gap:4px; padding:16px 20px 24px}
.op-dos{display:grid; grid-template-columns:1fr 1fr; gap:10px}
@media (max-width:520px){
  .op-dos{grid-template-columns:1fr}
  .op-busca{width:100%; flex:1 1 100%}
  .op-barra #opAlta{margin-left:0}
  .op-docs li{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){ .op-tarjeta{transition:none} }

/* El protocolo POE-BN-01: controles, entrega, expediente, legajo (267) */
.pc-lista{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.pc-lista li{display:flex; gap:10px; align-items:flex-start; padding:8px 0; border-bottom:1px solid var(--bd)}
.pc-lista li:last-child{border-bottom:0}
.pc-lista li > .u-chip{flex:none; min-width:74px; justify-content:center}
.pc-lista.ancha li > .u-chip{min-width:128px}
.pc-lista li > div{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1}
.pc-lista b{font-size:13px; font-weight:500}
.pc-lista span:not(.u-chip):not(.num){font-size:11.5px; color:var(--mut)}
.pc-acc{display:flex; gap:6px; flex:none; flex-direction:row!important}

/* Cada pieza se cumple desde su propia fila, y la accion va a la DERECHA.
   La regla de arriba estira todo div hijo del li (flex:1), asi que el bloque
   de accion se llevaba el ancho entero y caia centrado abajo: hay que
   ganarle en especificidad, no repetir la clase suelta. */
.pc-lista li > .pc-hacer{
  display:flex; flex-direction:row; align-items:center; gap:8px;
  flex:0 0 auto; margin-left:auto; justify-content:flex-end;
}
.pc-ok{color:var(--ok); font-size:15px; font-weight:700}
.pc-sub{font-size:11px; color:var(--mut2); text-align:right}
.pc-tilde{
  display:inline-flex; align-items:center; gap:7px; font-size:12.5px;
  color:var(--mut); cursor:pointer; white-space:nowrap;
}
.pc-tilde input{width:15px; height:15px; accent-color:var(--accent); cursor:pointer}
.pc-mono{font-family:var(--mono, ui-monospace, monospace); font-size:12px; overflow-wrap:anywhere;
  margin:6px 0; display:flex; flex-direction:column; gap:1px}
.pc-mono span{font-family:inherit; font-size:11px; color:var(--mut); text-transform:uppercase; letter-spacing:.04em}
.pc-sin-aire{padding:0 0 8px}
.pc-check{display:flex; gap:8px; align-items:flex-start; font-size:13px; margin:4px 0 12px; line-height:1.4}
.pc-check input{margin-top:3px; flex:none}
.pc-faltan{margin:10px 0 0; padding-left:18px; font-size:13px; color:var(--mut)}
.pc-sub{font-size:12px; color:var(--mut)}
.pc-nw{white-space:nowrap}

/* Incidencias (271) */
.tk-grupo{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin:0 0 8px; padding-left:2px}
.tk-grupo b{font-size:14px}
.tk-grupo .num{color:var(--mut)}
.tk-ayuda{font-size:12px; color:var(--mut)}
.tk-hilo{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.tk-hilo li{border:1px solid var(--bd); border-radius:var(--r-sm); padding:10px 12px}
.tk-hilo li.mio{background:var(--card2)}
.tk-hilo li.int{border-style:dashed; border-color:var(--warn)}
.tk-quien{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:4px}
.tk-quien b{font-size:12.5px}
.tk-quien span{font-size:11.5px; color:var(--mut)}
.tk-cuerpo{font-size:13.5px; white-space:pre-wrap; overflow-wrap:anywhere}
.pc-tramo{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  color:var(--mut); margin:10px 0 2px}
.pc-tramo:first-of-type{margin-top:0}

/* Tablero e historial, dos vistas de la misma pantalla (269) */
.op-vistas{display:inline-flex;background:var(--card2);border:1px solid var(--bd);border-radius:var(--r-full);padding:2px}
.op-vistas button{border:0;background:none;color:var(--mut);font:inherit;font-size:12.5px;font-weight:600;
  padding:4px 12px;border-radius:var(--r-full);cursor:pointer}
.op-vistas button.act{background:var(--card);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.op-filtros{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px}
.op-filtros .u-campo{margin:0;min-width:150px}
.op-hist li.corr::before{background:var(--mut)}
@media (max-width:520px){
  .pc-lista li{flex-wrap:wrap}
  .pc-lista li > div{flex:1 1 180px}
  .pc-lista.ancha li > .u-chip{min-width:0}
  .pc-acc{flex:1 1 100%}
}