/* =====================================================================
   Certifika2 — hoja de estilos del panel y páginas públicas
   Tokens: tinta (navy), papel (frío), sello (rojo de tampón), oro.
   ===================================================================== */

:root {
  --tinta: #1b2a41;
  --tinta-suave: #3d4c63;
  --tinta-tenue: #7b8699;
  --papel: #f6f7f9;
  --blanco: #ffffff;
  --linea: #d9dee6;
  --linea-fuerte: #b9c2cf;
  --sello: #b4231f;
  --sello-claro: #fbeceb;
  --oro: #c99a2e;
  --oro-claro: #fbf3df;
  --valido: #1e7a46;
  --valido-claro: #e4f3ea;
  --aviso: #9a6400;
  --aviso-claro: #fff4d6;
  --info-claro: #e7eef9;

  --serif: Georgia, "Times New Roman", "Liberation Serif", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;

  --radio: 6px;
  --sombra: 0 1px 2px rgba(27, 42, 65, .06), 0 4px 14px rgba(27, 42, 65, .05);
  --ancho-lateral: 232px;
}

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 15px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  line-height: 1.5;
  color: var(--tinta);
  background: var(--papel);
}
a { color: var(--tinta); }
img { max-width: 100%; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.2; margin: 0 0 .5rem; letter-spacing: -.01em; }
h1 { font-size: 1.7rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 1rem; }
small, .tenue { color: var(--tinta-tenue); }
.mono { font-family: var(--mono); }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }

/* ---------------------------------------------------------------- Layout */
.app { display: grid; grid-template-columns: var(--ancho-lateral) 1fr; min-height: 100vh; }
.lateral {
  background: var(--tinta);
  color: #d5dbe6;
  padding: 1.25rem 0;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.marca {
  display: flex; align-items: center; gap: .6rem;
  padding: 0 1.25rem 1.25rem;
  color: var(--blanco);
  text-decoration: none;
  font-family: var(--serif);
  font-size: 1.25rem;
  letter-spacing: .04em;
}
.marca .sello-icono {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--sello);
  display: grid; place-items: center;
  font-family: var(--mono); font-size: .7rem; color: var(--sello);
  transform: rotate(-8deg);
}
/* El isotipo acompaña al nombre en las barras estrechas: sobre el lateral
   oscuro el logotipo completo (texto azul marino) no tendría contraste. */
.marca .marca-icono { border-radius: 7px; flex: none; }
/* Sobre fondo claro (cabecera pública) el nombre va en tinta. */
.marca-tinta { color: var(--tinta); padding: 0; }
/* El logotipo completo, donde hay sitio para leerlo (acceso). */
.marca-completa { justify-content: center; padding: 0 0 1.5rem; }
.marca-completa .marca-logo { max-width: 100%; }
.lateral nav a {
  display: block; padding: .5rem 1.25rem; color: inherit; text-decoration: none;
  border-left: 3px solid transparent;
}
.lateral nav a:hover { background: rgba(255,255,255,.05); color: var(--blanco); }
.lateral nav a.activo { border-left-color: var(--oro); color: var(--blanco); background: rgba(255,255,255,.07); }
.lateral nav .grupo { padding: 1rem 1.25rem .35rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: #8e9ab0; }
.lateral .pie { margin-top: auto; padding: 1rem 1.25rem 0; font-size: .85rem; border-top: 1px solid rgba(255,255,255,.1); }
.lateral .pie strong { color: var(--blanco); display: block; }
.lateral .pie form { margin-top: .5rem; }
.principal { padding: 1.75rem 2rem 3rem; min-width: 0; }
.cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.cabecera .acciones { display: flex; gap: .5rem; flex-wrap: wrap; }
.migas { font-size: .85rem; color: var(--tinta-tenue); margin-bottom: .35rem; }
.migas a { color: inherit; }

.publico { max-width: 720px; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }
.publico-cabecera { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; }
.auth { max-width: 420px; margin: 4rem auto; padding: 0 1.25rem; }
.auth .tarjeta { padding: 2rem; }
.auth h1 { margin-bottom: 1.25rem; }

@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .lateral { position: static; height: auto; }
  .lateral nav { display: flex; flex-wrap: wrap; gap: .1rem; padding: 0 .5rem; }
  .lateral nav .grupo { display: none; }
  .lateral nav a { border-left: 0; border-bottom: 3px solid transparent; padding: .4rem .7rem; }
  .lateral nav a.activo { border-bottom-color: var(--oro); }
  .lateral .pie { display: none; }
  .principal { padding: 1.25rem 1rem 3rem; }
}

