/* r17 · «La semana del Tío Paco» (js/modules/50-tio-paco.js): tarjeta destacada con borde neón en Noticias, bloque chico en el Inicio,
   página de la columna, «Los archivos del Tío Paco» y el panel del Súper Admin.
   Móvil primero (390 px sin desplazamiento horizontal). Oscuro por defecto (el Hub es oscuro); claro con prefers-color-scheme: light
   o con data-theme="light" en <html>. La animación del borde se apaga con prefers-reduced-motion. */
:root {
  --tp-fondo: var(--sup-1, #14123a);
  --tp-fondo-2: var(--sup-2, #1d1a4f);
  --tp-texto: var(--texto, #f4f3ff);
  --tp-suave: var(--suave, #b9b6dd);
  --tp-linea: var(--linea, #2f2b70);
  --tp-neon-1: #ff2d55;
  --tp-neon-2: #8b5cf6;
  --tp-neon-3: #00d4ff;
  --tp-acento: var(--violeta-texto, #b49dff);
  --tp-oro: #ffc94a;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --tp-fondo: #ffffff; --tp-fondo-2: #f4f2ff; --tp-texto: #1b1640; --tp-suave: #4d4878; --tp-linea: #d9d4f5;
    --tp-neon-1: #e0103a; --tp-neon-2: #6d3ae8; --tp-neon-3: #0089b3; --tp-acento: #5a2fd6; --tp-oro: #9a6a00;
  }
}
:root[data-theme="light"] {
  --tp-fondo: #ffffff; --tp-fondo-2: #f4f2ff; --tp-texto: #1b1640; --tp-suave: #4d4878; --tp-linea: #d9d4f5;
  --tp-neon-1: #e0103a; --tp-neon-2: #6d3ae8; --tp-neon-3: #0089b3; --tp-acento: #5a2fd6; --tp-oro: #9a6a00;
}

@property --tp-giro { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* ---------- tarjeta (Noticias e Inicio) ---------- */
.tp-destacada, .tp-inicio { margin: 0 0 18px; max-width: 100%; }
.tp-tarjeta {
  position: relative; display: grid; gap: 6px; padding: 18px 18px 16px; border-radius: var(--r-l, 16px);
  background: var(--tp-fondo); color: var(--tp-texto); text-decoration: none; isolation: isolate; overflow: hidden;
  border: 2px solid transparent; min-height: var(--toque, 44px); box-sizing: border-box; max-width: 100%;
  background: linear-gradient(var(--tp-fondo), var(--tp-fondo)) padding-box,
              conic-gradient(from var(--tp-giro), var(--tp-neon-1), var(--tp-neon-2), var(--tp-neon-3), var(--tp-neon-2), var(--tp-neon-1)) border-box;
  box-shadow: 0 0 14px color-mix(in srgb, var(--tp-neon-2) 45%, transparent), 0 0 28px color-mix(in srgb, var(--tp-neon-1) 18%, transparent);
  animation: tp-giro 7s linear infinite, tp-brillo 3.5s ease-in-out infinite alternate;
}
.tp-tarjeta:hover, .tp-tarjeta:focus-visible { color: var(--tp-texto); text-decoration: none; transform: translateY(-1px); }
.tp-tarjeta:focus-visible { outline: 3px solid var(--tp-neon-3); outline-offset: 3px; }
@keyframes tp-giro { to { --tp-giro: 360deg; } }
@keyframes tp-brillo {
  from { box-shadow: 0 0 10px color-mix(in srgb, var(--tp-neon-2) 35%, transparent), 0 0 22px color-mix(in srgb, var(--tp-neon-1) 12%, transparent); }
  to   { box-shadow: 0 0 18px color-mix(in srgb, var(--tp-neon-2) 55%, transparent), 0 0 34px color-mix(in srgb, var(--tp-neon-1) 24%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .tp-tarjeta { animation: none; } .tp-tarjeta:hover { transform: none; } }
.tp-etq { font: 700 12px/1.2 var(--f-datos, sans-serif); letter-spacing: .08em; text-transform: uppercase; color: var(--tp-oro); }
.tp-nombre { font: 800 26px/1.05 var(--f-display, sans-serif); color: var(--tp-texto); overflow-wrap: anywhere; }
.tp-fecha { font: 600 14px/1.3 var(--f-texto, sans-serif); color: var(--tp-suave); }
.tp-entrada { font: italic 500 16px/1.45 var(--f-texto, sans-serif); color: var(--tp-texto); overflow-wrap: anywhere; }
.tp-leer { margin-top: 4px; font: 700 15px/1.2 var(--f-texto, sans-serif); color: var(--tp-acento); }
.tp-leer::after { content: ' ›'; }
/* r17z: la tarjeta lleva el dibujo del Tío a la izquierda: [dibujo][texto] (Noticias) y [dibujo][texto][Leer] (Inicio). */
.tp-tarjeta { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 14px; }
.tp-cuerpo { display: grid; gap: 6px; min-width: 0; }
.tp-tarjeta .tp-entrada { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
/* r17zd: la vista previa es el comienzo de la primera sección (título en negrita + primeras palabras): sin cursiva; 2 líneas en el teléfono y 3 en la computadora. */
.tp-tarjeta .tp-previa { font-style: normal; font-weight: 500; }
.tp-previa strong { font-weight: 800; }
.tp-tarjeta-chica { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 12px; padding: 12px 14px; }
.tp-tarjeta-chica .tp-cuerpo { gap: 3px; }
.tp-tarjeta-chica .tp-nombre { font-size: 20px; }
.tp-tarjeta-chica .tp-fecha { font-size: 13px; }
.tp-tarjeta-chica .tp-entrada { font-size: 14px; }
.tp-tarjeta-chica > .tp-leer { margin: 0; white-space: nowrap; }
@media (min-width: 1024px) { .tp-tarjeta .tp-entrada { -webkit-line-clamp: 3; } .tp-nombre { font-size: 32px; } .tp-tarjeta { padding: 22px 24px 20px; column-gap: 20px; } .tp-entrada { font-size: 17px; } .tp-tarjeta-chica { padding: 14px 18px; column-gap: 16px; } .tp-tarjeta-chica .tp-nombre { font-size: 22px; } .tp-tarjeta-chica .tp-entrada { font-size: 15px; } }

/* Inicio: dentro de la sección de noticias, entre la cabecera y la primera noticia. */
.home-noticias #news-slider-container > .tp-inicio { margin: 0 0 16px; }
@media (min-width: 1024px) { .home-noticias #news-slider-container > .tp-inicio { margin: 0 0 20px; } }

/* ---------- caricatura OFICIAL del Tío (img/tio-paco/, 10 gestos, fondo transparente) + vapor del café animado encima de su taza ---------- */
.tp-tio { position: relative; display: block; flex: none; line-height: 0; }
.tp-tio picture, .tp-tio .tp-tio-img { display: block; width: 100%; height: auto; }
.tp-tio .tp-tio-img { aspect-ratio: 1 / 1; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35)); }
.tp-tio-chica { width: 64px; }
.tp-tio-media { width: 84px; }
.tp-tio-grande { width: 168px; margin: 0 auto; }
@media (min-width: 560px) { .tp-tio-media { width: 104px; } .tp-tio-chica { width: 72px; } }
@media (min-width: 1024px) { .tp-tio-media { width: 124px; } .tp-tio-chica { width: 78px; } .tp-tio-grande { width: 210px; } }
/* el vapor: 3 trazos en las coordenadas de la imagen (encima de la taza de cada gesto) */
.tp-tio .tp-tio-humo { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.tp-tio .tp-tio-vapor { fill: none; stroke: #f4f1ff; stroke-width: 2.2; stroke-linecap: round; opacity: .85; transform-box: fill-box; transform-origin: 50% 100%;
  filter: drop-shadow(0 0 1.5px rgba(18, 15, 48, .55)); animation: tp-vapor 3s ease-in-out infinite; }
.tp-tio .tp-tio-v2 { animation-delay: -1s; }
.tp-tio .tp-tio-v3 { animation-delay: -2s; }
@keyframes tp-vapor {
  0% { opacity: 0; transform: translateY(5px) scaleY(.85); }
  35% { opacity: .9; }
  100% { opacity: 0; transform: translateY(-7px) scaleY(1.05); }
}
@media (prefers-reduced-motion: reduce) { .tp-tio .tp-tio-vapor { animation: none; opacity: .75; transform: none; } }
/* avatar redondo: cara y boina («Los archivos del Tío Paco») */
.tp-tio-avatar { display: block; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; flex: none; line-height: 0;
  background: color-mix(in srgb, var(--tp-neon-2, #7b5cff) 28%, transparent); border: 2px solid color-mix(in srgb, var(--tp-neon-3, #3ad7ff) 60%, transparent); }
.tp-tio-avatar picture, .tp-tio-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* página de la columna: el dibujo grande arriba */
.tp-retrato { display: flex; justify-content: center; margin: 0 0 10px; padding-bottom: 12px; border-bottom: 1px solid var(--tp-linea); }

/* ---------- página de la columna ---------- */
.tp-pagina { display: grid; gap: 18px; max-width: 760px; margin: 0 auto; padding: 4px 0 calc(96px + env(safe-area-inset-bottom, 0px)); box-sizing: border-box; min-width: 0; }
.tp-columna { background: var(--tp-fondo); color: var(--tp-texto); border: 1px solid var(--tp-linea); border-radius: var(--r-l, 16px); padding: 18px 16px; min-width: 0; overflow-wrap: anywhere; }
.tp-cab { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; margin-bottom: 6px; }
.tp-texto h1, .tp-t-h1 { font: 800 30px/1.08 var(--f-display, sans-serif); margin: 4px 0 12px; color: var(--tp-texto); }
.tp-texto h2 { font: 700 21px/1.2 var(--f-datos, sans-serif); margin: 18px 0 8px; color: var(--tp-texto); }
.tp-texto p { font: 400 17px/1.62 var(--f-texto, sans-serif); margin: 0 0 14px; color: var(--tp-texto); }
.tp-texto p:first-of-type em { color: var(--tp-suave); font-size: 18px; }
.tp-texto strong { color: var(--tp-oro); font-weight: 700; }
.tp-nav { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; }
.tp-nav .mc-btn { min-height: var(--toque, 44px); display: inline-flex; align-items: center; }
.tp-archivo-enlace { display: grid; gap: 4px; padding: 16px; border-radius: var(--r-l, 16px); border: 1px dashed var(--tp-acento); background: var(--tp-fondo-2); color: var(--tp-texto); text-decoration: none; min-height: var(--toque, 44px); }
.tp-archivo-enlace:hover, .tp-archivo-enlace:focus-visible { color: var(--tp-texto); border-style: solid; text-decoration: none; }
.tp-archivo-t { font: 800 22px/1.1 var(--f-display, sans-serif); color: var(--tp-acento); }
.tp-archivo-t::after { content: ' ›'; }
.tp-suave { color: var(--tp-suave); font: 400 15px/1.45 var(--f-texto, sans-serif); margin: 0; }
.tp-vacio p { margin: 0; color: var(--tp-suave); }
@media (min-width: 1024px) { .tp-columna { padding: 30px 36px; } .tp-texto h1 { font-size: 40px; } .tp-texto p { font-size: 18px; } }

/* ---------- archivo ---------- */
.tp-archivo-cab { display: grid; gap: 6px; }
.tp-archivo-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.tp-archivo-item { display: grid; gap: 4px; padding: 14px 16px; border-radius: var(--r-l, 16px); border: 1px solid var(--tp-linea); background: var(--tp-fondo); color: var(--tp-texto); text-decoration: none; min-height: var(--toque, 44px); }
.tp-archivo-item:hover, .tp-archivo-item:focus-visible { color: var(--tp-texto); border-color: var(--tp-acento); text-decoration: none; }
.tp-archivo-nueva { border-color: var(--tp-neon-2); box-shadow: 0 0 12px color-mix(in srgb, var(--tp-neon-2) 35%, transparent); }
.tp-archivo-titulo { font: 700 19px/1.25 var(--f-datos, sans-serif); overflow-wrap: anywhere; }
.tp-archivo-item .tp-entrada { font-size: 15px; color: var(--tp-suave); }

/* ---------- panel del Súper Admin (usa los colores del panel, que siempre es oscuro) ---------- */
.tp-adm { display: grid; gap: 14px; min-width: 0;
  --tp-fondo: var(--sup-1, #14123a); --tp-fondo-2: var(--sup-2, #1d1a4f); --tp-texto: var(--texto, #f4f3ff); --tp-suave: var(--suave, #b9b6dd); --tp-linea: var(--linea, #2f2b70); --tp-acento: var(--violeta-texto, #b49dff); --tp-oro: #ffc94a; --tp-neon-2: #8b5cf6; }
.tp-adm-lista { display: grid; gap: 8px; }
#panel-tiopaco-admin .tp-adm-item, .tp-adm .tp-adm-item { display: grid; justify-items: start; gap: 2px; text-align: left; font: inherit; box-shadow: none; background: var(--sup-1, #14123a) !important; color: var(--texto, #f4f3ff) !important; justify-content: start; align-content: start; padding: 10px 12px; border-radius: var(--r-m, 10px); border: 1px solid var(--tp-linea); background: var(--tp-fondo); color: var(--tp-texto); min-height: var(--toque, 44px); cursor: pointer; }
.tp-adm .tp-adm-item[aria-pressed="true"] { border-color: var(--tp-neon-2); box-shadow: 0 0 0 1px var(--tp-neon-2) inset; }
.tp-adm-estado { font: 700 14px var(--f-datos, sans-serif); }
.tp-est-borrador .tp-adm-estado { color: var(--tp-oro); }
.tp-est-publicada .tp-adm-estado { color: var(--ok, #20e89b); }
.tp-est-rechazada .tp-adm-estado { color: var(--error, #ff6b6b); }
.tp-adm-meta { display: grid; gap: 2px; }
.tp-adm-dos { display: grid; gap: 12px; min-width: 0; }
.tp-adm-texto { width: 100%; box-sizing: border-box; font: 400 15px/1.5 ui-monospace, Menlo, monospace; min-height: 280px; resize: vertical; }
.tp-adm-vista { max-height: 520px; overflow: auto; }
.tp-adm-rechazo { display: flex; flex-wrap: wrap; gap: 8px; }
.tp-adm-rechazo input { flex: 1 1 220px; min-width: 0; }
.tp-adm-res { margin: 0; font-weight: 600; }
.tp-adm-revision { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--error, #ff6b6b); border-radius: 10px; }
.tp-adm-revision ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
@media (min-width: 1100px) { .tp-adm-dos { grid-template-columns: 1fr 1fr; } }
/* panel: elegir el gesto del Tío (10 miniaturas) */
.tp-adm-gesto-caja { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; min-width: 0; }
.tp-adm-gesto-txt { display: grid; gap: 6px; min-width: 0; }
.tp-adm-gestos { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.tp-adm .tp-adm-gesto { display: grid; justify-items: center; gap: 2px; padding: 4px; min-height: var(--toque, 44px); border-radius: 10px; border: 1px solid var(--tp-linea); background: var(--tp-fondo-2); color: var(--tp-texto); font: 600 11px/1.15 var(--f-datos, sans-serif); text-align: center; cursor: pointer; box-shadow: none; }
.tp-adm .tp-adm-gesto img { width: 52px; height: 52px; display: block; }
.tp-adm .tp-adm-gesto[aria-checked="true"] { border-color: var(--tp-neon-2); box-shadow: 0 0 0 2px var(--tp-neon-2) inset; background: color-mix(in srgb, var(--tp-neon-2) 22%, var(--tp-fondo-2)); }
.tp-adm .tp-adm-gesto:disabled { opacity: .55; cursor: default; }
.tp-adm-gesto-n { overflow-wrap: anywhere; }
@media (max-width: 480px) { .tp-adm-gesto-caja { grid-template-columns: 1fr; } .tp-adm-retrato { display: none; } }

.ticker-fino .tf-item.tf-tiopaco { color: var(--tp-texto, inherit); }
.ticker-fino .tf-item.tf-tiopaco .tf-liga { font-weight: 800; }
.ticker-fino .tf-item.tf-tiopaco .tf-tp-gancho { color: var(--texto, #fff); }
.ticker-fino .tf-item.tf-tiopaco .tf-tp-gancho strong { font-weight: 800; }
.ticker-fino .tf-item.tf-tiopaco .tf-tp-leer { font-weight: 800; color: var(--tp-neon-3, inherit); }