/* Paleta alineada a la intranet oficial (intranet.palermo.com.ar), relevada el 10-08-2026.
   El detalle de donde sale cada valor esta en C:\IA-HIP\FlotHip-ESTETICA-Intranet.md.
   La intranet es CoreUI 2 con el primary cambiado al turquesa de HiP: plana, radios
   chicos, sin sombras y con bordes grises marcados. */
:root{
  /* marca Hipodromo Palermo */
  --brand:#00AAA8; --brand-dark:#008482; --brand-bg:rgba(0,170,168,0.12);
  --brand-logo:#00BBB4;   /* el turquesa de los SVG, NO usar en la interfaz */
  --ink:#23282C;
  /* superficies claras */
  --bg:#E4E5E6; --bg2:#ffffff; --bg3:#F0F3F5; --border:#C8CED3;
  --text:#23282C;
  /* --muted se oscurecio el 18-09 (auditoria de UI): #73818F rendia ~3.6:1-4:1 sobre
     los fondos claros de la app (bg2/bg3), por debajo del 4.5:1 que exige WCAG AA para
     texto normal. #54606B mantiene el mismo tono gris pero pasa AA con margen sobre
     bg, bg2 y bg3 (5.1:1 / 6.4:1 / 5.8:1). No cambia --brand ni ningun color de marca. */
  --muted:#54606B;
  /* estados (paleta CoreUI, la de la intranet) */
  --green:#4DBD74; --green-bg:rgba(77,189,116,0.12);
  --red:#F86C6B;   --red-bg:rgba(248,108,107,0.12);
  --amber:#FFC107; --amber-bg:rgba(255,193,7,0.14);
  --blue:#63C2DE;  --blue-bg:rgba(99,194,222,0.12);
  /* El rojo/verde/amarillo de arriba son los tonos "suaves" de CoreUI: sirven para fondos
     (chip/banner/resultado) pero como TEXTO sobre esos mismos fondos (o sobre blanco) no
     llegan a 4.5:1 AA (auditoria de UI, 18-09). Estos tres son las versiones "fuertes",
     pensadas para usarse como color de texto/borde en vez de --red/--green/--amber:
     confirmado por calculo de contraste WCAG, no a ojo. */
  --red-fuerte:#B3261E;    /* antes #D93025: pasaba sobre blanco (4.77:1) pero no sobre
                              --red-bg/rgba rojo 10% (4.1-4.2:1). Este pasa ambos (5.6-6.5:1) */
  --green-fuerte:#2E7D46;  /* ya se usaba suelto en .chip.verde/.banner.verde; ahora es
                              variable y se reutiliza tambien en .resultado.ok (4.6:1) */
  --amber-fuerte:#946200;  /* idem, ya usado en .chip.amarillo/.banner.amarillo; pasa
                              5.2:1 sobre blanco y 4.2:1 sobre --bg (--amber solo, 1.6:1) */
  --radio:4px;
  --mono:'Consolas','Courier New',monospace;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --display:var(--sans);  /* la intranet no usa una fuente display */
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:14px}
a{color:var(--brand-dark);text-decoration:none}

/* header blanco con logo (como el sitio real) */
header.top{display:flex;align-items:center;justify-content:space-between;padding:12px 22px;
  background:#fff;color:var(--ink);border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:10}
header.top .right{display:flex;gap:14px;align-items:center;color:var(--muted);flex-wrap:wrap}
header.top .right a{color:var(--ink);font-weight:600}
header.top .right a.act{color:var(--brand-dark);border-bottom:2px solid var(--brand)}
header.top .right .usr{font-size:12px}

/* Menu agrupado: <details> como desplegable, sin JavaScript */
.drop{position:relative}
.drop>summary{cursor:pointer;font-weight:600;color:var(--ink);list-style:none;
  display:flex;align-items:center;gap:4px;white-space:nowrap}
.drop>summary::-webkit-details-marker{display:none}
.drop>summary::after{content:'';border:4px solid transparent;border-top-color:var(--muted);
  margin-top:3px}
.drop[open]>summary{color:var(--brand-dark)}
.drop-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:190px;background:#fff;
  border:1px solid var(--border);border-radius:var(--radio);box-shadow:0 4px 12px rgba(35,40,44,.12);
  padding:6px;display:flex;flex-direction:column;z-index:30}
