/* Paleta compartida con FlotHip y AudHip (alineada a intranet.palermo.com.ar).
   Mismo concepto en las tres apps: CoreUI 2 con el primary turquesa de HiP, plana,
   radios chicos, sin sombras, bordes grises marcados. Ver FlotHip-ESTETICA-Intranet.md
   para el detalle de dónde sale cada valor. */
:root{
  /* marca Hipodromo Palermo */
  --brand:#00AAA8; --brand-dark:#008482; --brand-bg:rgba(0,170,168,0.12);
  --ink:#23282C;
  /* superficies claras */
  --bg:#E4E5E6; --bg2:#ffffff; --bg3:#F0F3F5; --border:#C8CED3;
  --text:#23282C; --muted:#73818F;
  /* estados (paleta CoreUI) */
  --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);
  --red-fuerte:#D93025;
  --radio:4px;
  --mono:'Consolas','Courier New',monospace;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}
*{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.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)}
.brand{display:flex;align-items:center;gap:12px}
.brand .name{font-size:16px;font-weight:800;color:var(--brand);letter-spacing:.5px}

.wrap{max-width:1200px;margin:0 auto;padding:22px}
h2{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}

.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)}
.card .bd{padding:12px 14px;overflow-x:auto}

.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)}
.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);color:var(--red)}
.btn.danger:hover{background:var(--red-bg)}
.btn.small{padding:4px 10px;font-size:12px}

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}
[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,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-bg)}
.frm .full{grid-column:1/-1}

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)}

/* --- pantallas del dia a dia (mobile), especificas de VillaHip --- */
.vh-app{max-width:480px;margin:0 auto;min-height:100vh;background:var(--bg);display:flex;flex-direction:column}
.vh-header{padding:20px;display:flex;justify-content:space-between;align-items:flex-start}
.vh-tile{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radio);padding:18px;
  display:flex;align-items:center;gap:14px;cursor:pointer}
.vh-tile:hover{border-color:var(--brand)}
.vh-pill{flex:1 1 45%;min-width:110px;padding:14px 8px;border-radius:var(--radio);border:1px solid var(--border);
  background:#fff;color:var(--text);font-size:13px;font-weight:700;text-align:center;cursor:pointer}
.vh-pill.sel{background:var(--brand);border-color:var(--brand);color:#fff}
.vh-btn-primary{width:100%;background:var(--brand);color:#fff;border:none;border-radius:var(--radio);
  padding:16px;font-size:15px;font-weight:700;text-align:center;cursor:pointer}
.vh-btn-primary:active{background:var(--brand-dark)}
/* Divide un formulario largo en bloques (ej. "Sobre la persona" / "Sobre el caballo") para
   que quede claro a qué se refiere cada campo que sigue, sin agregar pasos ni pantallas. */
.vh-seccion{font-size:11px;font-weight:800;color:var(--brand-dark);text-transform:uppercase;
  letter-spacing:.5px;border-top:1px solid var(--border);padding-top:16px;margin-top:2px}

/* --- semáforo de estado de caso (ficha de accidente) --- */
.vh-semaforo{display:flex;gap:8px}
.vh-semaforo .op{padding:8px 14px;border-radius:var(--radio);border:1px solid var(--border);
  background:#fff;font-size:12px;font-weight:700;cursor:pointer;color:var(--muted)}
.vh-semaforo .op.rojo.sel{background:var(--red-fuerte);border-color:var(--red-fuerte);color:#fff}
.vh-semaforo .op.amarillo.sel{background:var(--amber);border-color:var(--amber);color:#3a2e00}
.vh-semaforo .op.verde.sel{background:var(--green);border-color:var(--green);color:#fff}

/* --- notas de seguimiento (timeline en la ficha) --- */
.vh-nota{border-left:3px solid var(--brand);background:var(--bg3);padding:8px 12px;border-radius:0 var(--radio) var(--radio) 0}
.vh-nota .meta{font-size:11px;color:var(--muted);margin-bottom:2px}

/*
 * Ficha de Accidente para imprimir en A4, para que la firme el responsable de pista.
 * Mismo patrón que el formulario de Siniestros de FlotHip: un #print-area oculto que se
 * llena por JS con esta plantilla y se muestra solo al imprimir (@media print).
 */
#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%}

  .vh-doc{color:#000 !important;font-size:9pt;line-height:1.25}
  .vh-doc *{line-height:1.25}
  .vh-head{display:flex;align-items:center;gap:5mm;margin-bottom:1.5mm;
    border-bottom:1.5pt solid var(--brand-dark);padding-bottom:1.5mm}
  .vh-logo{height:12mm;width:auto;flex:0 0 auto}
  .vh-title{font-size:11pt;font-weight:700;text-transform:uppercase;color:var(--brand-dark) !important}
  .vh-dep{font-size:8.5pt;color:#333;margin-top:.6mm}
  .vh-caso{display:flex;flex-wrap:wrap;gap:1.5mm 8mm;font-size:8.5pt;margin:1.5mm 0 0}
  .vh-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}
  .vh-sec{background:var(--brand-bg) !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}
  .vh-grid{display:grid;grid-template-columns:1fr 1fr;break-inside:avoid}
  .vh-grid.c3{grid-template-columns:1fr 1fr 1fr}
  .vh-cell{border:1px solid #888;border-top:0;padding:1.5px 6px;min-height:6.5mm}
  .vh-cell.full{grid-column:1/-1}
  .vh-cell .k{font-size:7pt;color:#333;text-transform:uppercase;letter-spacing:.2px}
  .vh-cell .v{font-size:9.5pt;min-height:4.5mm}
  .vh-box{border:1px solid #888;border-top:0;padding:2px 6px;min-height:20mm;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}
  .vh-notas-doc{border:1px solid #888;border-top:0;padding:2px 6px;font-size:8.5pt;break-inside:avoid}
  .vh-notas-doc .n{border-bottom:1px dotted #ccc;padding:1.5px 0}
  .vh-notas-doc .n:last-child{border-bottom:0}
  .vh-firmas{display:grid;grid-template-columns:1fr 1fr;gap:10mm;margin-top:10mm;
    text-align:center;break-inside:avoid}
  .vh-firmas .l{margin:0 auto 1mm;border-top:1px solid #000;width:90%}
  .vh-firmas .cap{font-size:8pt;color:#000}
}