/* ============================================================================
   UNPA · Alpedrete — núcleo visual
   Compartido por la aplicación (WebView) y la web pública. Los tokens y los
   componentes vienen del prototipo aprobado; aquí no se rediseña nada, solo
   se quita el marco de móvil y se añade lo que la maqueta no necesitaba:
   estados de carga, sin conexión y reproductor de vídeo.

   CUIDADO — hay TRES bloques de tokens (:root, prefers-color-scheme y
   :root[data-theme="dark"]). Un token nuevo va en los tres o el tema oscuro
   explícito se rompe.
   ============================================================================ */

  /* ================= Tokens ================= */
  :root {
    --stage:      #E8ECF0;
    --stage-ink:  #2A3742;
    --stage-soft: #64727F;
    --stage-card: #FFFFFF;

    --app-bg:     #FFFFFF;
    --app-sunk:   #F2F5F8;
    --app-line:   #E2E8EE;
    --app-line-2: #CFD8E0;
    --ink:        #14202B;
    --ink-soft:   #56636F;
    --ink-faint:  #8B98A4;

    --brand:      #2C6CA0;
    --brand-deep: #1E5178;
    --brand-wash: #E8F1F8;
    --on-brand:   #FFFFFF;

    --c-nota:   #2C6CA0;
    --c-nota-w: #E8F1F8;
    --c-video:  #14766A;
    --c-video-w:#E2F3F0;
    --c-aviso:  #C0392B;
    --c-aviso-w:#FBE9E7;
    --c-agenda: #A9720E;
    --c-agenda-w:#FBF0DC;

    --ok:       #16794F;
    --on-accent:#FFFFFF;

    --shadow: 0 1px 2px rgba(16,32,48,.06), 0 8px 24px rgba(16,32,48,.10);
    --shadow-lg: 0 4px 12px rgba(16,32,48,.10), 0 32px 64px rgba(16,32,48,.22);

    --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --stage:      #0D1216;
      --stage-ink:  #DCE4EA;
      --stage-soft: #8B99A5;
      --stage-card: #161D24;

      --app-bg:     #161D24;
      --app-sunk:   #1D262F;
      --app-line:   #27323C;
      --app-line-2: #38454F;
      --ink:        #E6ECF1;
      --ink-soft:   #9EABB6;
      --ink-faint:  #6E7C88;

      --brand:      #79B0DC;
      --brand-deep: #A5CCEA;
      --brand-wash: #17303F;
      --on-brand:   #0D1216;

      --c-nota:   #79B0DC;
      --c-nota-w: #17303F;
      --c-video:  #4FC0B0;
      --c-video-w:#123330;
      --c-aviso:  #F08A7C;
      --c-aviso-w:#3A1F1B;
      --c-agenda: #E0AE55;
      --c-agenda-w:#33280F;

      --ok:       #57C08D;
      --on-accent:#101418;

      --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.4);
      --shadow-lg: 0 4px 12px rgba(0,0,0,.5), 0 32px 64px rgba(0,0,0,.6);
    }
  }

  :root[data-theme="dark"] {
    --stage:      #0D1216;
    --stage-ink:  #DCE4EA;
    --stage-soft: #8B99A5;
    --stage-card: #161D24;

    --app-bg:     #161D24;
    --app-sunk:   #1D262F;
    --app-line:   #27323C;
    --app-line-2: #38454F;
    --ink:        #E6ECF1;
    --ink-soft:   #9EABB6;
    --ink-faint:  #6E7C88;

    --brand:      #79B0DC;
    --brand-deep: #A5CCEA;
    --brand-wash: #17303F;
    --on-brand:   #0D1216;

    --c-nota:   #79B0DC;
    --c-nota-w: #17303F;
    --c-video:  #4FC0B0;
    --c-video-w:#123330;
    --c-aviso:  #F08A7C;
    --c-aviso-w:#3A1F1B;
    --c-agenda: #E0AE55;
    --c-agenda-w:#33280F;

    --ok:       #57C08D;
    --on-accent:#101418;

    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.4);
    --shadow-lg: 0 4px 12px rgba(0,0,0,.5), 0 32px 64px rgba(0,0,0,.6);
  }

  [hidden] { display: none !important; }



