/* estilos_panel.css — tokens y componentes compartidos de panel/*.php.
   Paleta e iconografía recuperadas del panel viejo (demo-bodas/public/gestion/panel.php),
   que es la que la pareja/dueña del producto siempre ha preferido (ver memoria
   feedback_diseno_premium_no_crm.md, corrección 2026-08-18). Un solo sitio para los
   tokens de color/tipografía y las clases de componente que antes se redeclaraban en el
   <style> de cada página — evita la deriva que ya existía entre páginas.
   Enlazar SIEMPRE después de Font Awesome (ver sidebar_panel.php) y antes del <style>
   propio de cada página, para que ese <style> solo tenga que aportar layout específico. */

:root {
  /* --- Marca — coral vivo, elegido 2026-08-24 (ver memoria del sistema visual) ---
     Un único acento saturado para elementos accionables e identidad. Antes era #c98a83
     (un pastel apagado que "se iba a gris" en pantalla); esto es lo mismo — mismo rol,
     mismo sitio en el código — solo que con vida. */
  --color-cta: #D94A38;
  --color-cta-hover: #C23F2E;

  /* Dorado festivo — SOLO para momentos de celebración (cuenta atrás, "¡Enhorabuena!",
     una confirmación nueva, una barra de progreso completa). Nunca en botones ni badges
     de uso normal: si aparece en todas partes deja de sentirse a fiesta. */
  --color-festivo: #F2A93A;
  --color-festivo-ink: #4A2E0A;

  /* Salvia — YA NO es el color principal (eso hacía que "verde" significara dos cosas a
     la vez: marca Y éxito). Pasa a ser un neutro decorativo tranquilo: avatares, fondos
     suaves, acentos discretos. El verde de "éxito/confirmado" vive aparte, en
     --color-success de la paleta semántica de abajo. */
  --color-brand: #cfe4df;
  --color-brand-dark: #a8c9c1;

  /* --- Escala de grises, 6 pasos con sesgo cálido (para combinar con el coral en vez de
     competir con él — el mismo motivo por el que weddings.help combina su rosa con
     crema, nunca con un gris frío tipo slate) --- */
  --gray-50: #FAF8F6;
  --gray-100: #F1EEEA;
  --gray-200: #E3DDD5;
  --gray-400: #B8AFA5;
  --gray-600: #6B6560;
  --gray-900: #26221E;

  --color-dark: #364147;
  --color-darker: #242c30;
  --color-bg: #FAF8F6;              /* crema cálido — nunca gris frío */
  --color-border: var(--gray-200);
  --color-ink: var(--gray-900);
  --color-ink-muted: var(--gray-600);

  /* --- Paleta semántica cerrada a 4 roles — éxito/aviso/error/informativo. Los iconos de
     las tarjetas de estadística solo pueden usar uno de estos, o gris neutro; nunca un
     color "porque sí" sin significado (hallazgo #2 de la auditoría). --- */
  --color-success: #2F6B4F; --color-success-bg: #E9F3EE; --color-success-border: #C9DFD2;
  --color-warning: #92600B; --color-warning-bg: #FBF1DE; --color-warning-border: #EBD9AC;
  --color-error:   #9C3B33; --color-error-bg:   #FBEBE8; --color-error-border:   #EFC7C0;
  --color-info:    #3B5D7A; --color-info-bg:    #E9F1F7; --color-info-border:    #C7DBE9;

  /* --- Paleta genérica de 6 huecos sin criterio semántico, todavía en uso por
     bus.php/fotos.php/firmas.php/presupuesto.php/invitados.php — se queda TAL CUAL en
     esta fase (solo tokens): migrar cada consumidor a los 4 roles de arriba es trabajo de
     la fase de componentes, uno en uno, no de esta pasada. --- */
  --color-total: #3b82f6; --color-total-dark: #2563eb; --color-total-bg: #eff6ff;
  --color-bus: #10b981; --color-bus-dark: #059669; --color-bus-bg: #ecfdf5;
  --color-infantil: #f59e0b; --color-infantil-dark: #d97706; --color-infantil-bg: #fffbeb;
  --color-trona: #ec4899; --color-trona-dark: #db2777; --color-trona-bg: #fdf2f8;
  --color-noasiste: #64748b; --color-noasiste-dark: #475569; --color-noasiste-bg: #f8fafc;
  --color-pendiente: #d97706; --color-pendiente-bg: #fff3cd; --color-pendiente-border: #f0dfa0;
  --color-no: #c5221f; --color-no-bg: #fce8e6; --color-no-border: #f0b8b3;

  /* --- Tipografía — Fraunces (display, cálida y con carácter) + Figtree (texto de
     interfaz, redondeada sin ser infantil, lee bien en tablas densas). Cargadas desde
     Google Fonts en sidebar_panel.php. --font-display aún no lo usa ningún componente:
     eso es fase de componentes (logo, títulos de página, "Ana & Pablo"). --- */
  --font-display: 'Fraunces', Georgia, serif;
  --font-sans: 'Figtree', -apple-system, sans-serif;
}

* { box-sizing: border-box; }
body.tsd-shell { font-family: var(--font-sans); background: var(--color-bg); color: var(--color-ink); }

