/* Manual de identidad HIP v2.1: tipografía alternativa oficial para web (Lektorat no tiene licencia web).
   Libre Franklin = texto, Oswald = títulos. Alojadas en la app (CSP font-src 'self'), licencia OFL en fonts/. */
@font-face{font-family:'Libre Franklin';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/libre-franklin-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Libre Franklin';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/libre-franklin-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Libre Franklin';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/libre-franklin-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Oswald';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/oswald-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Oswald';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/oswald-latin-600-normal.woff2) format('woff2')}

/* StudHip — hoja de estilos unica. Portada tal cual de FlotHip: es la identidad del
   Hipodromo, no una decision de cada app. NO tocar los tokens de :root.

   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 Hipódromo Palermo */
  --brand:#00AAA8; --brand-dark:#008578; --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:#73818F;
  /* estados (paleta CoreUI, la de la intranet) */
  --green:#00B388; --green-bg:rgba(0,179,136,0.12);
  --red:#F8485E;   --red-bg:rgba(248,72,94,0.12);
  --amber:#FFB500; --amber-bg:rgba(255,181,0,0.14);
  --blue:#2A7DE1;  --blue-bg:rgba(42,125,225,0.12);
  /* El rojo de CoreUI es notablemente mas suave que el anterior (#dc2626). Para la
     alerta de documentacion vencida, que es la mas critica de la app, se conserva un
     rojo fuerte aparte: ahi el contraste importa mas que la coherencia estetica. */
  --red-fuerte:#B52555;
  /* Variantes de lectura (18/09/2026, auditoria web-design-guidelines): --muted/--amber/--blue
     de arriba estan pensados para fondos suaves, puntos y bordes -- sobre blanco no llegan al
     4.5:1 que pide texto normal (--muted da 3.99:1, --amber da 1.63:1, --blue da 2.04:1). NO
     se tocan esos tokens (paleta compartida con el resto del ecosistema, ver comentario de
     arriba de :root) -- estas son variables NUEVAS, para usar en texto de verdad en vez de
     --muted/--amber/--blue. --green-text/--amber-text/--blue-text son los mismos valores que
     ya se usaban sueltos en chips/banners (#007B4B/#6D3332/#004C97), ahora con nombre.
     Todas verificadas >=4.5:1 sobre blanco, --bg2, --bg3 y --bg. */
  --muted-text:#57646E; --green-text:#007B4B; --amber-text:#6D3332; --blue-text:#004C97;
  --radio:4px;
  --mono:'Consolas','Courier New',monospace;
  --sans:'Libre Franklin',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --display:'Oswald','Arial Narrow',var(--sans);  /* la intranet no usa una fuente display */

  /* Manual v2.1: texto de estado accesible (AA sobre blanco) y títulos */
  --red-text:#B52555;
}
*{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-text);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;
  display:flex;align-items:center;justify-content:space-between;gap:8px}
@media (hover:hover){.drop-menu a:hover{background:var(--bg)}}
/* Badge de pendientes en el menu Admin (23/09/2026). Ambar nomas, no rojo/verde: ni
   Notificaciones ni Alertas de datos en 0 son "todo mal" en si mismas (ver los banners del
   tablero, que ya escalan a rojo cuando corresponde) -- el numero alcanza para saber que hay
   algo esperando, no hace falta duplicar esa semantica de color aca. */
.badge-nav{background:var(--amber);color:#5c4400;font-size:11px;font-weight:700;
  border-radius:10px;padding:1px 7px;line-height:1.5;flex:none}
/* Separador visual (no navegable) dentro del menu Admin (23/09/2026, agrupado en Datos/
   Avisos/Sistema -- ver el comentario largo en _layout.php). */
.drop-grupo{display:block;padding:8px 10px 2px;font-size:10px;font-weight:700;
  letter-spacing:.5px;text-transform:uppercase;color:var(--muted-text)}
.drop-grupo:not(:first-child){margin-top:4px;padding-top:8px;border-top:1px solid var(--border)}

