/* ==========================================================================
   dato luminoso - sistema de diseno global maestro (estilos.css)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. IMPORTACIÓN DE LA TIPOGRAFÍA OFICIAL MONTSERRAT
   -------------------------------------------------------------------------- */
/* Tipografía local: Montserrat desde la carpeta /tipografia del sitio.
   Una sola fuente variable cubre todos los grosores (300 a 800) y otra la cursiva. */
@font-face {
  font-family: 'Montserrat Local';
  src: url('../tipografia/Montserrat-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat Local';
  src: url('../tipografia/Montserrat-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}



/* --------------------------------------------------------------------------
   2. PANEL DE VARIABLES CENTRALES (EDICIÓN AQUÍ)
   -------------------------------------------------------------------------- */
:root {
  /* --- PALETA DE COLORES PRINCIPALES --- */
  --color-texto-principal: #ffffff;
  --color-texto-secundario: rgba(255, 255, 255, 0.80);
  --color-texto-negro: rgba(0, 0, 0, 0.80);            /* Negro al 80% de opacidad */

  --color-principal-solido: #ff5757;
  --color-principal-hover: rgba(255, 87, 87, 0.80);
  --color-iconos-redes: rgba(0, 0, 0, 0.80);           /* Negro al 80% para iconos */

  --degradado-principal: linear-gradient(135deg, #ff5757 0%, #9e005d 100%);
  --degradado-hover: linear-gradient(135deg, #9e005d 0%, #ff5757 100%);
  
  /* --- COLORES DE FONDO DE LA PÁGINA (UNICAMENTE BLANCO Y GRIS) --- */
  --color-fondo-base: #ffffff;
  --color-fondo-gris-tarjetas: #F5F7FA;

  /* --- BORDES Y SEPARADORES --- */
  --color-borde-divisor: rgba(255, 255, 255, 0.80);
  --grosor-borde: 2px;

  /* --- TIPOGRAFÍA Y ESCALA DE TAMAÑOS --- */
  --fuente-principal: 'Montserrat Local', 'Montserrat', 'Segoe UI', Roboto, Arial, sans-serif;
  
  --tamano-titulo: 18px;
  --tamano-subtitulo: 16px;
  --tamano-texto-normal: 14px;
  --tamano-meta-info: 12px;

  /* --- VARIABLES DE CONTROL PARA LA BARRA SUPERIOR --- */
  --altura-barra-superior: 72px;
  --altura-logotipo-barra: 46px;
  --tamano-menu-navegacion: var(--tamano-titulo);
  --tamano-icono-red: 20px;
  
  /* --- ESTRUCTURA Y ESPACIADOS GLOBALES --- */
  --radio-borde: 10px;
  --transicion-suave: all 0.25s ease-in-out;
}

/* --------------------------------------------------------------------------
   3. RESETEO Y APLICACIÓN GLOBAL AUTOMÁTICA
   -------------------------------------------------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html, body {
  width: 100%;
  min-height: 100vh;
  background-color: var(--color-fondo-base);
  color: var(--color-texto-negro);
  font-family: var(--fuente-principal);
  font-size: var(--tamano-texto-normal);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------------------
   4. UTILIDADES GLOBALES - ESQUELETO DE CARGA (SKELETON SHIMMER)
   -------------------------------------------------------------------------- */
.skeleton {
  background-color: var(--color-fondo-gris-tarjetas) !important;
  position: relative;
  overflow: hidden !important;
  border-color: transparent !important;
  pointer-events: none !important;
  user-select: none;
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.40) 50%,
    transparent 100%
  );
  animation: animacionShimmer 1.5s infinite;
}

@keyframes animacionShimmer {
  100% {
    transform: translateX(100%);
  }
}

/* ==========================================================================
   INSIGNIAS DE CALIDAD PRO (4K / FHD / HD / SD)
   ========================================================================== */
.etiqueta-calidad,
.modal-calidad,
.meta-doc .etiqueta-calidad,
.fila-meta-portada .etiqueta-calidad {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 18px;
  padding: 0 6px !important;
  border-radius: 3px !important;
  font-family: var(--fuente-principal) !important;
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.6px !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  vertical-align: middle;
  box-sizing: border-box;
}

/* Estilo Estándar (FHD / HD / SD) sobre tarjetas oscuras */
.etiqueta-calidad,
.meta-doc .etiqueta-calidad,
.fila-meta-portada .etiqueta-calidad {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.16) !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  backdrop-filter: blur(4px);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* En el Modal Cinema (Fondo blanco) */
.modal-calidad {
  color: var(--color-texto-negro) !important;
  background-color: rgba(0, 0, 0, 0.06) !important;
  border: 1px solid rgba(0, 0, 0, 0.25) !important;
}

/* Resaltado Premium Exclusivo para 4K */
.etiqueta-calidad.es-4k,
.modal-calidad.es-4k,
.meta-doc .etiqueta-calidad.es-4k,
.fila-meta-portada .etiqueta-calidad.es-4k {
  background: var(--color-principal-solido) !important;
  color: #ffffff !important;
  border: 1px solid var(--color-principal-solido) !important;
  text-shadow: none !important;
}

/* #region Componente Combobox */

/* 1. Contenedor principal */
.combobox {
  position: relative;
  width: 100%;
}

/* 2. Campo disparador / botón principal */
.combobox-disparador {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-radius: calc(var(--radio-borde));
  border: var(--grosor-borde) solid transparent;
  outline: none;
  background: var(--color-fondo-gris-tarjetas);
  color: var(--color-texto-negro);
  font-family: var(--fuente-principal);
  font-size: var(--tamano-texto-normal);
  cursor: pointer;
  transition: var(--transicion-suave);
}

.combobox-disparador:hover,
.combobox-disparador:focus,
.combobox.abierto .combobox-disparador {
  border-color: var(--color-principal-solido);
  background: var(--color-fondo-base);
}

/* 3. Flecha indicadora */
.combobox-flecha {
  width: 18px;
  height: 18px;
  color: var(--color-texto-negro); /* <-- En reposo se muestra negra */
  transition: transform 0.25s ease;
  flex-shrink: 0;
}

.combobox.abierto .combobox-flecha {
  transform: rotate(180deg);
}

.combobox-disparador:hover .combobox-flecha,
.combobox-disparador:focus .combobox-flecha,
.combobox.abierto .combobox-flecha {
  color: var(--color-principal-solido);
}

.combobox.abierto .combobox-flecha {
  transform: rotate(180deg);
}

/* 4. Lista desplegable flotante */
.combobox-lista {
  box-sizing: border-box;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 100%;
  background-color: var(--color-fondo-base);
  border-radius: var(--radio-borde);
  border: var(--grosor-borde) solid var(--color-fondo-gris-tarjetas);
  list-style: none;
  padding: 8px;
  margin: 0;
  z-index: 200; /* <-- Cambiado a 200 para quedar por encima de miniaturas e inputs */
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none; /* Desactivado cuando está cerrado */
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.combobox.abierto .combobox-lista {
  opacity: 1;
  visibility: visible;
  pointer-events: auto; /* <-- Permite recibir clics al abrir */
  transform: translateY(0);
}

/* 5. Elementos / opciones de la lista */
.combobox-item {
  padding: 12px 14px;
  border-radius: var(--radio-borde);
  font-family: var(--fuente-principal);
  font-size: var(--tamano-texto-normal);
  color: var(--color-texto-negro);
  cursor: pointer;
  transition: var(--transicion-suave);
  text-transform: none; /* <-- Respeta la mayúscula inicial */
}

.combobox-item:hover,
.combobox-item.seleccionado {
  background-color: var(--color-fondo-gris-tarjetas);
  color: var(--color-principal-solido);
}

/* #endregion */

/* #region Componente TextBox */

.campo label {
  font-size: var(--tamano-texto-pequeno);
  font-weight: 700;
  color: var(--color-texto-negro);
}

/* 1. Estilos base del control TextBox */
.textbox,
.campo input[type="text"],
.campo input[type="url"],
.campo input[type="date"],
.campo textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 14px 18px;
  border-radius: var(--radio-borde);
  border: var(--grosor-borde) solid transparent;
  outline: none;
  background: var(--color-fondo-gris-tarjetas);
  color: var(--color-texto-negro);
  font-family: var(--fuente-principal);
  font-size: var(--tamano-texto-normal);
  transition: var(--transicion-suave);
}

/* 2. Estados Hover y Focus */
.textbox:hover,
.textbox:focus,
.campo input[type="text"]:hover,
.campo input[type="text"]:focus,
.campo input[type="url"]:hover,
.campo input[type="url"]:focus,
.campo input[type="date"]:hover,
.campo input[type="date"]:focus,
.campo textarea:hover,
.campo textarea:focus {
  border-color: var(--color-principal-solido);
  background: var(--color-fondo-base);
}

/* 3. Placeholder */
.textbox::placeholder,
.campo input::placeholder,
.campo textarea::placeholder {
  color: color-mix(in srgb, var(--color-texto-negro) 40%, transparent);
  font-family: var(--fuente-principal);
  font-size: var(--tamano-texto-normal);
}

/* 4. Ajustes específicos para Date (icono de calendario) */
.campo input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.6;
  transition: opacity var(--transicion-suave);
}

.campo input[type="date"]:hover::-webkit-calendar-picker-indicator,
.campo input[type="date"]:focus::-webkit-calendar-picker-indicator {
  opacity: 1;
}

/* 5. Variante multilínea (TextArea) */
textarea.textbox,
.campo textarea {
  min-height: 120px;
  resize: vertical;
}

/* #endregion */

/* #region Componente RichTextBox */

/* 1. Contenedor principal del RichTextBox */
.richtextbox {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  border-radius: var(--radio-borde);
  border: var(--grosor-borde) solid transparent;
  background: var(--color-fondo-gris-tarjetas);
  transition: var(--transicion-suave);
  overflow: hidden;
}

.richtextbox:hover,
.richtextbox:focus-within {
  border-color: var(--color-principal-solido);
  background: var(--color-fondo-base);
}

/* 2. Barra de herramientas superior */
.richtextbox-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: var(--grosor-borde) solid color-mix(in srgb, var(--color-texto-negro) 8%, transparent);
  background: transparent;
}

.btn-herramienta {
  background: transparent;
  border: none;
  outline: none;
  width: 30px;
  height: 30px;
  border-radius: var(--radio-borde));
  color: var(--color-texto-negro);
  font-family: var(--fuente-principal);
  font-size: var(--tamano-texto-normal);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transicion-suave);
}