.drop-menu a{padding:8px 10px;border-radius:var(--radio);font-weight:500}
.drop-menu a:hover{background:var(--bg)}
/* El logo dejo de ser texto en Arial Black y pasa a ser el SVG oficial de la intranet
   (assets/marca/logo.svg), al mismo tamano que usa ella: 145x30. */
.brand{display:flex;align-items:center;gap:12px}
.brand .logo-img{height:30px;width:auto;display:block;flex:none}
.brand .name{margin:0;font-size:15px;font-weight:700;letter-spacing:1.5px;color:var(--muted)}

.wrap{max-width:1200px;margin:0 auto;padding:22px}
h2{font-family:var(--display);font-size:16px;text-transform:uppercase;letter-spacing:.5px;
  color:var(--ink);margin:26px 0 12px;border-left:4px solid var(--brand);padding-left:10px}

/* Seccion colapsable dentro de una pagina (distinta del .drop del menu, que es un
   desplegable flotante). Se usa cuando una seccion es secundaria y no hace falta verla
   siempre abierta: el <details> nativo evita JavaScript. */
.drop-seccion{margin:26px 0 12px}
.drop-seccion>summary{cursor:pointer;list-style:none;display:flex;align-items:center;
  gap:8px;flex-wrap:wrap}
.drop-seccion>summary::-webkit-details-marker{display:none}
.drop-seccion>summary::before{content:'▸';color:var(--muted);font-size:12px;flex:none}
.drop-seccion[open]>summary::before{content:'▾'}
.drop-seccion>summary h2{margin:0;border-left:none;padding-left:0}
.drop-seccion>*:not(summary){margin-top:12px}

.grid{display:grid;gap:12px}
.grid.cols{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radio);overflow:hidden}
.card .hd{padding:10px 14px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;
  align-items:center;background:var(--bg3);font-weight:700;color:var(--ink)}
/* Scroll horizontal en cualquier ancho: si la tabla no entra, antes se cortaba y se
   perdian las ultimas columnas (justo donde estan los botones de accion). */
.card .bd{padding:12px 14px;overflow-x:auto}
.card .bd .row{display:flex;justify-content:space-between;padding:3px 0;color:var(--muted)}
.card .bd .row b{color:var(--text);font-family:var(--mono)}

.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:700}
.chip.verde{background:var(--green-bg);color:var(--green-fuerte)}
.chip.rojo{background:rgba(179,38,30,0.10);color:var(--red-fuerte)}
.chip.amarillo{background:var(--amber-bg);color:var(--amber-fuerte)}
.chip.gris{background:#eceff3;color:var(--muted)}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.dot.verde{background:var(--green)} .dot.rojo{background:var(--red-fuerte)} .dot.amarillo{background:var(--amber)}

.btn{background:var(--bg2);color:var(--ink);border:1px solid var(--border);border-radius:var(--radio);
  padding:8px 14px;cursor:pointer;font-size:13px;font-family:var(--sans);font-weight:600}
.btn:hover{border-color:var(--brand)}
.btn.success{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.success:hover{background:var(--brand-dark);border-color:var(--brand-dark)}
.btn.danger{background:#fff;border-color:var(--red-fuerte);color:var(--red-fuerte)}
.btn.danger:hover{background:var(--red-bg)}
.btn.small{padding:4px 10px;font-size:12px}
/* Estado de carga (auditoria de UI, 18-09): ningun boton mostraba que una accion estaba en
   curso, lo que permitia el doble envio por doble click. botonCargando() en app.js agrega/
   quita aria-busy="true" y disabled; el spinner es solo CSS (usa currentColor, funciona
   igual en .btn, .btn.success y .btn.danger sin necesitar un color fijo) y respeta
   prefers-reduced-motion. */
.btn:disabled{opacity:.6;cursor:not-allowed}
.btn[aria-busy="true"]{position:relative;padding-left:30px;cursor:wait}
.btn[aria-busy="true"]::before{content:'';position:absolute;left:10px;top:50%;width:13px;height:13px;
  margin-top:-7px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;
  opacity:.65;animation:girar .6s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.btn[aria-busy="true"]::before{animation:none}}
input:disabled,select:disabled,textarea:disabled{opacity:.6;cursor:not-allowed;background:var(--bg3)}

form.frm{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radio);padding:16px;
  display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted);font-weight:600}
/* El atributo hidden es display:none del navegador, pero la regla de arriba le gana por
   especificidad y los campos que se ocultan por JS seguian a la vista. */
[hidden]{display:none !important}
input,select,textarea{background:#fff;color:var(--text);border:1px solid var(--border);
  border-radius:var(--radio);padding:8px;font-family:var(--sans);font-size:13px}
/* Foco (auditoria de UI, 18-09): antes solo input/select tenian anillo de foco (con :focus,
   que tambien se dispara con el mouse) y textarea quedaba afuera. Se pasa todo a
   :focus-visible (solo teclado/lector, no molesta con el mouse) y se agrega un anillo
   generico para el resto de los interactivos (botones, links, tabs, summary, encabezados
   ordenables) que antes dependian solo del outline por defecto del navegador. */
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-bg)}
a:focus-visible,button:focus-visible,.btn:focus-visible,.tab:focus-visible,summary:focus-visible,
th[tabindex]:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--brand);outline-offset:2px;
  border-radius:var(--radio)}
