/* Camilo Veterinario · marco de aplicación compartido: barra superior con «volver», migas de pan, barra inferior de cuatro destinos
   y transiciones entre páginas. Lo llevan la raíz, /rutas/, las guías, el programa, los textos legales y la página de enlaces.
   Es independiente de los estilos de cada página: usa sus propias variables (--m-*) y cada regla va acotada a .appbar, .migas-wrap
   o .tabs, para no chocar con base.css, legal.css, programa, guías ni enlaces. El nombre lleva la versión: si se cambia, se cambia
   el nombre (la cabecera de caché es larga). */
.appbar,.migas-wrap,.tabs{
  --m-bg:#F2F6F7;--m-white:#FFFFFF;--m-ink:#0A1E26;--m-muted:#566E78;--m-line:rgba(10,30,38,.10);
  --m-brand:#0C5266;--m-pastel:#D9ECF0;--m-pastel2:#E8F3F5;--m-focus:#2B67D6;
  --m-curva:cubic-bezier(.2,.7,.2,1);
  --m-display:'Bricolage Grotesque',system-ui,sans-serif;
  --m-ui:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-family:var(--m-ui);
}

/* transiciones de página: si el navegador no las soporta, navega normal; con «menos movimiento» se apagan */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:m-sale .18s ease both}
  ::view-transition-new(root){animation:m-entra .3s cubic-bezier(.2,.7,.2,1) both}
  @keyframes m-sale{to{opacity:0}}
  @keyframes m-entra{from{opacity:0;transform:translateY(10px)}}
}
.appbar{view-transition-name:appbar}
.tabs{view-transition-name:tabs}

/* barra superior */
.appbar{position:sticky;top:0;z-index:40;background:rgba(242,246,247,.86);-webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px);border-bottom:1px solid var(--m-line);line-height:1.5}
.appbar-in{display:flex;align-items:center;gap:10px;width:100%;max-width:1160px;min-height:60px;margin:0 auto;padding:max(6px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) 6px max(20px,env(safe-area-inset-left))}
.appbar a{color:var(--m-ink);text-decoration:none}
.appbar .atras{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 16px 0 8px;border-radius:999px;background:var(--m-white);box-shadow:0 8px 20px -14px rgba(10,52,65,.6);font-weight:700;font-size:15px;white-space:nowrap;transition:transform .2s var(--m-curva)}
.appbar .atras .ico{width:22px;height:22px;color:var(--m-brand)}
.appbar .appbar-t{flex:1;min-width:0;margin:0;text-align:center;font-family:var(--m-display);font-weight:600;font-size:1.1rem;letter-spacing:-.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appbar .btn-ic{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none;padding:0;border:0;background:var(--m-white);color:var(--m-ink);box-shadow:0 8px 20px -14px rgba(10,52,65,.6);cursor:pointer;font:inherit}
.appbar .btn-ic .ico{width:20px;height:20px}
.appbar .espacio{width:44px;flex:none}
.appbar .marca{display:none;align-items:center;gap:10px;min-height:44px;font-family:var(--m-display);font-weight:600;font-size:18px;letter-spacing:-.03em;white-space:nowrap}
.appbar .marca img{width:36px;height:36px;display:block}
.appbar .nav{display:none}
.appbar .nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;font-size:15px;font-weight:600}
.appbar .nav a:hover{background:var(--m-pastel)}
/* acción propia de la página (por ejemplo «Quiero entrar» en el programa), en lugar del botón de compartir */
.appbar .appbar-acc{flex:none;margin-left:auto;display:flex;align-items:center}
.appbar.con-accion .appbar-t{display:none}
.appbar.con-accion .espacio{display:none}
.appbar a:focus-visible,.appbar .btn-ic:focus-visible,.tabs a:focus-visible,.migas-wrap a:focus-visible{outline:3px solid var(--m-focus);outline-offset:3px;border-radius:12px}