.btn-herramienta:hover {
  background: color-mix(in srgb, var(--color-principal-solido) 15%, transparent);
  color: var(--color-principal-solido);
}

/* 3. Área de edición de texto fija con scrollbar forzado */
.richtextbox-editor {
  box-sizing: border-box;
  width: 100%;
  height: 180px;
  overflow-y: auto;
  padding: 14px 18px;
  border: none;
  outline: none;
  font-family: var(--fuente-principal);
  font-size: var(--tamano-texto-normal);
  color: var(--color-texto-negro);
  line-height: 1.6;
  word-break: break-word;
  white-space: pre-wrap; /* <-- AGREGA ESTA LÍNEA AQUÍ */
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--color-texto-negro) 20%, transparent) transparent;
}
/* Placeholder para elemento contenteditable */
.richtextbox-editor:empty::before {
  content: attr(data-placeholder);
  color: color-mix(in srgb, var(--color-texto-negro) 40%, transparent);
  pointer-events: none;
}

/* Barra de desplazamiento del editor */
.richtextbox-editor::-webkit-scrollbar {
  width: 6px;
}

.richtextbox-editor::-webkit-scrollbar-track {
  background: transparent;
}

.richtextbox-editor::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--color-texto-negro) 20%, transparent);
  border-radius: 10px;
}