/* El header queda fijo arriba (position:sticky): sin esto, al llegar por teclado a un campo
   tapado por el header, el navegador lo deja justo debajo del borde y no se ve el foco. */
html{scroll-padding-top:64px}
.frm .full{grid-column:1/-1}
/* Checkbox en linea dentro de un form .frm (el label por defecto es columna). */
label.chk{flex-direction:row;align-items:center;gap:6px;font-weight:400}
label.chk input{width:auto;margin:0}

.resultado{margin-top:10px;padding:8px 12px;border-radius:var(--radio);font-family:var(--mono);font-size:12px;display:none}
.resultado.show{display:block}
.resultado.ok{background:var(--green-bg);color:var(--green-fuerte);border:1px solid var(--green)}
.resultado.err{background:var(--red-bg);color:var(--red-fuerte);border:1px solid var(--red)}
.resultado.neutral{background:var(--bg3);color:var(--muted);border:1px solid var(--border)}

table{width:100%;border-collapse:collapse;font-size:13px;background:var(--bg2)}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--border)}
th{color:var(--muted);text-transform:uppercase;font-size:11px;letter-spacing:.5px;background:var(--bg3)}

/* Columna de acciones fija a la derecha. La ultima columna es la de los botones
   (Editar / X / Cerrar) y cuando la tabla es mas ancha que la pantalla era justo lo
   primero que se perdia: el usuario no encontraba como corregir ni borrar.
   Sin desborde horizontal, sticky no tiene ningun efecto visible. */
.acciones-fijas td:last-child, .acciones-fijas th:last-child{
  position:sticky;right:0;background:var(--bg2);
  box-shadow:-6px 0 6px -5px rgba(16,24,40,.18)}
.acciones-fijas th:last-child{background:var(--bg3)}

/* Modo corregir: un boton de borrar en cada fila invita al borrado. Los botones
   destructivos quedan ocultos hasta que el usuario entra a corregir a proposito.
   Se ocultan los botones y no la columna, porque ahi conviven acciones que si son
   de uso diario ("Cerrar" una salida, "Aprobar" un acceso). */
table:not(.corregir) tbody .btn.danger{display:none}
.barra-corregir{display:flex;align-items:center;gap:10px;padding:8px 14px;
  border-bottom:1px solid var(--border)}
.aviso-corregir{color:var(--amber-fuerte);font-size:12px;font-weight:600}
td.mono{font-family:var(--mono)}

/* Adjuntos (foto del registro, VTV/seguro, presupuestos). El desplegable muestra la
   imagen sin sacar al usuario de la pantalla: hasta que no se abre, el <img> con
   loading="lazy" ni siquiera se descarga. El alto maximo evita que una foto sacada con
   el celular (que viene enorme) empuje media pagina hacia abajo al abrirla. */
details.adj{display:inline-block;vertical-align:top}
details.adj > summary{cursor:pointer;color:var(--brand-dark);font-weight:600;
  list-style:none;white-space:nowrap}
