/* ==========================================================================
   Portal de trámites · estilos de componentes (prefijo tp-)
   Dónde pegarlo: WordPress > Apariencia > Personalizar > CSS adicional
   (o en el CSS del tema hijo). Se pega UNA vez; sirve para todos los artículos.
   Paleta oficial: primario #0F172A, secundario #2563EB, CTA #D97706,
   fondo #F8FAFC, cajas #FFFFFF con borde #E2E8F0.
   ========================================================================== */

:root {
  --tp-primary: #0F172A;
  --tp-secondary: #2563EB;
  --tp-accent: #D97706;
  --tp-accent-dark: #B45309;
  --tp-bg: #F8FAFC;
  --tp-card: #FFFFFF;
  --tp-line: #E2E8F0;
  --tp-zebra: #F1F5F9;
  --tp-muted: #475569;
}

h2[id], h3[id] { scroll-margin-top: 90px; }

/* --- Widget "última revisión" ------------------------------------------ */
.tp-meta {
  display: flex; flex-wrap: wrap; gap: .35em 1.4em;
  margin: 0 0 1.25em; padding: .7em 1em;
  background: var(--tp-card); border: 1px solid var(--tp-line);
  border-left: 4px solid var(--tp-secondary); border-radius: 8px;
  font-size: .9rem; color: var(--tp-muted);
}
.tp-meta strong { color: var(--tp-primary); }

/* --- Respuesta directa (snippet) --------------------------------------- */
.tp-lead {
  margin: 0 0 1.25em; font-size: 1.125em; line-height: 1.6;
  font-weight: 500; color: var(--tp-primary);
}

/* --- Huecos de anuncio ------------------------------------------------------
   Vacío = no ocupa espacio (antes de la aprobación no se ven huecos).
   Con un anuncio dentro aparece la etiqueta "Publicidad", como exige Google. */
.tp-ad { margin: 1.75em auto; text-align: center; clear: both; }
.tp-ad:empty { display: none; }
.tp-ad:has(ins, iframe)::before {
  content: "Publicidad"; display: block; margin-bottom: 6px;
  font: 600 11px/1 system-ui, sans-serif; letter-spacing: .08em;
  text-transform: uppercase; color: #64748B;
}

