/* Marco OISA (T084, propuesta A): cabecera y pie compartidos. Plantilla: marco_oisa.html; datos: contacto.json.
   Marca: Navy #1B1A5E para texto de marca y filetes gruesos, Slate #5F666D solo para filetes finos e iconos.
   Se carga antes de la hoja de la herramienta, que puede volver a definir los tokens con los mismos valores.
   tests/test_contraste.py comprueba el contraste de estas reglas junto con static/app.css. */

:root{--navy:#1B1A5E;--slate:#5F666D;--paper:#FFFFFF;--ink:#182026;--muted:#404850;--font-body:"Lato","Helvetica Neue",Arial,sans-serif}

/* Cabecera blanca: logo, filete slate, rotulo y nombre de la herramienta; linea navy abajo */
header{background:var(--paper);color:var(--ink);border-bottom:3px solid var(--navy)}
.header-inner{max-width:1220px;margin:0 auto;padding:12px 24px 0}
.marca{display:flex;align-items:center;gap:18px;padding:2px 0 4px}
.marca a{display:block;flex:none}
.marca img{height:60px;width:auto;display:block}
.marca-filete{flex:none;width:1px;align-self:stretch;margin:4px 0;background:var(--slate)}
.app-name{margin:0;color:var(--navy);font:700 20px/1.2 var(--font-body)}
.marca-rotulo{display:block;margin-bottom:3px;color:var(--muted);font:700 11px/1.2 var(--font-body);letter-spacing:.09em;text-transform:uppercase}

/* Pie: fila de contacto del Brand Kit con filete navy arriba; direccion y horario debajo; razon social a la derecha */
.pie{background:var(--paper);color:var(--muted);border-top:3px solid var(--navy)}
.pie-inner{max-width:1220px;margin:0 auto;padding:16px 24px 22px;display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px 24px}
.pie address{flex:1 1 auto;font-style:normal}
.pie ul{display:flex;flex-wrap:wrap;align-items:center;list-style:none;margin:0;padding:0}
.pie li{display:flex;align-items:center;gap:8px}
.pie-contacto{gap:10px 0;font:700 15px/1.3 var(--font-body)}
.pie-contacto li+li{border-left:1px solid var(--slate);margin-left:22px;padding-left:22px}
.pie-contacto a{display:flex;align-items:center;gap:8px;color:var(--navy);text-decoration:none}
.pie-contacto a:hover{text-decoration:underline}
.pie-datos{gap:6px 22px;margin-top:10px;color:var(--muted);font:400 14px/1.4 var(--font-body)}
.pie-icono{width:18px;height:18px;flex:none;fill:none;stroke:var(--slate);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pie-empresa{margin:2px 0 0;color:var(--muted);font:700 12px/1.3 var(--font-body);letter-spacing:.14em;text-transform:uppercase}

@media(max-width:800px){
  .header-inner{padding:10px 14px 0}
  .marca{gap:12px}
  .marca img{height:44px}
  .app-name{font-size:16px}
  .pie-inner{padding:14px 14px 20px;flex-direction:column}
  .pie .pie-contacto,.pie .pie-datos{flex-direction:column;align-items:flex-start}
  .pie-contacto li+li{border-left:0;margin-left:0;padding-left:0}
}
@media print{.pie{display:none}}