details.adj > summary::-webkit-details-marker{display:none}
/* El espacio va como \00a0: un espacio comun al final de content: se colapsa y la flecha
   queda pegada al texto. */
details.adj > summary::before{content:'\25B8\00a0'}
details.adj[open] > summary::before{content:'\25BE\00a0'}

/* Con el desplegable abierto la fila se estira: sin esto, las otras celdas quedan
   centradas verticalmente y el dato principal (VTV, la fecha) se despega del renglon.
   Si el navegador no soporta :has(), simplemente queda el centrado de antes. */
tr:has(details.adj[open]) td{vertical-align:top}
.adj-prev{margin:6px 0;padding:6px;background:var(--bg3);
  border:1px solid var(--border);border-radius:var(--radio);
  max-width:420px;overflow:auto}
.adj-prev img{display:block;max-width:100%;max-height:340px;
  border-radius:var(--radio);background:var(--bg2)}
.adj-links{font-size:12px}

/* El banner era flex: cada <b> o <span> de adentro se volvia un item y el texto se partia
   en columnas en vez de fluir como parrafo. Con display:block el contenido se lee corrido
   y el punto de color queda alineado como una viñeta. */
.banner{padding:12px 16px;border-radius:var(--radio);margin-bottom:10px;font-weight:700;line-height:1.45}
.banner .dot{margin-right:8px;vertical-align:middle;position:relative;top:-1px}
.banner.rojo{background:rgba(179,38,30,0.10);color:var(--red-fuerte);border:1px solid var(--red-fuerte)}
.banner.amarillo{background:var(--amber-bg);color:var(--amber-fuerte);border:1px solid var(--amber)}
.banner.verde{background:var(--green-bg);color:var(--green-fuerte);border:1px solid var(--green)}