/* ================= Armazón ================= */
*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { -webkit-text-size-adjust: 100%; }

/* Los contenedores separan a sus hijos con `gap`; si además cada título y
   cada párrafo trae su margen del navegador, las tarjetas se hinchan. */
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
img, video { max-width: 100%; }

body {
  margin: 0;
  background: var(--app-bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* El armazón: ocupa la pantalla entera en la app; en la web se limita a una
   columna centrada con el mismo aspecto. */
.app {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  isolation: isolate;
  overflow: hidden;
}

body.web .app {
  max-width: 44rem;
  margin: 0 auto;
  border-left: 1px solid var(--app-line);
  border-right: 1px solid var(--app-line);
}
body.web { background: var(--app-sunk); }

  /* ---- views ---- */
  .view {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .view[hidden] { display: none; }

  /* ---- app header ---- */
  .apphead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.35rem 1.15rem 0.75rem;
    flex: none;
  }
  .brandmark { display: flex; flex-direction: column; gap: 0.1rem; }
  .brandmark .bm-main {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 0.005em;
    color: var(--brand);
    line-height: 1;
  }
  .brandmark .bm-sub {
    font-size: 0.438rem;
    font-weight: 700;
    letter-spacing: 0.115em;
    text-transform: uppercase;
    color: var(--brand);
    opacity: 0.82;
    line-height: 1;
  }
  /* Cuando se cargue el logo real, sustituye al rótulo tipográfico */
  .brandmark img { height: 2.1rem; width: auto; display: block; }
  .brandmark.has-logo .bm-main, .brandmark.has-logo .bm-sub { display: none; }
  .head-actions { display: flex; gap: 0.4rem; }
  .icon-btn {
    width: 2.1rem; height: 2.1rem;
    border: none;
    background: var(--app-sunk);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--ink-soft);
    cursor: pointer;
    transition: background .15s, color .15s;
  }
  .icon-btn:hover { background: var(--brand-wash); color: var(--brand); }
  .icon-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
  .icon-btn svg { width: 1.05rem; height: 1.05rem; }

  /* ---- ticker ---- */
  .ticker {
    display: flex;
    align-items: stretch;
    flex: none;
    overflow: hidden;
    --tk-accent: var(--c-aviso);
  }

  /* --- Estilo 1 y 2: barra sólida --- */
  .ticker.st-solid { background: var(--tk-accent); color: var(--on-accent); }
  .ticker.st-solid .ticker-label { background: rgba(0,0,0,.18); }

  /* --- Estilo 3: discreto --- */
  .ticker.st-soft {
    background: var(--app-sunk);
    color: var(--ink);
    border-bottom: 1px solid var(--app-line);
    box-shadow: inset 3px 0 0 var(--tk-accent);
  }
  .ticker.st-soft .ticker-label { background: transparent; color: var(--tk-accent); }
  .ticker.st-soft .pulse { background: var(--tk-accent); }

  /* --- Estilo 4: titular fijo, sin movimiento --- */
  .ticker.st-static {
    background: var(--app-bg);
    color: var(--ink);
    border-bottom: 1px solid var(--app-line);
    box-shadow: inset 3px 0 0 var(--tk-accent);
  }
  .ticker.st-static .ticker-label { background: transparent; color: var(--tk-accent); }
  .ticker.st-static .pulse { display: none; }
  .ticker.st-static .ticker-track { animation: none; width: 100%; }
  .ticker.st-static .ticker-item {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 0.8rem;
  }
  .ticker.st-static .ticker-item::before { display: none; }
  .ticker.st-static .ticker-item + .ticker-item { display: none; }

  .ticker-label {
    flex: none;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.7rem;
    font-size: 0.563rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: transparent;
    white-space: nowrap;
  }
  .pulse {
    width: 6px; height: 6px; border-radius: 50%;
    background: currentColor;
    animation: pulse 1.6s ease-in-out infinite;
  }
  @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

  .ticker-view { overflow: hidden; flex: 1; display: flex; align-items: center; }
  .ticker-track {
    display: flex;
    width: max-content;
    animation: marquee 34s linear infinite;
  }
  .ticker:hover .ticker-track { animation-play-state: paused; }
  .ticker-item {
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    padding-right: 2.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .ticker-item::before {
    content: "";
    width: 4px; height: 4px;
    border-radius: 50%;
    background: currentColor;
    opacity: .55;
    flex: none;
  }
  @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

  @media (prefers-reduced-motion: reduce) {
    .ticker-track, .pulse { animation: none; }
  }

  /* ---- categories ---- */
  .cats {
    display: flex;
    gap: 0.4rem;
    padding: 0.8rem 1.15rem;
    overflow-x: auto;
    scrollbar-width: none;
    flex: none;
    border-bottom: 1px solid var(--app-line);
  }
  .cats::-webkit-scrollbar { display: none; }
  .chip {
    flex: none;
    border: 1px solid var(--app-line-2);
    background: transparent;
    color: var(--ink-soft);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 650;
    padding: 0.4rem 0.8rem;
    border-radius: 100px;
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    transition: background .15s, color .15s, border-color .15s;
  }
  .chip:hover { border-color: var(--brand); color: var(--brand); }
  .chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
  .chip .dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
  .chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--app-bg); }

  /* ---- feed ---- */
  .feed {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0.9rem 1.15rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    -webkit-overflow-scrolling: touch;
  }

  .card {
    flex: none;
    border: 1px solid var(--app-line);
    border-radius: 0.9rem;
    background: var(--app-bg);
    overflow: hidden;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: inherit;
    padding: 0;
    display: flex;
    flex-direction: column;
    transition: box-shadow .18s, transform .18s, border-color .18s;
  }
  .card:hover { box-shadow: var(--shadow); border-color: var(--app-line-2); transform: translateY(-1px); }
  /* En la web la tarjeta es un <a> de verdad, para que se pueda abrir en otra
     pestaña y para que Google siga el enlace. Pero no debe verse subrayada. */
  a.card, a.card:hover { text-decoration: none; }
  .card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
  .card.hidden { display: none; }
  .card.fresh { animation: pop .45s cubic-bezier(.2,1.1,.3,1); }
  @keyframes pop { from { opacity: 0; transform: translateY(-10px) scale(.98); } }
  @media (prefers-reduced-motion: reduce) { .card.fresh { animation: none; } }

  .card-body { padding: 0.85rem 0.95rem 0.95rem; display: flex; flex-direction: column; gap: 0.4rem; }
  .card-meta { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
  .badge {
    font-size: 0.563rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    padding: 0.2rem 0.45rem;
    border-radius: 0.25rem;
  }
  .badge.nota   { background: var(--c-nota-w);   color: var(--c-nota); }
  .badge.video  { background: var(--c-video-w);  color: var(--c-video); }
  .badge.aviso  { background: var(--c-aviso-w);  color: var(--c-aviso); }
  .badge.agenda { background: var(--c-agenda-w); color: var(--c-agenda); }
  .card-time { font-size: 0.688rem; color: var(--ink-faint); font-weight: 550; }

  .card-title {
    font-size: 0.938rem;
    font-weight: 680;
    line-height: 1.32;
    letter-spacing: -0.008em;
    text-wrap: balance;
  }
  .card-ex {
    font-size: 0.813rem;
    line-height: 1.45;
    color: var(--ink-soft);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .thumb {
    flex: none;
    width: 100%;
    aspect-ratio: 16 / 9;
    position: relative;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--g1), var(--g2));
  }
  /* Respaldo para motores sin aspect-ratio (WebView antiguo) */
  @supports not (aspect-ratio: 16 / 9) {
    .thumb { height: 0; padding-bottom: 56.25%; }
  }
  .thumb .play {
    width: 2.9rem; height: 2.9rem;
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    display: grid;
    place-items: center;
    box-shadow: 0 2px 12px rgba(0,0,0,.25);
  }
  .thumb .play svg { width: 1.1rem; height: 1.1rem; color: #14202B; margin-left: 2px; }
  .thumb .dur {
    position: absolute; right: 0.5rem; bottom: 0.5rem;
    background: rgba(0,0,0,.62); color: #fff;
    font-size: 0.625rem; font-weight: 650;
    padding: 0.12rem 0.35rem; border-radius: 0.25rem;
    font-variant-numeric: tabular-nums;
  }
  .thumb .stub {
    position: absolute; left: 0.5rem; top: 0.5rem;
    background: rgba(0,0,0,.45); color: #fff;
    font-size: 0.531rem; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    padding: 0.15rem 0.4rem; border-radius: 0.25rem;
  }

  .empty {
    flex: none;
    text-align: center;
    color: var(--ink-faint);
    font-size: 0.875rem;
    padding: 3rem 1rem;
    display: none;
  }
  .empty.show { display: block; }

  /* ---- bottom nav ---- */
  .bottomnav {
    display: flex;
    border-top: 1px solid var(--app-line);
    background: var(--app-bg);
    flex: none;
    padding-bottom: 0.25rem;
  }
  .nav-item {
    flex: 1;
    border: none;
    background: transparent;
    font-family: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.6rem 0.2rem 0.5rem;
    cursor: pointer;
    color: var(--ink-faint);
    font-size: 0.625rem;
    font-weight: 650;
    transition: color .15s;
  }
  .nav-item svg { width: 1.25rem; height: 1.25rem; }
  .nav-item[aria-selected="true"] { color: var(--brand); }
  .nav-item:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }


  /* ---- detail view ---- */
  .detail {
    position: absolute;
    inset: 0;
    background: var(--app-bg);
    z-index: 5;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .26s cubic-bezier(.32,.72,0,1);
    visibility: hidden;
  }
  .detail.open { transform: translateX(0); visibility: visible; }
  @media (prefers-reduced-motion: reduce) { .detail { transition: none; } }

  .detail-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1.1rem 1.15rem 0.8rem;
    border-bottom: 1px solid var(--app-line);
    flex: none;
  }
  .back {
    border: none;
    background: var(--app-sunk);
    width: 2.1rem; height: 2.1rem;
    border-radius: 50%;
    display: grid; place-items: center;
    cursor: pointer;
    color: var(--ink);
    flex: none;
  }
  .back:hover { background: var(--brand-wash); color: var(--brand); }
  .back:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
  .back svg { width: 1.05rem; height: 1.05rem; }
  .detail-head-t { font-size: 0.813rem; font-weight: 700; color: var(--ink-soft); }

  .detail-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 1.15rem 1.15rem 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
  }
  .detail-body > * { flex: none; }
  .detail-body h3 {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.015em;
    text-wrap: balance;
  }
  .detail-body p { font-size: 0.938rem; line-height: 1.6; color: var(--ink-soft); }
  .detail-thumb { border-radius: 0.7rem; overflow: hidden; }
  .share-row { display: flex; gap: 0.5rem; padding-top: 0.5rem; flex-wrap: wrap; }
  .share-btn {
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 650;
    border: 1px solid var(--app-line-2);
    background: transparent;
    color: var(--ink-soft);
    padding: 0.45rem 0.8rem;
    border-radius: 100px;
    cursor: pointer;
  }
  .share-btn:hover { border-color: var(--brand); color: var(--brand); }