/* Buscador global del header (23/09/2026) -- ver el comentario largo en _layout.php y el
   bloque de JS en app.js. flex:1 para que ocupe el espacio libre entre el logo y el menu,
   sin pisar el ancho fijo de ninguno de los dos. */
.buscador{position:relative;flex:1;max-width:280px;margin:0 18px}
.buscador input{width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:var(--radio);
  font-size:13px;background:var(--bg3);color:var(--ink)}
.buscador input:focus{outline:2px solid var(--brand);outline-offset:1px}
.buscador-resultados{position:absolute;left:0;right:0;top:calc(100% + 6px);background:#fff;
  border:1px solid var(--border);border-radius:var(--radio);box-shadow:0 4px 12px rgba(35,40,44,.12);
  max-height:360px;overflow-y:auto;z-index:50}
.buscador-resultados a{display:flex;flex-direction:column;gap:2px;padding:8px 12px;
  border-bottom:1px solid var(--border);color:var(--ink)}
.buscador-resultados a:last-child{border-bottom:none}
@media (hover:hover){.buscador-resultados a:hover{background:var(--bg)}}
.buscador-resultados .muted{color:var(--muted-text);font-size:12px}
.buscador-vacio{padding:10px 12px;color:var(--muted-text);font-size:13px}

/* Subnav "revisar" (23/09/2026) -- cruza Discrepancias/Reorganizar/Alertas de datos en 0 sin
   fusionarlas (ver el comentario largo en discrepancias.php). Reusa .act, el mismo nombre de
   clase que ya pone $act() en el menu de arriba, pero con look de pastilla en vez de subrayado
   -- mismo criterio visual que .tab/.tab.active (filtros dentro de una pagina), asi no se
   inventa un tercer estilo de "seleccionado" en la misma app. */
.subnav{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
.subnav a{padding:8px 16px;border:1px solid var(--border);border-radius:var(--radio);
  color:var(--muted-text);font-weight:600;background:var(--bg2)}
@media (hover:hover){.subnav a:hover{background:var(--bg)}}
.subnav a.act{color:#fff;border-color:var(--brand-dark);background:var(--brand-dark)}

/* Alertas de datos en 0 (23/09/2026, mejora pedida por Facu): que una escalada salte a la vista
   sin tener que leer la columna Estado fila por fila -- mismo tono que .banner amarillo/verde ya
   usan en el resto de la app, aca aplicado como fondo de fila en vez de banner aparte. */
.fila-alerta-escalada{background:rgba(248,72,94,0.08)}
.fila-alerta-confirmada{background:rgba(0,0,0,0.03)}

/* Menu movil / hamburguesa (23/09/2026, ver el comentario largo en _layout.php). A escritorio
   el summary queda oculto y .nav-links (la <nav class="right"> de siempre) se ve igual que
   siempre -- estas dos reglas valen para CUALQUIER ancho, las que cambian el comportamiento
   estan en el @media de mas abajo. */
.mobile-nav{position:static}
.mobile-nav>summary{display:none}
/* 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 paso de div a <a href> (23/09/2026, pedido de Facu: "al apretar el logo que mande a
   Inicio") -- text-decoration:none y color:inherit para que siga viendose igual que antes, sin el
   subrayado/azul tipico de link. */
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.brand .logo-img{height:30px;width:auto;display:block;flex:none}
.brand .name{font-size:15px;font-weight:700;letter-spacing:1.5px;color:var(--muted-text)}

.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:'';display:inline-block;width:12px;height:12px;flex:none;background:var(--muted);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='currentColor'%3E%3Cpath d='M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='currentColor'%3E%3Cpath d='M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z'/%3E%3C/svg%3E") center/contain no-repeat}
.drop-seccion[open]>summary::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='currentColor'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='currentColor'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E")}
.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}
/* KPI clickeable (23/09/2026, pedido de Facu): mismo look que .card, pero como <a> -- solo
   se usa cuando kpi() recibe href (ver app.js). Sin esto un <a class="card"> hereda el color
   de link del navegador y subraya el numero, arruinando el look de tarjeta. */
.kpi-link{display:block;color:inherit;text-decoration:none;transition:box-shadow .15s}
@media (hover:hover){.kpi-link:hover{box-shadow:0 2px 8px rgba(35,40,44,.12)}}
.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-text)}
.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-text)}
.chip.rojo{background:rgba(217,48,37,0.10);color:var(--red-fuerte)}
.chip.amarillo{background:var(--amber-bg);color:var(--amber-text)}
.chip.gris{background:#eceff3;color:var(--muted-text)}
.chip.azul{background:var(--blue-bg);color:var(--blue-text)}
.lnk{color:var(--brand-dark);cursor:pointer;text-decoration:none;border-bottom:1px dotted var(--brand)}
@media (hover:hover){.lnk:hover{color:var(--brand);border-bottom-style:solid}}
.lnk.abierto{font-weight:700}
.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}
@media (hover:hover){.btn:hover{border-color:var(--brand)}}
/* blanco sobre --brand daba 2.87:1 (auditoria 18/09/2026, falla incluso el 3:1 de texto
   grande) -- --brand-dark con blanco encima si llega a 4.54:1. No se toca --brand (identidad
   de marca), se usa el token oscuro que ya existia para el hover; el hover ahora se resuelve
   con brightness() en vez de otro color, para no tener que inventar un tercer tono. */