/* ---------------------------------------------------------------- Componentes */
.tarjeta { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.25rem; box-shadow: var(--sombra); }
.tarjeta + .tarjeta { margin-top: 1.25rem; }
.tarjeta h2 { margin-bottom: 1rem; }
.rejilla { display: grid; gap: 1.25rem; }
.rejilla-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.rejilla-3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.cifra { font-family: var(--serif); font-size: 2rem; line-height: 1; }
.cifra-etiqueta { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-tenue); margin-top: .35rem; }

.boton {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem .95rem; border-radius: var(--radio);
  border: 1px solid var(--tinta); background: var(--tinta); color: var(--blanco);
  font: inherit; font-size: .92rem; cursor: pointer; text-decoration: none; line-height: 1.3;
}
.boton:hover { background: #24375a; }
.boton.secundario { background: var(--blanco); color: var(--tinta); border-color: var(--linea-fuerte); }
.boton.secundario:hover { background: var(--papel); }
.boton.peligro { background: var(--blanco); color: var(--sello); border-color: var(--sello); }
.boton.peligro:hover { background: var(--sello-claro); }
.boton.pequeno { padding: .3rem .65rem; font-size: .82rem; }
.boton:disabled { opacity: .5; cursor: not-allowed; }
.enlace-boton { background: none; border: 0; padding: 0; color: var(--tinta); text-decoration: underline; cursor: pointer; font: inherit; }

.campo { margin-bottom: 1rem; }
.campo label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .3rem; }
.campo .ayuda { font-size: .8rem; color: var(--tinta-tenue); margin-top: .25rem; }
.campo .error { font-size: .82rem; color: var(--sello); margin-top: .25rem; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"],
input[type="tel"], input[type="url"], input[type="search"], select, textarea {
  width: 100%; padding: .5rem .65rem; font: inherit; color: var(--tinta);
  border: 1px solid var(--linea-fuerte); border-radius: var(--radio); background: var(--blanco);
}
input:focus, select:focus, textarea:focus { border-color: var(--tinta); outline: none; box-shadow: 0 0 0 3px rgba(27,42,65,.12); }
input.invalido, select.invalido { border-color: var(--sello); }
textarea { min-height: 90px; resize: vertical; }
.fila-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; }
.check { display: flex; align-items: flex-start; gap: .5rem; font-size: .9rem; }
.check input { margin-top: .25rem; }