/* === BOTONES === */
.btn, .btn-guardar {
  border: none; background: var(--color-cta); color: #fff; padding: 0.7rem 1.2rem; border-radius: 4px;
  font-weight: 600; font-size: 0.78rem; cursor: pointer; font-family: var(--font-sans);
  display: inline-flex; align-items: center; gap: 0.5rem; transition: background 0.2s, transform 0.15s;
}
.btn:hover, .btn-guardar:hover { background: var(--color-cta-hover); transform: translateY(-1px); }
.btn-guardar { width: 100%; justify-content: center; background: var(--color-cta); margin-top: 0.5rem; }
.btn-guardar:hover { background: var(--color-cta-hover); transform: none; }
.btn-secundario {
  background: #fff; color: #555; border: 1px solid #ccc; padding: 0.6rem 1.15rem; border-radius: 4px;
  font-weight: 600; font-size: 0.75rem; cursor: pointer; font-family: var(--font-sans);
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.btn-secundario:hover { background: var(--color-bg); }
.btn-accion {
  background: #fff; border: 1px solid #ccc; border-radius: 4px; padding: 0.4rem 0.6rem; font-size: 0.75rem;
  cursor: pointer; color: #555; font-family: var(--font-sans); font-weight: 600;
  display: inline-flex; align-items: center; gap: 4px; transition: all 0.2s;
}
.btn-accion:hover { background: var(--color-darker); color: #fff; border-color: var(--color-darker); }
.btn-accion.peligro:hover { background: var(--color-no); border-color: var(--color-no); }
.btn-texto {
  border: none; background: none; color: var(--color-ink-muted); text-decoration: underline;
  font-size: 0.78rem; cursor: pointer; font-family: var(--font-sans); padding: 0.2rem 0;
}
.btn-texto:hover { color: var(--color-darker); }

/* === ESTADOS DE FOCO/DESHABILITADO, comunes a las 4 variantes de botón === */
.btn:disabled, .btn-guardar:disabled, .btn-secundario:disabled, .btn-accion:disabled, .btn-texto:disabled {
  opacity: 0.6; cursor: not-allowed; transform: none; pointer-events: none;
}
.btn:focus-visible, .btn-guardar:focus-visible, .btn-secundario:focus-visible,
.btn-accion:focus-visible, .btn-texto:focus-visible {
  outline: 2px solid var(--color-brand-dark); outline-offset: 2px;
}
.fa-spinner { animation: tsd-girar 0.8s linear infinite; }
@keyframes tsd-girar { to { transform: rotate(360deg); } }

/* === STAT CARDS (categoría por color, icono Font Awesome) === */
.stats-grid, .stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 15px; margin-bottom: 1.6rem; }
.stat-card {
  background: #fff; border-radius: 12px; padding: 18px; display: flex; align-items: center; gap: 15px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.04); border: 1px solid #f0f0f0; border-left: 4px solid var(--color-border);
  cursor: pointer; user-select: none; transition: transform 0.15s, box-shadow 0.15s;
}
.stat-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.08); }
.stat-card.activa { outline: 2px solid var(--color-cta); outline-offset: 2px; }
.stat-card .stat-icon { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; background: var(--color-bg); color: var(--color-ink-muted); }
.stat-card h4, .stat-card .stat-num { margin: 0; font-size: 1.5rem; font-weight: 700; color: var(--color-darker); }
.stat-card p, .stat-card .stat-label { margin: 2px 0 0; font-size: 0.78rem; color: #64748b; font-weight: 600; }
.stat-card.total, .stat-card.icono-total { border-left-color: var(--color-total); }
.stat-card.total .stat-icon, .stat-card.icono-total .stat-icon { background: var(--color-total-bg); color: var(--color-total-dark); }
.stat-card.bus, .stat-card.icono-bus { border-left-color: var(--color-bus); }
.stat-card.bus .stat-icon, .stat-card.icono-bus .stat-icon { background: var(--color-bus-bg); color: var(--color-bus-dark); }
.stat-card.infantil, .stat-card.icono-infantil { border-left-color: var(--color-infantil); }
.stat-card.infantil .stat-icon, .stat-card.icono-infantil .stat-icon { background: var(--color-infantil-bg); color: var(--color-infantil-dark); }
.stat-card.trona, .stat-card.icono-trona { border-left-color: var(--color-trona); }
.stat-card.trona .stat-icon, .stat-card.icono-trona .stat-icon { background: var(--color-trona-bg); color: var(--color-trona-dark); }
.stat-card.no-asiste, .stat-card.icono-no { border-left-color: var(--color-noasiste); }
.stat-card.no-asiste .stat-icon, .stat-card.icono-no .stat-icon { background: var(--color-noasiste-bg); color: var(--color-noasiste-dark); }
.stat-card.pendiente, .stat-card.icono-pendiente { border-left-color: var(--color-pendiente); }
.stat-card.pendiente .stat-icon, .stat-card.icono-pendiente .stat-icon { background: var(--color-infantil-bg); color: var(--color-pendiente); }
.stat-card.no { border-left-color: var(--color-no); }
.stat-card.no .stat-icon { background: var(--color-no-bg); color: var(--color-no); }

/* === MICRO-INTERACCIONES DE CABECERA/ESTADÍSTICAS ===
   Auditoría 2026-08-25: la cabecera + fila de estadísticas de cada página (invitados/
   presupuesto/autobuses/fotos/firmas) no tenía ningún indicio de vida ni de que las filas
   son clicables. Tres piezas, todas ligadas a algo real (nunca decoración suelta):
   1) el icono responde al cursor (señala que la fila filtra/hace algo);
   2) destello + "ping" + "+1" flotante cuando un número sube tras una acción real —
      llamar a tsdDestellarNumero() en panel-ui.js, no se dispara solo;
   3) insignia con el número sobre el icono, pensada para cuando la cabecera se condensa
      por scroll (ver .tsd-cabecera-sticky más abajo). */
.mini-stat .icono-mini, .stat-card .stat-icon { position: relative; transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1); }
.mini-stat:hover .icono-mini, .stat-card:hover .stat-icon { transform: scale(1.14) rotate(-8deg); }

.tsd-destello { animation: tsdDestello 0.7s ease; border-radius: 6px; }
@keyframes tsdDestello { 0% { background: var(--color-success-bg); } 100% { background: transparent; } }

.icono-mini.tsd-ping::before, .stat-icon.tsd-ping::before {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid var(--color-success); animation: tsdPing 0.6s ease-out;
}
@keyframes tsdPing { from { transform: scale(0.7); opacity: 1; } to { transform: scale(1.7); opacity: 0; } }

