/* Marco común de Amauta para el blog y las calculadoras (25/10/2026): misma barra, mismos botones y la misma foto de la portada de fondo.
   Lo dibuja /shell.js dentro de <div id="am-cab">. Todas las clases empiezan con «am-» para no chocar con los estilos de cada página. */
:root {
  --am-azul: #0b3d91;
  --am-azul-oscuro: #08295e;
  --am-fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.am-cab { position: relative; isolation: isolate; overflow-x: clip; background: #0c1c3a; border-bottom: 2px solid #0c1c3a; color: #fff; font-family: var(--am-fuente); }  /* sin overflow:hidden: el menú «Mi cuenta» debe poder salir del encabezado */
/* la misma técnica del fondo de la portada: la foto, desenfocada y oscurecida */
.am-cab::before { content: ""; position: absolute; inset: -40px; z-index: -2; background: url('/img/portada-chatbot-v4.webp') center 22% / cover no-repeat; filter: blur(18px) brightness(0.85) saturate(1.1); clip-path: inset(40px); }  /* sin transform: el escalado dibujaba una franja gris bajo el encabezado y creaba barra de desplazamiento horizontal */
@supports not (overflow-x: clip) { .am-cab { overflow: hidden; } }
.am-cab::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8, 41, 94, 0) 45%, rgba(8, 41, 94, 0.62) 100%), linear-gradient(100deg, rgba(8, 41, 94, 0.86) 0%, rgba(11, 61, 145, 0.52) 55%, rgba(8, 41, 94, 0.38) 100%); }

.am-barra { max-width: 1040px; margin: 0 auto; padding: 14px 16px 6px; display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; }
.am-logo { display: inline-flex; align-items: center; gap: 5px; color: #fff; text-decoration: none; font-weight: 700; letter-spacing: 0.24em; font-size: 18px; }
.am-logo img { width: 36px; height: 36px; border-radius: 9px; display: block; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.35); }