.btn.success{background:var(--brand-dark);border-color:var(--brand-dark);color:#fff}
@media (hover:hover){.btn.success:hover{filter:brightness(1.12)}}
.btn.danger{background:#fff;border-color:var(--red);color:var(--red-text)}
@media (hover:hover){.btn.danger:hover{background:var(--red-bg)}}
.btn.small{padding:4px 10px;font-size:12px}
.btn.big{padding:12px 22px;font-size:15px}

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-text);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}
/* faltaba textarea (18/09/2026, auditoria) -- el unico caso hoy es #r_json en Reuniones,
   pero quedaba sin ningun indicio de foco de teclado, ni siquiera el del navegador. */
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-bg)}
.frm .full{grid-column:1/-1}

/* Foco visible para todo lo demas que se puede accionar y no tenia ningun anillo propio
   (18/09/2026, auditoria): botones, links, tabs, los <summary> de los desplegables nativos y
   los encabezados de tabla ordenables (ahora enfocables, ver marcarOrdenables() en app.js).
   :focus-visible en vez de :focus para no dibujar el anillo en un click de mouse, solo con
   teclado -- mismo criterio que ya usaba el anillo de los inputs de arriba. */
.btn:focus-visible, a:focus-visible, .tab:focus-visible, summary:focus-visible,
thead th[data-ordenable]:focus-visible, .ayuda:focus-visible {
  outline:2px solid var(--brand-dark); outline-offset:2px;
}

/* Skip link (18/09/2026, auditoria): unico salto de teclado del header a Salir/Admin son
   4-6 tabs en cada pagina antes de llegar al contenido. Oculto hasta que recibe foco. */
.skip-link{position:absolute;left:-9999px;top:0;background:#fff;color:var(--ink);
  padding:10px 16px;border-radius:var(--radio);z-index:200;border:2px solid var(--brand-dark);
  font-weight:600}
.skip-link:focus{left:12px;top:12px}

.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-text);border:1px solid var(--green)}
.resultado.err{background:var(--red-bg);color:var(--red-text);border:1px solid var(--red)}
.resultado.neutral{background:var(--bg3);color:var(--muted-text);border:1px solid var(--border)}
/* Import que matcheo todo lo que traia pero igual vino incompleto -- carreras enteras ausentes
   del CSV (23/09/2026, ver cobertura_sistema_hipico() en core/db.php). Ambar, no rojo: no es un
   error de la subida en si (0 sin match), es un aviso para que Facu revise el archivo origen. */
.resultado.warn{background:var(--amber-bg);color:var(--amber-text);border:1px solid var(--amber)}

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);text-transform:uppercase;font-size:11px;letter-spacing:.5px;background:var(--bg3)}

/* Codigo entre parentesis resaltado (Discrepancias, Discrepancias repetidas, Equivalencias
   cargadas) -- ver conCodigoResaltado() en app.js, 18/09/2026. */
