:root{
  --ink:#1C2B39; --ink-deep:#16242F; --crema:#F5F2EB; --papel:#FBFAF6;
  --body:#5B564C; --line:#E4E1D8; --teal:#38BBC9; --teal-deep:#1E8E9C;
  --teal-ink:#0E5A64; --blanco:#FFFFFF;
  --ambar:#A16207; --ambar-bg:#FBF3E2; --rojo:#B3261E; --rojo-bg:#FAECEA;
  --verde:#3D7A46; --verde-bg:#EDF3EC; --gris:#8A857B; --naranjo:#E8720C;
  --azul:#2C5F8A; --azul-bg:#EAF1F7;
  --sans:"Schibsted Grotesk","IBM Plex Sans","Segoe UI",Roboto,
         "Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"Cascadia Mono",Consolas,
         "Courier New",monospace;
  --sombra:0 1px 2px rgba(28,43,57,.06), 0 2px 8px rgba(28,43,57,.05);
  --radio:10px;
}

@font-face{
  font-family:"Schibsted Grotesk";
  src:url("/estatico/fuentes/SchibstedGrotesk.woff2") format("woff2");
  font-weight:300 800; font-display:swap;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{-webkit-text-size-adjust:100%;}
body{background:var(--papel); color:var(--ink); font-family:var(--sans);
     font-size:14.5px; line-height:1.55; -webkit-font-smoothing:antialiased;}
a{color:var(--teal-ink); text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3,h4{font-weight:600; line-height:1.25;}
h1{font-size:23px; letter-spacing:-.01em;}
h2{font-size:17px;}
h3{font-size:14.5px;}
small{font-size:12px;}
code,kbd{font-family:var(--mono); font-size:.88em;}
hr{border:0; border-top:1px solid var(--line); margin:20px 0;}

.envoltura{max-width:1400px; margin:0 auto; padding:0 22px 64px;}
.estrecho{max-width:960px;}

/* ------------------------------------------------------- cabecera */
.cabecera{position:sticky; top:0; z-index:60; background:var(--ink-deep);
          color:#E8EDF0; box-shadow:0 1px 0 rgba(0,0,0,.25);}
.cabecera .fila{max-width:1400px; margin:0 auto; padding:0 22px;
                display:flex; align-items:center; gap:16px; min-height:54px;}
.marca{display:flex; align-items:baseline; gap:9px; flex:0 0 auto;
       color:#F3F6F7; font-weight:600; font-size:16px; letter-spacing:-.01em;}
.marca:hover{text-decoration:none;}
.marca .punto{width:8px; height:8px; border-radius:50%;
              background:var(--teal); display:inline-block;}
.marca em{font-style:normal; font-family:var(--mono); font-size:10.5px;
          letter-spacing:.16em; text-transform:uppercase; color:#7E96A3;}
.buscador-global{margin-left:auto; flex:0 1 380px; position:relative;}
.buscador-global input{width:100%; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14); color:#EEF3F5; border-radius:8px;
  padding:7px 11px 7px 32px; font:inherit; font-size:13px;}
.buscador-global input::placeholder{color:#8299A6;}
.buscador-global input:focus{outline:none; border-color:var(--teal);
  background:rgba(255,255,255,.13);}
.buscador-global .lupa{position:absolute; left:10px; top:7px; color:#7E96A3;
  font-size:13px; pointer-events:none;}
.usuario-chip{font-size:12.5px; color:#A9BCC6; white-space:nowrap;}
.usuario-chip a{color:#D7E2E7;}

.pestanas{background:var(--ink-deep); border-top:1px solid rgba(255,255,255,.07);
          overflow-x:auto;}
.pestanas .fila{max-width:1400px; margin:0 auto; padding:0 22px;
                display:flex; gap:2px;}
.pestana{display:inline-flex; align-items:center; gap:7px; padding:9px 13px 10px;
  color:#9FB3BE; font-size:13px; font-weight:500; white-space:nowrap;
  border-bottom:2px solid transparent;}
.pestana:hover{color:#E4EBEE; text-decoration:none;
               background:rgba(255,255,255,.045);}
.pestana.activa{color:#FFFFFF; border-bottom-color:var(--teal);}
.pestana .cuenta{font-family:var(--mono); font-size:10.5px; padding:1px 6px;
  border-radius:9px; background:rgba(255,255,255,.13); color:#D6E2E7;}
.pestana .cuenta.urge{background:var(--rojo); color:#fff;}
.pestana .cuenta.ojo{background:var(--ambar); color:#fff;}

/* ------------------------------------------------------- encabezado */
.encabezado{padding:26px 0 16px; display:flex; align-items:flex-start;
            gap:20px; flex-wrap:wrap;}
.encabezado .texto{flex:1 1 460px; min-width:280px;}
.kicker{font-family:var(--mono); font-size:10.5px; letter-spacing:.17em;
        text-transform:uppercase; color:var(--teal-deep); margin-bottom:7px;}
.encabezado .baja{color:var(--body); margin-top:6px; max-width:78ch;
                  font-size:13.5px;}
.acciones{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}

/* ------------------------------------------------------- botones */
.btn{display:inline-flex; align-items:center; gap:7px; padding:7px 13px;
  border-radius:8px; border:1px solid var(--line); background:var(--blanco);
  color:var(--ink); font:inherit; font-size:13px; font-weight:500;
  cursor:pointer; box-shadow:var(--sombra); white-space:nowrap;}
.btn:hover{border-color:#CFCABE; text-decoration:none;
           background:#FFFDF9;}
.btn:active{transform:translateY(1px);}
.btn.principal{background:var(--naranjo); border-color:var(--naranjo);
  color:#fff;}
.btn.principal:hover{background:#D2660B; border-color:#D2660B;}
.btn.calipso{background:var(--teal-deep); border-color:var(--teal-deep);
  color:#fff;}
.btn.calipso:hover{background:#186F7B; border-color:#186F7B;}
.btn.peligro{color:var(--rojo); border-color:#E7C9C5;}
.btn.peligro:hover{background:var(--rojo-bg);}
.btn.chico{padding:4px 9px; font-size:12px; border-radius:7px;}
.btn[disabled], .btn.apagado{opacity:.45; cursor:not-allowed;
  box-shadow:none;}
form.enlinea{display:inline;}

/* ------------------------------------------------------- pills y chips */
.pill{display:inline-flex; align-items:center; gap:5px; font-size:11.5px;
  font-weight:600; padding:2px 8px; border-radius:20px; white-space:nowrap;
  border:1px solid transparent; line-height:1.5;}
.pill-ok{background:var(--verde-bg); color:var(--verde);
         border-color:#CFE2D1;}
.pill-ambar{background:var(--ambar-bg); color:var(--ambar);
            border-color:#EBDCB8;}
.pill-rojo{background:var(--rojo-bg); color:var(--rojo);
           border-color:#EFCDC9;}
.pill-gris{background:#F1EFE9; color:var(--gris); border-color:var(--line);}
.pill-calipso{background:#E4F5F7; color:var(--teal-ink);
              border-color:#BFE6EB;}
.pill-azul{background:var(--azul-bg); color:var(--azul);
           border-color:#CBDDEB;}

.chip-filtro{display:inline-flex; align-items:center; gap:6px; padding:5px 11px;
  border-radius:20px; border:1px solid var(--line); background:var(--blanco);
  font-size:12.5px; color:var(--body);}
.chip-filtro:hover{border-color:var(--teal); text-decoration:none;}
.chip-filtro.activo{background:var(--ink); border-color:var(--ink);
  color:#fff; font-weight:500;}
.chip-filtro .n{font-family:var(--mono); font-size:11px; opacity:.75;}
.filtros{display:flex; gap:7px; flex-wrap:wrap; align-items:center;
         margin:4px 0 18px;}

/* etiqueta de dato ausente. Nunca se tapa un hueco con una frase. */
.sin-dato{font-family:var(--mono); font-size:11px; color:var(--ambar);
  background:var(--ambar-bg); border:1px dashed #E0CDA2; border-radius:5px;
  padding:1px 6px; white-space:nowrap;}

.fuente{font-family:var(--mono); font-size:10px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--gris); border:1px solid var(--line);
  border-radius:4px; padding:1px 5px; background:var(--blanco);
  white-space:nowrap;}

/* ------------------------------------------------------- tarjetas */
.tarjeta{background:var(--blanco); border:1px solid var(--line);
  border-radius:var(--radio); box-shadow:var(--sombra); overflow:hidden;}
.tarjeta > .cabeza{display:flex; align-items:center; gap:10px;
  padding:12px 16px; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#FFFFFF,#FCFBF7);}
.tarjeta > .cabeza h2{flex:1 1 auto; font-size:14px;}
.tarjeta > .cuerpo{padding:16px;}
.tarjeta > .cuerpo.apretado{padding:0;}
.tarjeta .pie{padding:10px 16px; border-top:1px solid var(--line);
  background:#FCFBF7; font-size:12.5px; color:var(--body);}

.rejilla{display:grid; gap:16px;}
.rejilla.c2{grid-template-columns:repeat(auto-fit,minmax(360px,1fr));}
.rejilla.c3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
.rejilla.c4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));}
.columnas{display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
          gap:16px; align-items:start;}
@media (max-width:1020px){ .columnas{grid-template-columns:1fr;} }

/* ------------------------------------------------------- utilidades */
/* Existen para que ninguna pantalla vuelva a escribir un style="" a
   mano. Las tarjetas no traen margen propio —van casi siempre dentro de
   una .rejilla, que ya pone el hueco—, asi que dos tarjetas pegadas una
   detras de otra se veian con los bordes tocandose: pasaba en el
   buscador, en la ficha de un correo y en la cartera al editar. */
.separa{margin-top:16px;}
.separa-poco{margin-top:6px;}
.sangria{margin-left:6px;}
.separa-antes{margin-bottom:16px;}
.nowrap{white-space:nowrap;}
.ancho-medio{max-width:320px;}
.ancho-corto{max-width:230px;}
.enfila{display:flex; gap:6px; align-items:center; flex-wrap:wrap;}
.btn.bloque{width:100%; justify-content:center;}

/* ------------------------------------------------------- stats */
.stat{background:var(--blanco); border:1px solid var(--line);
  border-radius:var(--radio); padding:13px 15px; box-shadow:var(--sombra);
  display:block;}
.stat:hover{text-decoration:none; border-color:#CFCABE;}
.stat .n{font-size:26px; font-weight:600; letter-spacing:-.02em;
  line-height:1.1; font-variant-numeric:tabular-nums; color:var(--ink);}
.stat .r{font-size:12px; color:var(--body); margin-top:3px;}
.stat .p{font-size:11.5px; color:var(--gris); margin-top:5px;}
.stat.urge .n{color:var(--rojo);}
.stat.ojo .n{color:var(--ambar);}
.stat.bien .n{color:var(--verde);}

/* ------------------------------------------------------- tablas */
.marco-tabla{overflow-x:auto;}
table.tabla{width:100%; border-collapse:collapse; font-size:13px;}
table.tabla th{text-align:left; font-weight:600; font-size:11px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--gris);
  padding:9px 12px; border-bottom:1px solid var(--line);
  background:#FCFBF7; white-space:nowrap; position:sticky; top:0;}
table.tabla th[data-ordenable]{cursor:pointer; user-select:none;}
table.tabla th[data-ordenable]:hover{color:var(--teal-ink);}
table.tabla th .flecha{opacity:.35; font-size:9px; margin-left:3px;}
table.tabla th.asc .flecha, table.tabla th.desc .flecha{opacity:1;
  color:var(--teal-deep);}
table.tabla td{padding:9px 12px; border-bottom:1px solid #F0EEE7;
  vertical-align:top;}
table.tabla tbody tr:hover{background:#FDFCF8;}
table.tabla tr.urge td{background:#FEF7F6;}
table.tabla tr.urge:hover td{background:#FCEFED;}
table.tabla td.num, table.tabla th.num{text-align:right;
  font-variant-numeric:tabular-nums; font-family:var(--mono);
  font-size:12.5px;}
table.tabla .principal{font-weight:600; color:var(--ink);}
table.tabla .secundario{color:var(--gris); font-size:12px;}
table.tabla td.encoge{width:1%; white-space:nowrap;}

.vacio{padding:34px 20px; text-align:center; color:var(--gris);
  font-size:13.5px;}
.vacio .icono{font-size:26px; display:block; margin-bottom:8px; opacity:.5;}

/* ------------------------------------------------------- avisos */
.aviso{border:1px solid var(--line); border-left-width:3px;
  border-radius:8px; padding:11px 14px; font-size:13px; display:flex;
  gap:10px; align-items:flex-start; background:var(--blanco);
  margin-bottom:14px;}
.aviso .icono{flex:0 0 auto; font-size:14px; line-height:1.4;}
/* Solo el titulo del aviso es de bloque. La regla estaba escrita
   ".aviso b" a secas y partia en cinco lineas la barra de modo
   demostracion, que lleva dos <b> DENTRO de la frase: se veia
   "muestran datos de" / "demostracion" / ", no de la operacion real"
   uno debajo de otro, en todas las pantallas. El titulo es el primer
   <b> del bloque de texto; los de dentro de la frase siguen en linea. */
.aviso > div > b:first-child{display:block; margin-bottom:2px;}
.aviso.demo{border-left-color:var(--ambar); background:var(--ambar-bg);
  color:#6D4406;}
.aviso.error{border-left-color:var(--rojo); background:var(--rojo-bg);
  color:#7E1B15;}
.aviso.ok{border-left-color:var(--verde); background:var(--verde-bg);
  color:#2C5733;}
.aviso.dato{border-left-color:var(--teal-deep); background:#EAF7F9;
  color:var(--teal-ink);}
/* El reset de arriba deja las listas sin sangria y los puntos quedan
   fuera de la caja del aviso, cortados. Un aviso que enumera lo que
   falta —las claves de WhatsApp, los datos que bloquean un informe— es
   justo donde mas se lee la lista. */
.aviso ul{margin:6px 0 0 18px;}
.aviso li{margin:2px 0;}
.aviso > div > p{margin-top:8px;}

/* ------------------------------------------------------- relojes */
.reloj{display:flex; gap:12px; align-items:flex-start; padding:11px 0;
  border-bottom:1px solid #F0EEE7;}
.reloj:last-child{border-bottom:0;}
.reloj .cuenta{flex:0 0 74px; text-align:center; font-family:var(--mono);
  border-radius:8px; padding:6px 4px; line-height:1.15;}
.reloj .cuenta .d{font-size:19px; font-weight:600; display:block;}
.reloj .cuenta .u{font-size:9.5px; letter-spacing:.1em;
  text-transform:uppercase; opacity:.8;}
.reloj.venc .cuenta{background:var(--rojo-bg); color:var(--rojo);}
.reloj.cerca .cuenta{background:var(--ambar-bg); color:var(--ambar);}
.reloj.lejos .cuenta{background:#F1EFE9; color:var(--gris);}
.reloj.abierto .cuenta{background:var(--ambar-bg); color:var(--ambar);}
.reloj .txt{flex:1 1 auto; min-width:0;}
.reloj .txt b{font-size:13px; display:block;}
.reloj .txt p{font-size:12px; color:var(--body); margin-top:2px;}

/* ------------------------------------------------------- linea de tiempo */
.linea{list-style:none; position:relative; padding-left:22px;}
.linea:before{content:""; position:absolute; left:6px; top:6px; bottom:6px;
  width:1px; background:var(--line);}
.linea li{position:relative; padding:9px 0 9px 4px;}
.linea li:before{content:""; position:absolute; left:-20px; top:15px;
  width:9px; height:9px; border-radius:50%; background:var(--blanco);
  border:2px solid var(--teal-deep);}
.linea li.correo:before{border-color:var(--azul);}
.linea li.doc:before{border-color:var(--gris);}
.linea li.wa:before{border-color:#25D366;}
.linea li.hito:before{background:var(--teal-deep);}
.linea .cuando{font-family:var(--mono); font-size:11px; color:var(--gris);}
.linea .que{font-size:13px; margin-top:1px;}
.linea .quien{font-size:12px; color:var(--body);}

/* ------------------------------------------------------- borradores */
/* El harness PREPARA y la persona ENVIA. Nada sale solo: por eso el
   borrador se ve como un correo listo con un boton de copiar por campo. */
.borrador{border:1px solid var(--line); border-radius:var(--radio);
  background:var(--papel); overflow:hidden;}
.borrador .campo{display:flex; gap:10px; align-items:flex-start;
  padding:8px 12px; border-bottom:1px solid var(--line);
  background:var(--blanco);}
.borrador .campo .et{flex:0 0 82px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--gris);
  padding-top:3px;}
.borrador .campo .va{flex:1 1 auto; min-width:0; font-size:13px;
  word-break:break-word;}
.borrador .cuerpo{padding:13px 14px; white-space:pre-wrap; font-size:13px;
  line-height:1.6; background:var(--papel); max-height:420px;
  overflow-y:auto;}
.borrador .pie{display:flex; gap:8px; padding:10px 12px;
  border-top:1px solid var(--line); background:#FCFBF7; flex-wrap:wrap;
  align-items:center;}
.copiar{background:none; border:1px solid var(--line); border-radius:6px;
  padding:2px 7px; font:inherit; font-size:11px; color:var(--body);
  cursor:pointer;}
.copiar:hover{border-color:var(--teal); color:var(--teal-ink);}
.copiar.listo{border-color:var(--verde); color:var(--verde);}

/* ------------------------------------------------------- formularios */
label.campo{display:block; margin-bottom:12px;}
label.campo > span{display:block; font-size:12px; font-weight:600;
  color:var(--body); margin-bottom:4px;}
label.campo > small{display:block; font-size:11.5px; color:var(--gris);
  margin-top:3px;}
input[type=text], input[type=password], input[type=date], input[type=email],
input[type=number], input[type=search], select, textarea{
  width:100%; padding:7px 10px; border:1px solid var(--line);
  border-radius:8px; font:inherit; font-size:13.5px; background:var(--blanco);
  color:var(--ink);}
input:focus, select:focus, textarea:focus{outline:none;
  border-color:var(--teal); box-shadow:0 0 0 3px rgba(56,187,201,.15);}
textarea{min-height:110px; resize:vertical; line-height:1.55;}
.fila-campos{display:grid; gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));}

/* ------------------------------------------------------- identidades */
.mapa-id{display:flex; gap:6px; flex-wrap:wrap;}
.id-sis{display:inline-flex; align-items:center; gap:6px; font-size:11.5px;
  border:1px solid var(--line); border-radius:7px; padding:3px 8px;
  background:var(--blanco); white-space:nowrap;}
.id-sis .s{font-family:var(--mono); font-size:10px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--gris);}
.id-sis .v{font-family:var(--mono); font-size:11.5px; color:var(--ink);}
.id-sis.confirmada{border-color:#CFE2D1; background:var(--verde-bg);}
.id-sis.confirmada .s{color:var(--verde);}
.id-sis.propuesta{border-style:dashed; border-color:#E0CDA2;
  background:var(--ambar-bg);}
.id-sis.propuesta .s{color:var(--ambar);}
.id-sis.falta{border-style:dashed; color:var(--gris); opacity:.7;}

/* ------------------------------------------------------- ficha 360 */
.expediente-cab{background:var(--ink-deep); color:#E6ECEF; border-radius:12px;
  padding:20px 22px; margin-bottom:18px;}
.expediente-cab h1{color:#FFFFFF; font-size:21px;}
.expediente-cab .dir{color:#A9BCC6; font-size:13.5px; margin-top:3px;}
.expediente-cab .tira{display:flex; gap:8px; flex-wrap:wrap;
  margin-top:14px; align-items:center;}
.expediente-cab .dato{font-size:12px; color:#B9C7CE;}
.expediente-cab .dato b{color:#F0F4F6; font-weight:600;
  font-variant-numeric:tabular-nums;}
.expediente-cab .sin-dato{background:rgba(251,243,226,.16); color:#F0D9A8;
  border-color:rgba(224,205,162,.4);}

.seccion-t{font-family:var(--mono); font-size:10.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--gris); margin:22px 0 9px;
  display:flex; align-items:center; gap:9px;}
.seccion-t:after{content:""; flex:1 1 auto; height:1px;
  background:var(--line);}

.par{display:flex; gap:10px; padding:6px 0; border-bottom:1px solid #F3F1EB;
  font-size:13px;}
.par:last-child{border-bottom:0;}
.par .et{flex:0 0 150px; color:var(--gris); font-size:12.5px;}
.par .va{flex:1 1 auto; min-width:0; word-break:break-word;}

.md{font-size:13.5px; line-height:1.68; max-height:520px; overflow-y:auto;
  padding:14px 16px; background:var(--papel); border:1px solid var(--line);
  border-radius:8px;}
.md h1,.md h2,.md h3{margin:16px 0 7px; font-size:15px;}
.md h1:first-child,.md h2:first-child{margin-top:0;}
.md p{margin:7px 0;}
.md ul,.md ol{margin:7px 0 7px 20px;}
.md li{margin:3px 0;}
.md code{background:#EFEDE6; padding:1px 4px; border-radius:4px;}
.md hr{margin:14px 0;}
.md blockquote{border-left:3px solid var(--teal); padding-left:12px;
  color:var(--body); margin:9px 0;}

/* ------------------------------------------------------- entrar */
.entrar-marco{min-height:100vh; display:flex; align-items:center;
  justify-content:center; padding:24px; background:var(--ink-deep);}
.entrar-caja{width:100%; max-width:370px; background:var(--blanco);
  border-radius:14px; padding:30px 28px; box-shadow:0 18px 50px rgba(0,0,0,.3);}
.entrar-caja h1{font-size:20px; margin-bottom:4px;}
.entrar-caja .baja{color:var(--body); font-size:13px; margin-bottom:22px;}

/* ------------------------------------------------------- impresion */
@media print{
  .cabecera,.pestanas,.acciones,.filtros,.btn,.copiar{display:none !important;}
  body{background:#fff; font-size:11.5px;}
  .tarjeta{break-inside:avoid; box-shadow:none;}
  .envoltura{max-width:none; padding:0;}
  a{color:inherit; text-decoration:none;}
}

@media (max-width:700px){
  .cabecera .fila{flex-wrap:wrap; padding:8px 14px;}
  .buscador-global{flex:1 1 100%; margin-left:0; order:3;}
  .envoltura{padding:0 14px 48px;}
  .par .et{flex:0 0 108px;}
  .reloj .cuenta{flex:0 0 60px;}
}