.am-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.am-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--am-azul-oscuro); color: #fff; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; padding: 9px 16px; font: 700 13.5px/1 var(--am-fuente); letter-spacing: 0.2px; text-decoration: none; white-space: nowrap; cursor: pointer; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28); transition: background 0.15s, transform 0.15s; }
.am-pill:hover { background: var(--am-azul); transform: translateY(-1px); }
.am-pill[aria-current="page"] { background: var(--am-azul); border-color: rgba(255, 255, 255, 0.6); }
.am-pill:focus-visible, .am-logo:focus-visible, .am-menu button:focus-visible { outline: 3px solid #9fc0ff; outline-offset: 2px; }

.am-titulo { max-width: 1040px; margin: 0 auto; padding: 18px 16px 30px; }
.am-titulo h1 { margin: 0 0 6px; font-size: clamp(24px, 4.8vw, 32px); line-height: 1.15; }
.am-titulo p { margin: 0; max-width: 720px; font-size: 14.5px; line-height: 1.5; opacity: 0.94; }

.am-cuenta { position: relative; }
.am-menu { display: none; position: absolute; right: 0; top: calc(100% + 8px); min-width: 210px; max-width: 280px; background: #fff; color: var(--am-azul-oscuro); border-radius: 12px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.38); padding: 6px; z-index: 60; }
.am-menu.abierto { display: block; }
.am-menu .am-correo { padding: 6px 10px 8px; color: #6b7280; font-size: 12.5px; border-bottom: 1px solid #e6eaf2; margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.am-menu button, .am-menu a { display: block; width: 100%; text-align: left; padding: 9px 10px; border: none; border-radius: 8px; background: transparent; color: inherit; font: 600 14px var(--am-fuente); text-decoration: none; cursor: pointer; }
.am-menu button:hover, .am-menu a:hover { background: #eef1f7; }
.am-menu .am-peligro { color: #c0392b; }
.am-menu .am-peligro:hover { background: #fdecea; }

.am-pie { background: #0c1c3a; text-align: center; padding: 16px; font-family: var(--am-fuente); }
.am-pie a { color: #cfd8ea; font-size: 13px; text-decoration: none; letter-spacing: 0.2px; }
.am-pie a:hover { color: #fff; text-decoration: underline; }

@media (max-width: 600px) {
  /* celular: arriba el logo y «Mi cuenta»; debajo, los tres botones de navegación en una sola fila */
  .am-barra { padding-top: 12px; gap: 10px 6px; }
  .am-nav { display: contents; }
  .am-logo { order: 0; font-size: 16px; }
  .am-logo img { width: 32px; height: 32px; }
  .am-cuenta { order: 1; margin-left: auto; }
  .am-nav > .am-pill { order: 2; }
  .am-pill { padding: 8px 12px; font-size: 12.5px; }
}

@media print { .am-cab, .am-pie { display: none !important; } }

/* [PIE-ABAJO-20261026] Pie siempre abajo: el body mide al menos la ventana y reserva el alto del pie; el pie se ancla al fondo del body. */
:root { --am-pie-alto: 54px; }   /* el pie medía 56 px en las calculadoras y 53 px en el blog: 54 px deja la diferencia en ≤ 2 px en ambas */
body { position: relative; box-sizing: border-box; min-height: 100vh; min-height: 100dvh; padding-bottom: var(--am-pie-alto); }
.am-pie { position: absolute; left: 0; right: 0; bottom: 0; box-sizing: border-box; height: var(--am-pie-alto); padding: 0 16px; display: flex; align-items: center; justify-content: center; }

/* [ENCABEZADO-FIJO-20261027] Barra superior fija al bajar. La banda (.am-cab) reserva el alto de la barra (--am-barra-alto, medido en shell.js) para que nada se mueva. */
html { scroll-padding-top: calc(var(--am-barra-alto, 62px) + 8px); }   /* un enlace interno (#...) no queda tapado por la barra fija */
.am-cab { z-index: 40; padding-top: var(--am-barra-alto, 62px); }
.am-barra { position: fixed; top: 0; left: 0; right: 0; z-index: 41; max-width: none; margin: 0; padding-left: max(16px, calc((100% - 1008px) / 2)); padding-right: max(16px, calc((100% - 1008px) / 2)); transition: background-color 0.18s, box-shadow 0.18s; }   /* mismo ancho útil que antes: 1040 px centrados con 16 px de margen */
.am-cab.am-fijo .am-barra { background: rgba(12, 28, 58, 0.97); box-shadow: 0 3px 14px rgba(0, 0, 0, 0.35); }
@media (max-width: 340px) {   /* pantallas muy angostas: la barra ocupa 130 px (3 filas) y no deja sitio para leer; ahí se queda como antes, sin fijar */
  html { scroll-padding-top: 0; }
  .am-cab { padding-top: 0; }
  .am-barra { position: static; z-index: auto; max-width: 1040px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
  .am-cab.am-fijo .am-barra { background: none; box-shadow: none; }
}

/* [AVATAR-BOTON-20261027] «Mi cuenta» con sesión: foto redonda + primer nombre + ▾, como en la portada. El relleno vertical se ajusta para que el botón mida lo mismo que los demás (33,5 px en escritorio, 30,5 px en celular). */
.am-pill.am-con-foto { padding: 4.75px 14px 4.75px 6px; }
.am-avatar { width: 22px; height: 22px; border-radius: 50%; overflow: hidden; background: #eef1f7; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 12px; line-height: 1; }
.am-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.am-nombre { max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 600px) {
  .am-pill.am-con-foto { padding: 4.25px 10px 4.25px 5px; }
  .am-avatar { width: 20px; height: 20px; }
  .am-nombre { max-width: 7.5em; }
}

/* [PERFIL-ADENTRO-20261027] Tarjeta «Mi perfil» sobre el Blog y las Calculadoras: mismo aspecto que la de la portada. */
.am-modal { display: none; position: fixed; inset: 0; z-index: 300; background: rgba(8, 20, 45, 0.66); align-items: center; justify-content: center; padding: 16px; font-family: var(--am-fuente); }
.am-modal.activo { display: flex; }
.am-modal-card { position: relative; box-sizing: border-box; background: #fff; border-radius: 18px; padding: 28px 24px 22px; width: 100%; max-width: 400px; max-height: calc(100vh - 32px); overflow-y: auto; text-align: center; display: flex; flex-direction: column; align-items: stretch; gap: 10px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4); }
.am-modal-card h2 { margin: 0; color: var(--am-azul-oscuro); font-size: 20px; line-height: 1.2; }
.am-modal-card p { margin: 0; }
.am-modal-cerrar { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%; border: none; background: #eef1f7; color: var(--am-azul-oscuro); font-size: 14px; cursor: pointer; }
.am-modal-cerrar:hover { background: #dfe5f1; }
.am-perfil-avatar-btn { position: relative; display: block; width: 88px; height: 88px; margin: 0 auto; padding: 0; border: none; background: none; border-radius: 50%; cursor: pointer; font-family: inherit; }
.am-perfil-avatar { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: #eef1f7; display: flex; align-items: center; justify-content: center; font-size: 40px; }
.am-perfil-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.am-perfil-avatar img[hidden], .am-perfil-avatar span[hidden] { display: none; }
.am-perfil-camara { position: absolute; inset: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(8, 20, 45, 0.45); opacity: 0; transition: opacity 0.15s; pointer-events: none; }
.am-perfil-camara-icono { width: 38px; height: 38px; border-radius: 50%; background: #fff; color: var(--am-azul); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); }
.am-perfil-avatar-btn::after { content: attr(data-tip); position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%); z-index: 2; background: #1b1f33; color: #fff; font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 8px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s; }
.am-perfil-avatar-btn:hover .am-perfil-camara, .am-perfil-avatar-btn:focus-visible .am-perfil-camara { opacity: 1; }
.am-perfil-avatar-btn:hover::after, .am-perfil-avatar-btn:focus-visible::after { opacity: 1; }
.am-perfil-avatar-btn:focus-visible { outline: 2px solid var(--am-azul); outline-offset: 3px; }
@media (hover: none) {
  .am-perfil-camara { inset: auto; right: -4px; bottom: -4px; width: 34px; height: 34px; background: none; opacity: 1; }
  .am-perfil-camara-icono { width: 34px; height: 34px; border: 2px solid #fff; box-sizing: border-box; }
  .am-perfil-camara-icono svg { width: 17px; height: 17px; }
  .am-perfil-avatar-btn::after { display: none; }
}
.am-perfil-quitar { display: block; margin: -2px auto 0; border: none; background: none; color: #6b7280; font-family: inherit; font-size: 12.5px; text-decoration: underline; cursor: pointer; padding: 2px 6px; }
.am-perfil-quitar:hover { color: #c0392b; }
.am-perfil-quitar[hidden] { display: none; }
.am-perfil-msg { text-align: center; font-size: 12.5px; color: #6b7280; }
.am-perfil-msg.error { color: #c0392b; }
.am-perfil-msg[hidden] { display: none; }
.am-perfil-nombre { font-weight: 700; color: var(--am-azul-oscuro); font-size: 16px; overflow-wrap: anywhere; }
.am-perfil-correo { color: #6b7280; font-size: 14px; overflow-wrap: anywhere; margin-top: 2px; }
.am-perfil-peligro { margin-top: 10px; padding-top: 14px; border-top: 1px solid #e6eaf2; text-align: center; }
.am-perfil-peligro p { margin: 0 0 10px; color: #6b7280; font-size: 12.5px; }
.am-perfil-eliminar { border: 1px solid #c0392b; border-radius: 999px; background: #fff; color: #c0392b; font-family: inherit; font-weight: 700; font-size: 14px; padding: 8px 16px; cursor: pointer; }
.am-perfil-eliminar:hover { background: #fdecea; }

/* [BLOG-RECUADROS-20261027] Lista del Blog en cuadrícula de recuadros. Solo afecta al <main> que tiene tarjetas (la lista); las tarjetas se definen en la plantilla del blog (app.py) y aquí solo se acomodan. */
main:has(> a.tarjeta) { max-width: 1040px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); gap: 18px; align-items: stretch; }   /* 1040 px = el ancho de la cabecera; auto-fill: con pocos artículos los recuadros no se estiran; min(…, 100%): en pantallas de 320 px no se pasan del ancho */
main:has(> a.tarjeta) > .categorias { grid-column: 1 / -1; margin-bottom: 6px; }   /* 24 px de antes menos los 18 px del espacio entre recuadros */
main:has(> a.tarjeta) > .volver { grid-column: 1 / -1; justify-self: start; }
main:has(> a.tarjeta) > .tarjeta { display: flex; flex-direction: column; margin: 0; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
main:has(> a.tarjeta) > .tarjeta:hover { box-shadow: 0 8px 22px rgba(8, 41, 94, 0.12); transform: translateY(-2px); }
main:has(> a.tarjeta) > .tarjeta p:not(.fecha) { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }   /* el resumen se corta a 5 líneas para que los recuadros de una fila midan parecido */
main:has(> a.tarjeta) > .tarjeta .fecha { margin-top: auto; padding-top: 10px; }   /* la fecha siempre abajo del recuadro */
/* [SEO2-20261105] H1 oculto visualmente, banner como div y titulo de articulo */
.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; }
.am-titulo .am-h1 { margin: 0 0 6px; font-size: clamp(24px, 4.8vw, 32px); line-height: 1.15; font-weight: 700; }
.art-titulo { color: var(--azul-oscuro, #08295e); font-size: clamp(24px, 4.2vw, 32px); line-height: 1.2; margin: 0 0 10px; }