.richtextbox-editor::-webkit-scrollbar-thumb:hover {
  background: var(--color-principal-solido);
}

/* #endregion */

/* #region Componente Boton */

.btn-publicar {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 52px;
  padding: 14px 20px;
  margin-top: 10px;
  margin-bottom: 12px;
  flex-shrink: 0;
  
  display: inline-flex;
  align-items: center;
  justify-content: center;
  
  background: var(--degradado-principal);
  border: none;
  outline: none;
  border-radius: var(--radio-borde);
  overflow: hidden;
  cursor: pointer;
  
  /* Tipografía */
  font-family: var(--fuente-principal);
  font-weight: 700;
  font-size: var(--tamano-subtitulo);
  color: var(--color-texto-principal);
}

.btn-publicar {
  /* ... tus otros estilos ... */
  transform: none !important;
}

.btn-publicar:hover {
  transform: none !important;
}

/* El texto debe ir en su propia capa para que la opacidad no lo tape */
.btn-publicar-texto {
  position: relative;
  z-index: 2;
  pointer-events: none;
}

/* Capa superior que contiene el degradado invertido */
.btn-publicar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radio-borde);
  background: var(--degradado-hover);
  opacity: 0;
  z-index: 1;
  transition: opacity 0.4s ease-in-out;
}

.btn-publicar:hover::before {
  opacity: 1; /* Solo desvanece el color, el botón se queda inmóvil */
}

#mensaje-estado {
  font-family: var(--fuente-principal);
  font-weight: 600;
  text-align: center;
  min-height: 24px;
  font-size: var(--tamano-texto-normal);
}

/* #endregion */