.tsd-mas1 {
  position: absolute; top: -4px; right: -2px; font-family: var(--font-sans); font-size: 0.62rem; font-weight: 700;
  color: var(--color-success); background: var(--color-success-bg); border: 1px solid var(--color-success);
  padding: 0 4px; border-radius: 10px; opacity: 0; pointer-events: none;
}
.tsd-mas1.tsd-mostrar { animation: tsdMasUno 0.9s ease forwards; }
@keyframes tsdMasUno {
  0%   { opacity: 0; transform: translateY(4px); }
  20%  { opacity: 1; transform: translateY(0); }
  75%  { opacity: 1; transform: translateY(-11px); }
  100% { opacity: 0; transform: translateY(-15px); }
}

/* Revelado de beneficio Premium — solo para tarjetas de páginas con función bloqueada
   (añadir la clase tsd-bloqueada + un .tsd-revelado dentro cuando aplique). */
.stat-card.tsd-bloqueada { position: relative; overflow: hidden; cursor: pointer; }
.tsd-revelado {
  position: absolute; inset: 0; background: var(--color-darker); color: #fff;
  display: flex; align-items: center; gap: 8px; padding: 0 14px; font-size: 0.72rem; font-weight: 600;
  transform: translateY(100%); transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
}
.stat-card.tsd-bloqueada:hover .tsd-revelado, .stat-card.tsd-bloqueada:focus-within .tsd-revelado { transform: translateY(0); }

/* === CABECERA QUE SE CONDENSA AL HACER SCROLL ===
   Envolver .cabecera + .paneles-resumen (o .stats-grid) de una página en
   <div class="tsd-cabecera-sticky"> la activa — el listener de scroll vive en panel-ui.js
   y no hace nada si ese elemento no existe, así que el coste en el resto de páginas es cero.
   Desactivada en móvil (<=860px): ahí el sidebar ya ocupa el top:0 sticky (ver
   sidebar_panel.php), y las dos cabeceras compitiendo por el mismo sitio se pisarían. */
.tsd-cabecera-sticky { position: sticky; top: 0; z-index: 10; background: var(--color-bg); padding-bottom: 0.6rem; transition: padding 0.25s ease; }
.tsd-cabecera-sticky .cabecera { transition: margin 0.25s ease; }
.tsd-cabecera-sticky .cabecera h1 { transition: font-size 0.25s ease; }
.tsd-cabecera-sticky .mini-stat span.tsd-txt { transition: max-width 0.25s ease, opacity 0.2s ease, margin 0.25s ease; display: inline-block; overflow: hidden; white-space: nowrap; max-width: 140px; }
body.tsd-condensada .tsd-cabecera-sticky { box-shadow: 0 8px 14px -10px rgba(0,0,0,0.25); }
body.tsd-condensada .tsd-cabecera-sticky .cabecera { margin-bottom: 0.5rem; }
body.tsd-condensada .tsd-cabecera-sticky .cabecera h1 { font-size: 1.15rem; }
body.tsd-condensada .tsd-cabecera-sticky .cabecera .btn-secundario { display: none; }
body.tsd-condensada .tsd-cabecera-sticky .mini-stat span.tsd-txt { max-width: 0; opacity: 0; margin: 0; }
body.tsd-condensada .tsd-cabecera-sticky .mini-stat { padding: 0.45rem 0.7rem; }

/* Misma condensación para el patrón .stats-grid/.stat-card (presupuesto/bus/fotos/firmas):
   el grid pasa a fila flexible para que las tarjetas puedan encogerse de verdad en vez de
   quedarse ancladas al minmax(190px,1fr) del grid normal. */
.tsd-cabecera-sticky .stat-card { transition: padding 0.25s ease, gap 0.25s ease; }
.tsd-cabecera-sticky .stat-card > div:not(.stat-icon) { transition: max-width 0.25s ease, opacity 0.2s ease, margin 0.25s ease; overflow: hidden; white-space: nowrap; }
body.tsd-condensada .tsd-cabecera-sticky .stats-grid { display: flex; flex-wrap: wrap; gap: 0.6rem; }
body.tsd-condensada .tsd-cabecera-sticky .stat-card { padding: 8px 10px; gap: 8px; }
body.tsd-condensada .tsd-cabecera-sticky .stat-card > div:not(.stat-icon) { max-width: 0; opacity: 0; margin: 0; }

/* Autobuses usa su propia cabecera local (.tsd-bus-cabecera), no la .cabecera compartida */
.tsd-cabecera-sticky .tsd-bus-cabecera h1 { transition: font-size 0.25s ease; }
.tsd-cabecera-sticky .tsd-bus-cabecera p { transition: opacity 0.2s ease, max-height 0.2s ease; overflow: hidden; }
body.tsd-condensada .tsd-cabecera-sticky .tsd-bus-cabecera { margin-bottom: 0.5rem; }
body.tsd-condensada .tsd-cabecera-sticky .tsd-bus-cabecera h1 { font-size: 1.15rem; }
body.tsd-condensada .tsd-cabecera-sticky .tsd-bus-cabecera p { opacity: 0; max-height: 0; margin: 0; }

.tsd-badge-mini {
  position: absolute; top: -5px; right: -5px; background: var(--color-darker); color: #fff;
  font-family: var(--font-sans); font-size: 0.56rem; font-weight: 700; min-width: 15px; height: 15px;
  border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 3px;
  opacity: 0; transform: scale(0.4); transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow: 0 0 0 2px #fff;
}
body.tsd-condensada .tsd-badge-mini { opacity: 1; transform: scale(1); transition-delay: 0.12s; }