.tabla-envoltura { overflow-x: auto; }
table.tabla { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabla th, .tabla td { padding: .6rem .7rem; text-align: left; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.tabla th { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-tenue); font-weight: 600; }
.tabla tr:hover td { background: #fbfbfd; }
.tabla td.num, .tabla th.num { text-align: right; }
.tabla .fila-error td { background: var(--sello-claro); }

/* El código de verificación: firma visual del producto */
.codigo {
  display: inline-block; font-family: var(--mono); font-size: .95rem; letter-spacing: .12em;
  padding: .15rem .5rem; border: 1.5px solid var(--sello); color: var(--sello);
  border-radius: 3px; background: var(--blanco); white-space: nowrap;
}
.codigo.grande { font-size: 1.6rem; padding: .35rem 1rem; letter-spacing: .18em; }

.insignia { display: inline-block; padding: .15rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 600; letter-spacing: .02em; }
.insignia.vigente, .insignia.emitido, .insignia.hecho, .insignia.activa { background: var(--valido-claro); color: var(--valido); }
.insignia.revocado, .insignia.error, .insignia.fallido, .insignia.suspendida { background: var(--sello-claro); color: var(--sello); }
.insignia.vencido, .insignia.pendiente, .insignia.procesando, .insignia.prueba { background: var(--aviso-claro); color: var(--aviso); }
.insignia.borrador, .insignia.abierta, .insignia.cerrada, .insignia.emitida, .insignia.neutro { background: var(--info-claro); color: var(--tinta-suave); }

.flash { padding: .75rem 1rem; border-radius: var(--radio); margin-bottom: 1rem; border: 1px solid transparent; }
.flash.exito { background: var(--valido-claro); color: var(--valido); border-color: #bfe0cb; }
.flash.error { background: var(--sello-claro); color: var(--sello); border-color: #f0c5c3; }
.flash.aviso { background: var(--aviso-claro); color: var(--aviso); border-color: #f0dca4; }
.flash.info { background: var(--info-claro); color: var(--tinta-suave); border-color: #cbd8ec; }

.vacio { text-align: center; padding: 2.5rem 1rem; color: var(--tinta-tenue); }
.vacio h3 { color: var(--tinta); }

.aviso-banda { background: var(--aviso-claro); color: var(--aviso); padding: .6rem 2rem; font-size: .9rem; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.aviso-banda form { display: inline; }

.progreso { height: 10px; background: var(--linea); border-radius: 999px; overflow: hidden; }
.progreso > span { display: block; height: 100%; background: var(--valido); transition: width .4s; }

.filtros { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: 1rem; }
.filtros .campo { margin: 0; min-width: 150px; }
.paginacion { display: flex; gap: .3rem; margin-top: 1rem; }
.paginacion a, .paginacion span { padding: .3rem .6rem; border: 1px solid var(--linea); border-radius: var(--radio); text-decoration: none; font-size: .85rem; }
.paginacion .actual { background: var(--tinta); color: var(--blanco); border-color: var(--tinta); }

dl.datos { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.25rem; margin: 0; }
dl.datos dt { color: var(--tinta-tenue); font-size: .85rem; }
dl.datos dd { margin: 0; }

/* ---------------------------------------------------------------- Verificación pública */
.veredicto {
  font-family: var(--serif); font-size: 2.4rem; letter-spacing: .06em;
  padding: 1rem 1.5rem; border: 3px double currentColor; display: inline-block;
  transform: rotate(-2deg); margin: 1rem 0 1.5rem;
}
.veredicto.valido { color: var(--valido); }
.veredicto.revocado, .veredicto.no-existe { color: var(--sello); }
.veredicto.vencido { color: var(--aviso); }
.contador { font-size: .9rem; color: var(--tinta-tenue); }
.formulario-codigo { display: flex; gap: .5rem; max-width: 420px; }
.formulario-codigo input { font-family: var(--mono); letter-spacing: .15em; text-transform: uppercase; font-size: 1.1rem; }

@media (prefers-reduced-motion: reduce) {
  .progreso > span { transition: none; }
}
@media print {
  .lateral, .cabecera .acciones, .filtros, .paginacion { display: none !important; }
  .app { display: block; }
}

/* ---------------------------------------------------------------- Timeline de entrega */
.timeline { list-style: none; margin: 0; padding: 0 0 0 1.1rem; border-left: 2px solid var(--linea); }
.timeline li { position: relative; padding: 0 0 .9rem .9rem; }
.timeline-punto { position: absolute; left: -1.1rem; top: .35rem; width: 10px; height: 10px; border-radius: 50%; background: var(--linea-fuerte); margin-left: -6px; border: 2px solid var(--blanco); }
.timeline li.vigente .timeline-punto { background: var(--valido); }
.timeline li.error .timeline-punto { background: var(--sello); }
.timeline li.pendiente .timeline-punto { background: var(--oro); }

/* ---------------------------------------------------------------- Gráficos de barras (una serie) */
.barras { display: flex; align-items: flex-end; gap: 6px; height: 180px; padding-top: 1.2rem; }
.barras-densas { gap: 3px; }
.barra-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; position: relative; min-width: 0; }
.barra { width: 100%; max-width: 28px; background: var(--tinta); border-radius: 4px 4px 0 0; transition: background .15s; }
.barra-col:hover .barra { background: var(--oro); }
.barra-valor { position: absolute; top: -1.1rem; font-size: .72rem; color: var(--tinta-suave); opacity: 0; }
.barra-col:hover .barra-valor { opacity: 1; }
.barra-eje { font-size: .68rem; color: var(--tinta-tenue); margin-top: .35rem; text-align: center; line-height: 1.1; height: 1.6rem; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .barra { transition: none; } }

/* ---------------------------------------------------------------- Facturación */
.opcion-compra { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; border: 1px solid var(--linea); border-radius: var(--radio); margin-bottom: .4rem; cursor: pointer; }
.opcion-compra:has(input:checked) { border-color: var(--tinta); background: var(--info-claro); }
.opcion-compra strong { min-width: 120px; }
.opcion-compra span { font-weight: 600; }
.opcion-compra small { margin-left: auto; text-align: right; }

/* ---------------------------------------------------------------- Examen de auto-registro */
.pregunta { border: 1px solid var(--linea); border-radius: var(--radio); padding: .75rem 1rem; margin: 0 0 .75rem; }
.pregunta legend { font-weight: 600; padding: 0 .3rem; }
.pregunta .check { margin: .3rem 0; }

/* ---- Blog (artículos Markdown) ---- */
.articulo { font-size: 1.02rem; line-height: 1.65; }
.articulo h2 { font-size: 1.35rem; margin: 2rem 0 .6rem; }
.articulo h3 { font-size: 1.1rem; margin: 1.5rem 0 .5rem; }
.articulo p, .articulo ul, .articulo ol { margin: 0 0 1rem; }
.articulo li { margin-bottom: .3rem; }
.articulo blockquote { border-left: 3px solid var(--linea); margin: 1rem 0; padding: .2rem 1rem; color: var(--tinta-tenue); }
.articulo table { border-collapse: collapse; width: 100%; margin: 1rem 0; font-size: .92rem; }
.articulo th, .articulo td { border: 1px solid var(--linea); padding: .45rem .6rem; text-align: left; vertical-align: top; }
.articulo th { background: #f6f7f9; }
.articulo pre { background: #f6f7f9; border: 1px solid var(--linea); padding: .75rem; overflow-x: auto; font-size: .85rem; }
.articulo code { font-family: Consolas, Menlo, monospace; font-size: .92em; }
.articulo hr { border: 0; border-top: 1px solid var(--linea); margin: 1.5rem 0; }

/* ---- Portada ---- */
.publico.ancha { max-width: 1040px; }
.hero { text-align: center; padding: 2rem 0 1.5rem; }
.hero h1 { font-size: 2rem; line-height: 1.2; margin: 0 0 1rem; }
.hero-sub { font-size: 1.1rem; color: var(--tinta-tenue); max-width: 720px; margin: 0 auto 1.25rem; }
.hero-cta { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; margin: 0 0 .5rem; }
.bloque { margin-top: 3rem; }
.bloque h2 { font-size: 1.5rem; margin: 0 0 1rem; }
.pasos { padding-left: 1.4rem; line-height: 1.6; }
.pasos li { margin-bottom: .6rem; }
.rejilla-caracteristicas { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.rejilla-caracteristicas h3 { margin: 0 0 .4rem; font-size: 1.05rem; }
.rejilla-caracteristicas p { margin: 0; color: var(--tinta-tenue); font-size: .95rem; }
.rejilla-planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; }
.plan h3 { margin: 0 0 .25rem; }
.plan .precio { font-size: 1.6rem; font-weight: 700; margin: 0 0 .75rem; }
.plan .precio span { font-size: .85rem; font-weight: 400; color: var(--tinta-tenue); }
.plan ul { padding-left: 1.1rem; margin: 0 0 1rem; font-size: .9rem; line-height: 1.5; }
.plan-destacado { border-color: var(--acento, #1b2a41); box-shadow: 0 0 0 2px var(--acento, #1b2a41) inset; }
.bloque details { border-top: 1px solid var(--linea); padding: .6rem 0; }
.bloque summary { cursor: pointer; font-weight: 600; }
.bloque details p { margin: .5rem 0 0; color: var(--tinta-tenue); }
.cta-final { text-align: center; padding: 2rem 1rem; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); }
.pie-legal { margin-top: 3rem; font-size: .8rem; color: var(--tinta-tenue); display: flex; gap: 1rem; flex-wrap: wrap; justify-content: space-between; }

/* ===================== Barra superior: campana, tour, ayuda ===================== */
.barra-superior { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .55rem 2rem; background: rgba(255,255,255,.94); backdrop-filter: blur(6px); border-bottom: 1px solid var(--linea); }
.barra-titulo { font-weight: 600; color: var(--tinta-suave); font-size: .95rem; }
.barra-acciones { display: flex; align-items: center; gap: .35rem; }
.barra-boton { position: relative; width: 38px; height: 38px; border-radius: 50%; border: 1px solid transparent; background: transparent; color: var(--tinta-suave); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.barra-boton:hover, .barra-boton[aria-expanded="true"] { background: var(--papel); border-color: var(--linea); color: var(--tinta); }
.barra-boton[hidden] { display: none !important; }
.barra-contador { position: absolute; top: -2px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--oro); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.barra-contador.peligro { background: var(--sello); }
.barra-punto { position: absolute; top: 6px; right: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--sello); border: 2px solid #fff; }
.barra-usuario { display: flex; flex-direction: column; line-height: 1.15; margin-left: .5rem; font-size: .85rem; }
.barra-usuario small { color: var(--tinta-tenue); font-size: .72rem; }
.insignia.peligro { background: var(--sello-claro); color: var(--sello); }
.ayuda-enlace { font-weight: 600; text-decoration: underline; }

/* Campana */
.campana-panel { position: absolute; right: 2rem; top: calc(100% + 6px); width: 380px; max-width: calc(100vw - 2rem); max-height: 70vh; overflow-y: auto; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: 0 14px 40px rgba(27,42,65,.18); z-index: 40; }
.campana-cabecera { display: flex; justify-content: space-between; align-items: center; padding: .7rem .9rem; border-bottom: 1px solid var(--linea); font-size: .85rem; }
.campana-seccion { padding: .5rem .9rem .2rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-tenue); font-weight: 600; }
.campana-item { display: flex; gap: .6rem; align-items: flex-start; width: 100%; padding: .55rem .9rem; border: 0; border-bottom: 1px solid var(--papel); background: #fff; text-align: left; font: inherit; color: inherit; text-decoration: none; cursor: pointer; }
.campana-item:hover { background: var(--papel); }
.campana-item strong { display: block; font-size: .88rem; }
.campana-item small { color: var(--tinta-tenue); font-size: .78rem; }
.campana-item.no-leida strong { color: var(--tinta); }
.campana-item.leida { opacity: .7; }
.campana-cant { flex: 0 0 auto; min-width: 26px; padding: 0 6px; height: 22px; border-radius: 11px; font-size: .75rem; font-weight: 700; line-height: 22px; text-align: center; background: var(--aviso-claro); color: var(--aviso); }
.campana-item.tono-peligro .campana-cant { background: var(--sello-claro); color: var(--sello); }
.campana-item.tono-info .campana-cant { background: var(--info-claro); color: var(--tinta-suave); }
.campana-nivel { flex: 0 0 auto; width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; background: var(--tinta-tenue); }
.campana-nivel.nivel-exito { background: var(--valido); } .campana-nivel.nivel-aviso { background: var(--aviso); } .campana-nivel.nivel-peligro { background: var(--sello); }
.campana-vacio { padding: 1rem .9rem; color: var(--tinta-tenue); font-size: .88rem; }
.campana-pie { display: block; padding: .6rem .9rem; text-align: center; font-size: .85rem; border-top: 1px solid var(--linea); }

/* Lista de notificaciones y pendientes */
.pendientes { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.pendientes li a { display: block; padding: .6rem .8rem; border-radius: 6px; border: 1px solid var(--linea); border-left-width: 4px; text-decoration: none; color: inherit; }
.pendientes li.tono-peligro a { border-left-color: var(--sello); } .pendientes li.tono-aviso a { border-left-color: var(--oro); } .pendientes li.tono-info a { border-left-color: var(--tinta-tenue); }
.pendientes li a:hover { background: var(--papel); }
.pendientes .contador { display: inline-block; margin-left: .3rem; padding: 0 .45rem; border-radius: 999px; background: var(--papel); font-size: .78rem; font-weight: 700; }
.lista-notificaciones { list-style: none; margin: 0; padding: 0; }
.lista-notificaciones li { border-bottom: 1px solid var(--papel); }
.notif-boton { display: grid; grid-template-columns: auto 1fr; gap: .2rem .7rem; align-items: baseline; width: 100%; padding: .7rem .4rem; border: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.notif-boton:hover { background: var(--papel); }
.notif-titulo { font-weight: 600; }
.notif-cuerpo, .notif-fecha { grid-column: 2; font-size: .85rem; }
.notif-cuerpo { color: var(--tinta-suave); }
.lista-notificaciones li.leida .notif-titulo { font-weight: 500; color: var(--tinta-suave); }
.lista-notificaciones li.no-leida .notif-boton { border-left: 3px solid var(--oro); }

/* Panel lateral de ayuda */
.ayuda-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 460px; max-width: 100vw; background: #fff; border-left: 1px solid var(--linea); box-shadow: -12px 0 40px rgba(27,42,65,.16); z-index: 45; overflow-y: auto; padding: 1rem 1.25rem 2rem; }
.ayuda-panel[hidden] { display: none; }
.ayuda-cabecera { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
.ayuda-cerrar { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--linea); background: #fff; font-size: 1.2rem; cursor: pointer; }
.ayuda-panel h2 { font-size: 1.25rem; margin: .2rem 0 .8rem; }
.ayuda-cuerpo { font-size: .92rem; }
.ayuda-cuerpo h2 { font-size: 1.05rem; margin: 1.2rem 0 .4rem; }
.ayuda-cuerpo table { font-size: .85rem; }
.ayuda-acciones { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0; }
.ayuda-relacionados, .ayuda-resultados, .ayuda-tours, .ayuda-novedades { list-style: none; margin: 0; padding: 0; }
.ayuda-relacionados li, .ayuda-tours li, .ayuda-novedades li { padding: .3rem 0; border-bottom: 1px solid var(--papel); }
.ayuda-resultados li { padding: .6rem 0; border-bottom: 1px solid var(--papel); }
.ayuda-modulo h3 { margin: 0 0 .5rem; font-size: 1.02rem; }
.ayuda-modulo ul { margin: 0; padding-left: 1.1rem; font-size: .92rem; line-height: 1.7; }
.ayuda-cargando { color: var(--tinta-tenue); padding: 2rem 0; }
.ayuda-novedades { font-size: .85rem; }

/* Tours guiados */
.tour-capa { position: fixed; inset: 0; z-index: 60; background: rgba(27,42,65,.55); }
.tour-capa.con-recorte { background: transparent; }
.tour-recorte { position: fixed; z-index: 61; border-radius: 6px; box-shadow: 0 0 0 9999px rgba(27,42,65,.55), 0 0 0 3px var(--oro); pointer-events: none; transition: top .2s, left .2s, width .2s, height .2s; }
.tour-recorte[hidden] { display: none; }
.tour-popover { position: fixed; z-index: 62; width: 340px; max-width: calc(100vw - 24px); background: #fff; border-radius: 10px; box-shadow: 0 18px 50px rgba(0,0,0,.3); padding: 1rem 1.1rem; }
.tour-progreso { font-size: .72rem; color: var(--tinta-tenue); letter-spacing: .08em; text-transform: uppercase; }
.tour-popover h3 { margin: .2rem 0 .4rem; font-size: 1.05rem; }
.tour-popover p { margin: 0 0 .9rem; font-size: .9rem; color: var(--tinta-suave); }
.tour-botones { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.tour-sugerencia { position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%); z-index: 35; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .6rem 1rem; background: var(--tinta); color: #fff; border-radius: 999px; box-shadow: 0 10px 30px rgba(0,0,0,.25); font-size: .88rem; max-width: calc(100vw - 2rem); }
.tour-sugerencia .enlace-boton { color: #fff; opacity: .8; }

/* Asistente */
.asistente-boton { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 34; width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--tinta); color: #fff; box-shadow: 0 8px 24px rgba(27,42,65,.35); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.asistente-panel { position: fixed; right: 1.25rem; bottom: 5.25rem; z-index: 34; width: 380px; max-width: calc(100vw - 2.5rem); height: 480px; max-height: 70vh; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--linea); border-radius: 12px; box-shadow: 0 18px 50px rgba(27,42,65,.25); overflow: hidden; }
.asistente-panel[hidden] { display: none; }
.asistente-cabecera { display: flex; justify-content: space-between; align-items: center; padding: .6rem .9rem; border-bottom: 1px solid var(--linea); }
.asistente-mensajes { flex: 1; overflow-y: auto; padding: .8rem; display: flex; flex-direction: column; gap: .5rem; background: var(--papel); }
.asistente-msg { max-width: 88%; padding: .5rem .7rem; border-radius: 10px; font-size: .88rem; line-height: 1.45; }
.asistente-msg.bot { background: #fff; border: 1px solid var(--linea); align-self: flex-start; }
.asistente-msg.usuario { background: var(--tinta); color: #fff; align-self: flex-end; }
.asistente-fuentes { margin-top: .4rem; font-size: .78rem; }
.asistente-form { display: flex; gap: .4rem; padding: .6rem; border-top: 1px solid var(--linea); }
.asistente-form input { flex: 1; }

@media (max-width: 900px) { .barra-superior { padding: .5rem 1rem; } .barra-usuario { display: none; } .campana-panel { right: .5rem; } .ayuda-panel { width: 100vw; } }
@media print { .barra-superior, .ayuda-panel, .campana-panel, .asistente-boton, .asistente-panel, .tour-sugerencia { display: none !important; } }

/* Plantillas: lista / miniaturas */
.conmutador-vista { display: inline-flex; border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; }
.conmutador-vista .boton { border: 0; border-radius: 0; display: inline-flex; align-items: center; gap: .35rem; }
.conmutador-vista .boton + .boton { border-left: 1px solid var(--linea); }
.conmutador-vista .boton.activo { background: var(--tinta); color: #fff; }
.plantillas-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.25rem; }
.plantillas-rejilla[hidden] { display: none; }
.plantilla-tarjeta { display: flex; flex-direction: column; gap: .6rem; padding: .75rem; }
.plantilla-vista { display: block; position: relative; overflow: hidden; background: #eef1f6; border-radius: 6px; padding: 8px; }
.plantilla-vista:hover .plantilla-render { outline: 2px solid var(--oro); }
.plantilla-render { position: relative; transform-origin: top left; }
.plantilla-render .cert-lienzo { box-shadow: 0 2px 8px rgba(0,0,0,.12); border: 1px solid #d9dee6; }
.plantilla-render .cert-reverso { position: absolute !important; right: -12mm; bottom: -8mm; transform: rotate(4deg) scale(.42); transform-origin: bottom right; }
.plantilla-render .cert-campo { line-height: 1.2; white-space: pre-wrap; }
.plantilla-render .cert-linea, .plantilla-render .cert-caja { line-height: 0; font-size: 0; }
.plantilla-nombre { font-weight: 600; text-decoration: none; }
.plantilla-nombre:hover { text-decoration: underline; }
.plantilla-meta { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; font-size: .8rem; margin-top: .3rem; }
.plantilla-acciones { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }

/* Menú lateral: desplazable, pie siempre visible y colapsable */
.lateral nav { flex: 1; overflow-y: auto; min-height: 0; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent; }
.lateral .pie { flex: 0 0 auto; padding-bottom: .75rem; }
.lateral .pie a { color: #b9c2d0; }
.lateral .pie a:hover { color: #fff; }
.marca-fila { display: flex; align-items: center; justify-content: space-between; padding-right: .6rem; }
.marca-fila .marca { padding-bottom: 1.25rem; }
.menu-colapsar { width: 30px; height: 30px; margin-bottom: 1.25rem; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); background: transparent; color: #d5dbe6; font-size: 1rem; line-height: 1; cursor: pointer; }
.menu-colapsar:hover { background: rgba(255,255,255,.1); color: #fff; }
.barra-izquierda { display: flex; align-items: center; gap: .4rem; min-width: 0; }
body.menu-colapsado .app { grid-template-columns: 1fr; }
body.menu-colapsado .lateral { display: none; }
@media (max-width: 860px) {
  .menu-colapsar { display: none; }
  body.menu-colapsado .app { grid-template-columns: 1fr; }
}