/* ================= Estados ================= */

/* --- Esqueleto de carga: tres tarjetas en gris mientras llega el feed --- */
.skeleton { display: flex; flex-direction: column; gap: 0.8rem; padding: 0.9rem 1.15rem; }
.sk-card {
  flex: none;
  background: var(--app-bg);
  border: 1px solid var(--app-line);
  border-radius: 0.9rem;
  padding: 0.85rem 0.95rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
/* El gris del esqueleto no puede ser el del fondo: en la web la tarjeta se
   apoya sobre --app-sunk y las líneas desaparecerían. */
.sk-line { height: 0.7rem; border-radius: 0.35rem; background: var(--app-line); animation: latido 1.4s ease-in-out infinite; }
.sk-line.corta { width: 35%; }
.sk-line.media { width: 85%; }
.sk-line.alta  { height: 1.05rem; width: 70%; }
@keyframes latido { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .sk-line { animation: none; } }

/* --- Aviso de estado: sin conexión, error, contenido guardado --- */
.aviso-estado {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.15rem;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--app-sunk);
  color: var(--ink-soft);
  border-bottom: 1px solid var(--app-line);
}
.aviso-estado svg { width: 0.95rem; height: 0.95rem; flex: none; }
.aviso-estado.fallo { background: var(--c-aviso-w); color: var(--c-aviso); }
.aviso-estado button {
  margin-left: auto;
  border: none;
  background: transparent;
  font: inherit;
  font-weight: 700;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

/* --- Fallo total: no hay red y no hay nada guardado --- */
.vacio-fallo {
  flex: none;
  text-align: center;
  padding: 3.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
}
.vacio-fallo h2 { font-size: 1rem; font-weight: 700; }
.vacio-fallo p { font-size: 0.875rem; color: var(--ink-soft); max-width: 22rem; }

.boton {
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 680;
  background: var(--brand);
  color: var(--on-brand);
  border: none;
  border-radius: 100px;
  padding: 0.65rem 1.3rem;
  cursor: pointer;
}
.boton:hover { filter: brightness(1.08); }
.boton:active { transform: scale(.98); }
.boton:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.boton.secundario {
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--app-line-2);
}
.boton.secundario:hover { border-color: var(--brand); color: var(--brand); }