.codigo-resaltado{background:var(--brand-bg);color:var(--brand-dark);padding:0 4px;border-radius:3px;font-weight:700}

/* Color de fila por estado de revision (discrepancias, y cualquier otra tabla que use el mismo
   patron data-estado): de un vistazo se distingue lo abierto (sin marcar, fondo normal) de lo
   que ya se reviso, sin tener que leer la columna Estado. */
tr[data-estado="observada"]{background:var(--amber-bg)}
tr[data-estado="descartada"]{background:var(--bg3)}
tr[data-estado="resuelta_auto"]{background:var(--bg3)}
tr[data-estado="corregida"]{background:var(--green-bg)}
tr[data-estado="revisada"]{background:var(--green-bg)}

/* Mismo patron (10/09/2026) para la tabla de "Reuniones recientes" del Tablero: de un
   vistazo se distingue que dia tiene las dos fuentes cargadas (listo para revisar) de uno
   que todavia le falta una — sin tener que leer las columnas Studbook/Sistema Hipico. */
tr[data-cobertura="completa"]{background:var(--green-bg)}
tr[data-cobertura="parcial"]{background:var(--amber-bg)}
/* Fila de "hoy" en Reuniones cargadas (23/09/2026, mejora pedida por Facu) -- un borde a la
   izquierda en vez de otro color de fondo, para no pisar el verde/amarillo de cobertura de
   arriba: las dos señales se leen juntas sin competir. */
tr[data-hoy]{box-shadow:inset 3px 0 0 var(--brand)}

/* 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-text);font-size:12px;font-weight:600}
td.mono{font-family:var(--mono)}

/* 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(217,48,37,0.10);color:var(--red-fuerte);border:1px solid var(--red-fuerte)}
.banner.amarillo{background:var(--amber-bg);color:var(--amber-text);border:1px solid var(--amber)}
.banner.verde{background:var(--green-bg);color:var(--green-text);border:1px solid var(--green)}
.banner.azul{background:var(--blue-bg);color:var(--blue-text);border:1px solid var(--blue)}
.dot.azul{background:var(--blue)}
/* Asterisco de ayuda: la explicacion vive en el title (tooltip nativo), no a la vista. */
.ayuda{display:inline-block;color:var(--blue-text);cursor:help;font-weight:700;font-size:13px;
  vertical-align:super;line-height:1;margin-left:2px;user-select:none}

/* Badge "cadena ×N" en Discrepancias (22/09/2026): agrupa visualmente varias filas de puesto que
   son la misma causa, sin cerrarlas -- mismo patron de tooltip nativo que .ayuda, con su propio
   color (amarillo/atencion) para distinguirlo del asterisco de historial. */
.cadena{display:inline-block;background:var(--amber-bg);color:var(--amber-text);border:1px solid var(--amber);
  border-radius:10px;padding:1px 7px;font-size:11px;font-weight:700;cursor:help;margin-left:4px;
  vertical-align:middle;user-select:none}

.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-text);
  background:var(--bg2);font-weight:600}
.tab.active{color:#fff;border-color:var(--brand-dark);background:var(--brand-dark)}
.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)}
/* App interna: en el encabezado y en las pantallas sueltas (login, bloqueado) va solo el
   isotipo C (HIP), sin "Hipodromo Palermo" (decision de Facu 04/11/2026; Manual: la contraccion
   C es para uso interno). */
/* 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-text);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}
/* "Mantener sesion iniciada" (24/09/2026, pedido de Facu): checkbox + texto en linea, no el
   layout de <label> con el input arriba que usan los otros campos del login. */
.login-box label.chk{display:flex;align-items:center;gap:8px;margin:-4px 0 16px;font-size:13px;
  font-weight:400;color:var(--muted-text)}
.login-box label.chk input{width:auto}