@media (max-width: 860px) {
  .tsd-cabecera-sticky { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  .mini-stat:hover .icono-mini, .stat-card:hover .stat-icon { transform: none; }
  .tsd-destello, .tsd-revelado, .tsd-mas1, .icono-mini.tsd-ping::before, .stat-icon.tsd-ping::before { animation: none; transition: none; }
  .tsd-cabecera-sticky, .tsd-cabecera-sticky *, .tsd-badge-mini { transition: none; }
}

/* === TABLA === */
.tabla-wrap, .tabla-contenedor { background: #fff; border: 1px solid var(--color-border); border-radius: 8px; overflow-x: auto; margin-bottom: 1.6rem; box-shadow: 0 2px 5px rgba(0,0,0,0.02); }
table { width: 100%; border-collapse: collapse; text-align: left; font-size: 0.85rem; }
th { background: var(--color-bg); color: var(--color-ink-muted); letter-spacing: 0.2px; padding: 0.9rem; font-size: 0.74rem; font-weight: 700; border-bottom: 1px solid var(--color-border); white-space: nowrap; }
th.ordenable { cursor: pointer; user-select: none; }
th.ordenable::after { content: '\2195'; opacity: 0.35; margin-left: 4px; font-size: 0.85em; }
th.ordenable.orden-asc::after { content: '\2191'; opacity: 1; }
th.ordenable.orden-desc::after { content: '\2193'; opacity: 1; }
td { padding: 0.9rem; border-bottom: 1px solid var(--color-border); color: #444; vertical-align: middle; }
.fila-acompanante td { background: #fafbfc; }
.sub-flecha { color: var(--color-ink-muted); margin-right: 0.4rem; }

/* === BADGES / PILLS ===
   Migrados a la paleta semántica cerrada (éxito/aviso/error) — "confirmado" ya no toma
   prestado el salvia de marca, tiene su propio rol de éxito, igual que en el resto de la
   app. Sin mayúsculas: solo las etiquetas de sección del menú lateral las llevan. */
.badge { display: inline-block; padding: 0.3rem 0.65rem; font-size: 0.74rem; font-weight: 600; border-radius: 20px; }
.badge-si { background: var(--color-success-bg); color: var(--color-success); }
.badge-no { background: var(--color-error-bg); color: var(--color-error); }
.badge-pendiente { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-rol { font-size: 0.68rem; padding: 0; font-weight: 500; color: var(--color-ink-muted); background: none; }
.badge-titular { background: none; color: var(--color-ink-muted); }
.badge-acomp { background: none; color: var(--color-ink-muted); }
.mesa-asignada, .mesa-pendiente { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.65rem; border-radius: 20px; font-size: 0.68rem; font-weight: 600; }
.mesa-asignada { background: #FBE4E0; color: #B93B2C; }
.mesa-pendiente { background: var(--color-error-bg); color: var(--color-error); }
.extra-tag { background: var(--color-info-bg); color: var(--color-info); padding: 0.15rem 0.5rem; border-radius: 20px; font-size: 0.68rem; font-weight: 600; }
.transporte-si { color: var(--color-success); background: var(--color-success-bg); padding: 0.2rem 0.55rem; border-radius: 20px; font-size: 0.68rem; }
.transporte-no { color: var(--color-ink-muted); background: var(--color-bg); padding: 0.2rem 0.55rem; border-radius: 20px; font-size: 0.68rem; }

.pills { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.pill { position: relative; cursor: pointer; }
.pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.pill span {
  display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.6rem 1.1rem; border: 1.5px solid #e2e2e2; border-radius: 24px;
  font-size: 0.76rem; font-weight: 600; color: #999; background: #fff; white-space: nowrap; transition: all 0.15s;
}
.pill:hover span { border-color: #ccc; color: #555; }
.pill input:checked + span.pill-si { background: var(--color-success-bg); border-color: var(--color-success-border); color: var(--color-success); }
.pill input:checked + span.pill-no { background: var(--color-error-bg); border-color: var(--color-error-border); color: var(--color-error); }
.pill input:checked + span.pill-pendiente { background: var(--color-warning-bg); border-color: var(--color-warning-border); color: var(--color-warning); }

/* === MODALES === */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 999; justify-content: center; align-items: center; padding: 1rem; backdrop-filter: blur(2px); }
.modal-overlay.abierto, .modal-overlay.activo { display: flex; }
.modal { background: #fff; border-radius: 8px; padding: 2.2rem; width: 100%; max-width: 480px; position: relative; max-height: 90vh; overflow-y: auto; box-shadow: 0 15px 30px rgba(0,0,0,0.15); }
.modal h3 { font-family: var(--font-display); font-size: 1.4rem; margin: 0 0 1.3rem; color: var(--color-ink); font-weight: 500; text-align: center; }
.modal p.hint { font-size: 0.78rem; color: var(--color-ink-muted); margin-top: -1rem; margin-bottom: 1.3rem; text-align: center; }
.modal-cerrar { position: absolute; top: 1.3rem; right: 1.3rem; background: none; border: none; font-size: 1.1rem; cursor: pointer; color: #666; }
.modal-cerrar:hover { color: var(--color-cta); }
.campo { margin-bottom: 1rem; text-align: left; }
.campo label { display: block; font-size: 0.76rem; font-weight: 600; margin-bottom: 0.35rem; color: #555; }
.campo input[type=text], .campo input[type=email], .campo input[type=tel], .campo textarea, .campo select {
  width: 100%; padding: 0.7rem 0.8rem; border: 1px solid #ccc; border-radius: 4px; font-family: var(--font-sans); font-size: 0.85rem; outline: none; transition: border-color 0.2s;
}
.campo textarea { resize: vertical; min-height: 80px; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--color-cta); box-shadow: 0 0 0 3px rgba(217,74,56,0.12); }
.seccion-form { border-top: 1px solid var(--color-border); padding-top: 1.2rem; margin-top: 1.2rem; }
.titulo-seccion { font-size: 0.78rem; font-weight: 700; margin-bottom: 1rem; color: #555; }

/* === PaywallModal ("Tu boda, tal y como la has empezado") — ver renderPaywallModal() en
   plan_ui.php y tsdAbrirPaywall()/tsdCerrarPaywall() en panel-ui.js. Se dispara solo al intentar
   una acción bloqueada en modo demo/sesión anónima (nunca solo por entrar), y usa la misma marca
   .tsd-marca, el mismo --font-display y el mismo .btn primario que el resto del panel — nada de
   tipografía ni color nuevos. */
.tsd-paywall { max-width: 420px; padding: 2rem 2rem 1.6rem; text-align: center; }
.tsd-paywall .tsd-marca { text-align: center; margin-bottom: 1.4rem; font-size: 1.15rem; }
.tsd-paywall h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.45rem; color: var(--color-ink); margin: 0 0 0.6rem; text-align: center; }
.tsd-paywall .tsd-paywall-sub { font-size: 0.86rem; color: var(--color-ink-muted); line-height: 1.5; margin: 0 0 1.5rem; }
.tsd-paywall-planes { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.5rem; }
.tsd-paywall-plan {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  border: 1px solid var(--color-border); border-radius: 10px; padding: 0.8rem 1rem; text-align: left;
}
.tsd-paywall-plan strong { font-family: var(--font-sans); font-size: 0.88rem; color: var(--color-ink); display: block; }
.tsd-paywall-plan span.etiqueta-pago { font-size: 0.7rem; color: var(--color-ink-muted); }
.tsd-paywall-plan .precio { font-family: var(--font-display); font-size: 1.15rem; color: var(--color-ink); font-weight: 500; white-space: nowrap; }
.tsd-paywall-plan.destacado { border-color: var(--color-cta); background: color-mix(in srgb, var(--color-cta) 8%, #fff); position: relative; }
.tsd-paywall-plan.destacado .precio { color: var(--color-cta); }
.tsd-paywall-plan-badge {
  position: absolute; top: -0.6rem; left: 1rem; background: var(--color-cta); color: #fff;
  font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
  padding: 0.2rem 0.55rem; border-radius: 20px;
}
.tsd-paywall .btn { width: 100%; justify-content: center; font-size: 0.85rem; padding: 0.85rem; margin-bottom: 0.6rem; }
.tsd-paywall-nota { font-size: 0.72rem; color: var(--color-ink-muted); margin-bottom: 1.1rem; }
.tsd-paywall-faq { font-size: 0.76rem; color: var(--color-ink-muted); margin-bottom: 1rem; text-align: left; }
.tsd-paywall-faq summary { cursor: pointer; color: var(--color-ink-muted); text-decoration: underline; text-align: center; list-style: none; }
.tsd-paywall-faq summary::-webkit-details-marker { display: none; }
.tsd-paywall-faq summary:hover { color: var(--color-cta); }
.tsd-paywall-faq p { margin-top: 0.6rem; line-height: 1.5; }
.tsd-paywall-seguir { display: block; text-align: center; }

/* === Bienvenida al modo demostración — ver renderBienvenidaDemo() en plan_ui.php. Reutiliza
   .modal-overlay/.modal/.modal-cerrar/.tsd-marca/.btn tal cual, igual que el PaywallModal. === */
.tsd-bienvenida { max-width: 440px; padding: 2rem 2rem 1.6rem; text-align: center; }
.tsd-bienvenida .tsd-marca { text-align: center; margin-bottom: 1.2rem; font-size: 1.15rem; }
.tsd-bienvenida h3 { font-size: 1.45rem; margin: 0 0 0.6rem; }
.tsd-bienvenida-sub { font-size: 0.86rem; color: var(--color-ink-muted); line-height: 1.5; margin: 0 0 1.4rem; }
.tsd-bienvenida-lista { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; text-align: left; }
.tsd-bienvenida-lista li {
  display: flex; align-items: flex-start; gap: 0.8rem;
  border: 1px solid var(--color-border); border-radius: 10px; padding: 0.75rem 1rem;
  font-size: 0.82rem; line-height: 1.45; color: var(--color-ink-muted);
}
.tsd-bienvenida-lista li i { color: var(--color-cta); font-size: 1rem; width: 1.1rem; text-align: center; margin-top: 0.15rem; flex-shrink: 0; }
.tsd-bienvenida-lista li strong { color: var(--color-ink); font-weight: 600; }
.tsd-bienvenida .btn { width: 100%; justify-content: center; font-size: 0.85rem; padding: 0.85rem; margin-bottom: 0.6rem; }
.tsd-bienvenida-planes { display: block; text-align: center; }

/* === ESTADO VACÍO === */
.vacio { text-align: center; padding: 4rem 2rem; background: #fff; border: 1px solid var(--color-border); border-radius: 8px; color: var(--color-ink-muted); }
.vacio strong { display: block; font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; color: var(--color-ink); margin-bottom: 0.5rem; }

/* === CHIP DE FILTRO ACTIVO / BUSCADOR === */
.chip-filtro { display: none; align-items: center; gap: 0.6rem; background: var(--color-warning-bg); border: 1px solid var(--color-warning-border); color: var(--color-warning); border-radius: 6px; padding: 0.6rem 1rem; font-size: 0.8rem; font-weight: 600; margin-bottom: 1rem; }
.chip-filtro.activo { display: flex; }
.chip-filtro button { background: none; border: 1px solid var(--color-warning); color: var(--color-warning); border-radius: 20px; padding: 0.2rem 0.7rem; font-size: 0.7rem; font-weight: 600; cursor: pointer; }
.buscador-wrap { margin-bottom: 1.4rem; max-width: 500px; position: relative; }
.buscador { width: 100%; padding: 0.8rem 1rem 0.8rem 2.6rem; border-radius: 30px; border: 1.5px solid #e2e8f0; background: #fff; font-family: var(--font-sans); font-size: 0.9rem; color: var(--color-ink); box-shadow: 0 2px 10px rgba(0,0,0,0.02); }
.buscador:focus { outline: none; border-color: #94a3b8; }
.buscador-wrap i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: #94a3b8; }

/* === MODAL DE AVISO COMPARTIDO (reemplaza alert()/confirm() nativos, ver panel-ui.js) === */
.tsd-aviso-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1200; justify-content: center; align-items: center; padding: 1rem; }
.tsd-aviso-overlay.abierto { display: flex; }
.tsd-aviso-caja { background: #fff; border-radius: 8px; padding: 1.8rem; width: 100%; max-width: 380px; text-align: center; box-shadow: 0 15px 30px rgba(0,0,0,0.15); }
.tsd-aviso-icono { width: 48px; height: 48px; border-radius: 50%; margin: 0 auto 1rem; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; background: var(--color-total-bg); color: var(--color-total-dark); }
.tsd-aviso-caja.peligro .tsd-aviso-icono { background: var(--color-no-bg); color: var(--color-no); }
.tsd-aviso-mensaje { font-size: 0.88rem; color: var(--color-ink); margin-bottom: 1.4rem; line-height: 1.4; }
.tsd-aviso-checkbox { display: flex; align-items: flex-start; gap: 0.5rem; text-align: left; font-size: 0.8rem; color: var(--color-ink-muted); margin: -0.8rem 0 1.4rem; cursor: pointer; }
.tsd-aviso-checkbox[hidden] { display: none; } /* un display:flex de autor gana siempre al [hidden] del navegador si no se anula explícitamente — sin esto, tsdConfirmar() sin opciones.checkbox mostraba igualmente una casilla vacía sin texto ni función */
.tsd-aviso-checkbox input { margin-top: 0.15rem; flex-shrink: 0; }
.tsd-aviso-acciones { display: flex; gap: 0.6rem; }
.tsd-aviso-acciones .btn, .tsd-aviso-acciones .btn-secundario { flex: 1; justify-content: center; }

/* === TOAST FLOTANTE (deshacer, avisos rápidos no bloqueantes — ver tsdToast en panel-ui.js) === */
.tsd-toast {
  position: fixed; left: 50%; bottom: 1.6rem; transform: translateX(-50%) translateY(20px);
  background: var(--color-darker); color: #fff; padding: 0.8rem 1rem 0.8rem 1.2rem; border-radius: 8px;
  display: flex; align-items: center; gap: 1rem; font-size: 0.85rem; box-shadow: 0 10px 25px rgba(0,0,0,0.25);
  z-index: 1300; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease;
}
.tsd-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.tsd-toast-accion {
  background: none; border: 1px solid rgba(255,255,255,0.4); color: #fff; border-radius: 6px;
  padding: 0.35rem 0.7rem; font-size: 0.78rem; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.tsd-toast-accion:hover { background: rgba(255,255,255,0.15); }

/* === MODO DEMO: banner, badges de plan, preview explorable (ver panel/plan_ui.php,
   panel/assets/panel-ui.js: tsdAbrirUpgrade/tsdAbrirComparativa) === */

/* Cápsula "Modo demo": borde brillante que gira muy despacio, técnica clásica de pseudo-elemento
   más grande rotando detrás, recortado por el cuerpo interior — funciona con una simple animación
   de transform, sin @property ni soporte de navegador exigente. Discreta a propósito: nunca
   parpadea, el giro dura 9s, y se desactiva entera con prefers-reduced-motion. */
.tsd-demo-banner { position: relative; border-radius: 14px; padding: 1.5px; margin-bottom: 1.6rem; overflow: hidden; isolation: isolate; }
.tsd-demo-banner::before {
  content: ""; position: absolute; inset: -75%; z-index: 0;
  background: conic-gradient(from 0deg, transparent 0 62%, var(--color-cta) 78%, var(--color-brand-dark) 88%, transparent 100%);
  animation: tsdBorderSpin 9s linear infinite;
}
@keyframes tsdBorderSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tsd-demo-banner::before { animation: none; } }
.tsd-demo-banner-cuerpo {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: linear-gradient(135deg, #fff 0%, var(--color-bg) 100%); border-radius: 12.5px; padding: 0.95rem 1.3rem;
}
.tsd-demo-banner-marca { font-size: 1.2rem; color: var(--color-cta); flex-shrink: 0; }
.tsd-demo-banner-texto { display: flex; flex-direction: column; gap: 0.15rem; flex: 1; min-width: 220px; }
.tsd-demo-banner-texto strong { font-size: 0.88rem; color: var(--color-darker); font-family: var(--font-sans); }
.tsd-demo-banner-texto span { font-size: 0.78rem; color: var(--color-ink-muted); line-height: 1.4; }
.tsd-demo-banner-cta {
  border: 1px solid var(--color-border); background: #fff; color: var(--color-darker); font-family: var(--font-sans);
  font-weight: 700; font-size: 0.78rem; padding: 0.55rem 1.05rem; border-radius: 8px; cursor: pointer; white-space: nowrap;
  text-decoration: none; display: inline-block; text-align: center;
}
.tsd-demo-banner-cta:hover { background: var(--color-bg); }
@media (max-width: 640px) { .tsd-demo-banner-cuerpo { padding: 0.9rem 1rem; } .tsd-demo-banner-cta { width: 100%; } }

/* Badge de plan ("✦ ESENCIAL"/"✦ PREMIUM") — pill clicable, abre el modal de upgrade contextual.
   Nunca es el único indicador (siempre lleva texto real, no solo color). */
.tsd-badge-plan {
  display: inline-flex; align-items: center; gap: 0.3rem; font-family: var(--font-sans);
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.4px; padding: 0.22rem 0.55rem; border-radius: 20px;
  border: none; cursor: pointer; white-space: nowrap; transition: transform 0.12s ease; flex-shrink: 0;
}
.tsd-badge-plan:hover { transform: translateY(-1px); }
.tsd-badge-plan:focus-visible { outline: 2px solid var(--color-darker); outline-offset: 2px; }
.tsd-badge-plan--esencial { background: var(--color-brand); color: var(--color-dark); }
.tsd-badge-plan--premium { background: var(--color-cta); color: #fff; }

/* Preview explorable de una página bloqueada: contenido de ejemplo (inert, sin interacción real,
   oculto a lectores de pantalla) + el cierre de badge/beneficio/CTA, que sí es interactivo. */
.tsd-preview-etiqueta { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-ink-muted); margin-bottom: 1rem; }
.tsd-preview-mock { opacity: 0.9; pointer-events: none; }

/* Ilustración estática del plano de Mesas (ver renderPreviewMesas en panel/plan_ui.php) — el
   canvas Fabric.js real no se finge, es demasiado frágil (ver mesas.php). */
.tsd-mesas-mock { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 1.2rem; background: #fff; border: 1px solid var(--color-border); border-radius: 14px; padding: 2.2rem; margin-top: 0.4rem; }
.tsd-mesa-circulo { aspect-ratio: 1; border-radius: 50%; background: linear-gradient(135deg, var(--color-brand), var(--color-brand-dark)); color: var(--color-darker); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem; font-size: 0.72rem; font-weight: 700; font-family: var(--font-sans); box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.tsd-mesa-circulo i { font-size: 1.15rem; }
.tsd-preview-cierre { margin-top: 1.8rem; background: linear-gradient(135deg, var(--color-brand) 0%, #fff 150%); border: 1px solid var(--color-border); border-radius: 14px; padding: 1.5rem 1.7rem; text-align: center; }
.tsd-preview-cierre .tsd-badge-plan { margin-bottom: 0.8rem; }
.tsd-preview-cierre p { font-size: 0.9rem; color: var(--color-ink); max-width: 480px; margin: 0 auto 1.15rem; line-height: 1.55; }
.tsd-preview-cta { border: none; background: var(--color-darker); color: #fff; padding: 0.7rem 1.6rem; border-radius: 8px; font-weight: 700; font-size: 0.85rem; cursor: pointer; font-family: var(--font-sans); text-decoration: none; display: inline-block; }
.tsd-preview-cta:hover { background: #000; }

/* Contenido interno de renderPreviewChecklist/Presupuesto/Fotos/Firmas (panel/plan_ui.php) — son
   las mismas clases que ya usan checklist.php/presupuesto.php/fotos.php/firmas.php para su propia
   pantalla real, pero namespaced bajo .tsd-preview-mock: así panel/planes.php (que reutiliza estas
   funciones para el bloque "Mejorar plan" contextual, ?desde=<feature>) puede pintarlas bien SIN
   arrastrar el <style> propio de cada página — y como el selector exige el ancestro
   .tsd-preview-mock, nunca compite con las reglas reales (sin namespace) que cada página ya
   define para sí misma. Antes de esto, ese bloque contextual salía como una lista de texto suelta
   sin ningún estilo (los 4 "Descubrir Esencial" que fallaban visualmente desde fuera de su
   página). Consolida pequeñas diferencias entre páginas (p.ej. gap de .progreso) en un único
   valor: es contenido inert de solo lectura, no hace falta reproducir cada página al píxel. */
.tsd-preview-mock .progreso { background: #fff; border: 1px solid var(--color-border); border-radius: 14px; padding: 1.4rem 1.6rem; margin-bottom: 1.8rem; display: flex; align-items: center; gap: 1.6rem; }
.tsd-preview-mock .progreso .stat-icon { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; background: var(--color-bg); color: var(--color-ink-muted); }
.tsd-preview-mock .progreso-num { font-family: var(--font-sans); font-weight: 700; font-size: 1.6rem; min-width: 60px; color: var(--color-ink); }
.tsd-preview-mock .progreso-sub { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-ink-muted); margin-top: 0.2rem; }
.tsd-preview-mock .barra-bg { flex: 1; background: var(--color-bg); height: 9px; border-radius: 10px; overflow: hidden; }
.tsd-preview-mock .barra-fill { background: var(--color-brand); height: 100%; transition: width 0.4s ease; }

.tsd-preview-mock .plazo { background: #fff; border: 1px solid var(--color-border); border-radius: 14px; margin-bottom: 1.3rem; overflow: hidden; }
.tsd-preview-mock .plazo-titulo { background: var(--gray-100); color: var(--color-ink-muted); padding: 0.7rem 1.3rem; font-size: 0.85rem; font-weight: 700; display: flex; justify-content: space-between; font-family: var(--font-sans); border-bottom: 1px solid var(--color-border); }
.tsd-preview-mock .plazo-titulo span.n { opacity: 0.75; font-weight: 400; font-size: 0.72rem; font-family: var(--font-sans); }
.tsd-preview-mock ul.tareas { list-style: none; margin: 0; padding: 0; }
.tsd-preview-mock .tarea { padding: 0.9rem 1.3rem; border-bottom: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; }
.tsd-preview-mock .tarea:last-child { border-bottom: none; }
.tsd-preview-mock .tarea-izq { display: flex; align-items: center; gap: 0.9rem; flex: 1; }
.tsd-preview-mock .tarea-texto { font-size: 0.9rem; }
.tsd-preview-mock .tarea.completada .tarea-texto { text-decoration: line-through; color: var(--color-ink-muted); }
.tsd-preview-mock .badge-cat { font-size: 0.7rem; padding: 0.2rem 0.6rem; border-radius: 20px; font-weight: 600; background: var(--gray-100); color: var(--color-ink-muted); white-space: nowrap; }

.tsd-preview-mock .reparto-sugerido { background: #fff; border: 1px solid var(--color-border); border-radius: 14px; padding: 1.3rem 1.6rem; margin-bottom: 1.8rem; }
.tsd-preview-mock .reparto-lista { display: flex; flex-direction: column; gap: 0.5rem; }
.tsd-preview-mock .reparto-fila { display: grid; grid-template-columns: 1fr auto auto; gap: 1rem; align-items: center; font-size: 0.86rem; padding: 0.3rem 0; }
.tsd-preview-mock .reparto-pct { color: var(--color-ink-muted); font-size: 0.78rem; min-width: 2.5rem; text-align: right; }
.tsd-preview-mock .reparto-importe { font-weight: 700; color: var(--color-darker); min-width: 5rem; text-align: right; }

.tsd-preview-mock .lista-firmas { display: flex; flex-direction: column; gap: 0.9rem; }
.tsd-preview-mock .tarjeta-firma { background: #fff; border: 1px solid var(--color-border); border-radius: 14px; padding: 1.1rem 1.3rem; display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.tsd-preview-mock .tarjeta-firma .nombre { font-family: var(--font-sans); font-weight: 700; font-size: 0.95rem; margin-bottom: 0.3rem; }
.tsd-preview-mock .tarjeta-firma .mensaje { font-size: 0.88rem; color: var(--color-ink-muted); line-height: 1.5; white-space: pre-wrap; }
.tsd-preview-mock .tarjeta-firma .fecha { font-size: 0.72rem; color: var(--color-ink-muted); margin-top: 0.5rem; }
.tsd-preview-mock .tarjeta-firma .acciones { display: flex; gap: 0.4rem; flex-shrink: 0; }

.tsd-preview-mock .fila-paneles { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1.2rem; margin-bottom: 1.8rem; align-items: stretch; }
.tsd-preview-mock .panel-qr { background: #fff; border: 1px solid var(--color-border); border-radius: 14px; padding: 1.6rem; display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; }
.tsd-preview-mock .panel-qr-cuerpo { flex: 1; min-width: 200px; }
.tsd-preview-mock .panel-qr-cuerpo h3 { font-family: var(--font-sans); font-size: 0.95rem; margin: 0 0 0.3rem; }
.tsd-preview-mock .panel-qr-cuerpo p { font-size: 0.8rem; color: var(--color-ink-muted); margin: 0 0 0.9rem; }
.tsd-preview-mock .panel-qr-acciones { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.tsd-preview-mock .panel-espacio { background: #fff; border: 1px solid var(--color-border); border-radius: 14px; padding: 1.6rem; }
.tsd-preview-mock .panel-espacio h3 { font-family: var(--font-sans); font-size: 0.95rem; margin: 0 0 0.7rem; display: flex; align-items: center; justify-content: space-between; }
.tsd-preview-mock .panel-espacio .cifra { color: var(--color-ink-muted); font-weight: 600; font-size: 0.82rem; }
.tsd-preview-mock .barra-espacio-bg { background: var(--color-bg); height: 9px; border-radius: 10px; overflow: hidden; margin-bottom: 0.9rem; }
.tsd-preview-mock .barra-espacio-fill { background: var(--color-brand); height: 100%; }
.tsd-preview-mock .aviso-addon { font-size: 0.8rem; color: var(--color-ink-muted); background: var(--color-bg); border-radius: 8px; padding: 0.7rem 0.9rem; }

.tsd-preview-mock .tabs-moderacion { display: flex; gap: 0.5rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.tsd-preview-mock .tab-mod { border: 1px solid var(--color-border); background: #fff; padding: 0.5rem 1rem; border-radius: 20px; font-size: 0.78rem; font-weight: 600; font-family: var(--font-sans); color: var(--color-ink-muted); display: inline-flex; align-items: center; gap: 0.4rem; }
.tsd-preview-mock .tab-mod .n { background: var(--color-bg); border-radius: 20px; padding: 0.05rem 0.5rem; font-size: 0.72rem; }
.tsd-preview-mock .tab-mod.activa { border-color: var(--color-cta); color: var(--color-cta); background: var(--color-no-bg); }
.tsd-preview-mock .tab-mod.activa .n { background: var(--color-cta); color: #fff; }

.tsd-preview-mock .rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1.1rem; }
.tsd-preview-mock .tarjeta-foto { background: #fff; border: 1px solid var(--color-border); border-radius: 14px; overflow: hidden; }
.tsd-preview-mock .tarjeta-foto-img-wrap { position: relative; }
.tsd-preview-mock .badge-estado-foto { position: absolute; top: 0.5rem; left: 0.5rem; font-size: 0.66rem; font-weight: 700; padding: 0.2rem 0.55rem; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.3px; }
.tsd-preview-mock .badge-pendiente { background: var(--color-warning-bg); color: var(--color-warning); }
.tsd-preview-mock .badge-publicada { background: var(--color-success-bg); color: var(--color-success); }
.tsd-preview-mock .tarjeta-foto .info { padding: 0.7rem; }
.tsd-preview-mock .tarjeta-foto .autor { font-size: 0.75rem; color: var(--color-ink-muted); margin-bottom: 0.5rem; }
.tsd-preview-mock .tarjeta-foto .acciones { display: flex; gap: 0.4rem; flex-wrap: wrap; }

.tsd-preview-mock .btn-mini { flex: 1; border: 1px solid var(--color-border); background: #fff; padding: 0.4rem; border-radius: 6px; font-size: 0.7rem; font-family: var(--font-sans); white-space: nowrap; }
.tsd-preview-mock .btn-mini.peligro { color: var(--color-cta); border-color: var(--color-no-bg); }
.tsd-preview-mock .btn-mini.exito { color: var(--color-success); border-color: var(--color-success-bg); }
.tsd-preview-mock .btn-secundario { border: 1px solid var(--color-border); background: #fff; color: var(--color-ink); padding: 0.5rem 0.9rem; border-radius: 8px; font-weight: 600; font-size: 0.76rem; font-family: var(--font-sans); display: inline-flex; align-items: center; gap: 0.4rem; }

/* El modal de upgrade contextual y la comparativa emergente se retiraron: ahora es una pantalla
   real, panel/planes.php (más rica y con mejor conversión que un modal — ver investigación de la
   sesión). Su CSS vive en el <style> propio de esa página, junto al resto de sus componentes. */