/* ================= Vídeo ================= */
/* La miniatura del prototipo se conserva como portada; al tocarla se
   sustituye por el <video> real, que solo entonces empieza a descargar. */
.thumb.con-portada { background: var(--app-sunk); }
.thumb .portada {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.thumb .play, .thumb .dur, .thumb .stub { position: relative; z-index: 1; }
.thumb .dur, .thumb .stub { position: absolute; }

.reproductor {
  flex: none;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 0.7rem;
  overflow: hidden;
}
.reproductor video { width: 100%; height: 100%; display: block; }

/* ================= Aviso de notificaciones ================= */
/* Android 13+ exige pedir permiso. Se pide en contexto, no al abrir. */
.pedir-avisos {
  flex: none;
  margin: 0.9rem 1.15rem 0;
  border: 1px solid var(--app-line);
  border-radius: 0.9rem;
  background: var(--brand-wash);
  padding: 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.pedir-avisos h2 { font-size: 0.875rem; font-weight: 700; color: var(--brand-deep); }
.pedir-avisos p { font-size: 0.813rem; line-height: 1.45; color: var(--ink-soft); }
.pedir-avisos .fila { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.pedir-avisos .boton { font-size: 0.813rem; padding: 0.5rem 1rem; }

/* ================= Ficha de publicación ================= */
.detail-body .meta-fecha {
  font-size: 0.75rem;
  color: var(--ink-faint);
  font-weight: 550;
}
.detail-body .cuando {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--app-line);
  border-left: 3px solid var(--c-agenda);
  border-radius: 0.5rem;
  background: var(--app-sunk);
  font-size: 0.875rem;
}
.detail-body .cuando b { display: block; color: var(--ink); font-weight: 680; }
.detail-body .cuando span { color: var(--ink-soft); }

/* ================= Pie de la web ================= */
.pie {
  flex: none;
  border-top: 1px solid var(--app-line);
  padding: 1.5rem 1.15rem 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--ink-faint);
  line-height: 1.6;
}
.pie a { color: var(--ink-soft); }
.pie .pie-enlaces { display: flex; gap: 1rem; flex-wrap: wrap; }

/* ================= Ajustes propios de la web ================= */
/* En la web manda el desplazamiento normal de la página: el feed no es una
   caja con scroll propio y la ficha no es un panel que entra deslizándose,
   porque cada publicación tiene su propia dirección. */
body.web .app { overflow: visible; }
body.web .feed { overflow: visible; flex: none; }
body.web .detail {
  position: static;
  transform: none;
  visibility: visible;
  transition: none;
}
body.web .detail-body { overflow: visible; }
body.web .bottomnav { display: none; }
body.web .cats { position: sticky; top: 0; background: var(--app-bg); z-index: 3; }

@media (min-width: 45rem) {
  body.web .apphead { padding: 1.4rem 1.6rem 1rem; }
  body.web .cats, body.web .feed, body.web .detail-head, body.web .detail-body,
  body.web .pie { padding-left: 1.6rem; padding-right: 1.6rem; }
  body.web .card-title { font-size: 1.05rem; }
  body.web .detail-body h3 { font-size: 1.6rem; }
  body.web .detail-body p { font-size: 1rem; }
}

/* ================= Formularios =================
   Los usan el panel de publicación y el buzón. Viven aquí, y no en
   panel.css, porque el buzón va dentro de la app y la app solo carga
   este archivo. */

.field { display: flex; flex-direction: column; gap: 0.45rem; flex: none; }
.field > label, .field-label {
  font-size: 0.688rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.types { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.type {
  font-family: inherit;
  border: 1.5px solid var(--app-line-2);
  background: transparent;
  border-radius: 0.7rem;
  padding: 0.7rem 0.6rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  cursor: pointer;
  color: var(--ink-soft);
  text-align: left;
  transition: border-color .15s, background .15s, color .15s;
}
.type svg { width: 1.15rem; height: 1.15rem; }
.type .t-n { font-size: 0.75rem; font-weight: 700; line-height: 1.2; }
.type:hover { border-color: var(--c); color: var(--c); }
.type[aria-pressed="true"] { border-color: var(--c); background: var(--cw); color: var(--c); }
.type:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }

input[type="text"], textarea {
  font-family: inherit;
  font-size: 0.938rem;
  color: var(--ink);
  background: var(--app-sunk);
  border: 1.5px solid transparent;
  border-radius: 0.6rem;
  padding: 0.7rem 0.8rem;
  width: 100%;
  transition: border-color .15s, background .15s;
}
textarea { resize: none; line-height: 1.5; min-height: 6.5rem; }
input[type="text"]::placeholder, textarea::placeholder { color: var(--ink-faint); }
input[type="text"]:focus, textarea:focus {
  outline: none;
  border-color: var(--brand);
  background: var(--app-bg);
}

.publish {
  font-family: inherit;
  font-size: 0.938rem;
  font-weight: 700;
  background: var(--brand);
  color: var(--on-brand);
  border: none;
  border-radius: 0.7rem;
  padding: 0.85rem 1rem;
  cursor: pointer;
  transition: filter .15s, transform .1s;
}
.publish:hover:not(:disabled) { filter: brightness(1.08); }
.publish:active:not(:disabled) { transform: scale(.99); }
.publish:disabled { background: var(--app-line-2); color: var(--ink-faint); cursor: not-allowed; }
.publish:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

input[type="email"], input[type="password"], input[type="datetime-local"], select {
  font-family: inherit;
  font-size: 0.938rem;
  color: var(--ink);
  background: var(--app-sunk);
  border: 1.5px solid transparent;
  border-radius: 0.6rem;
  padding: 0.7rem 0.8rem;
  width: 100%;
}
input[type="email"]:focus, input[type="password"]:focus,
input[type="datetime-local"]:focus, select:focus {
  outline: none; border-color: var(--brand); background: var(--app-bg);
}

/* ================= Buzón ================= */
.buzon {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.15rem 1.15rem 2.5rem;
}
.buzon .types { grid-template-columns: 1fr 1fr; }
.buzon textarea { min-height: 8rem; }

.buzon-legal {
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--ink-faint);
}
.buzon-legal a { color: var(--brand); }

.buzon-recado {
  font-size: 0.813rem;
  line-height: 1.45;
  font-weight: 600;
  padding: 0.7rem 0.85rem;
  border-radius: 0.6rem;
  background: var(--c-aviso-w);
  color: var(--c-aviso);
}

.buzon-hecho {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.85rem;
  padding: 3rem 1.5rem;
}
.buzon-hecho .tick {
  width: 3.5rem; height: 3.5rem;
  border-radius: 50%;
  background: var(--ok);
  color: var(--app-bg);
  display: grid;
  place-items: center;
}
.buzon-hecho .tick svg { width: 1.75rem; height: 1.75rem; }
.buzon-hecho h3 { font-size: 1.15rem; font-weight: 720; }
.buzon-hecho p {
  font-size: 0.938rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 22rem;
}

/* El buzón trae su propio relleno, así que su contenedor solo aporta el
   desplazamiento. */
.buzon-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}