/* 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}
  /* Buscador: se estira debajo del logo/hamburguesa en vez de competir por ancho con ellos
     (23/09/2026, ver .buscador arriba y el header en _layout.php). */
  .buscador{max-width:none;flex-basis:100%;order:3;margin:8px 0 0}
  /* Hamburguesa (23/09/2026, ver el comentario largo de .mobile-nav en _layout.php): a partir
     de aca el summary "Menu" se muestra y .nav-links pasa a comportarse como el contenido de
     cualquier <details> -- oculto cerrado, panel flotante fijo abierto. Antes de este cambio
     header.top .right envolvia en varias lineas apretadas; ahora queda oculto del todo hasta
     que se toca "Menu". */
  .mobile-nav>summary{display:flex;align-items:center;gap:6px;cursor:pointer;font-weight:600;
    color:var(--ink);list-style:none;padding:6px 8px;white-space:nowrap}
  .mobile-nav>summary::-webkit-details-marker{display:none}
  .mobile-nav:not([open]) .nav-links{display:none}
  .mobile-nav[open] .nav-links{display:flex;flex-direction:column;align-items:stretch;
    position:fixed;left:0;right:0;top:52px;background:#fff;border-bottom:1px solid var(--border);
    padding:10px 14px;box-shadow:0 4px 12px rgba(35,40,44,.12);z-index:40;gap:2px;
    max-height:calc(100vh - 52px);overflow-y:auto}
  .mobile-nav[open] .nav-links a{padding:10px 6px}
  .mobile-nav .drop-menu{position:static;box-shadow:none;width:100%;margin-top:4px}
  .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}
}

/* impresion en hoja A4 */
#print-area{display:none}
@media print{
  @page{size:A4;margin:14mm}
  *{-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}
  #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}
}

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

/* Celda que difiere entre Studbook y Sistema Hipico en el detalle de Reunion (14/09/2026,
   pedido de Facu): que se note en colores al momento de mirar la carrera, sin tener que ir a
   Discrepancias. Mismo rojo que el resto de "esto esta mal" en la app (--red-fuerte).
   21/09/2026 (pedido de Facu, "algo mas simplificado, no redundante"): un solo casillero por
   campo, no dos -- si coincide se ve el valor una vez sin remarcar, si difiere se ve en rojo Y
   se puede clickear (ver td.dif-click / burbuja-diff mas abajo, y resaltarDiff() en app.js). */
td.dif{background:rgba(217,48,37,0.10);color:var(--red-fuerte);font-weight:700}
td.dif-click{cursor:pointer}
@media (hover:hover){td.dif-click:hover{background:rgba(217,48,37,0.18)}}
td.dif-click:focus-visible{outline:2px solid var(--red-fuerte);outline-offset:-2px}

/* Fila de un competidor que solo esta cargado de un lado (discrepancia nivel 1 "cobertura",
   22/09/2026, bug reportado por Facu: el contador de la reunion/Discrepancias las contaba pero
   esta pantalla no las mostraba). Tinte de fondo mas suave que td.dif (toda la fila, no una sola
   celda) para no competir visualmente con las celdas en rojo que si difieren campo a campo; el
   aviso en si va en negrita roja en la columna Fuentes (ver reunion_detalle.js). */
tr.fila-cobertura{background:rgba(217,48,37,0.06)}
tr.fila-cobertura td:last-child{color:var(--red-fuerte);font-weight:700}

/* Parte del texto que cambio entre Studbook y Sistema Hipico, resaltada caracter a caracter
   (21/09/2026, pedido de Facu: "marcando en color el caracter o los caracteres que difieren") --
   usada tanto en la burbuja de Reunion/Carrera como directo en las columnas de Discrepancias
   (ver resaltarDiff() en app.js). */
mark.dif-car{background:rgba(217,48,37,0.32);color:inherit;border-radius:2px;padding:0 1px}

/* Burbuja que muestra, al clickear un casillero en rojo, el valor de cada fuente con la parte
   que cambio resaltada -- reemplaza tener las dos columnas (SB)/(SH) siempre abiertas ocupando
   lugar aunque coincidan casi siempre (21/09/2026, pedido de Facu). position:absolute porque se
   posiciona con getBoundingClientRect() + scrollY, ver mostrarBurbujaDiff() en app.js. */