/* --- Cajas de aviso ---------------------------------------------------------- */
.tp-box {
  margin: 1.5em 0; padding: 1em 1.2em;
  border: 1px solid; border-left-width: 5px; border-radius: 10px;
  color: var(--tp-primary);
}
.tp-box__title {
  margin: 0 0 .4em; font-size: .85em; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
.tp-box > :last-child { margin-bottom: 0; }
.tp-box ul { margin: .4em 0 0; padding-left: 1.2em; }
.tp-box--alerta  { background: #FFFBEB; border-color: #F59E0B; }
.tp-box--consejo { background: #EFF6FF; border-color: var(--tp-secondary); }
.tp-box--rechazo { background: #FEF2F2; border-color: #DC2626; }

/* --- Índice ---------------------------------------------------------------- */
.tp-toc {
  margin: 1.5em 0; padding: 1em 1.2em;
  background: var(--tp-card); border: 1px solid var(--tp-line); border-radius: 10px;
}
.tp-toc__title { margin: 0 0 .4em; font-weight: 700; color: var(--tp-primary); }
.tp-toc ol { margin: 0; padding-left: 1.3em; }
.tp-toc li { margin: .25em 0; }
.tp-toc a { color: var(--tp-secondary); text-decoration: none; }
.tp-toc a:hover, .tp-toc a:focus-visible { text-decoration: underline; }

/* --- Stepper de pasos ---------------------------------------------------------- */
.tp-progress {
  display: flex; flex-wrap: wrap; gap: .4em .5em; align-items: center;
  margin: 1em 0 1.25em;
}
.tp-progress__paso {
  padding: .3em .85em; border-radius: 999px; font-size: .9rem; font-weight: 600;
  background: var(--tp-primary); color: #fff;
}
.tp-progress__sep { color: var(--tp-muted); }
.tp-steps { counter-reset: tp-step; margin: 1em 0; }
.tp-step {
  counter-increment: tp-step; position: relative;
  margin: 0 0 1.1em; padding: 1em 1.2em 1em 3.7em;
  background: var(--tp-card); border: 1px solid var(--tp-line); border-radius: 12px;
}
.tp-step::before {
  content: counter(tp-step); position: absolute; left: .9em; top: 1em;
  width: 2em; height: 2em; display: grid; place-items: center;
  border-radius: 50%; background: var(--tp-primary); color: #fff; font-weight: 700;
}
.tp-step h3 { margin: 0 0 .4em; font-size: 1.15em; color: var(--tp-primary); }
.tp-step > :last-child { margin-bottom: 0; }
.tp-step ul { margin: .4em 0; padding-left: 1.2em; }

/* --- Tabla comparativa --------------------------------------------------------- */
.tp-table-wrap { margin: 1.25em 0; overflow-x: auto; border: 1px solid var(--tp-line); border-radius: 10px; }
.tp-table { width: 100%; min-width: 560px; border-collapse: collapse; background: #fff; font-size: .95rem; }
.tp-table th {
  padding: .7em .9em; text-align: left; background: var(--tp-primary); color: #fff; font-weight: 600;
}
.tp-table td { padding: .7em .9em; vertical-align: top; border-top: 1px solid var(--tp-line); }
.tp-table tbody tr:nth-child(even) td { background: var(--tp-zebra); }

/* --- Checklist interactivo ------------------------------------------------------ */
.tp-check {
  margin: 1.25em 0; padding: 1em 1.2em;
  background: var(--tp-card); border: 1px solid var(--tp-line); border-radius: 10px;
}
.tp-check__head { display: flex; justify-content: space-between; gap: 1em; align-items: baseline; margin-bottom: .5em; }
.tp-check__title { margin: 0; font-weight: 700; color: var(--tp-primary); }
.tp-check__count {
  font-size: .85rem; font-weight: 600; color: var(--tp-secondary); white-space: nowrap;
}
.tp-check.is-done { border-color: var(--tp-secondary); }
.tp-check.is-done .tp-check__count::before { content: "\2714  "; }
.tp-check ul { margin: 0; padding: 0; list-style: none; }
.tp-check li { margin: 0; }
.tp-check label {
  display: flex; gap: .7em; align-items: flex-start; padding: .45em 0; cursor: pointer;
}
.tp-check input { flex: none; width: 1.15em; height: 1.15em; margin-top: .25em; accent-color: var(--tp-secondary); }
.tp-check input:checked + span { color: var(--tp-muted); text-decoration: line-through; }

/* --- Botón CTA (texto oscuro: el blanco sobre ámbar solo da 3,2:1) -------------- */
.tp-btn {
  display: inline-block; padding: .7em 1.2em; border-radius: 8px;
  background: var(--tp-accent); color: var(--tp-primary) !important;
  font-weight: 700; text-decoration: none !important;
}
.tp-btn:hover { background: var(--tp-accent-dark); color: #fff !important; }
.tp-btn:focus-visible { outline: 3px solid var(--tp-secondary); outline-offset: 2px; }

/* --- FAQ, fuentes y descargo --------------------------------------------------------- */
.tp-faq { margin: 1em 0; }
.tp-faq h3 { margin: 1.1em 0 .3em; font-size: 1.05em; color: var(--tp-primary); }
.tp-faq p { margin: 0 0 .6em; }
.tp-sources {
  margin: 1.5em 0; padding: 1em 1.2em; font-size: .92rem;
  background: var(--tp-card); border: 1px solid var(--tp-line); border-radius: 10px;
}
.tp-sources p { margin: 0 0 .4em; font-weight: 700; color: var(--tp-primary); }
.tp-sources ul { margin: 0; padding-left: 1.2em; }
.tp-disclaimer {
  margin: 1.5em 0 0; padding: 1em 1.2em; font-size: .88rem; line-height: 1.55;
  background: var(--tp-zebra); border: 1px solid var(--tp-line);
  border-left: 4px solid var(--tp-primary); border-radius: 8px; color: var(--tp-muted);
}
.tp-disclaimer strong { color: var(--tp-primary); }

@media (max-width: 600px) {
  .tp-step { padding-left: 3.4em; }
  .tp-check__head { flex-direction: column; gap: .2em; }

  /* La tabla pasa a tarjetas: sin scroll lateral. Requiere data-label en cada td. */
  .tp-table-wrap { overflow: visible; border: 0; background: none; }
  .tp-table { min-width: 0; background: none; }
  .tp-table thead { position: absolute; left: -9999px; }
  .tp-table, .tp-table tbody, .tp-table tr, .tp-table td { display: block; }
  .tp-table tbody tr {
    margin: 0 0 .9em; overflow: hidden;
    background: var(--tp-card); border: 1px solid var(--tp-line); border-radius: 10px;
  }
  .tp-table tbody tr:nth-child(even) { background: var(--tp-zebra); }
  .tp-table tbody tr:nth-child(n) td { background: transparent; padding: .55em .9em; }
  .tp-table tbody tr td:first-child {
    background: var(--tp-primary); color: #fff; border-top: 0;
  }
  .tp-table tbody tr td:first-child strong { color: #fff; }
  .tp-table tbody tr td:not(:first-child)::before {
    content: attr(data-label); display: block; margin-bottom: .1em;
    font-size: .72rem; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--tp-muted);
  }
}

/* ==========================================================================
   Página maestra (portada) y páginas fijas
   ========================================================================== */
.tp-hero__lead { margin: 0 0 1em; font-size: 1.2em; line-height: 1.6; color: var(--tp-primary); }

.tp-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 1.5em 0; }
.tp-cat {
  display: flex; flex-direction: column; gap: .35em; padding: 1.1em 1.2em;
  background: var(--tp-card); border: 1px solid var(--tp-line); border-top: 4px solid var(--tp-secondary);
  border-radius: 12px; text-decoration: none; color: var(--tp-primary);
}
.tp-cat:hover, .tp-cat:focus-visible { border-color: var(--tp-secondary); box-shadow: 0 2px 10px rgba(15, 23, 42, .08); }
.tp-cat__name { font-weight: 700; font-size: 1.05em; }
.tp-cat__desc { font-size: .92rem; line-height: 1.5; color: var(--tp-muted); }
.tp-cat__count { margin-top: auto; font-size: .82rem; font-weight: 600; color: var(--tp-secondary); }

.tp-guides { list-style: none; margin: .4em 0 1.2em; padding: 0; display: grid; gap: 8px; }
.tp-guides li {
  display: flex; flex-direction: column; gap: .15em; margin: 0; padding: .7em 1em;
  background: var(--tp-card); border: 1px solid var(--tp-line); border-radius: 10px;
}
.tp-guides a { font-weight: 600; color: var(--tp-secondary); text-decoration: none; }
.tp-guides a:hover, .tp-guides a:focus-visible { text-decoration: underline; }
.tp-guides span { font-size: .9rem; line-height: 1.45; color: var(--tp-muted); }
.tp-guides--start { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.tp-sub { margin: 1.1em 0 .2em; font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--tp-muted); }

.tp-trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 1em 0; }
.tp-trust div {
  display: flex; flex-direction: column; gap: .3em; padding: 1em 1.2em;
  background: var(--tp-card); border: 1px solid var(--tp-line); border-left: 4px solid var(--tp-accent); border-radius: 10px;
}
.tp-trust strong { color: var(--tp-primary); }
.tp-trust span { font-size: .92rem; color: var(--tp-muted); }

/* Marca visible para datos que faltan; desaparece al rellenarlos en site.config.json */
.tp-pendiente { padding: 0 .3em; border-radius: 3px; background: #FEF08A; color: var(--tp-primary); font-weight: 700; }

/* ==========================================================================
   Calculadora (artículo 30)
   ========================================================================== */
.tp-calc {
  margin: 1.5em 0; padding: 1.2em 1.3em;
  background: var(--tp-card); border: 1px solid var(--tp-line);
  border-top: 4px solid var(--tp-secondary); border-radius: 12px;
}
.tp-calc__title { margin: 0 0 .2em; font-size: 1.15em; font-weight: 700; color: var(--tp-primary); }
.tp-calc__intro { margin: 0 0 1em; font-size: .92rem; color: var(--tp-muted); }
.tp-calc__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .9em; }
.tp-field { display: flex; flex-direction: column; gap: .3em; }
/* display:flex gana al [hidden] del navegador: hay que forzarlo */
.tp-field[hidden] { display: none; }
.tp-field label { font-size: .9rem; font-weight: 600; color: var(--tp-primary); }
.tp-field select, .tp-field input {
  width: 100%; padding: .55em .7em; font: inherit; font-size: .95rem;
  color: var(--tp-primary); background: #fff;
  border: 1px solid #94A3B8; border-radius: 8px;
}
.tp-field select:focus-visible, .tp-field input:focus-visible { outline: 3px solid var(--tp-secondary); outline-offset: 1px; }
.tp-field small { font-size: .8rem; color: var(--tp-muted); }
.tp-field--pair { display: grid; grid-template-columns: 1fr 1fr; gap: .5em; }
.tp-calc__out {
  margin-top: 1.1em; padding: 1em 1.1em;
  background: var(--tp-zebra); border: 1px solid var(--tp-line); border-radius: 10px;
}
.tp-calc__result { margin: 0 0 .5em; font-size: 1.05rem; color: var(--tp-primary); }
.tp-calc__result b { font-size: 1.5rem; display: block; margin-top: .1em; }
.tp-calc__steps { margin: .5em 0 0; padding-left: 1.2em; font-size: .9rem; color: var(--tp-muted); }
.tp-calc__steps li { margin: .2em 0; }
.tp-calc__warn { margin: .6em 0 0; font-size: .88rem; font-weight: 600; color: #B45309; }
.tp-calc__none { margin: 0; font-size: .95rem; color: var(--tp-primary); }

/* ==========================================================================
   Fotos de cabecera, titulares en mayúsculas y mejoras de navegación
   ========================================================================== */

/* --- Cabecera con foto ------------------------------------------------- */
.tp-hero {
  position: relative; margin: 0 0 1.5em; border-radius: 14px; overflow: hidden;
  background: var(--tp-primary);
}
.tp-hero img {
  display: block; width: 100%; height: clamp(180px, 34vw, 320px);
  object-fit: cover; object-position: center 42%;
}
.tp-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,23,42,.05) 0%, rgba(15,23,42,.72) 100%);
}
.tp-hero__cap {
  position: absolute; right: .7em; bottom: .5em; z-index: 1;
  font-size: .68rem; letter-spacing: .02em; color: rgba(255,255,255,.72);
}
.tp-hero__cap a { color: rgba(255,255,255,.85); text-decoration: none; }
.tp-hero__cap a:hover { text-decoration: underline; }

/* --- Titulares en mayúsculas ------------------------------------------- */
.tp-caps,
.tp-hero__lead + p + .tp-cats ~ h2,
.tp-cat__name { text-transform: uppercase; letter-spacing: .01em; }
h2[id], .tp-faq h3, .tp-step h3 { text-transform: uppercase; letter-spacing: .012em; }
h2[id] { font-size: 1.28rem; line-height: 1.3; }
.tp-step h3 { font-size: 1.02em; }
.tp-faq h3 { font-size: .98em; }
.tp-box__title { letter-spacing: .05em; }

/* --- Migas de pan -------------------------------------------------------- */
.tp-migas {
  margin: 0 0 .9em; font-size: .82rem; color: var(--tp-muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.tp-migas a { color: var(--tp-secondary); text-decoration: none; }
.tp-migas a:hover { text-decoration: underline; }
.tp-migas span { margin: 0 .45em; opacity: .6; }

/* --- Barra de progreso de lectura ---------------------------------------- */
.tp-progreso {
  position: fixed; top: 0; left: 0; z-index: 9999;
  height: 3px; width: 0; background: var(--tp-accent);
  transition: width .1s linear;
}

/* --- Volver arriba --------------------------------------------------------- */
.tp-arriba {
  position: fixed; right: 16px; bottom: 16px; z-index: 900;
  width: 44px; height: 44px; display: none; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: var(--tp-primary); color: #fff; font-size: 20px; line-height: 1;
  box-shadow: 0 2px 10px rgba(15,23,42,.28);
}
.tp-arriba.is-visible { display: grid; }
.tp-arriba:hover { background: var(--tp-secondary); }
.tp-arriba:focus-visible { outline: 3px solid var(--tp-accent); outline-offset: 2px; }

/* --- Buscador de guías de la portada ------------------------------------- */
.tp-buscador { margin: 1.2em 0 .6em; }
.tp-buscador label { display: block; margin-bottom: .35em; font-weight: 700; color: var(--tp-primary); text-transform: uppercase; letter-spacing: .04em; font-size: .85rem; }
.tp-buscador input {
  width: 100%; padding: .75em .9em; font: inherit; font-size: 1rem;
  color: var(--tp-primary); background: #fff;
  border: 1px solid #94A3B8; border-radius: 10px;
}
.tp-buscador input:focus-visible { outline: 3px solid var(--tp-secondary); outline-offset: 1px; }
.tp-buscador__n { margin: .5em 0 0; font-size: .88rem; color: var(--tp-muted); }
.tp-dir li[hidden], .tp-guides li[hidden] { display: none; }
.tp-sub[hidden], .tp-dir h3[hidden] { display: none; }

/* --- Tarjeta de categoría con foto --------------------------------------- */
.tp-cat { overflow: hidden; padding: 0; }
.tp-cat__foto { display: block; width: 100%; height: 118px; object-fit: cover; }
.tp-cat__txt { display: flex; flex-direction: column; gap: .35em; padding: 1em 1.1em 1.1em; }

@media (max-width: 600px) {
  h2[id] { font-size: 1.16rem; }
  .tp-hero img { height: 190px; }
}

/* --- Títulos en mayúsculas (portada, artículos y páginas) ------------------
   Se aplica al H1 del contenido. En WordPress el H1 lo pinta el tema, por eso
   se cubren las clases habituales además del selector genérico. */
.sh-card h1,
.entry-title, h1.entry-title,
.wp-block-post-title, .page-title, article h1 {
  text-transform: uppercase; letter-spacing: .005em;
}