/* Panel de avisos de Jellyfin Casa */
:root {
  --fondo: #0f141c; --superficie: #18202c; --superficie2: #222c3b; --borde: #2c3849;
  --texto: #eef2f8; --suave: #9aa8bb; --acento: #00a4dc; --acento2: #aa5cc3;
  --verde: #2fbf71; --dorado: #e8b04b; --rojo: #ff7a6b;
  --wa-fondo: #0b141a; --wa-burbuja: #005c4b; --tg-fondo: #17212b; --tg-burbuja: #2b5278;
  color-scheme: dark;
  font: 15px/1.45 system-ui, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fondo); color: var(--texto); }
a { color: #7fd3f5; }
h2 { margin: 8px 0 4px; font-size: 1.35rem; }
h3 { margin: 20px 0 8px; font-size: 1.05rem; }
code { background: var(--superficie2); padding: 1px 5px; border-radius: 4px; }
.suave { color: var(--suave); font-weight: normal; }
main { max-width: 1280px; margin: 0 auto; padding: 16px; }

/* Cabecera */
.cabecera { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 12px 16px;
  background: linear-gradient(90deg, #1b1430, #0e2433); border-bottom: 1px solid var(--borde); }
.marca { font-size: 1.1rem; } .marca span { color: var(--suave); font-size: .9rem; }
.cabecera nav { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.cabecera nav a { color: var(--texto); text-decoration: none; padding: 8px 12px; border-radius: 8px; }
.cabecera nav a:hover { background: #ffffff12; }
.cabecera nav a.activo { background: #ffffff1f; }
.grupo-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.grupo-nav + .grupo-nav { border-left: 1px solid #ffffff33; padding-left: 8px; margin-left: 4px; }
.contador { background: var(--acento); color: #fff; border-radius: 10px; padding: 0 7px; font-size: .8rem; margin-left: 4px; }
.contador.verde { background: var(--verde); }
.salir { margin: 0; }

/* Barra de estado */
.estado { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px 16px;
  background: var(--superficie); border-bottom: 1px solid var(--borde); color: var(--suave); font-size: .9rem; }
.estado strong { color: var(--texto); }
.punto { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.punto.ok { background: var(--verde); } .punto.mal { background: var(--rojo); }
.nota { margin-left: auto; }
#resumen-revision { flex-basis: 100%; }
.resumen { margin: 6px 0; padding-left: 20px; color: var(--texto); }
.indicador { display: none; color: var(--dorado); }
.indicador.htmx-request { display: inline; }

/* Botones y etiquetas */
.boton { border: 0; border-radius: 8px; padding: 9px 14px; background: var(--acento); color: #fff;
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-block; }
.boton:hover { filter: brightness(1.12); }
.boton.dorado { background: var(--dorado); color: #231a05; }
.boton.fantasma { background: transparent; color: var(--suave); border: 1px solid var(--borde); }
.boton.pequeno { padding: 5px 10px; font-size: .85rem; }
.boton.htmx-request { opacity: .6; cursor: progress; }
.etiqueta { display: inline-block; font-size: .78rem; padding: 2px 8px; border-radius: 999px;
  background: var(--superficie2); color: var(--suave); border: 1px solid var(--borde); }
.etiqueta.biblioteca { background: #00a4dc26; color: #8fdcff; border-color: #00a4dc55; }
.etiqueta.destacada { background: #e8b04b26; color: var(--dorado); border-color: #e8b04b66; }
.etiqueta.estado { background: #2fbf7126; color: #8ee6b4; border-color: #2fbf7155; }
.etiqueta.error, .error { color: var(--rojo); }
.aviso { padding: 8px 10px; border-radius: 8px; margin: 8px 0; font-size: .9rem; }
.aviso.ok { background: #2fbf711f; color: #9eeac0; }
.aviso.error { background: #ff7a6b1f; color: var(--rojo); }
.vacio { padding: 28px; background: var(--superficie); border-radius: 12px; text-align: center; color: var(--suave); }

/* Filtros */
.barra-filtros { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.pestanas { display: flex; gap: 6px; flex-wrap: wrap; }
.pestanas a { padding: 6px 12px; border-radius: 999px; background: var(--superficie); color: var(--suave);
  text-decoration: none; border: 1px solid var(--borde); font-size: .9rem; }
.pestanas a.activo { background: var(--acento); color: #fff; border-color: var(--acento); }
.pestanas.bibliotecas a.activo { background: var(--acento2); border-color: var(--acento2); }
.cifra { opacity: .75; margin-left: 2px; }

/* Tarjetas */
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 14px; }
.tarjeta { display: flex; gap: 14px; background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 14px; padding: 12px; }
.tarjeta.estado-approved { border-color: #2fbf7166; }
.tarjeta.estado-discarded { opacity: .6; }
.caratula { width: 110px; height: 165px; object-fit: cover; border-radius: 8px; background: var(--superficie2); flex: none; }
.cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cuerpo h3 { margin: 6px 0 4px; }
.etiquetas { display: flex; gap: 6px; flex-wrap: wrap; }
.sinopsis { color: var(--suave); font-size: .88rem; margin: 2px 0 6px; display: -webkit-box;
  -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.fecha { color: var(--suave); font-size: .8rem; margin: 0 0 8px; }
.acciones { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }

/* Búsqueda */
.buscador { display: flex; gap: 8px; margin: 12px 0 18px; }
.buscador input { flex: 1; max-width: 520px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--borde);
  background: var(--superficie); color: var(--texto); font: inherit; }

/* Vista previa tipo móvil */
.previas { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.movil { border-radius: 16px; padding: 14px; min-height: 120px; }
.movil.whatsapp { background: var(--wa-fondo); }
.movil.telegram { background: var(--tg-fondo); }
.canal { font-size: .8rem; color: var(--suave); margin-bottom: 8px; }
.burbuja { white-space: pre-wrap; word-break: break-word; padding: 8px 10px; border-radius: 10px;
  max-width: 440px; font-size: .92rem; }
.whatsapp .burbuja { background: var(--wa-burbuja); }
.telegram .burbuja { background: var(--tg-burbuja); }
.burbuja .foto { display: block; width: 100%; max-height: 380px; object-fit: cover; border-radius: 8px; margin-bottom: 8px; }

/* Reglas */
.reglas { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.regla { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--superficie);
  border: 1px solid var(--borde); border-radius: 12px; padding: 12px 14px; }
.regla.guardada { border-color: var(--verde); }
.regla .nombre { display: flex; flex-direction: column; min-width: 240px; flex: 1; }
.regla label { display: flex; flex-direction: column; font-size: .8rem; color: var(--suave); gap: 3px; }
select { background: var(--superficie2); color: var(--texto); border: 1px solid var(--borde); border-radius: 8px;
  padding: 7px 10px; font: inherit; }

/* Entrada */
.pantalla-entrar { min-height: 100vh; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(circle at 30% 20%, #2a1840, var(--fondo) 60%); }
.caja-entrar { width: 100%; max-width: 360px; background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.caja-entrar h1 { margin: 0; }
.caja-entrar input { padding: 10px 12px; border-radius: 8px; border: 1px solid var(--borde);
  background: var(--superficie2); color: var(--texto); font: inherit; }

@media (max-width: 700px) {
  .rejilla { grid-template-columns: 1fr; }
  .caratula { width: 84px; height: 126px; }
  .nota { margin-left: 0; }
  /* Móvil (acceso desde el iPhone, 17/10/2026): nada más ancho que la pantalla. */
  .buscador { flex-wrap: wrap; }
  .buscador input, .buscador select { flex: 1 1 140px; min-width: 0; max-width: 100%; }
  .tabla { display: block; overflow-x: auto; }
  .acciones > * { max-width: 100%; }
  .acciones label { flex-wrap: wrap; }
  select, input, textarea { max-width: 100%; }
}

@media (max-width: 760px) {
  .cabecera { gap: 8px; }
  .cabecera nav { order: 3; flex-basis: 100%; }
  .grupo-nav { flex-basis: 100%; }   /* móvil: un grupo por línea, con una raya fina entre ellos */
  .grupo-nav + .grupo-nav { border-left: 0; padding-left: 0; margin-left: 0; border-top: 1px solid #ffffff33; padding-top: 4px; }
  .marca span { display: none; }
  .salir { margin-left: auto; }
}

/* Explorar bibliotecas */
.pestanas span.suave { align-self: center; font-size: .85rem; }
.paginacion { display: flex; gap: 12px; align-items: center; justify-content: center; margin: 20px 0; }
.temporadas:empty { display: none; }
.lista-temporadas { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 6px; }
.lista-temporadas li { display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 6px 8px; background: var(--superficie2); border-radius: 8px; }

/* Programación de envíos */
.programacion { display: flex; flex-direction: column; gap: 14px; background: var(--superficie);
  border: 1px solid var(--borde); border-radius: 12px; padding: 16px; margin-bottom: 28px; }
.programacion fieldset { border: 1px solid var(--borde); border-radius: 10px; padding: 10px 14px; margin: 0; }
.programacion legend { padding: 0 6px; font-weight: 600; }
.programacion .opcion { display: block; margin: 4px 0; }
.nota-modo { margin: 6px 0 0; font-size: .85rem; }
.tabla-dias { display: grid; grid-template-columns: 150px minmax(120px, 260px); gap: 6px 12px; align-items: center; }
.tabla-dias .dia { display: flex; gap: 8px; align-items: center; }
.programacion input[type=text], .programacion input[type=number] { background: var(--superficie2); color: var(--texto);
  border: 1px solid var(--borde); border-radius: 8px; padding: 7px 10px; font: inherit; }
.limites { display: flex; gap: 14px; flex-wrap: wrap; }
.limites label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--suave); }
.limites input { width: 110px; }
.aviso:not(.ok):not(.error) { background: #e8b04b1f; color: var(--dorado); }
.burbuja .foto.cartel { max-height: none; object-fit: contain; }

/* WhatsApp */
.tarjeta-ancha { background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; padding: 14px 16px; margin: 14px 0; }
.tarjeta-ancha h3 { margin-top: 0; }
.tarjeta-ancha input[type=text] { background: var(--superficie2); color: var(--texto); border: 1px solid var(--borde);
  border-radius: 8px; padding: 8px 10px; font: inherit; min-width: 240px; }
.qr { display: block; width: 280px; height: 280px; background: #fff; padding: 10px; border-radius: 10px; margin: 8px 0; }
.boton[disabled] { opacity: .45; cursor: not-allowed; }

.enlaces-opcion { margin-top: 10px !important; }

.burbuja.separada + .burbuja.separada { margin-top: 12px; }
.longitud { text-align: right; font-size: .72rem; opacity: .6; margin-top: 4px; }

/* Aviso de WhatsApp (sesión caída o envío fallido) */
.alerta-whatsapp { background: #ff7a6b26; color: #ffd1cb; border-bottom: 1px solid var(--rojo); padding: 10px 16px; }
.alerta-whatsapp a { margin-left: 8px; }
.aviso-novedades { background: #2f7de126; border-bottom: 1px solid #2f7de1; padding: 8px 16px; }
.aviso-novedades .boton { margin-left: 8px; }
[hidden] { display: none !important; }
.tarjeta.peticion-usuario { border-color: #2fa85a; box-shadow: 0 0 0 1px #2fa85a inset; }
.etiqueta.pedida { background: #2fa85a; color: #fff; font-weight: 600; }
.enlace-quien { background: var(--superficie2); border: 1px solid var(--borde); border-radius: 999px; padding: 1px 8px;
                margin: 0 2px; cursor: pointer; color: var(--texto); font-size: .8rem; }
.enlace-quien:hover { border-color: var(--acento); }

.boton.peligro { color: var(--rojo); border-color: #ff7a6b66; }
.acciones.vaciar { align-items: center; margin-bottom: 14px; }

/* Comunicados */
#form-comunicado { flex-direction: column; }
#form-comunicado label { width: 100%; }
#form-comunicado input[type=text] { width: 100%; max-width: 640px; }
textarea { width: 100%; max-width: 760px; font: inherit; padding: 8px; border-radius: 8px; border: 1px solid var(--borde); box-sizing: border-box; background: var(--superficie2); color: var(--texto); }
.tabla { border-collapse: collapse; width: 100%; font-size: .9rem; }
.tabla th, .tabla td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--borde, #ddd); }

/* Peticiones */
.modo-bot .acciones { align-items: center; margin-top: 0; }
.buscador select { min-width: 170px; }
.tarjeta.peticion.p-por_identificar { border-color: #e8b04b66; }
.tarjeta.peticion.p-consulta { border-color: #00a4dc66; }
.tarjeta.peticion.p-aceptada { border-color: #2fbf7166; }
.tarjeta.peticion.p-rechazada { opacity: .65; }
.etiqueta.aviso-cines { background: #ff7a6b26; color: #ffb4aa; border-color: #ff7a6b55; }
.escrito { margin: 0 0 6px; font-size: .88rem; color: var(--dorado); }
.hilo { margin: 4px 0 8px; font-size: .88rem; }
.hilo summary { cursor: pointer; color: var(--suave); margin-bottom: 6px; }
.mensaje { padding: 6px 9px; border-radius: 10px; margin: 4px 0; max-width: 92%; width: fit-content; }
.mensaje .texto { white-space: pre-wrap; word-break: break-word; }
.mensaje.admin { background: var(--tg-burbuja); margin-left: auto; }
.mensaje.usuario { background: var(--superficie2); border: 1px solid var(--borde); }
.mensaje.usuario.nuevo { border-color: var(--acento); }
.mensaje .quien { display: block; font-size: .75rem; color: var(--suave); margin-bottom: 2px; }
.formulario-peticion:empty { display: none; }
.caja-accion { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding: 10px;
  background: var(--superficie2); border-radius: 10px; }
.caja-accion label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--suave); }
.caja-accion label.fila { flex-direction: row; align-items: center; gap: 8px; }
.caja-accion .suave { margin: 0; font-size: .8rem; }
.caja-accion .fila { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.caja-accion input[type=text] { background: var(--superficie); color: var(--texto); border: 1px solid var(--borde);
  border-radius: 8px; padding: 7px 10px; font: inherit; flex: 1; min-width: 160px; }
.caja-accion input.corto { flex: 0 0 80px; min-width: 0; }
.resultados-identificar { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-direction: column; gap: 6px; }
.resultados-identificar li { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px;
  padding: 6px 8px; background: var(--superficie); border-radius: 8px; }
.resultados-identificar .sinopsis { margin: 2px 0 0; -webkit-line-clamp: 2; line-clamp: 2; }
.buscador input[type=search] { flex: 1; max-width: 520px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--borde);
  background: var(--superficie); color: var(--texto); font: inherit; }
.etiqueta.en-jellyfin { background: #aa5cc326; color: #d9b3e6; border-color: #aa5cc366; }
.mensaje.sistema { background: transparent; border: 1px dashed var(--borde); color: var(--suave); }
.posible-jellyfin { margin: 4px 0 8px; padding: 8px 10px; border-radius: 10px; font-size: .88rem;
  background: #aa5cc31f; border: 1px solid #aa5cc366; }
.posible-jellyfin .acciones { margin-top: 6px; }
.programar input[type=datetime-local] { background: var(--superficie2); color: var(--texto); border: 1px solid var(--borde); border-radius: 8px; padding: 7px 10px; font: inherit; }
.programar .fila { display: flex; align-items: center; gap: 8px; }
.plantilla-usuario input.corto { width: 70px; }
.plantilla-usuario .tabla { max-width: 640px; margin: 10px 0; }
.boton-tg { display: block; max-width: 440px; margin: 4px 0; padding: 6px 10px; border-radius: 8px; text-align: center; background: #ffffff1a; color: #8fd3ff; text-decoration: none; font-size: .88rem; }
.boton-tg.azul { background: #2f7de1; color: #fff; }
.boton-tg.verde { background: #2fa85a; color: #fff; }
.boton-tg.rojo { background: #d9443a; color: #fff; }

/* Comentario libre para el envío (18/10/2026) */
.comentario { margin: 6px 0; }
.comentario label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; }
.comentario input { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--borde); background: var(--superficie2);
  color: var(--texto); font: inherit; }

/* «💌 Recomendar» en Añadir título (18/10/2026) */
.recomendar { margin-top: 10px; padding: 10px; border: 1px solid var(--borde); border-radius: 10px; }
.personas-recomendar { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0; }
.personas-recomendar label { display: flex; align-items: center; gap: 6px; }
.recomendar textarea { width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--borde);
  background: var(--superficie2); color: var(--texto); font: inherit; margin-top: 4px; }