.tabs{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.tab{padding:8px 16px;border:1px solid var(--border);border-radius:var(--radio);cursor:pointer;color:var(--muted);
  background:var(--bg2);font-weight:600}
.tab.active{color:#fff;border-color:var(--brand);background:var(--brand)}
.pane{display:none} .pane.active{display:block}

#toast{position:fixed;right:20px;bottom:20px;display:flex;flex-direction:column;gap:8px;z-index:100}
.toast{padding:10px 16px;border-radius:var(--radio);background:#fff;border:1px solid var(--border);color:var(--ink);
  box-shadow:0 4px 12px rgba(35,40,44,.15);animation:slide .2s ease;font-weight:600}
.toast.ok{border-left:4px solid var(--brand)} .toast.err{border-left:4px solid var(--red)}
@keyframes slide{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}

.login-box{max-width:360px;margin:12vh auto;background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radio);padding:30px;box-shadow:0 4px 12px rgba(35,40,44,.10);border-top:3px solid var(--brand)}
/* En las pantallas sueltas (login, bloqueado, pendiente) va el sygnet: la version
   vertical del logo, que incluye "HIPODROMO PALERMO" debajo del monograma. */
/* El encabezado va centrado (logo, nombre y bajada); los campos siguen alineados a la
   izquierda, que es como se leen bien los formularios. */
.login-box .logo-img{width:110px;height:auto;display:block;margin:0 auto 14px}
.login-box h1{font-size:20px;font-weight:700;margin:8px 0 4px;color:var(--ink);letter-spacing:1px;
  text-align:center}
.login-box p{color:var(--muted);margin:0 0 20px;font-size:13px;text-align:center}
.login-box label{margin-bottom:12px} .login-box .btn{width:100%;justify-content:center;padding:10px}

/* responsive - celular */
@media (max-width:640px){
  header.top{flex-wrap:wrap;gap:8px;padding:10px 14px}
  header.top .right{flex-wrap:wrap;gap:10px;font-size:12px}
  /* en el celular el desplegable se abre en el flujo, no flotando */
  .drop{position:static}
  .drop-menu{position:static;min-width:0;width:100%;box-shadow:none;margin-top:6px}
  .brand .logo-img{height:24px} .brand .name{font-size:12px}
  .wrap{padding:14px}
  h2{font-size:15px;margin:20px 0 10px}
  form.frm{grid-template-columns:1fr}
  .grid.cols{grid-template-columns:1fr 1fr}
  .card .bd{overflow-x:auto}
  table{min-width:520px}
  .tabs{overflow-x:auto;flex-wrap:nowrap}
  .tab{white-space:nowrap}
}

/* Semaforo de etapas del proceso de un siniestro */
.sn-etapas{margin-top:2px}
.etapas{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.etapa{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;
  font-size:11px;font-weight:600;border:1px solid var(--border);background:var(--bg2);color:var(--muted)}
.etapa b{display:inline-flex;width:16px;height:16px;border-radius:50%;align-items:center;
  justify-content:center;font-size:10px;background:var(--border);color:#fff}
.etapa.hecha{border-color:var(--green);color:var(--green-fuerte)}
.etapa.hecha b{background:var(--green)}
.etapa.actual{border-color:var(--brand);background:var(--brand-bg);color:var(--brand-dark)}
.etapa.actual b{background:var(--brand)}
.etapa-sep{flex:0 0 12px;height:2px;background:var(--border)}

/* impresion en hoja A4 */
#print-area{display:none}
@media print{
  @page{size:A4;margin:9mm}
  *{-webkit-print-color-adjust:exact !important;color-adjust:exact !important}
  body > *:not(#print-area){display:none !important}
  #print-area{display:block !important;color:#000 !important;background:#fff !important;
    font-family:var(--sans);font-size:11pt;line-height:1.4;width:100%}
  #print-area h1{font-family:var(--display);font-size:18pt;margin:0 0 2mm;color:var(--brand-dark) !important}
  /* Encabezados de seccion del informe ejecutivo (Comparacion / Gastos / Siniestros). */
  #print-area h2{font-family:var(--display);font-size:12.5pt;margin:6mm 0 1mm;
    color:var(--brand-dark) !important;break-after:avoid}
  #print-area .meta{font-size:10pt;color:#333;margin-bottom:5mm}
  #print-area table{width:100%;border-collapse:collapse;margin-top:3mm}
  #print-area th,#print-area td{border:1px solid #888;padding:4px 7px;text-align:left;font-size:10pt}
  #print-area th{background:#cdeee9 !important}
  /* Informe largo: la cabecera de cada tabla se repite en cada pagina y las filas no se
     parten al medio. Asi una declaracion de muchos items sigue siendo legible impresa. */
  #print-area thead{display:table-header-group}
  #print-area tr{break-inside:avoid}

  /* Formulario oficial de siniestro (PDF por caso, todo en UNA hoja A4 para firmar). */
  .sn-doc{color:#000 !important;font-size:9pt;line-height:1.2}
  .sn-doc *{line-height:1.2}
  .sn-head{display:flex;align-items:center;gap:5mm;margin-bottom:1.5mm;
    border-bottom:1.5pt solid var(--brand-dark);padding-bottom:1.5mm}
  .sn-logo{height:12mm;width:auto;flex:0 0 auto}
  .sn-htext{text-align:left}
  .sn-title{font-size:11pt;font-weight:700;text-transform:uppercase;color:var(--brand-dark) !important}
  .sn-dep{font-size:8.5pt;color:#333;margin-top:.6mm}
  /* Encabezado escribible (caso / fecha / hora / sector), util cuando se imprime en blanco. */
  .sn-caso{display:flex;flex-wrap:wrap;gap:1.5mm 8mm;font-size:8.5pt;margin:1.5mm 0 0}
  .sn-w{display:inline-block;border-bottom:1px solid #000;min-width:20mm;min-height:4mm;
    padding:0 2px;line-height:4.5mm;vertical-align:bottom}
  .sn-sec{background:#cdeee9 !important;font-weight:700;font-size:8.5pt;padding:1.5px 6px;
    margin:1.2mm 0 0;border:1px solid #888;text-transform:uppercase;break-after:avoid}
  .sn-grid{display:grid;grid-template-columns:1fr 1fr;break-inside:avoid}
  .sn-grid.c3{grid-template-columns:1fr 1fr 1fr}
  .sn-grid.c4{grid-template-columns:1fr 1fr 1fr 1fr}
  .sn-cell{border:1px solid #888;border-top:0;padding:1.5px 6px;min-height:6.5mm}
  .sn-cell.full{grid-column:1/-1}
  .sn-cell .k{font-size:7pt;color:#333;text-transform:uppercase;letter-spacing:.2px}
  .sn-cell .v{font-size:9.5pt;min-height:4.5mm}
  /* Hecho denunciado: area sombreada con renglones guia para escribir a mano (al menos 4). */
  .sn-box{border:1px solid #888;border-top:0;padding:0 6px;min-height:25mm;break-inside:avoid;
    font-size:9.5pt;background-color:#eef4f4 !important;
    background-image:repeating-linear-gradient(transparent,transparent 5.9mm,#9bb9b7 5.9mm,#9bb9b7 6mm);
    background-position:0 3mm;background-repeat:repeat-y}
  .sn-cap{font-size:8pt;color:#000}
  .sn-check-row{display:flex;gap:8mm;flex-wrap:wrap;font-size:9.5pt;padding:2mm 0;break-inside:avoid}
  .sn-chk{display:inline-block;width:3.6mm;height:3.6mm;border:1px solid #000;margin-right:1.5mm;
    vertical-align:middle;text-align:center;line-height:3.4mm;font-size:9pt;font-weight:700}
  /* Bloque de firmas al pie, agrupadas para no gastar alto en cada seccion. */
  .sn-firmas4{display:grid;grid-template-columns:repeat(3,1fr);gap:10mm;margin-top:8mm;
    text-align:center;break-inside:avoid}
  .sn-firmas4:last-child{grid-template-columns:repeat(2,1fr);margin-top:9mm}
  .sn-firmas4 .sn-line{margin:0 auto 1mm;border-top:1px solid #000;width:90%}
}

/* Etiqueta "(opcional)" en los formularios */
.opc{color:var(--muted);font-weight:400;font-size:.8em}

/* Galeria de imagenes de un siniestro (26-ago). Miniaturas en grilla que se adaptan al
   ancho: en el celular entran de a una o dos sin desbordar el formulario. La imagen se
   recorta con object-fit para que la grilla quede pareja aunque las fotos vengan en
   orientaciones distintas (que es lo normal si las saca el personal con el telefono). */
.sn-galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.sn-img{margin:0;background:var(--bg3);border:1px solid var(--border);
  border-radius:var(--radio);overflow:hidden}
.sn-img img{display:block;width:100%;height:110px;object-fit:cover;background:var(--bg2)}
.sn-img figcaption{display:flex;justify-content:space-between;align-items:center;gap:6px;
  padding:4px 6px;font-size:11px;line-height:1.3}
.sn-img figcaption span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Un PDF del legajo no se embebe (mismo criterio que bloqueAdjunto): la tarjeta muestra el
   link en lugar de la miniatura, con la misma altura para que la grilla no quede despareja. */
.sn-img.sn-pdf > a{display:flex;align-items:center;justify-content:center;height:110px;
  background:var(--bg2);font-weight:600;color:var(--brand-dark)}

/* Ficha de un caso desplegada bajo su fila del listado (26-ago). La celda ocupa todo el
   ancho de la tabla, asi que la ficha se maqueta como bloques con una grilla que se
   adapta: en el celular queda una columna sin desbordar la tabla. */
tr.sn-detalle > td{background:var(--bg3);padding:0}
.sn-ficha{padding:12px 14px}
.sn-bloque{margin-bottom:12px}
.sn-bloque:last-child{margin-bottom:0}
.sn-bloque h4{margin:0 0 6px;font-size:11px;text-transform:uppercase;letter-spacing:.4px;
  color:var(--muted);border-bottom:1px solid var(--border);padding-bottom:3px}
.sn-datos{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:6px 14px}
.sn-d{display:flex;flex-direction:column;font-size:12px;line-height:1.35}
.sn-d .k{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.3px}
.sn-d .v{word-break:break-word}
.sn-d .v.vacio{color:var(--muted)}
.sn-texto{font-size:12px;line-height:1.45;white-space:pre-wrap;word-break:break-word}
.sn-nada{color:var(--muted);font-size:12px}
.sn-viejo{font-size:12px;margin-bottom:6px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}