/* Cine sin prisa · comunidad (comunidad.js)
   Hoja compartida por la landing y la biblioteca. Usa los tokens de cada página:
   --paper, --sheet, --ink, --ink-soft, --line, --action, --on-action, --sky, --sky-wash,
   --peach, --peach-wash, --shadow y --f-display (la landing define alias con esos nombres). */

/* Botones base dentro de los diálogos y del menú de cuenta (la landing no tiene .btn propio) */
.comu-dlg .btn, .cuenta .btn {
  font: inherit; font-size: .92rem; cursor: pointer; border-radius: 12px; padding: 9px 14px; min-height: 44px;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink); text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background-color .18s ease-out, border-color .18s ease-out, filter .18s ease-out;
}
.comu-dlg .btn:hover, .cuenta .btn:hover { border-color: var(--action); }
.comu-dlg .btn.primary { background: var(--action); border-color: var(--action); color: var(--on-action); font-weight: 700; }
.comu-dlg .btn.primary:hover { filter: brightness(1.08); }
.comu-dlg .meta { color: var(--ink-soft); font-size: .88rem; }

/* Botón de cuenta: llamativo cuando no hay sesión, con inicial cuando la hay */
.cuenta-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px 0 14px; border-radius: 999px;
  font: inherit; font-weight: 700; font-size: .95rem; cursor: pointer; white-space: nowrap; text-decoration: none;
  border: 2px solid transparent; transition: filter .18s ease-out, transform .18s ease-out, border-color .18s ease-out;
}
.cuenta-btn svg { width: 18px; height: 18px; flex: none; }
.cuenta-entrar { background: var(--action); color: var(--on-action); box-shadow: 0 6px 18px -8px var(--action); }
.cuenta-entrar:hover { filter: brightness(1.08); transform: translateY(-1px); }
.cuenta-yo { background: var(--sheet); color: var(--ink); border-color: var(--line); padding: 0 14px 0 4px; max-width: 46vw; }
.cuenta-yo:hover { border-color: var(--action); }
.cuenta-yo .inicial {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--action); color: var(--on-action); font-family: var(--f-display, inherit); font-size: 1rem; font-weight: 700;
}
.cuenta-yo .nombre { overflow: hidden; text-overflow: ellipsis; }
.cuenta-entrar .corto { display: none; }
@media (max-width: 420px) {
  .cuenta-entrar .largo, .cuenta-yo .nombre { display: none; }
  .cuenta-entrar .corto { display: inline; }
  .cuenta-entrar { padding: 0 14px 0 12px; gap: 6px; }
  .cuenta-yo { padding: 0 4px; }
}
@media (prefers-reduced-motion: reduce) { .cuenta-btn { transition: none; } .cuenta-entrar:hover { transform: none; } }

/* Botón de Google según su guía de marca: fondo blanco, borde gris, logotipo de color */
.btn-google {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 16px;
  border-radius: 999px; border: 1px solid #747775; background: #ffffff; color: #1f1f1f;
  font: inherit; font-weight: 600; font-size: 1rem; cursor: pointer; transition: background-color .18s ease-out, box-shadow .18s ease-out;
}
.btn-google:hover { background: #f8f9fa; box-shadow: 0 1px 3px rgba(60,64,67,.3); }
.btn-google svg { width: 20px; height: 20px; flex: none; }
:root[data-theme="dark"] .btn-google { background: #131314; color: #e3e3e3; border-color: #8e918f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-google { background: #131314; color: #e3e3e3; border-color: #8e918f; } }
.comu-sep { display: flex; align-items: center; gap: 12px; color: var(--ink-soft); font-size: .88rem; margin: 2px 0; }
.comu-sep::before, .comu-sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.comu-dlg h2 { margin: 0; font-family: var(--f-display, inherit); }
.comu-dlg p { margin: 0; }

/* Comunidad (comunidad.js): cuenta, experiencias de padres y diálogos */
.cuenta:empty { display: none; }
.cuenta-menu { position: relative; }
.cuenta-menu > summary { list-style: none; }
.cuenta-menu > summary::-webkit-details-marker { display: none; }
.cuenta-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; min-width: 220px; display: grid; gap: 6px; padding: 12px;
  background: var(--sheet); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.cuenta-pop .meta { margin: 0 0 4px; overflow-wrap: anywhere; color: var(--ink-soft); font-size: .85rem; }
.cuenta-pop .btn { justify-content: flex-start; min-height: 40px; }
.tag.comu-tag { background: var(--peach-wash); border-color: var(--peach); color: var(--ink); display: inline-flex; align-items: center; gap: 4px; }
.box.comu { display: grid; gap: 10px; padding: 14px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); }
.box.comu .bh { margin: 0; }
.comu-res { margin: 0; }
.comu-lista { display: grid; gap: 8px; }
.comu-lista:empty { display: none; }
.comu-c { background: var(--sheet); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: grid; gap: 4px; }
.comu-c.pend { border-style: dashed; }
.comu-c p { margin: 0; }
.comu-quien { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.comu-txt { white-space: pre-line; overflow-wrap: anywhere; }
.comu-acc { display: flex; justify-content: flex-end; }
.comu-link { font: inherit; font-size: .82rem; background: none; border: 0; color: var(--ink-soft); text-decoration: underline; cursor: pointer; padding: 6px 2px; min-height: 32px; }
.comu-link:hover { color: var(--action); }
.comu-ok { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--sky-wash); }
.comu-form { display: grid; gap: 12px; }
.comu-form h2 { font-size: 1.5rem; }
.comu-form h4 { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: 1.1rem; }
.comu-form label { display: grid; gap: 4px; font-weight: 700; font-size: .92rem; }
.comu-form input[type=text], .comu-form input:not([type]), .comu-form input[type=email], .comu-form select, .comu-form textarea {
  font: inherit; font-weight: 400; color: var(--ink); background: var(--sheet); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; min-height: 44px; width: 100%; }
.comu-form textarea { resize: vertical; }
.comu-form .comu-check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.comu-check input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--action); }
.comu-form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.comu-form legend { font-weight: 700; font-size: .92rem; padding: 0; margin-bottom: 6px; }
.comu-escala { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.comu-escala label { display: grid; justify-items: center; gap: 2px; font-weight: 400; cursor: pointer; text-align: center; }
.comu-escala input { position: absolute; opacity: 0; pointer-events: none; }
.comu-escala span { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); background: var(--sheet); font-weight: 700; }
.comu-escala input:checked + span { background: var(--action); border-color: var(--action); color: var(--on-action); }
.comu-escala input:focus-visible + span { outline: 3px solid var(--action); outline-offset: 2px; }
.comu-escala small { font-size: .72rem; color: var(--ink-soft); line-height: 1.2; }
.comu-msg { margin: 0; color: var(--ink-soft); font-size: .92rem; }
.comu-msg:empty { display: none; }
.comu-o { margin: 0; text-align: center; color: var(--ink-soft); }
.comu-dlg { margin: auto; max-height: calc(100dvh - 32px); overflow: auto; border: 0; border-radius: 20px; padding: 22px; width: min(460px, calc(100vw - 32px)); background: var(--sheet); color: var(--ink); box-shadow: var(--shadow); }
.comu-dlg::backdrop { background: rgba(16,19,46,.55); }
.comu-dlg .comu-x { justify-self: center; }