/* Radicación — backoffice de oficios legales.
   Paleta más fría que la del chat: es una herramienta de escritorio,
   se pasan horas en ella y conviene que descanse la vista. */
:root{
  --bg:#F7F8FA; --panel:#FFFFFF; --panel-2:#F9FAFB; --panel-3:#F1F3F6;
  --linea:#E5E8EC; --linea-2:#D4D9E0;
  --texto:#15181D; --dim:#5B6470; --tenue:#8A93A0;
  --acento:#2563EB; --acento-2:#1D4ED8; --acento-suave:#EFF4FF; --acento-txt:#1E4FBF;
  --ok:#0F9D58; --ok-bg:#E6F6EC; --ok-txt:#0A6E3D;
  --warn:#C77700; --warn-bg:#FDF3E2; --warn-txt:#8A5400;
  --mal:#DC2626; --mal-bg:#FDECEC; --mal-txt:#A31919;
  --info:#0E7490; --info-bg:#E2F4F8; --info-txt:#0A5468;
  --vio:#7C3AED; --vio-bg:#F1EBFE; --vio-txt:#5B21B6;
  --sombra:0 1px 3px rgba(20,24,31,.06);
  --sombra-md:0 4px 14px rgba(20,24,31,.09);
  --sombra-lg:0 18px 44px rgba(20,24,31,.16);
  --r:12px; --r-sm:8px;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --lado:256px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]){
    --bg:#0F1216; --panel:#171B21; --panel-2:#1C2027; --panel-3:#232830;
    --linea:#282E36; --linea-2:#363D47;
    --texto:#EDF0F4; --dim:#A3ACB9; --tenue:#78828F;
    --acento:#5B8DEF; --acento-2:#7BA5F5; --acento-suave:#1A2540; --acento-txt:#9CBCFA;
    --ok-bg:#0E2A1B; --ok-txt:#5FCE8E; --warn-bg:#2E2109; --warn-txt:#E8B45C;
    --mal-bg:#2E1414; --mal-txt:#F08B8B; --info-bg:#0B2830; --info-txt:#5DC4DC;
    --vio-bg:#221443; --vio-txt:#B794F6;
    --sombra:0 1px 3px rgba(0,0,0,.4); --sombra-md:0 4px 14px rgba(0,0,0,.5);
    --sombra-lg:0 18px 44px rgba(0,0,0,.6);
  }
}
:root[data-tema="oscuro"]{
  --bg:#0F1216; --panel:#171B21; --panel-2:#1C2027; --panel-3:#232830;
  --linea:#282E36; --linea-2:#363D47;
  --texto:#EDF0F4; --dim:#A3ACB9; --tenue:#78828F;
  --acento:#5B8DEF; --acento-2:#7BA5F5; --acento-suave:#1A2540; --acento-txt:#9CBCFA;
  --ok-bg:#0E2A1B; --ok-txt:#5FCE8E; --warn-bg:#2E2109; --warn-txt:#E8B45C;
  --mal-bg:#2E1414; --mal-txt:#F08B8B; --info-bg:#0B2830; --info-txt:#5DC4DC;
  --vio-bg:#221443; --vio-txt:#B794F6;
  --sombra:0 1px 3px rgba(0,0,0,.4); --sombra-md:0 4px 14px rgba(0,0,0,.5);
  --sombra-lg:0 18px 44px rgba(0,0,0,.6);
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:var(--sans); background:var(--bg); color:var(--texto);
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
  display:flex; min-height:100vh;
}

/* ---------- Barra lateral ---------- */
.lado{
  width:var(--lado); flex-shrink:0; background:var(--panel);
  border-right:1px solid var(--linea); display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh;
}
.logo{display:flex;align-items:center;gap:11px;padding:18px 18px 20px}
.logo .icono{
  width:36px;height:36px;border-radius:10px;background:var(--acento);
  display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;
}
.logo b{font-size:14.5px;display:block;letter-spacing:-.2px}
.logo span{font-size:11px;color:var(--tenue);display:block;line-height:1.2}