/* la caja del programa es más ancha que la del resto: la barra se alinea con su contenido */
.appbar.w-p .appbar-in{max-width:1760px}

/* migas de pan */
.migas-wrap{width:calc(100% - 40px);max-width:1160px;margin:0 auto;padding-top:14px}
.migas-wrap.w-legal{max-width:780px}
.migas-wrap.w-guia{max-width:940px}
.migas-wrap.w-p{max-width:1696px}
.migas-wrap .migas{margin:0}
.migas ol{list-style:none;margin:0;padding:0;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;font-size:14px;line-height:1.5;white-space:nowrap;-webkit-overflow-scrolling:touch}
.migas ol::-webkit-scrollbar{display:none}
.migas li{display:flex;align-items:center;margin:0;padding:0;color:var(--m-muted)}
.migas li+li::before{content:"";width:6px;height:6px;margin:0 8px 0 4px;border:solid currentColor;border-width:1.5px 1.5px 0 0;transform:rotate(45deg);opacity:.55}
.migas a{display:inline-flex;align-items:center;min-height:44px;padding:0 2px;font-weight:600;color:var(--m-brand);text-decoration:underline;text-decoration-color:rgba(12,82,102,.3);text-underline-offset:4px}
.migas [aria-current]{font-weight:700;color:var(--m-ink)}

/* barra inferior */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:repeat(4,1fr);gap:2px;padding:6px max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));background:rgba(255,255,255,.88);-webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px);border-top:1px solid var(--m-line);box-shadow:0 -10px 30px -22px rgba(10,52,65,.5);line-height:1.5}
.tabs .tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:56px;border-radius:18px;font-size:11.5px;font-weight:700;line-height:1;color:var(--m-muted);text-decoration:none;transition:color .2s,transform .15s}
.tabs .tab-ic{display:grid;place-items:center;width:56px;height:30px;border-radius:999px;transition:background .25s var(--m-curva)}
.tabs .ico{width:24px;height:24px}
.tabs .tab:active{transform:scale(.95)}
.tabs .tab[aria-current="page"]{color:var(--m-brand)}
.tabs .tab[aria-current="page"] .tab-ic{background:var(--m-pastel)}
body.con-tabs{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
html:has(.appbar){scroll-padding-top:76px}
/* teclado abierto o celular en horizontal: la barra inferior tapa el formulario */
body.teclado .tabs{display:none}
@media (max-height:480px){.tabs{display:none}body.con-tabs{padding-bottom:0}}

@media (min-width:720px){
  .appbar-in{padding-left:max(32px,env(safe-area-inset-left));padding-right:max(32px,env(safe-area-inset-right))}
  .appbar.w-p .appbar-in{padding-left:max(clamp(32px,3.4vw,64px),env(safe-area-inset-left));padding-right:max(clamp(32px,3.4vw,64px),env(safe-area-inset-right))}
  .migas-wrap{width:calc(100% - 64px)}
  .migas-wrap.w-legal,.migas-wrap.w-guia{width:calc(100% - 40px)}
  .migas-wrap.w-p{width:calc(100% - clamp(64px,6.8vw,128px))}
}
@media (min-width:1040px){
  .tabs{display:none}
  body.con-tabs{padding-bottom:0}
  .appbar .marca{display:flex}
  .appbar .nav{display:flex;gap:6px}
  .appbar .appbar-t,.appbar .espacio,.appbar .atras{display:none}
  .appbar-in{justify-content:space-between}
  .appbar .appbar-acc{margin-left:0}
}
@media (hover:hover){
  .appbar .atras:hover,.appbar .btn-ic:hover{transform:translateY(-1px)}
  .tabs .tab:hover .tab-ic{background:var(--m-pastel2)}
  .tabs .tab[aria-current="page"]:hover .tab-ic{background:var(--m-pastel)}
}
@media print{.appbar,.migas-wrap,.tabs{display:none}body.con-tabs{padding-bottom:0}}