/* AudHip — 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 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:#55616E;  /* 07/10: era #73818F (3,99:1 sobre blanco); ahora >= 4,5:1 sobre todos los fondos */
  /* estados (paleta CoreUI, la de la intranet) */
  --green:#4DBD74; --green-bg:rgba(77,189,116,0.12);
  --red:#C62828;  /* 07/10: era #F86C6B (2,9:1 como texto); ahora 5,6:1 */   --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 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:#D93025;
  --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}
@media (hover:hover){.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 paso de div a <a href> (actualizacion trasversal 28/09/2026, logo clickeable a Inicio,
   mismo patron que StudHip, BFF-102): sin esto el link se veia subrayado y azul. */
.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)}

.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:#2E7D46}
.chip.rojo{background:rgba(217,48,37,0.10);color:var(--red-fuerte)}
.chip.amarillo{background:var(--amber-bg);color:#946200}
.chip.gris{background:#eceff3;color:var(--muted)}
.chip.azul{background:var(--blue-bg);color:#1f7d99}
.lnk{color:var(--brand-dark);cursor:pointer;text-decoration:none;border-bottom:1px dotted var(--brand)}
@media (hover:hover){.lnk:hover{color:#006F6D;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)}}
.btn.success{background:var(--brand-dark);border-color:var(--brand-dark);color:#fff}  /* 07/10: blanco sobre --brand daba 2,87:1 */
@media (hover:hover){.btn.success:hover{background:#006F6D;border-color:#006F6D}}
.btn.danger{background:#fff;border-color:var(--red);color:var(--red)}
@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);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}
input:focus,select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-bg)}
.frm .full{grid-column:1/-1}
/* Checkbox en linea dentro de un form (actualizacion trasversal 28/09/2026, "mantener sesion
   iniciada" del login, BFF-102): 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}

/* "Completar identidad" de Beturf/Betfun (08/09): al abrir la ficha de un pendiente, lo que ya
   está cargado se ve en verde y lo que hace falta para completarlo (los campos que la fuente marca
   como `faltan`) en rojo — así no hay que releer la columna de "falta" y adivinar cuál es cuál. */
.frm label.campo-ok{color:#2E7D46}
.frm label.campo-ok input,.frm label.campo-ok select{border-color:var(--green);background:var(--green-bg)}
.frm label.campo-falta{color:var(--red-fuerte)}
.frm label.campo-falta input,.frm label.campo-falta select{border-color:var(--red);background:var(--red-bg)}

.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);border:1px solid var(--green)}
.resultado.err{background:var(--red-bg);color:var(--red);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);font-size:12px;font-weight:600}
td.mono{font-family:var(--mono)}

/* Consolidado · "Por unidad de juego" (08/09): cada unidad informa a UIF por una columna
   distinta -movimientos en Slots/Turf, clientes en Beturf/Betfun, que van agrupados por titular
   en el export-. Sin esto las dos columnas se leian como equivalentes y no lo son: .uif-informa
   marca cual de las dos es la que efectivamente se cuenta como fila del Excel para esa unidad. */
.uif-informa{font-weight:700;color:var(--brand-dark);background:var(--brand-bg);
  border-radius:6px;padding:2px 8px;display:inline-block}

/* 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:#946200;border:1px solid var(--amber)}
.banner.verde{background:var(--green-bg);color:#2E7D46;border:1px solid var(--green)}
.banner.azul{background:var(--blue-bg);color:#1f7d99;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);cursor:help;font-weight:700;font-size:13px;
  vertical-align:super;line-height:1;margin-left:2px;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);
  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}}

/* Modal "Conectar a Omega" (14/09): 3 pasos, Conectando... -> resultado con contador -> Cerrar.
   Compartido por Betfun UIF / Clientes / Consolidado, ver omegaSyncInit() en app.js.
   max-width subido de 420 a 640 (15/09, sesion siguiente): tambien lo usa la lista de revision
   de cambios de PEP/sujeto_obligado (omegaRevisionAbrirModal), que necesita mas ancho para la
   tabla — los pasos simples de siempre (sessionKey, confirmaciones) igual quedan centrados y
   angostos gracias al padding, no se ven afectados. */
#omega_modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;
  background:rgba(35,40,44,.45);z-index:200}
#omega_modal .modal-card{background:var(--bg2);border-radius:var(--radio);max-width:640px;width:90%;
  box-shadow:0 8px 28px rgba(35,40,44,.25)}
#omega_modal .modal-card .bd{padding:20px}

.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}
.login-box label.chk{display:flex;align-items:center;gap:8px;margin:-4px 0 16px;font-size:13px;
  font-weight:400;color:var(--muted)}
.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}
  .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);font-weight:400;font-size:.8em}

/* 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: .35; }
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)}}

/* ---- Accesibilidad (revision Web Interface Guidelines, 07/10/2026) ---- */
/* Foco visible con teclado en todo lo clickeable (los inputs ya tienen su anillo propio). */
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible,.lnk:focus-visible{
  outline:2px solid var(--brand-dark);outline-offset:2px;border-radius:3px}
/* "Saltar al contenido": invisible hasta que se llega con Tab. */
.skip{position:absolute;left:-9999px;top:8px;z-index:200;background:var(--brand-dark);color:#fff;
  padding:8px 14px;border-radius:var(--radio);font-weight:700}
.skip:focus{left:8px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Enlaces de tabla que en realidad son botones (abrir cliente, ver recientes): se ven igual. */
button.lnk{background:none;border:0;border-bottom:1px dotted var(--brand);padding:0;font:inherit;text-align:left}
/* Encabezados ordenables: se pueden enfocar y ordenar con Enter. */
thead th[data-ordenable="1"]{cursor:pointer}
/* Respeta "reducir movimiento" del sistema operativo. */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Estandar web-design-guidelines (08/10/2026, transversal): foco visible con :where() para no
   subir especificidad, numeros alineados en tablas, titulos balanceados y sin delay de tap. */
: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}