/* Paleta clásica del prototipo: negro, grises y blanco, con contornos dorados. */
:root{
  --papel:#f1f1ef; --hoja:#fff; --linea:#d4d4d1; --tinta:#161616; --tenue:#5c5c5c;
  --sello:#161616; --sello-suave:#e8e6df; --lacre:#9b2c2c; --oro:#a98535; --oro-suave:#f3ecdb; --barra:#121212; --barra-txt:#f4f4f2; --barra-tenue:#b3b3b0;
  --ok:#2f6b3f; --ok-suave:#e3efe5; --peligro:#9b2c2c; --peligro-suave:#f6e1df; --aviso:#8a5a00; --aviso-suave:#f7ecd6; --neutro-suave:#e9e9e6; --r:6px;
  --f-titulo:Georgia,"Times New Roman",serif; --f-texto:system-ui,-apple-system,"Segoe UI",sans-serif; --f-dato:ui-monospace,Consolas,Menlo,monospace;
}
@media (prefers-color-scheme:dark){:root{
  --papel:#0e0e0e; --hoja:#1a1a1a; --linea:#333; --tinta:#ececea; --tenue:#a3a3a0;
  --sello:#d2b46a; --sello-suave:#26231b; --lacre:#e48a82; --oro:#c9a85a; --oro-suave:#2a2519; --barra:#000; --barra-tenue:#a3a3a0;
  --ok:#7cc792; --ok-suave:#1c2e23; --peligro:#ef8f86; --peligro-suave:#3a1f1d; --aviso:#e3b35c; --aviso-suave:#2f2615; --neutro-suave:#262626; color-scheme:dark}}
*{box-sizing:border-box}
body{margin:0;background:var(--papel);color:var(--tinta);font:15px/1.5 var(--f-texto)}
.app{max-width:1180px;margin:0 auto;padding:0 16px 48px}
.barra{background:var(--barra);color:var(--barra-txt);border-bottom:2px solid var(--oro);margin:0 -16px 22px;padding:10px 16px}
.marca{font:600 20px var(--f-titulo);color:var(--oro);letter-spacing:.4px;text-decoration:none}
/* panel lateral */
.marco{display:flex;align-items:stretch;min-height:100vh}
.lateral{flex:0 0 244px;width:244px;position:sticky;top:0;height:100vh;overflow:hidden auto;background:var(--barra);color:var(--barra-txt);border-right:2px solid var(--oro);display:flex;flex-direction:column;gap:12px;padding:14px 10px;transition:width .18s ease,flex-basis .18s ease}
.contenido{flex:1;min-width:0;padding:24px 28px 48px}
.contenido main{max-width:1560px;margin:0 auto}
.lat-cab{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 4px 10px;border-bottom:1px solid #333}
.marca-corta{display:none}
.alternar{flex:none;width:32px;height:32px;display:grid;place-items:center;background:none;border:1px solid #444;border-radius:var(--r);color:var(--barra-tenue);cursor:pointer}
.alternar:hover{color:var(--barra-txt);border-color:var(--oro)}
.alternar .ico{transition:transform .18s ease}
.reloj{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid #3a3320;border-radius:var(--r);background:linear-gradient(160deg,#1d1a12,#121212)}
.reloj-hora{font:600 26px/1 var(--f-dato);color:var(--oro);letter-spacing:.04em}
.reloj-fecha{font-size:12.5px;color:var(--barra-txt);first-letter:uppercase}
.reloj-fecha::first-letter{text-transform:uppercase}
.lateral nav{display:flex;flex-direction:column;gap:3px;flex:1}
/* encabezado destacado de cada sección */
.portada{position:relative;overflow:hidden;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 20px;margin-bottom:18px;padding:22px 26px 20px;background:linear-gradient(120deg,#0d0d0d 0%,#1a1813 55%,#2a2416 100%);color:var(--barra-txt);border:1px solid var(--oro);border-radius:10px;box-shadow:inset 0 0 0 4px #0d0d0d,inset 0 0 0 5px #a9853566}
.portada::after{content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;border:1px solid #a9853540;border-radius:50%;box-shadow:0 0 0 22px #a985350d,0 0 0 46px #a9853508;pointer-events:none}
.portada-texto{position:relative;z-index:1;min-width:0}
.portada-marca{display:block;font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--barra-tenue);margin-bottom:6px}
.portada h1{margin:0;font:600 clamp(28px,3.6vw,44px)/1.08 var(--f-titulo);letter-spacing:.14em;text-transform:uppercase;color:transparent;background:linear-gradient(180deg,#e8cf8e 0%,#c9a85a 45%,#9c7a2f 100%);-webkit-background-clip:text;background-clip:text;text-shadow:0 1px 0 #00000040}
.portada h1::after{content:"";display:block;width:72px;height:2px;margin-top:10px;background:linear-gradient(90deg,var(--oro),transparent)}
.portada .sub{color:var(--barra-tenue);margin-top:10px}
.portada .sub a{color:var(--barra-txt)}
.portada-acciones{position:relative;z-index:1;display:flex;gap:8px;flex-wrap:wrap}
.portada .btn.pri{background:var(--oro);border-color:var(--oro);color:#121212;font-weight:600}
@media (max-width:640px){.portada{padding:16px 16px 14px}.portada::after{display:none}}
.lateral nav a,.lat-usuario,.lat-salir{display:flex;align-items:center;gap:11px;padding:9px 10px;border:1px solid transparent;border-radius:var(--r);font:500 14px var(--f-texto);color:var(--barra-tenue);text-decoration:none;white-space:nowrap;background:none;width:100%;cursor:pointer;text-align:left}
.lateral nav a:hover,.lat-usuario:hover,.lat-salir:hover{color:var(--barra-txt);background:#ffffff14}
.lateral nav a[aria-current=page]{border-color:var(--oro);color:var(--barra-txt);background:#ffffff0d}
.ico{flex:none}
.lat-pie{border-top:1px solid #333;padding-top:10px;display:flex;flex-direction:column;gap:3px}
.lat-pie form{margin:0}
.lat-usuario small{display:block;font-size:12px;font-weight:400;color:var(--barra-tenue)}
.lat-usuario .txt{overflow:hidden;text-overflow:ellipsis}
@media (min-width:821px){
  .reducido .lateral{flex-basis:66px;width:66px}
  .reducido .marca-larga,.reducido .txt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .reducido .marca-corta{display:inline}
  .reducido .reloj{padding:6px 2px;text-align:center}
  .reducido .reloj-hora{font-size:13px}
  .reducido .lat-cab{flex-direction:column;padding-inline:0}
  .reducido .alternar .ico{transform:rotate(180deg)}
  .reducido .lateral nav a,.reducido .lat-usuario,.reducido .lat-salir{justify-content:center;padding-inline:0}
}
@media (max-width:820px){
  .marco{flex-direction:column}
  .lateral{position:static;flex:none;width:auto;height:auto;border-right:0;border-bottom:2px solid var(--oro);padding:10px 12px;gap:8px}
  .alternar{display:none}
  .lat-cab{padding:0 0 6px}
  .reloj{flex-direction:row;align-items:baseline;gap:10px;padding:6px 10px}
  .reloj-hora{font-size:18px}
  .lateral nav{flex-direction:row;flex-wrap:wrap}
  .lateral nav a{width:auto;padding:6px 8px;font-size:13px;gap:6px}
  .lat-pie{flex-direction:row;align-items:center;justify-content:space-between;padding-top:8px}
  .lat-usuario,.lat-salir{width:auto;padding:4px 8px}
  .contenido{padding:16px 16px 40px}
}
h1,h2,h3,h4{font-family:var(--f-titulo);font-weight:600;margin:0 0 8px;overflow-wrap:anywhere}
h1{font-size:26px;line-height:1.2}h2{font-size:19px}h3{font-size:16px;margin-top:18px}h4{font-size:15px}
h1.bienvenida{font-size:30px;letter-spacing:.14em;border-bottom:1px solid var(--oro);padding-bottom:6px;display:inline-block}
.cab{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:14px}
.cab h1{margin-top:8px}
.sub{color:var(--tenue);font-size:14px;margin:2px 0}
.sub a[aria-current]{font-weight:600}
.panel{background:var(--hoja);border:1px solid var(--oro);border-radius:var(--r);padding:14px 16px;min-width:0}
.marg{margin-bottom:14px}
.angosto{max-width:460px;margin:40px auto}
.rejilla{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.resumen{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.cont{display:flex;align-items:baseline;gap:6px;padding:6px 12px;border-radius:999px;background:var(--neutro-suave);font-size:14px}
.cont b{font:600 16px var(--f-dato)}
.cont.rojo{background:var(--peligro-suave);color:var(--peligro)}.cont.ambar{background:var(--aviso-suave);color:var(--aviso)}
.lista{display:flex;flex-direction:column}
.fila{display:grid;grid-template-columns:auto 1fr auto;gap:4px 12px;align-items:start;padding:10px 0;border-top:1px solid var(--linea);color:inherit;text-decoration:none}
.fila:first-child{border-top:0}
.fila:hover .t{text-decoration:underline}
.fila .t{font-weight:500;overflow-wrap:anywhere}.fila .m,.m{color:var(--tenue);font-size:13px;overflow-wrap:anywhere}
.der{text-align:right}
.fecha{font:13px var(--f-dato);white-space:nowrap}
.franja{width:4px;align-self:stretch;border-radius:2px;background:var(--linea)}
.pill{display:inline-block;font-size:12px;font-weight:500;padding:2px 8px;border-radius:999px;background:var(--neutro-suave);color:var(--tenue)}
.e-vigente .franja{background:var(--ok)}.pill.e-vigente{background:var(--ok-suave);color:var(--ok)}
.e-proximo .franja,.e-gracia .franja,.e-vencido_nf .franja{background:var(--aviso)}.pill.e-proximo,.pill.e-gracia,.pill.e-vencido_nf{background:var(--aviso-suave);color:var(--aviso)}
.e-hoy .franja,.e-vencido_fatal .franja{background:var(--peligro)}.pill.e-hoy,.pill.e-vencido_fatal{background:var(--peligro-suave);color:var(--peligro)}
.pill.fatal{background:var(--peligro-suave);color:var(--lacre)}.pill.nf{background:var(--sello-suave);color:var(--sello)}
.vacio{color:var(--tenue);font-size:14px;padding:6px 0}
.nota{font-size:13px;color:var(--tenue);margin:4px 0}
.ficha{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px 18px;margin:0}
.ficha dt{font-size:12px;color:var(--tenue);text-transform:uppercase;letter-spacing:.06em}
.ficha dd{margin:0;overflow-wrap:anywhere}
.pestanas{display:flex;gap:4px;border-bottom:1px solid var(--linea);margin-bottom:12px;overflow-x:auto}
.pestanas a{padding:8px 12px;border-bottom:2px solid transparent;font-weight:500;font-size:14px;color:var(--tenue);text-decoration:none;white-space:nowrap}
.pestanas a[aria-current=page]{color:var(--sello);border-bottom-color:var(--sello)}
.tabla-c{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:14px}
th{text-align:left;font-weight:500;font-size:12px;color:var(--tenue);text-transform:uppercase;letter-spacing:.05em;padding:6px 8px;border-bottom:1px solid var(--linea)}
td{padding:8px;border-bottom:1px solid var(--linea);vertical-align:top}
.largo{overflow-wrap:anywhere}
.campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:12px}
.campo{display:flex;flex-direction:column;gap:4px;min-width:0}.campo.ancho{grid-column:1/-1}
label{font-size:13px;color:var(--tenue);font-weight:500}
.angosto label{display:block;margin:12px 0 4px}
input,select,textarea{font:15px var(--f-texto);padding:7px 9px;border:1px solid var(--linea);border-radius:var(--r);background:var(--papel);color:var(--tinta);width:100%;min-width:0}
textarea{min-height:64px;resize:vertical}
input[type=checkbox]{width:auto}
.chk{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--tinta)}
.acciones{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin-top:14px}
.botones{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}.botones.sep{margin:14px 0 0}
.buscador{display:flex;gap:8px;margin-bottom:8px}
.enlinea{display:inline-block;margin:0 2px}
.btn{display:inline-block;font:500 14px var(--f-texto);padding:7px 12px;border-radius:var(--r);border:1px solid var(--linea);background:var(--hoja);color:var(--tinta);cursor:pointer;text-decoration:none}
.btn.pri,.btn.pri2{background:var(--sello);border-color:var(--oro);color:var(--hoja)}
.angosto .btn.pri{margin-top:16px;width:100%;padding:9px}
.btn.peligro{color:var(--peligro)}
.btn.chico{padding:3px 9px;font-size:13px}
.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:2px solid var(--oro);outline-offset:2px}
a{color:inherit}
.calc{margin-top:12px;padding:10px 12px;border-radius:var(--r);background:var(--sello-suave);font-size:14px}
.calc p{margin:6px 0 0}
.historial{font-size:13px;color:var(--tenue);margin:8px 0 0;padding-left:18px}
.historial li{margin-bottom:4px}
.error{background:var(--peligro-suave);color:var(--peligro);padding:8px 10px;border-radius:var(--r);font-size:14px}
.aviso{background:var(--aviso-suave);color:var(--aviso);padding:8px 10px;border-radius:var(--r);font-size:14px}
.exito{background:var(--ok-suave);color:var(--ok);padding:8px 10px;border-radius:var(--r);font-size:14px}
.codigos{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:12px 0}
.pasos{padding-left:20px;font-size:14px}.pasos li{margin-bottom:8px}
.clave-2fa{font-size:15px;white-space:normal;overflow-wrap:anywhere}
.qr-caja{margin:10px 0;display:flex;justify-content:center}.qr{background:#fff;border-radius:4px;max-width:100%;height:auto}
/* agenda */
.agenda-g{display:grid;gap:14px;grid-template-columns:minmax(0,3fr) minmax(280px,1fr);align-items:start}
.mes-cab{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.mes-cab h2{margin:0;font-size:22px}
.mes{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.mes .dn{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--tenue);padding:4px 6px}
.dia{min-height:124px;background:var(--hoja);border:1px solid var(--linea);border-radius:6px;padding:7px;font-size:13px;color:inherit;text-decoration:none;display:flex;flex-direction:column;gap:4px;min-width:0}
.dia.inh{background:var(--neutro-suave)}.dia.fuera{opacity:.45}.dia.sel{outline:2px solid var(--sello)}
.dia .n{font:600 15px var(--f-dato)}.dia.hoyd .n{color:var(--hoja);background:var(--sello);border-radius:4px;padding:0 6px;align-self:flex-start}
.pt{display:block;border-radius:4px;padding:2px 6px;font-size:12px;line-height:1.35;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt.tipo-plazo{color:var(--hoja)}
.pt.punteado{color:var(--tinta)}
.mas{font-size:12px;color:var(--tenue)}
.agenda-g .fila{grid-template-columns:auto 1fr}
.agenda-g .fila>.der{grid-column:2;text-align:left}
.tipo-plazo{background:var(--sello)}.tipo-audiencia{background:#5b4a8a}.tipo-pericia{background:#a2543a}.tipo-comparendo{background:#3f5f86}.tipo-reunion{background:#2f6f6f}.tipo-tarea,.tipo-otro{background:#8a6d2a}
.pt.punteado{background:none!important;border:1px dashed var(--aviso)}
.leyenda{display:flex;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--tenue);margin-top:8px}
.leyenda span{display:inline-flex;align-items:center;gap:6px}.leyenda i{width:10px;height:10px;border-radius:3px;display:inline-block}
.leyenda i.inhabil{background:var(--neutro-suave);border:1px solid var(--linea)}
/* honorarios y estadísticas */
.chks{display:flex;flex-wrap:wrap;gap:6px 16px}
.etiqueta{font-size:13px;color:var(--tenue);font-weight:500}
.barra-reparto{display:block;width:100%;height:28px;border-radius:6px;margin:6px 0}
.tabla-barras th{text-transform:none;letter-spacing:0;font-size:14px;color:var(--tinta);font-weight:500;white-space:nowrap}
.tabla-barras td.fecha{text-align:right;width:1%}
.celda-barra{width:55%;min-width:120px}
.barra-fila{display:block;width:100%;height:10px;margin:2px 0}
.barra-fila .fondo{fill:var(--neutro-suave)}
.b1{fill:var(--sello)}.b2{fill:var(--oro)}
.calc h4{margin:0 0 8px}
.plegable{margin-top:12px}.plegable summary{cursor:pointer;font-weight:600;color:var(--sello);padding:6px 0}
.sin-confirmar .franja{background:none!important;border:1px dashed var(--aviso);width:6px}
tr.apagada{opacity:.5}tr.pasada{color:var(--tenue)}
main p.aviso a{font-weight:600}
@media (max-width:1180px){.agenda-g{grid-template-columns:minmax(0,1fr)}}
/* relieve al pasar el cursor; solo con mouse y si la persona no pidió reducir el movimiento */
.panel,.fila,.dia,.cont,.btn{transition:box-shadow .16s ease,transform .16s ease,border-color .16s ease,background-color .16s ease}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  section.panel:hover,div.panel:hover{box-shadow:0 8px 22px rgb(0 0 0 / .16);transform:translateY(-2px)}
  form.panel:hover{box-shadow:0 8px 22px rgb(0 0 0 / .14)}
  .calc:hover{box-shadow:0 4px 12px rgb(0 0 0 / .10)}
  a.fila:hover{background:var(--oro-suave);box-shadow:0 4px 12px rgb(0 0 0 / .14);transform:translateY(-1px);border-radius:var(--r);border-top-color:transparent}
  .dia:hover{box-shadow:0 8px 18px rgb(0 0 0 / .20);transform:translateY(-3px);border-color:var(--oro);position:relative;z-index:1}
  .cont:hover{box-shadow:0 3px 10px rgb(0 0 0 / .14);transform:translateY(-1px)}
  .btn:hover{box-shadow:0 3px 10px rgb(0 0 0 / .18);transform:translateY(-1px)}
}
@media (prefers-color-scheme:dark) and (hover:hover) and (prefers-reduced-motion:no-preference){
  section.panel:hover,div.panel:hover,form.panel:hover,.dia:hover{box-shadow:0 8px 22px rgb(0 0 0 / .6)}
}
@media (max-width:640px){.dia{min-height:58px;padding:4px}.dia .n{font-size:13px}.pt{font-size:0;height:6px;padding:0}.mas{font-size:10px}.mes{gap:2px}h1{font-size:22px}.fila{grid-template-columns:auto 1fr}.fila>.der{grid-column:2;text-align:left}.usuario{margin-left:0}}