/* ============================================
   PANTALLA DE ACCESO
   ============================================ */
.pantalla-acceso {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  animation: aparecerAcceso 0.3s ease;
}

@keyframes aparecerAcceso {
  from { opacity: 0; }
  to { opacity: 1; }
}

.acceso-contenedor {
  background: white;
  border-radius: 20px;
  padding: 40px 30px;
  max-width: 400px;
  width: 90%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  animation: aparecerModal 0.3s ease;
}

.acceso-logo {
  font-size: 28px;
  font-weight: bold;
  color: #1a1a2e;
  margin-bottom: 30px;
  letter-spacing: 1px;
}

.acceso-menu {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.acceso-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.acceso-subtitulo {
  font-size: 20px;
  color: #1a1a2e;
  margin-bottom: 10px;
}

.acceso-input {
  width: 100%;
  padding: 14px 16px;
  font-size: 15px;
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  outline: none;
  transition: border-color 0.15s ease;
  font-family: Arial, sans-serif;
}

.acceso-input:focus {
  border-color: #ff4b2b;
}

.acceso-btn-principal {
  padding: 14px;
  font-size: 16px;
  font-weight: bold;
  color: white;
  background: #ff4b2b;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.acceso-btn-principal:hover {
  opacity: 0.9;
}

.acceso-btn-principal:active {
  transform: scale(0.97);
}

.acceso-btn-principal:disabled {
  background: #ccc;
  cursor: not-allowed;
  opacity: 0.6;
}

.acceso-btn-secundario {
  padding: 14px;
  font-size: 15px;
  color: #555;
  background: #f0f0f0;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.acceso-btn-secundario:hover {
  background: #e0e0e0;
}

.btn-olvidaste {
  background: none;
  border: none;
  color: #ff4b2b;
  font-size: 14px;
  cursor: pointer;
  padding: 4px;
  transition: opacity 0.15s ease;
}

.btn-olvidaste:hover {
  opacity: 0.7;
  text-decoration: underline;
}

.recuperacion-texto {
  font-size: 14px;
  color: #666;
  margin-bottom: 6px;
  line-height: 1.4;
}

.auth-mensaje-error {
  margin-top: 15px;
  padding: 10px;
  border-radius: 8px;
  background: #ffebee;
  color: #d32f2f;
  font-size: 14px;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.2s ease, max-height 0.2s ease;
}

.auth-mensaje-error.visible {
  opacity: 1;
  max-height: 100px;
}

.auth-mensaje-exito {
  margin-top: 15px;
  padding: 10px;
  border-radius: 8px;
  background: #e8f5e9;
  color: #2e7d32;
  font-size: 14px;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.2s ease, max-height 0.2s ease;
}

.auth-mensaje-exito.visible {
  opacity: 1;
  max-height: 100px;
}

/* Botón de reenvío de confirmación */
.contenedor-reenvio {
  margin-top: 12px;
  text-align: center;
}

.btn-reenvio {
  padding: 10px 20px;
  font-size: 13px;
  font-weight: bold;
  color: #fff;
  background: #1a1a2e;
  border: 2px solid #1a1a2e;
  border-radius: 20px;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}

.btn-reenvio:hover:not(:disabled) {
  background: #2b2b3d;
  border-color: #2b2b3d;
}

.btn-reenvio:active:not(:disabled) {
  transform: scale(0.96);
}

.btn-reenvio:disabled {
  background: #555;
  border-color: #555;
  cursor: not-allowed;
  opacity: 0.7;
}

/* Campo de contraseña con icono de ojo */
.campo-password {
  position: relative;
  width: 100%;
}

.campo-password .acceso-input {
  padding-right: 48px;
}

.btn-ojo {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #888;
  padding: 4px 8px;
  line-height: 1;
  transition: color 0.15s ease;
}

.btn-ojo:hover {
  color: #ff4b2b;
}

/* Requisitos de contraseña */
.requisitos-password {
  text-align: left;
  padding: 8px 12px;
  background: #f9f9f9;
  border-radius: 8px;
  border: 1px solid #eee;
}

.requisito {
  font-size: 13px;
  color: #999;
  padding: 3px 0;
  transition: color 0.2s ease;
}

.requisito::before {
  content: "✗ ";
  font-weight: bold;
}

.requisito.cumplido {
  color: #2e7d32;
}

.requisito.cumplido::before {
  content: "✓ ";
}

/* ============================================
   BARRA DE USUARIO
   ============================================ */
.barra-usuario {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 15px;
  background: #1a1a2e;
  flex-wrap: wrap;
}

.usuario-nombre {
  color: #fff;
  font-size: 14px;
  font-weight: bold;
}

.rango-usuario {
  background: linear-gradient(135deg, #11998e, #38ef7d);
  color: #fff;
  box-shadow: 0 2px 8px rgba(56, 239, 125, 0.3);
}

.rango-invitado {
  background: #555;
  color: #ccc;
}

.rango-creador {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  box-shadow: 0 2px 8px rgba(118, 75, 162, 0.3);
}

.rango-moderador {
  background: linear-gradient(135deg, #2193b0, #6dd5ed);
  color: #fff;
  box-shadow: 0 2px 8px rgba(109, 213, 237, 0.3);
}

.rango-administrador {
  background: linear-gradient(135deg, #c31432, #240b36);
  color: #fff;
  box-shadow: 0 2px 8px rgba(195, 20, 50, 0.3);
}

.btn-cerrar-sesion {
  padding: 6px 16px;
  font-size: 13px;
  font-weight: bold;
  color: #fff;
  background: transparent;
  border: 1px solid #555;
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.btn-cerrar-sesion:hover {
  background: #2b2b3d;
  border-color: #777;
}

/* Estilos generales */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, sans-serif;
  background: #f5f5f5;
  color: #222;
}

/* Bandera de español, sola arriba */
.bandera-top-wrapper {
  position: relative;
  background: #1a1a2e;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 10px 15px 0;
}

.bandera-top {
  display: flex;
  justify-content: center;
  padding: 0;
}

/* Botón de sesión junto a las banderas */
.btn-sesion-idiomas {
  position: static;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: bold;
  color: #fff;
  background: #ff4b2b;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.15s ease, background 0.15s ease;
  z-index: 10;
}

.btn-sesion-idiomas:hover {
  background: #ff6b4b;
}

.btn-sesion-idiomas:active {
  transform: scale(0.96);
}

/* Selector de idiomas */
.banderas-container {
  display: flex;
  justify-content: center;
  gap: 15px;
  padding: 5px 10px 15px 10px;
  background: #1a1a2e;
  position: relative;
}

.columna-banderas {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bandera-btn {
  font-size: 22px;
  background: #2b2b3d;
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
}

.bandera-btn.activo {
  border-color: #ffd700;
  background: #3a3a54;
}

.mensaje-bienvenida {
  text-align: center;
  padding: 12px;
  font-weight: bold;
  background: #fff9e6;
}

.aviso-traduccion {
  text-align: center;
  padding: 8px 15px;
  font-size: 13px;
  color: #777;
  background: #f0f0f0;
}

/* Insignia de rango y botón de panel */
.rango-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 15px;
  background: #f5f5f5;
  flex-wrap: wrap;
}

.rango-insignia {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: bold;
  border-radius: 20px;
  letter-spacing: 0.5px;
}

.rango-dueño {
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  color: #1a1a2e;
  box-shadow: 0 2px 8px rgba(255, 140, 0, 0.3);
}

.btn-panel-admin {
  padding: 8px 20px;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  background: #1a1a2e;
  border: 2px solid #1a1a2e;
  border-radius: 20px;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.btn-panel-admin:hover {
  background: #2b2b3d;
  border-color: #2b2b3d;
}

.btn-panel-admin:active {
  transform: scale(0.96);
}

/* Indicador de temporada y capítulo */
.indicador {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: #2b2b3d;
  color: white;
  padding: 12px;
  font-size: 16px;
  font-weight: bold;
}
.indicador-obra { text-align: center; overflow-wrap: anywhere; }
.comunidad-pagina{background:#181a2a;color:#f5f5ff;min-height:100vh;font-family:inherit}
.comunidad-contenedor{max-width:820px;margin:0 auto;padding:25px 16px 70px}
.comunidad-contenedor a{color:#a9d8ff}
.comunidad-pestanas{display:flex;gap:10px;margin:18px 0}
.comunidad-pestanas button,.comunidad-contenedor button,#btnSeguirCapitulo{padding:9px 14px;border:1px solid #9ba7cd;border-radius:9px;background:#282d49;color:white;cursor:pointer}
.comunidad-pestanas button.activo{background:#ca394a;color:white}
.creadores-lista,.creador-publicaciones{display:grid;gap:12px}
.creadores-fila{display:flex;align-items:center;gap:14px;padding:10px;border:1px solid #454e72;border-radius:12px;text-decoration:none}
.creadores-fila img,.creador-cabecera img{width:52px;height:52px;border-radius:50%;object-fit:cover}
.creadores-buscar{display:block;width:100%;max-width:420px;padding:11px;margin:8px 0 18px;border:1px solid #9ba7cd;border-radius:9px;background:#282d49;color:#fff;font:inherit}
.creador-editor-bio{display:grid;gap:7px;margin:9px 0}
.creador-editor-bio textarea{width:100%;max-width:420px;padding:9px;border-radius:8px;resize:vertical;font:inherit}
.perfil-panel a.perfil-boton{color:#fff;background:#383351;text-decoration:none;text-align:center}
.creador-cabecera{display:flex;align-items:center;gap:18px;margin:20px 0;overflow-wrap:anywhere}
.creador-cabecera img{width:86px;height:86px;flex:none}
.creador-publicacion{padding:16px;border:1px solid #454e72;border-radius:12px;background:#222740;overflow-wrap:anywhere}
.creador-publicacion select,.creador-publicacion textarea{display:block;width:100%;padding:9px;margin:10px 0;border-radius:8px}
.publicacion-fecha{font-size:.86rem;color:#cad1eb}
.publicacion-imagenes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:8px}
.publicacion-imagenes img{width:100%;max-height:330px;object-fit:contain;background:#111;border-radius:8px}
.publicacion-comentario{padding:8px;border-bottom:1px solid #50587a}
.publicacion-comentario button{margin-left:8px}
.publicacion-tabla-idiomas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:10px}
.publicacion-idioma{display:grid;gap:6px;padding:10px;border:1px solid #777;border-radius:8px}
.publicacion-idioma.original{border:2px solid #ff4b2b}
.publicacion-idioma textarea{resize:vertical;width:100%;box-sizing:border-box;min-height:65px}
#btnCampana{position:relative;border:0;background:#272b44;color:white;border-radius:50%;font-size:20px;padding:9px;cursor:pointer}
#contadorCampana{position:absolute;top:-5px;right:-5px;background:#d63247;color:white;font-size:11px;border-radius:11px;min-width:17px;padding:2px}
.campana-panel{position:absolute;z-index:1200;top:100%;right:10px;width:min(360px,calc(100vw - 20px));max-height:65vh;overflow:auto;background:#20243a;color:white;padding:12px;border-radius:10px;box-shadow:0 12px 25px #0008}
.campana-item{display:block;text-align:left;width:100%;padding:10px;background:#303653;color:white;border:0;border-bottom:1px solid #59617d;cursor:pointer}
.campana-sin-leer{font-weight:bold;background:#3e486f}
.bandera-top-wrapper{position:relative}

/* Botones de navegación */
.botones-nav {
  display: flex;
  justify-content: space-between;
  padding: 10px 15px;
  gap: 10px;
}

.botones-nav button {
  flex: 1;
  padding: 12px;
  font-size: 15px;
  border: none;
  border-radius: 8px;
  background: #ff4b2b;
  color: white;
  cursor: pointer;
}

.botones-nav button:active {
  transform: scale(0.96);
}

/* Botón de zoom */
.botones-zoom {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  width: 100%;
  box-sizing: border-box;
  position: relative;
}

.btn-zoom {
  padding: 12px 24px;
  font-size: 18px;
  border: none;
  border-radius: 8px;
  background: #ff4b2b;
  color: white;
  cursor: pointer;
}

.btn-zoom:active {
  transform: scale(0.96);
}

.btn-zoom.activo {
  background: #ff8c5a;
}

.btn-zoom-control {
  padding: 12px 18px;
  font-size: 20px;
  font-weight: bold;
  border: none;
  border-radius: 8px;
  background: #2b2b3d;
  color: white;
  cursor: pointer;
  transition: background 0.15s ease;
}

.btn-zoom-control:hover {
  background: #3d3d52;
}

.btn-zoom-control:active {
  transform: scale(0.96);
}

.btn-visor-expandir {
  padding: 12px 16px;
  font-size: 20px;
  border: none;
  border-radius: 8px;
  background: #2b2b3d;
  color: white;
  cursor: pointer;
}
.btn-visor-expandir:active { transform: scale(0.96); }

.nivel-zoom {
  font-size: 14px;
  font-weight: bold;
  color: #555;
  min-width: 40px;
  text-align: center;
  flex: 0 0 40px;
}

/* Visor de imágenes */
.visor-imagenes {
  position: relative;
  width: min(500px, 90%);
  max-height: 85vh;
  aspect-ratio: 2 / 3;
  margin: 10px auto;
  background: #111;
  border-radius: 8px;
  overflow: hidden;
}

@media (max-width: 600px) {
  .visor-imagenes {
    width: 95%;
    max-height: 80vh;
  }
}

.visor-imagenes.orientacion-horizontal {
  aspect-ratio: 3 / 2;
}
.visor-imagenes.orientacion-vertical {
  aspect-ratio: 2 / 3;
}

.visor-imagenes img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform 0.3s ease;
  transform-origin: center center;
}

/* Zonas táctiles invisibles, una en cada esquina */
.zona {
  position: absolute;
  width: 50%;
  height: 50%;
  z-index: 5;
  cursor: pointer;
}

.zona-arriba-izq {
  top: 0;
  left: 0;
}

.zona-arriba-der {
  top: 0;
  right: 0;
}

.zona-abajo-izq {
  bottom: 0;
  left: 0;
}

.zona-abajo-der {
  bottom: 0;
  right: 0;
}

/* Contador de imagen actual */
.contador-imagen {
  text-align: center;
  color: #555;
  font-size: 14px;
  margin-bottom: 10px;
}

/* Banner de anuncio */
.banner-anuncio {
  width: 100%;
  height: 60px;
  background: repeating-linear-gradient(
    45deg,
    #ddd,
    #ddd 10px,
    #ccc 10px,
    #ccc 20px
  );
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  font-size: 14px;
}

/* Botones de apoyo voluntario */
.donacion-container {
  display: flex;
  justify-content: center;
  gap: 15px;
  padding: 20px;
  flex-wrap: wrap;
}

.btn-donacion {
  padding: 14px 30px;
  font-size: 16px;
  font-weight: bold;
  color: white;
  background: linear-gradient(135deg, #f7b733, #fc4a1a);
  border: none;
  border-radius: 30px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-donacion:hover {
  box-shadow: 0 4px 15px rgba(252, 74, 26, 0.4);
}

.btn-donacion:active {
  transform: scale(0.96);
}

/* Botón de vídeo anuncio */
.btn-video-anuncio {
  padding: 14px 30px;
  font-size: 16px;
  font-weight: bold;
  color: white;
  background: linear-gradient(135deg, #11998e, #38ef7d);
  border: none;
  border-radius: 30px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-video-anuncio:hover {
  box-shadow: 0 4px 15px rgba(56, 239, 125, 0.4);
}

.btn-video-anuncio:active {
  transform: scale(0.96);
}

/* Modal de anuncio */
.modal-anuncio {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-anuncio-contenido {
  background: white;
  border-radius: 16px;
  padding: 30px;
  max-width: 500px;
  width: 90%;
  text-align: center;
  position: relative;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  animation: aparecerModal 0.25s ease;
}

@keyframes aparecerModal {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.modal-cerrar {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 28px;
  color: #888;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.15s ease;
}

.modal-cerrar:hover {
  color: #222;
}

.modal-titulo {
  font-size: 20px;
  margin-bottom: 8px;
  color: #222;
}

.modal-subtitulo {
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
}

.contenedor-anuncio {
  background: #f0f0f0;
  border-radius: 12px;
  padding: 40px 20px;
  margin-bottom: 15px;
}

.anuncio-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.icono-anuncio {
  font-size: 48px;
}

.anuncio-placeholder p {
  font-size: 14px;
  color: #666;
  max-width: 300px;
}

.anuncio-info {
  font-size: 13px !important;
  color: #999 !important;
}

.modal-pie {
  padding-top: 5px;
}

.contador-anuncio {
  font-size: 14px;
  color: #11998e;
  font-weight: bold;
}

/* Corazones de like / dislike */
.corazones {
  display: flex;
  justify-content: center;
  gap: 30px;
  padding: 15px;
}

.btn-corazon {
  font-size: 22px;
  padding: 10px 20px;
  border: 2px solid transparent;
  border-radius: 30px;
  background: #eee;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.15s ease;
}

.btn-corazon:active {
  transform: scale(0.95);
}

.btn-corazon.activo {
  border-color: #ff4b2b;
  background: #ffe4de;
}

/* Botón de reportar capítulo */
.reporte-capitulo-container {
  display: flex;
  justify-content: center;
  padding: 14px 15px 20px;
}
.reporte-capitulo-container[hidden] { display: none; }

.btn-reportar-capitulo {
  font-size: 14px;
  min-height: 44px;
  padding: 10px 20px;
  color: #713400;
  background: #fff8f0;
  border: 1px solid #e78a32;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-reportar-capitulo:hover {
  color: #f57c00;
  border-color: #f57c00;
  background: #fff8f0;
}

.btn-reportar-capitulo:active {
  transform: scale(0.96);
}

/* Barra de capítulos y temporadas */
.barra-capitulos {
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  margin: 10px 15px;
  padding: 10px;
  max-height: 300px;
  overflow-y: auto;
}

.oculta {
  display: none;
}

.barra-capitulos button {
  width: 100%;
  padding: 10px;
  margin-bottom: 8px;
  background: #2b2b3d;
  color: white;
  border: none;
  border-radius: 6px;
}

.item-lista {
  padding: 10px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}

.item-lista:active {
  background: #f0f0f0;
}

/* ============================================
   SECCIÓN DE COMENTARIOS
   ============================================ */

.seccion-comentarios {
  max-width: 700px;
  margin: 0 auto;
  padding: 20px 15px 40px 15px;
}

.comentarios-titulo {
  font-size: 20px;
  color: #1a1a2e;
  margin-bottom: 15px;
  text-align: center;
}

/* Contador de usos diarios */
.contador-usos-diarios {
  text-align: center;
  font-size: 14px;
  color: #555;
  background: #fff9e6;
  border: 1px solid #ffe082;
  border-radius: 8px;
  padding: 10px 15px;
  margin-bottom: 15px;
}

.contador-usos-diarios span {
  font-weight: bold;
  color: #fc4a1a;
}

/* Caja para escribir comentario */
.caja-comentario {
  background: white;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 20px;
}

.texto-comentario {
  width: 100%;
  min-height: 80px;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 12px;
  font-size: 15px;
  font-family: Arial, sans-serif;
  resize: vertical;
  outline: none;
  transition: border-color 0.15s ease;
}

.texto-comentario:focus {
  border-color: #ff4b2b;
}

.caja-comentario-pie {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.contador-palabras {
  font-size: 13px;
  color: #999;
}

.contador-palabras.limite {
  color: #fc4a1a;
  font-weight: bold;
}

.btn-publicar {
  padding: 10px 24px;
  font-size: 15px;
  font-weight: bold;
  color: white;
  background: #ff4b2b;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.btn-publicar:hover {
  opacity: 0.9;
}

.btn-publicar:active {
  transform: scale(0.96);
}

.btn-publicar:disabled {
  background: #ccc;
  cursor: not-allowed;
  opacity: 0.6;
}

/* Lista de comentarios */
.lista-comentarios {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.comentarios-vacio {
  text-align: center;
  color: #999;
  font-size: 15px;
  padding: 30px 0;
}

/* Cada comentario individual */
.comentario {
  background: white;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 15px;
}

.comentario.oculto {
  opacity: 0.5;
  background: #f5f5f5;
}

.comentario-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.comentario-autor {
  font-size: 13px;
  font-weight: bold;
  color: #ff4b2b;
}

.comentario-fecha {
  font-size: 12px;
  color: #aaa;
}

.comentario-contenido {
  font-size: 15px;
  line-height: 1.5;
  color: #222;
  margin-bottom: 10px;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.comentario-oculto-mensaje {
  font-size: 13px;
  color: #999;
  font-style: italic;
}

/* Botones de acción del comentario */
.comentario-acciones {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.btn-like-comentario,
.btn-dislike-comentario {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  padding: 6px 12px;
  border: 1px solid #ddd;
  border-radius: 20px;
  background: #f9f9f9;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-like-comentario:hover,
.btn-dislike-comentario:hover {
  background: #f0f0f0;
}

.btn-like-comentario.activo {
  border-color: #ff4b2b;
  background: #ffe4de;
  color: #ff4b2b;
  font-weight: bold;
}

.btn-dislike-comentario.activo {
  border-color: #555;
  background: #e0e0e0;
  font-weight: bold;
}

.btn-responder,
.btn-eliminar-comentario,
.btn-reportar-comentario {
  font-size: 13px;
  padding: 6px 12px;
  border: none;
  background: none;
  color: #888;
  cursor: pointer;
  transition: color 0.15s ease;
}

.btn-responder:hover {
  color: #ff4b2b;
}

.btn-eliminar-comentario:hover {
  color: #d32f2f;
}

.btn-reportar-comentario:hover {
  color: #f57c00;
}

.btn-responder::before {
  content: "↩ ";
}

/* Caja de respuesta (dentro de un comentario) */
.caja-respuesta {
  margin-top: 12px;
  background: #f9f9f9;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 12px;
}

.texto-respuesta {
  width: 100%;
  min-height: 60px;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px;
  font-size: 14px;
  font-family: Arial, sans-serif;
  resize: vertical;
  outline: none;
  transition: border-color 0.15s ease;
}

.texto-respuesta:focus {
  border-color: #ff4b2b;
}

.caja-respuesta-pie {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}

.contador-palabras-respuesta {
  font-size: 12px;
  color: #999;
}

.contador-palabras-respuesta.limite {
  color: #fc4a1a;
  font-weight: bold;
}

.btn-responder-publicar {
  padding: 8px 20px;
  font-size: 14px;
  font-weight: bold;
  color: white;
  background: #ff4b2b;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.btn-responder-publicar:hover {
  opacity: 0.9;
}

.btn-responder-publicar:active {
  transform: scale(0.96);
}

.btn-responder-publicar:disabled {
  background: #ccc;
  cursor: not-allowed;
  opacity: 0.6;
}

.btn-responder-cancelar {
  padding: 8px 16px;
  font-size: 14px;
  border: none;
  background: none;
  color: #888;
  cursor: pointer;
}

.btn-responder-cancelar:hover {
  color: #555;
}

/* Lista de respuestas dentro de un comentario */
.respuestas {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.respuesta {
  background: #f9f9f9;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 12px;
  margin-left: 15px;
  border-left: 3px solid #ff4b2b;
}

.respuesta.oculto {
  opacity: 0.5;
  background: #f0f0f0;
}

.respuesta-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.respuesta-autor {
  font-size: 12px;
  font-weight: bold;
  color: #ff4b2b;
}

.respuesta-fecha {
  font-size: 11px;
  color: #aaa;
}

.respuesta-contenido {
  font-size: 14px;
  line-height: 1.5;
  color: #333;
  margin-bottom: 8px;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.respuesta-acciones {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.btn-like-respuesta,
.btn-dislike-respuesta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  padding: 4px 10px;
  border: 1px solid #ddd;
  border-radius: 16px;
  background: white;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-like-respuesta:hover,
.btn-dislike-respuesta:hover {
  background: #f0f0f0;
}

.btn-like-respuesta.activo {
  border-color: #ff4b2b;
  background: #ffe4de;
  color: #ff4b2b;
  font-weight: bold;
}

.btn-dislike-respuesta.activo {
  border-color: #555;
  background: #e0e0e0;
  font-weight: bold;
}

.btn-eliminar-respuesta,
.btn-reportar-respuesta {
  font-size: 12px;
  padding: 4px 10px;
  border: none;
  background: none;
  color: #aaa;
  cursor: pointer;
  transition: color 0.15s ease;
}

.btn-eliminar-respuesta:hover {
  color: #d32f2f;
}

.btn-reportar-respuesta:hover {
  color: #f57c00;
}

/* Mensaje de error */
.comentario-error {
  text-align: center;
  color: #d32f2f;
  font-size: 14px;
  padding: 10px;
  background: #ffebee;
  border-radius: 8px;
  margin-bottom: 10px;
}
/* Modo expandido del lector */
body.lector-expandido { overflow: hidden; }
.visor-imagenes.visor-expandido {
  position: fixed;
  inset: 0;
  z-index: 1000;
  width: 100vw;
  width: 100dvw;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  border-radius: 0;
  background: #000;
  aspect-ratio: auto;
}
.visor-imagenes.visor-expandido img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.btn-salir-visor-expandido {
  display: none;
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  z-index: 1005;
  border: none;
  border-radius: 50%;
  padding: 10px 13px;
  background: rgba(0,0,0,.45);
  color: white;
  font-size: 18px;
  cursor: pointer;
}
.btn-salir-visor-expandido.visible { display: block; }


/* Catálogo */
.btn-catalogo{padding:8px 20px;font-size:14px;font-weight:bold;color:#fff;background:#ff4b2b;border:2px solid #ff4b2b;border-radius:20px;cursor:pointer}.pantalla-catalogo{max-width:1000px;margin:0 auto;padding:20px 15px 50px}.catalogo-cabecera{text-align:center;margin-bottom:18px}.catalogo-cabecera h1{color:#1a1a2e}.btn-cerrar-catalogo{border:0;border-radius:20px;padding:8px 16px;background:#2b2b3d;color:#fff;cursor:pointer;margin-bottom:12px}.catalogo-letras{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-bottom:14px}.catalogo-letras button,.catalogo-generos button{border:1px solid #ddd;border-radius:8px;padding:8px 10px;background:#fff;cursor:pointer;font-weight:bold}.catalogo-letras button.activo,.catalogo-generos button.activo{background:#1a1a2e;color:#fff}.catalogo-generos{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin:10px 0 20px}.catalogo-lista{display:grid;gap:14px}.catalogo-card{background:#fff;border:1px solid #ddd;border-radius:12px;padding:16px}.catalogo-card h2{color:#1a1a2e}.catalogo-subtitulo{color:#777;margin:4px 0 9px}.catalogo-meta{display:flex;flex-wrap:wrap;gap:7px;margin:8px 0}.catalogo-chip{display:inline-block;padding:4px 9px;border-radius:12px;background:#eee;font-size:12px}.catalogo-creadores{color:#555;font-size:14px;margin:8px 0}.catalogo-temporadas{margin-top:10px;border-top:1px solid #eee;padding-top:10px}.catalogo-temporada{margin:7px 0}.catalogo-capitulos{color:#666;font-size:13px;margin-top:3px}.catalogo-cargando,.catalogo-vacio{text-align:center;padding:30px;color:#888}.catalogo-generos-admin{display:flex;flex-wrap:wrap;gap:7px;margin:5px 0 10px}.catalogo-genero-admin{border:1px solid #ddd;border-radius:18px;padding:7px 11px;background:#fff;cursor:pointer}.catalogo-genero-admin.seleccionado{background:#1a1a2e;color:#fff}@media(max-width:600px){.catalogo-card{padding:13px}.catalogo-letras button{min-width:30px;padding:7px 8px}}


/* Nombres de obra por idioma */
.nombres-serie-idioma-lista{display:grid;gap:8px;margin:8px 0 14px}.nombre-serie-idioma{display:flex;align-items:center;gap:8px}.nombre-serie-idioma label{min-width:105px;font-weight:bold}.nombre-serie-input,.nombre-serie-tabla-input{width:100%;box-sizing:border-box;padding:8px;border:1px solid #ccc;border-radius:7px}.nombre-serie-tabla-input{margin:6px 0}.titulo-idioma-input{margin-top:6px}.catalogo-buscador{display:block;width:100%;max-width:650px;margin:0 auto 14px;padding:11px 14px;border:1px solid #ccc;border-radius:10px;box-sizing:border-box;font-size:15px}

/* Catálogo independiente */
.catalogo-pagina{min-height:100vh;background:#f5f5f5}
.catalogo-contenedor{width:min(1100px,100%);margin:0 auto;padding:20px 15px 60px;box-sizing:border-box}
.catalogo-cabecera{margin-bottom:18px}
.catalogo-cabecera h1{margin:0 0 6px;color:#1a1a2e}
.catalogo-cabecera p{margin:0;color:#666}
.catalogo-titulo-fila{display:flex;align-items:center;justify-content:space-between;gap:20px}
.catalogo-idioma{display:flex;align-items:center;gap:8px;font-weight:bold;color:#444;white-space:nowrap}
.catalogo-idioma select{padding:8px 10px;border:1px solid #ccc;border-radius:8px;background:#fff}
.catalogo-controles{position:sticky;top:0;z-index:20;background:#f5f5f5;padding:8px 0 14px}
.catalogo-buscador{display:block;width:100%;max-width:none;margin:0 0 12px;padding:13px 15px;border:1px solid #ccc;border-radius:10px;box-sizing:border-box;font-size:16px;background:#fff}
.catalogo-letras{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:6px;margin-bottom:10px}
.catalogo-letras button,.catalogo-generos button{border:1px solid #ddd;border-radius:8px;padding:8px 10px;background:#fff;cursor:pointer;font-weight:bold}
.catalogo-letras button.activo,.catalogo-generos button.activo{background:#1a1a2e;color:#fff}
.catalogo-generos{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin:0}
.catalogo-filtro-titulo{font-weight:bold;color:#444;width:100%;margin:3px 0}
.catalogo-lista{display:grid;gap:14px}
.catalogo-card{background:#fff;border:1px solid #ddd;border-radius:14px;padding:18px;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}
.catalogo-card:hover{transform:translateY(-1px);box-shadow:0 5px 18px rgba(0,0,0,.08);border-color:#bbb}
.catalogo-card:focus{outline:2px solid #ff4b2b;outline-offset:2px}
.catalogo-card-cabecera{display:flex;justify-content:space-between;gap:15px;align-items:flex-start}
.catalogo-card h2{margin:0;color:#1a1a2e}
.catalogo-abrir{font-weight:bold;color:#ff4b2b;white-space:nowrap}
.catalogo-subtitulo{color:#777;margin:4px 0 9px}
.catalogo-meta{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0}
.catalogo-chip{display:inline-block;padding:4px 9px;border-radius:12px;background:#eee;font-size:12px}
.catalogo-creadores{color:#555;font-size:14px;margin:8px 0}
.catalogo-temporadas{margin-top:12px;border-top:1px solid #eee;padding-top:10px}
.catalogo-temporada{margin:8px 0}
.catalogo-capitulos{color:#666;font-size:13px;margin-top:3px;line-height:1.5}
.catalogo-cargando,.catalogo-vacio{text-align:center;padding:35px;color:#888}
@media(max-width:600px){.catalogo-contenedor{padding:14px 10px 45px}.catalogo-titulo-fila{align-items:flex-start;flex-direction:column;gap:10px}.catalogo-idioma{width:100%;justify-content:space-between}.catalogo-idioma select{flex:1;max-width:220px}.catalogo-card{padding:14px}.catalogo-card-cabecera{gap:8px}.catalogo-abrir{font-size:13px}.catalogo-letras button{min-width:30px;padding:7px 8px}}

.catalogo-encabezado-centro{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px}.catalogo-encabezado-centro .catalogo-idioma{margin-top:2px}

.info-serie-lector{max-width:700px;margin:8px auto 10px;padding:8px 14px;text-align:center;color:#555;font-size:14px;line-height:1.6}.info-serie-lector strong{color:#1a1a2e}.info-serie-lector.oculta{display:none}
.catalogo-filtro-edad{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin:12px 0;color:#1a1a2e;font-weight:700}.catalogo-filtro-edad select{font:inherit;padding:8px 12px;border:1px solid #bbb;border-radius:8px;background:#fff;min-height:42px}.catalogo-chip-edad{background:#ece7ff;color:#34206b;font-weight:700}
.usuarios-resumen{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0}.usuarios-resumen div{background:#202136;border:1px solid #52617b;border-radius:10px;padding:12px 16px;min-width:135px;color:#f1f5ff}.usuarios-resumen strong{display:block;color:#fff;font-size:24px}.usuarios-tabla-contenedor{overflow-x:auto}.usuarios-tabla{border-collapse:collapse;width:100%;background:#202136;color:#f1f5ff}.usuarios-tabla th,.usuarios-tabla td{padding:10px 12px;border:1px solid #52617b;text-align:left;white-space:nowrap;color:#f1f5ff}.usuarios-tabla th{background:#30415f;color:#fff}.usuarios-tabla tbody tr:nth-child(even){background:#282c45}
.admin-serie-fila{display:flex;align-items:center;gap:10px;padding:8px;margin-bottom:12px;border:1px solid #3a3a54;border-radius:14px;background:#202136;min-width:0}
.admin-serie-fila .admin-serie-card{flex:1;min-width:0;width:auto;padding:10px 12px;border:0;border-radius:8px;background:transparent}
.admin-serie-fila .admin-serie-card:hover{background:#30314d}
.admin-serie-fila .admin-serie-card strong{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.admin-serie-acciones{display:flex;flex:none;align-items:center;gap:8px}
.admin-obra-accion{min-height:44px;padding:9px 14px;border:1px solid #8ecae6;border-radius:9px;background:#26364d;color:#fff;font:inherit;font-weight:700;cursor:pointer}
.admin-obra-accion:disabled{opacity:.55;cursor:wait}.admin-obra-eliminar{background:#63323a;border-color:#e48a95}.admin-obra-accion:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media(max-width:480px){.admin-serie-fila{gap:4px;padding:5px}.admin-serie-fila .admin-serie-card{padding:8px 4px}.admin-serie-fila .admin-serie-card strong{font-size:14px}.admin-serie-acciones{gap:4px}.admin-obra-accion{min-height:42px;padding:7px 8px;font-size:12px}}

/* Registro de creadores */
.btn-ser-creador{padding:8px 20px;font-size:14px;font-weight:bold;color:#fff;background:#1a1a2e;border:2px solid #1a1a2e;border-radius:20px;cursor:pointer}.btn-ser-creador:hover{background:#2b2b3d}.modal-creador{position:fixed;inset:0;z-index:2100;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;padding:15px}.modal-creador.oculta{display:none}.modal-creador-contenido{background:#fff;border-radius:16px;width:min(620px,100%);max-height:92vh;overflow-y:auto;padding:25px;position:relative;box-shadow:0 15px 50px rgba(0,0,0,.35)}.modal-creador-cerrar{position:absolute;top:8px;right:12px;border:0;background:none;font-size:28px;color:#777;cursor:pointer}.modal-creador h2{text-align:center;color:#1a1a2e;margin-bottom:8px}.modal-creador-intro{color:#666;font-size:14px;line-height:1.5;margin-bottom:16px}.creador-campo{width:100%;padding:11px 13px;border:1px solid #ccc;border-radius:8px;margin-bottom:10px;font:inherit;box-sizing:border-box}.creador-checks{display:grid;gap:9px;margin:12px 0}.creador-check{display:flex;gap:9px;align-items:flex-start;font-size:13px;line-height:1.45;color:#444}.creador-check input{margin-top:3px}.creador-acciones{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:15px}.creador-acciones button{padding:11px 18px;border:0;border-radius:22px;cursor:pointer;font-weight:bold}.btn-creador-confirmar{background:#ff4b2b;color:#fff}.btn-creador-cancelar{background:#eee;color:#555}.btn-creador-confirmar:disabled{background:#ccc;cursor:not-allowed}

.aceptacion-terminos{display:flex;gap:8px;align-items:flex-start;margin:10px 0;font-size:14px;line-height:1.4}.aceptacion-terminos input{margin-top:3px}.aceptacion-terminos a{font-weight:700}.terminos-pagina{max-width:900px;margin:0 auto;padding:25px 18px;line-height:1.6}.terminos-pagina h1{margin-top:20px}.terminos-contenido{white-space:normal}.terminos-pagina hr{margin:40px 0}.terminos-volver{display:inline-block;margin-bottom:20px}.aviso-privacidad-registro{margin:8px 0 10px;font-size:13px;line-height:1.4;color:#666;text-align:left}.aviso-privacidad-registro a{font-weight:700}

/* ============================================
   ACABADO VISUAL GLOBAL E IDIOMA PREDETERMINADO
   ============================================ */
:root {
  --color-fondo: #f4f6fb;
  --color-superficie: #ffffff;
  --color-texto: #202235;
  --color-primario: #ef4655;
  --color-primario-hover: #d93647;
  --color-oscuro: #191b32;
  --color-borde: #e2e5ee;
  --sombra-suave: 0 8px 28px rgba(24, 27, 50, .08);
  --radio-control: 12px;
}

html { scroll-behavior: smooth; }
body {
  background:
    radial-gradient(circle at top, rgba(239, 70, 85, .055), transparent 28rem),
    var(--color-fondo);
  color: var(--color-texto);
  line-height: 1.45;
}

button, input, select, textarea { font: inherit; }
button, a, select { -webkit-tap-highlight-color: transparent; }
button:not(:disabled), [role="button"], select { transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease, opacity .16s ease; }
button:not(:disabled):hover { transform: translateY(-1px); }
button:not(:disabled):active { transform: translateY(0) scale(.98); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(239, 70, 85, .28);
  outline-offset: 2px;
}

.rango-container {
  flex-direction: row;
  background: rgba(255,255,255,.82);
  border-bottom: 1px solid var(--color-borde);
  box-shadow: 0 4px 18px rgba(24,27,50,.04);
}
.btn-panel-admin, .btn-catalogo, .btn-ser-creador {
  min-width: 170px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radio-control);
}
.botones-nav { max-width: 760px; margin-inline: auto; }
.botones-nav button { min-height: 46px; border-radius: var(--radio-control); box-shadow: 0 4px 12px rgba(239,70,85,.16); }
.indicador { box-shadow: inset 0 -1px rgba(255,255,255,.08); }
.visor-imagenes, .caja-comentario, .comentario, .catalogo-card, .modal-creador-contenido, .acceso-contenedor {
  border-color: var(--color-borde);
  box-shadow: var(--sombra-suave);
}
.catalogo-pagina { background: transparent; }
.catalogo-controles {
  background: rgba(244,246,251,.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(226,229,238,.9);
}
.catalogo-card { border-radius: 16px; }
.catalogo-card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(24,27,50,.11); }
.catalogo-buscador, .catalogo-idioma select, .acceso-input, .creador-campo, .texto-comentario, .texto-respuesta {
  border-radius: var(--radio-control);
  box-shadow: 0 2px 8px rgba(24,27,50,.035);
}
.banner-anuncio { border-block: 1px solid var(--color-borde); }

.selector-idioma-flotante {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1900;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  color: #fff;
  background: rgba(25,27,50,.94);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.24);
  backdrop-filter: blur(10px);
}
.selector-idioma-flotante select {
  max-width: 175px;
  padding: 7px 28px 7px 9px;
  color: #fff;
  background: #292c49;
  border: 1px solid #454968;
  border-radius: 9px;
}

.modal-idioma-inicial {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(12,14,28,.78);
  backdrop-filter: blur(8px);
}
.modal-idioma-tarjeta {
  width: min(390px, 100%);
  padding: 28px;
  text-align: center;
  color: var(--color-texto);
  background: #fff;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 20px;
  box-shadow: 0 24px 70px rgba(0,0,0,.34);
  animation: aparecerModal .25s ease;
}
.modal-idioma-icono { font-size: 38px; margin-bottom: 8px; }
.modal-idioma-tarjeta h2 { margin: 0 0 18px; font-size: 24px; }
.modal-idioma-tarjeta select {
  width: 100%;
  min-height: 48px;
  margin-bottom: 14px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #cfd3df;
  border-radius: 11px;
}
.modal-idioma-tarjeta button {
  width: 100%;
  min-height: 48px;
  color: #fff;
  font-weight: 700;
  background: var(--color-primario);
  border: 0;
  border-radius: 11px;
  cursor: pointer;
}
.modal-idioma-tarjeta button:hover { background: var(--color-primario-hover); }

html[dir="rtl"] .selector-idioma-flotante { right: auto; left: 16px; }
html[dir="rtl"] .admin-volver { left: auto; right: 25px; }
html[dir="rtl"] .catalogo-card-cabecera, html[dir="rtl"] .comentario-cabecera { direction: rtl; }

@media (max-width: 600px) {
  .rango-container { align-items: stretch; }
  .btn-panel-admin, .btn-catalogo, .btn-ser-creador { width: 100%; }
  .selector-idioma-flotante { right: 10px; bottom: 10px; }
  .selector-idioma-flotante select { max-width: 145px; }
  .modal-idioma-tarjeta { padding: 24px 20px; }
}

/* Catálogo Fase 2: resumen de obra y paginación */
.catalogo-resumen{
  display:flex;
  flex-wrap:wrap;
  gap:10px 18px;
  margin:10px 0;
  color:#555;
  font-size:14px;
}
.catalogo-resumen strong{color:#1a1a2e}
.catalogo-cargar-mas{
  display:block;
  width:min(320px,100%);
  margin:6px auto 0;
  padding:12px 20px;
  border:1px solid #d9dce6;
  border-radius:12px;
  background:#fff;
  color:#1a1a2e;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(24,27,50,.06);
}
.catalogo-cargar-mas:hover{border-color:#bbb;box-shadow:0 7px 18px rgba(24,27,50,.09)}

.catalogo-descripcion{margin:10px 0 12px;color:#555;font-size:14px;line-height:1.55}


/* El atributo hidden siempre debe prevalecer sobre las reglas de componentes. */
[hidden] {
  display: none !important;
}

.rango-superadministrador {
  background: linear-gradient(135deg, #6d3f91, #9b5de5);
  color: #fff;
  box-shadow: 0 2px 8px rgba(109, 63, 145, 0.3);
}
.btn-sesion-perfil, .comentario-avatar {
  border-radius: 50%;
  overflow: hidden;
}
.btn-sesion-perfil {
  width: 42px;
  height: 42px;
  padding: 0;
  border: 2px solid #7a6ea5;
}
.btn-sesion-perfil img, .comentario-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.comentario-avatar { width: 30px; height: 30px; flex: none; }
.comentario-avatar-boton {
  width: 44px;
  height: 44px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.comentario-avatar-boton .comentario-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
}
.comentario-avatar-boton:focus-visible, .autor-perfil:focus-visible,
.btn-reportar-capitulo:focus-visible, .btn-reportar-comentario:focus-visible,
.btn-reportar-respuesta:focus-visible {
  outline: 3px solid #ee8d36;
  outline-offset: 2px;
}
.comentario-cabecera, .respuesta-cabecera { flex-wrap: wrap; gap: 6px; }
.btn-reportar-comentario, .btn-reportar-respuesta {
  min-height: 44px;
  color: #713400;
  background: #fff8f0;
  border: 1px solid #e78a32;
  border-radius: 18px;
}
.autor-perfil { cursor: pointer; text-decoration: underline; }
.comentario-rango { font-size: .75rem; opacity: .8; }
.perfil-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(0,0,0,.7);
  display: grid;
  place-items: center;
  padding: 16px;
}
.perfil-panel {
  position: relative;
  width: min(440px,100%);
  max-height: 90vh;
  overflow: auto;
  padding: 24px;
  border-radius: 14px;
  background: #242038;
  color: #fff;
  display: grid;
  gap: 10px;
}
.perfil-cerrar { position: absolute; right: 12px; top: 10px; cursor: pointer; }
.perfil-avatar-grande { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.perfil-recorte{display:grid;justify-items:center;gap:10px;padding:12px;border-radius:10px;background:#302a49}
.perfil-recorte[hidden]{display:none}
.perfil-recorte-ayuda{margin:0;text-align:center;font-size:13px;color:#f1ebff}
.perfil-recorte-lienzo{display:block;width:min(220px,100%);height:auto;aspect-ratio:1;border-radius:50%;border:3px solid #d9c7ff;touch-action:none;cursor:grab}
.perfil-recorte-lienzo:active{cursor:grabbing}
.perfil-recorte label{display:grid;gap:6px;width:min(260px,100%);text-align:center}
.perfil-recorte-zoom{width:100%;min-height:32px}
.perfil-input, .perfil-select, .perfil-boton { padding: 9px; border-radius: 7px; }
.perfil-reporte { padding: 10px; border-top: 1px solid #817894; }

.reportes-navegacion, .reportes-busqueda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
}
.reportes-navegacion button, .reportes-busqueda button {
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 8px;
}
.reportes-area-activa { outline: 2px solid #9481d9; font-weight: bold; }
.reportes-busqueda input { min-width: min(100%, 310px); padding: 8px; }
.reporte-detalle-nuevo {
  max-height: 88vh;
  overflow: auto;
  max-width: 760px;
}
.reporte-detalle-nuevo code { overflow-wrap: anywhere; }
.reporte-historial-fila { padding: 10px 0; border-bottom: 1px solid #817894; white-space: pre-wrap; }
.reporte-formulario { display: grid; gap: 12px; margin: 18px 0; }
.reporte-formulario label { display: grid; gap: 5px; }
.reporte-formulario textarea, .reporte-formulario select, .reporte-formulario input[type=number] {
  padding: 8px;
  max-width: 100%;
}
.reporte-formulario fieldset label { display: inline-flex; align-items: center; margin: 5px 12px 5px 0; }
.reporte-foto-vista {
  display: block;
  max-width: min(100%, 360px);
  max-height: 360px;
  object-fit: contain;
  margin: 10px 0;
  border-radius: 8px;
}
.reporte-foto-vista[hidden] { display: none; }
.perfil-historial { font-size: .86rem; }