.burbuja-diff{position:absolute;z-index:80;background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radio);box-shadow:0 6px 20px rgba(0,0,0,0.20);padding:10px 12px;
  font-size:13px;max-width:340px;line-height:1.5}
.burbuja-diff .hd{font-weight:700;color:var(--ink);margin-bottom:6px;
  display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.burbuja-diff .etq{color:var(--muted-text);display:inline-block;min-width:112px}
.burbuja-diff .cerrar{cursor:pointer;color:var(--muted-text);font-weight:400;font-size:16px;line-height:1;border:0;background:none;padding:0 2px}
@media (hover:hover){.burbuja-diff .cerrar:hover{color:var(--ink)}}
/* Repeticiones + link a Equivalencias dentro de la burbuja (21/09/2026, pedido de Facu: "que nos
   diga si se repite alguna vez mas" + "una forma rapida de ir a cargar esa equivalencia") --
   separados del detalle de arriba con un borde finito, mismo criterio visual que el resto de la
   app para separar bloques dentro de una tarjeta chica. Ver mostrarBurbujaDiff() en app.js. */
.burbuja-diff .rep{margin-top:8px;padding-top:8px;border-top:1px solid var(--border);color:var(--muted-text);font-size:12px}
.burbuja-diff .accion{margin-top:6px}
.burbuja-diff .accion .btn{font-size:12px;padding:3px 8px}

/* Cada campo que difiere en el aviso de "carrera entera" es su propio boton clickeable, no texto
   plano (21/09/2026, pedido de Facu: "este caso tambien que muestre el cuadro de como aparece en
   cada caso" -- ver el aviso .banner.rojo en reunion_detalle.js). Sin fondo/borde propio para no
   competir visualmente con el banner rojo que ya lo contiene; el subrayado punteado + el cambio a
   solido en hover/foco es la misma afordancia de "esto se puede clickear" que td.dif-click, pero
   en linea con el texto del banner en vez de una celda de tabla. */
button.dif-click-inline{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;
  cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px}
@media (hover:hover){button.dif-click-inline:hover{text-decoration-style:solid}}
button.dif-click-inline:focus-visible{outline:2px solid var(--red-fuerte);outline-offset:2px;text-decoration-style:solid}

/* Tablas ordenables: se ordena clickeando el encabezado (ver app.js). Los th sin texto
   —la columna de acciones— no se marcan como clickeables. */
thead th[data-ordenable] { cursor: pointer; user-select: none; white-space: nowrap; }
@media (hover:hover){thead th[data-ordenable]:hover { color: var(--brand-dark); }}
thead th[data-ordenable]::after { content: " \2195"; font-size: 10px; opacity: .55; }
thead th[data-orden="asc"]::after  { content: " \25B2"; font-size: 9px; opacity: 1; color: var(--brand); }
thead th[data-orden="desc"]::after { content: " \25BC"; font-size: 9px; opacity: 1; color: var(--brand); }

/* Banner de instalacion PWA (mejora trasversal 28/09/2026, ver pwa-instalar.js). Fixed
   abajo, centrado, con ancho maximo para no ocupar toda la pantalla en desktop. Mismo
   patron que FlotHip/VillaHip. */
.pwa-instalar{
  position:fixed;left:50%;bottom:calc(12px + env(safe-area-inset-bottom, 0px));
  transform:translateX(-50%);z-index:60;
  width:min(460px, calc(100% - 24px));
  background:var(--bg2);color:var(--ink);border:1px solid var(--border);
  border-radius:var(--radio);box-shadow:0 6px 20px rgba(35,40,44,.18);
  padding:12px 14px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.pwa-instalar .txt{flex:1;min-width:180px}
.pwa-instalar .txt strong{display:block;color:var(--ink)}
.pwa-instalar .txt span{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.pwa-instalar .acc{display:flex;gap:8px;align-items:center;flex:none}
.pwa-instalar .cerrar{background:transparent;border:0;color:var(--muted);font-size:18px;
  line-height:1;padding:6px 8px;cursor:pointer;border-radius:var(--radio)}
@media (hover:hover){.pwa-instalar .cerrar:hover{color:var(--ink);background:var(--bg3)}}


/* ---- GestHip: tarjetas de uso por app (30/09/2026) ---- */
.gh-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.gh-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radio);padding:14px 16px;
  border-left-width:6px}
.gh-card.verde{border-left-color:var(--green)} .gh-card.amarillo{border-left-color:var(--amber)}
.gh-card.rojo{border-left-color:var(--red-fuerte)} .gh-card.gris{border-left-color:var(--muted)}
.gh-card h3{margin:0 0 4px;font-size:16px;display:flex;align-items:center;gap:8px}
.gh-card .estado{font-size:13px;color:var(--muted);margin-bottom:10px}
.gh-card .nums{display:flex;gap:18px;margin:8px 0}
.gh-card .nums div{font-size:12px;color:var(--muted)}
.gh-card .nums b{display:block;font-size:20px;font-family:var(--mono,monospace);color:var(--text)}
.gh-card .ultimo{font-size:12px;color:var(--muted);word-break:break-word}
.gh-card .err{font-size:12px;color:var(--red-fuerte);margin-top:6px}
.gh-card details{margin-top:10px;font-size:12px}
.gh-card details table{font-size:12px}
.dot.gris{background:var(--muted)}

/* Estandar web-design-guidelines (08/10/2026, transversal): foco visible, numeros alineados en
   tablas, titulos balanceados, sin delay de tap y respeto de "reducir movimiento". */
:where(a,button,summary,[tabindex]):focus-visible{outline:2px solid var(--brand);outline-offset:2px}
td,.num{font-variant-numeric:tabular-nums}
h1,h2,h3{text-wrap:balance}
.btn,button,summary,select{touch-action:manipulation}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Manual de identidad v2.1: títulos en Oswald; íconos Phosphor (outline, SVG inline con clase .ph). */
h1,h2,h3,.brand .name,.login-box h1{font-family:var(--display);font-weight:600}
.ph{width:1.15em;height:1.15em;vertical-align:-.2em;flex:none;display:inline-block}

/* ---- Etapa 1: sectores (04/11/2026). Lista tipo tablero de Jira: un bloque plegable por
   sector, una fila por epica. En celular la fila se apila (nombre arriba, estado + boton abajo). */
.sx-barra{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.sx-cuando{font-size:12px;color:var(--muted-text)}
.sx-sector{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radio);padding:12px 16px;margin-bottom:12px}
.sx-sector>summary{gap:10px}
.sx-sector>summary h2{font-size:17px}
.sx-cuenta{font-size:12px;font-weight:700;color:var(--muted-text);background:var(--bg3);border-radius:20px;padding:1px 9px}
.sx-filas{list-style:none;margin:0;padding:0}
.sx-fila{display:grid;grid-template-columns:76px 1fr auto;gap:12px;align-items:center;
  padding:9px 0;border-top:1px solid var(--bg3)}
.sx-filas .sx-fila:first-child{border-top:none}
.sx-clave{font-family:var(--mono);font-size:13px;color:var(--muted-text)}
.sx-nombre{min-width:0}
.sx-desc{color:var(--muted-text)}
.sx-accion{display:flex;gap:6px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.sx-sin-url{color:var(--muted-text);cursor:default;opacity:.7}
.sx-sector>summary .sx-orden{margin-left:auto;display:flex;gap:2px}
.sx-mover{background:none;border:0;border-radius:var(--radio);padding:5px;line-height:0;cursor:pointer;color:var(--muted-text)}
.sx-mover .ph{width:16px;height:16px}
@media (hover:hover){.sx-mover:not(:disabled):hover{background:var(--bg3);color:var(--ink)}}
.sx-mover:disabled{opacity:.3;cursor:default}
.sx-vacio,.sx-pie{font-size:12px;color:var(--muted-text)}
.sx-pie{margin-top:14px}
@media (max-width:640px){
  .sx-fila{grid-template-columns:1fr;grid-template-areas:"clave" "nombre" "accion";gap:6px}
  .sx-clave{grid-area:clave} .sx-nombre{grid-area:nombre}
  .sx-accion{grid-area:accion;justify-content:flex-start}
}