.menu{flex:1;padding:0 10px;overflow-y:auto}
.menu h4{
  font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--tenue);
  font-weight:700;padding:8px 10px 7px;
}
.menu a{
  display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:8px;
  color:var(--dim);text-decoration:none;font-size:13.5px;font-weight:500;
  margin-bottom:2px;transition:background .13s,color .13s;
}
.menu a:hover{background:var(--panel-3);color:var(--texto)}
.menu a.on{background:var(--acento-suave);color:var(--acento-txt);font-weight:600}
.menu a svg{flex-shrink:0;opacity:.85}
.menu a .cuenta{
  margin-left:auto;font-size:11px;background:var(--panel-3);color:var(--dim);
  padding:1px 7px;border-radius:20px;font-weight:600;
}
.menu a.on .cuenta{background:var(--acento);color:#fff}

.yo{
  display:flex;align-items:center;gap:10px;padding:13px 16px;
  border-top:1px solid var(--linea);flex-shrink:0;
}
.avatar{
  width:32px;height:32px;border-radius:50%;background:var(--acento-suave);
  color:var(--acento-txt);display:flex;align-items:center;justify-content:center;
  font-size:11.5px;font-weight:700;flex-shrink:0;
}
.yo div{min-width:0;flex:1}
.yo b{font-size:12.5px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.yo span{font-size:11px;color:var(--tenue);display:block;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

/* ---------- Contenido ---------- */
.principal{flex:1;min-width:0;display:flex;flex-direction:column}
.techo{
  display:flex;align-items:center;gap:14px;padding:14px 28px;
  background:var(--panel);border-bottom:1px solid var(--linea);
}
.techo .abrir-lado{display:none}
.techo h1{font-size:19px;letter-spacing:-.3px;flex:1;min-width:0}
.techo p{font-size:12.5px;color:var(--tenue);margin-top:1px}

.hoja-principal{padding:22px 28px 40px;flex:1}

/* ---------- Tarjetas ---------- */
.tarjeta{
  background:var(--panel);border:1px solid var(--linea);border-radius:var(--r);
  box-shadow:var(--sombra);margin-bottom:18px;
}
.tarjeta>h3{
  font-size:11.5px;text-transform:uppercase;letter-spacing:.9px;color:var(--dim);
  font-weight:700;padding:15px 18px;border-bottom:1px solid var(--linea);
  display:flex;align-items:center;gap:10px;
}
.tarjeta>h3 .der{margin-left:auto;display:flex;gap:8px}
.tarjeta-cuerpo{padding:18px}

/* ---------- Filtros ---------- */
.filtros{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:18px}
.buscar{position:relative;flex:1;min-width:230px}
.buscar input{
  width:100%;padding:9px 12px 9px 36px;font:inherit;font-size:13.5px;
  background:var(--panel-2);color:var(--texto);
  border:1px solid var(--linea-2);border-radius:9px;outline:none;
}
.buscar input:focus{border-color:var(--acento);box-shadow:0 0 0 3px var(--acento-suave)}
.buscar svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);
  color:var(--tenue);pointer-events:none}
select,input[type=date],input[type=text]{
  padding:9px 11px;font:inherit;font-size:13.5px;background:var(--panel-2);
  color:var(--texto);border:1px solid var(--linea-2);border-radius:9px;outline:none;
}
select:focus,input:focus{border-color:var(--acento)}
.fila-fechas{display:flex;gap:9px;align-items:center;padding:0 18px 14px;
  flex-wrap:wrap;font-size:13px;color:var(--dim)}
.fila-fechas .der{margin-left:auto}
.hallados{padding:0 18px 14px;font-size:13px;color:var(--dim)}
.hallados b{color:var(--texto)}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;gap:7px;padding:8px 13px;
  font:inherit;font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap;
  background:var(--panel);border:1px solid var(--linea-2);color:var(--texto);
  border-radius:9px;transition:background .13s,border-color .13s,color .13s;
}
.btn:hover{background:var(--panel-3)}
.btn.pri{background:var(--acento);border-color:var(--acento);color:#fff}
.btn.pri:hover{background:var(--acento-2)}
.btn.ok{background:var(--ok-bg);border-color:transparent;color:var(--ok-txt)}
.btn.ok:hover{background:var(--ok);color:#fff}
.btn.mal{background:var(--panel);border-color:var(--mal);color:var(--mal)}
.btn.mal:hover{background:var(--mal);color:#fff}
.btn[disabled]{opacity:.5;pointer-events:none}
.btn.chico{padding:5px 10px;font-size:12px}

/* ---------- Tablas ---------- */
.tabla-marco{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{
  text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.7px;
  color:var(--tenue);font-weight:700;padding:11px 14px;
  border-bottom:1px solid var(--linea);white-space:nowrap;background:var(--panel-2);
}
td{padding:12px 14px;border-bottom:1px solid var(--linea);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr.clic{cursor:pointer;transition:background .1s}
tbody tr.clic:hover{background:var(--acento-suave)}
td.mono,th.mono{font-family:var(--mono);font-size:12.5px}
td .nombre{font-weight:600}
.id-caso{font-family:var(--mono);font-size:12.5px;color:var(--dim);font-weight:600}

/* ---------- Insignias ---------- */
.ins{
  display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:20px;
  font-size:11.5px;font-weight:600;white-space:nowrap;line-height:1.5;
}
.ins.sin_radicar{background:var(--panel-3);color:var(--dim)}
.ins.radicado_parcial{background:var(--warn-bg);color:var(--warn-txt)}
.ins.radicado_completo{background:var(--ok-bg);color:var(--ok-txt)}
.ins.pendiente{background:var(--panel-3);color:var(--dim)}
.ins.prescripcion{background:var(--acento-suave);color:var(--acento-txt)}
.ins.tutela{background:var(--vio-bg);color:var(--vio-txt)}
.ins.habeas{background:var(--info-bg);color:var(--info-txt)}
.ins.silencio{background:var(--warn-bg);color:var(--warn-txt)}
.ins.cerrado{background:var(--ok-bg);color:var(--ok-txt)}
.ins.sent{background:var(--ok-bg);color:var(--ok-txt)}
.ins.pending{background:var(--warn-bg);color:var(--warn-txt)}
.ins.error{background:var(--mal-bg);color:var(--mal-txt)}
.ins.dup{background:var(--mal-bg);color:var(--mal-txt)}

.radicados-cel{display:flex;flex-direction:column;gap:5px}
.radicados-cel .par{display:flex;align-items:center;gap:8px;font-size:12.5px}
.radicados-cel .ciudad{color:var(--dim);min-width:96px}

/* ---------- Detalle ---------- */
.encabezado-caso{display:flex;align-items:flex-start;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.encabezado-caso h1{font-size:24px;letter-spacing:-.5px}
.encabezado-caso .sub{font-size:13px;color:var(--tenue)}
.encabezado-caso .der{margin-left:auto;display:flex;gap:9px;flex-wrap:wrap}

.ficha{padding:18px}
.ficha h2{font-size:17px;margin-bottom:6px}
.ficha .linea{font-size:13.5px;color:var(--dim);line-height:1.75}
.ficha .linea b{color:var(--texto);font-weight:600}

.docs-caso{display:flex;gap:9px;flex-wrap:wrap;padding:18px}
.doc-btn{
  display:inline-flex;align-items:center;gap:8px;padding:10px 14px;
  border:1px solid var(--linea-2);border-radius:9px;background:var(--panel);
  font-size:13px;cursor:pointer;font:inherit;font-size:13px;color:var(--texto);
  transition:border-color .13s,background .13s;
}
.doc-btn:hover{border-color:var(--acento);background:var(--acento-suave)}
.doc-btn.tiene{border-color:var(--ok);background:var(--ok-bg);color:var(--ok-txt)}
.doc-btn .quitar{
  border:none;background:none;color:inherit;cursor:pointer;padding:0 0 0 3px;
  opacity:.6;display:flex;
}
.doc-btn .quitar:hover{opacity:1}

.sec-caja{border:1px solid var(--linea);border-radius:var(--r);margin-bottom:16px;
  background:var(--panel);box-shadow:var(--sombra);overflow:hidden}
.sec-techo{padding:15px 18px;border-bottom:1px solid var(--linea);
  display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sec-techo h3{font-size:15.5px}
.sec-techo .meta{font-size:12.5px;color:var(--tenue)}
.sec-techo .der{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.sec-caja.cerrada{opacity:.72}

td select,td input{padding:6px 9px;font-size:12.5px;border-radius:7px;width:100%;min-width:92px}
td input[type=date]{min-width:130px}
.celda-simit select{min-width:104px}

.linea-noti{padding:14px 18px;border-bottom:1px solid var(--linea);display:flex;gap:16px}
.linea-noti:last-child{border-bottom:none}
.linea-noti .cuando{font-size:11.5px;color:var(--tenue);width:86px;flex-shrink:0;line-height:1.4}
.linea-noti .que{flex:1;min-width:0}
.linea-noti .titulo{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:4px}
.linea-noti .titulo b{font-size:12px;letter-spacing:.4px;text-transform:uppercase}
.linea-noti .tel{font-size:12px;color:var(--tenue);font-family:var(--mono)}
.linea-noti p{font-size:13px;color:var(--dim);line-height:1.55}
.linea-noti .pie{font-size:11.5px;color:var(--tenue);margin-top:3px}

.vacio{padding:44px 20px;text-align:center;color:var(--tenue);font-size:13.5px}
.vacio b{display:block;font-size:15px;color:var(--dim);margin-bottom:5px}

/* ---------- Ventana ---------- */
.telon{position:fixed;inset:0;background:rgba(15,18,22,.5);z-index:60;
  display:none;align-items:center;justify-content:center;padding:20px}
.telon.on{display:flex}
.hoja{background:var(--panel);border-radius:14px;width:min(520px,100%);
  box-shadow:var(--sombra-lg);max-height:calc(100vh - 40px);display:flex;flex-direction:column}
.hoja>header{padding:16px 18px;border-bottom:1px solid var(--linea);display:flex;align-items:center}
.hoja>header h3{font-size:16px;flex:1}
.hoja>header button{background:none;border:none;font-size:22px;line-height:1;
  color:var(--tenue);cursor:pointer;padding:0 6px}
.hoja .cuerpo{padding:18px;overflow-y:auto}
.hoja>footer{padding:13px 18px;border-top:1px solid var(--linea);
  display:flex;gap:8px;justify-content:flex-end;background:var(--panel-2);
  border-radius:0 0 14px 14px}
.campo{margin-bottom:13px}
.campo label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.7px;
  color:var(--dim);font-weight:700;margin-bottom:5px}
.campo select,.campo input{width:100%}
.suelta{border:1.5px dashed var(--linea-2);border-radius:10px;padding:22px;
  text-align:center;background:var(--panel-2)}
.suelta.encima{border-color:var(--acento);background:var(--acento-suave)}
.suelta small{display:block;font-size:11.5px;color:var(--tenue);margin-top:7px}
.aviso{font-size:12.5px;padding:9px 11px;border-radius:8px;margin-top:12px;display:none}
.aviso.mal{display:block;background:var(--mal-bg);color:var(--mal-txt)}
.aviso.bien{display:block;background:var(--ok-bg);color:var(--ok-txt)}

.cargando{position:fixed;inset:0;background:var(--bg);display:flex;
  align-items:center;justify-content:center;gap:12px;z-index:100;flex-direction:column}
.cargando.listo{display:none}
.rueda{width:30px;height:30px;border:3px solid var(--linea-2);border-top-color:var(--acento);
  border-radius:50%;animation:girar .75s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}
.cargando p{color:var(--dim);font-size:13px}

@media (max-width:960px){
  .lado{position:fixed;left:0;top:0;z-index:50;transform:translateX(-100%);
    transition:transform .2s;box-shadow:var(--sombra-lg)}
  .lado.abierto{transform:none}
  .techo .abrir-lado{display:inline-flex}
  .techo,.hoja-principal{padding-left:16px;padding-right:16px}
}

/* Datos del cliente que se pueden corregir dentro del caso. */
.campo-caso{margin-bottom:9px;max-width:340px}
.campo-caso label{display:block;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.7px;color:var(--tenue);font-weight:700;margin-bottom:3px}
.campo-caso input{width:100%;padding:7px 10px;font-size:13.5px}
.campo-caso input[data-campo="cedula"],
.campo-caso input[data-campo="telefono"]{font-family:var(--mono);font-size:13px}
.campo-caso .ver-wa{display:inline-block;margin-top:3px;font-size:11.5px;
  color:var(--acento);text-decoration:none}
.campo-caso .ver-wa:hover{text-decoration:underline}