/* web2 - estilos comunes. Siempre que se pueda, clases y colores de Bootstrap 5.
   Colores y tipografía del Manual de identidad de Sindicato SI:
   corporativo PANTONE 320C #0099a9 combinado siempre con negro; tipografía Open Sans. */

:root {
  --si-primario: #0099a9;
  --si-primario-rgb: 0, 153, 169;
  --si-claro: #53c0df;
  --si-medio: #36a5b5;
  --si-oscuro: #006373;
  --si-muy-oscuro: #00272c;
  --si-suave: #d9f0f2;   /* corporativo muy suave (15 % sobre blanco): fondo de los tooltips */
  --si-gris: #b1b2b4;
  --si-gris-oscuro: #3e3d40;

  /* Bootstrap usa estos colores para .text-primary, .bg-primary, .border-primary, enlaces... */
  --bs-primary: var(--si-primario);
  --bs-primary-rgb: var(--si-primario-rgb);
  --bs-link-color: var(--si-oscuro);
  --bs-link-color-rgb: 0, 99, 115;
  --bs-link-hover-color: var(--si-primario);
  --bs-link-hover-color-rgb: var(--si-primario-rgb);
  --bs-body-font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-color: #1d1d1f;

  --si-alto-menu: 56px;
}

/* Botones primarios con el color corporativo (Bootstrap fija sus colores por variables propias) */
.btn-primary {
  --bs-btn-bg: var(--si-primario);
  --bs-btn-border-color: var(--si-primario);
  --bs-btn-hover-bg: var(--si-oscuro);
  --bs-btn-hover-border-color: var(--si-oscuro);
  --bs-btn-active-bg: var(--si-oscuro);
  --bs-btn-active-border-color: var(--si-oscuro);
  --bs-btn-disabled-bg: var(--si-primario);
  --bs-btn-disabled-border-color: var(--si-primario);
}
.btn-outline-primary {
  --bs-btn-color: var(--si-oscuro);
  --bs-btn-border-color: var(--si-primario);
  --bs-btn-hover-bg: var(--si-primario);
  --bs-btn-hover-border-color: var(--si-primario);
  --bs-btn-active-bg: var(--si-oscuro);
  --bs-btn-active-border-color: var(--si-oscuro);
}

/* Menú fijo arriba: el contenido empieza debajo */
body { padding-top: var(--si-alto-menu); }
/* Pie siempre abajo del todo: con poco contenido, #contenido crece y empuja el pie hasta el borde de la ventana */
body { min-height: 100vh; display: flex; flex-direction: column; }
#contenido { flex: 1 0 auto; }
.navbar-si { min-height: var(--si-alto-menu); --bs-navbar-padding-y: 0; --bs-navbar-brand-padding-y: 0; }
.navbar-si .navbar-brand img { height: 50px; width: auto; }
.navbar-si .nav-link { font-weight: 600; }
/* Nombre de quien ha entrado, tras el logo, separado por una línea vertical gris claro */
/* Saludo del usuario (el "tratamiento" de /usuarios) encima de su nombre, más pequeño y más claro */
.navbar-si .navbar-usuario { display: flex; flex-direction: column; line-height: 1.15; padding: .35rem 0 .35rem 1rem; border-left: 1px solid var(--bs-border-color); }
.navbar-si .navbar-saludo { font-size: .72rem; font-weight: 400; color: var(--bs-secondary-color); margin-bottom: .2rem; }
.navbar-si .nav-link.active,
.navbar-si .nav-link:hover { color: var(--si-primario); }

/* Portada: dos columnas del alto de la pantalla (menos el menú). En móvil van una debajo de otra
   y cada una ocupa solo lo que necesita. */
@media (min-width: 992px) {
  .portada-columna { min-height: calc(100vh - var(--si-alto-menu)); }
}
/* Presentación centrada en su columna pero algo más arriba: el margen inferior sube el bloque la mitad de su valor */
@media (min-width: 992px) {
  .portada-presentacion { margin-bottom: 7rem; }
  /* La columna derecha (cartel de la campaña y sus botones): centrada en la primera pantalla (el alto de la ventana
     menos el menú y el relleno de la columna), y no en la columna entera, que crece si la izquierda es más alta
     (con doodle) y bajaría el cartel. El padding de abajo la sube igual que a la presentación (a la altura del "Hola"). */
  .campana-portada .portada-presentacion {
    align-self: flex-start;
    height: calc(100vh - var(--si-alto-menu) - 6rem);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    margin-bottom: 0; padding-bottom: 7rem;
  }
}
.portada-saludo { font-size: clamp(2.5rem, 6vw, 4.5rem); }
.portada-saludo .punto { color: #ff7b00; }

/* Dos columnas que hacen scroll cada una por su lado (listado de publicaciones): ocupan el alto de la pantalla
   menos el menú y el relleno vertical de <main> (py-3 = 2 x 1rem). En pantallas estrechas se apilan y no cambia nada. */
@media (min-width: 992px) {
  .columnas-scroll { height: calc(100vh - var(--si-alto-menu) - 2rem); }
  .columnas-scroll > * { max-height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--bs-border-color) transparent; }
}

.campana-miniatura { aspect-ratio: 3 / 2; object-fit: contain; background: #f4f4f6; }
/* Etiquetas del lateral: lista con scroll propio (más usadas, rótulo "Todos" y todas por orden alfabético) */
.etiquetas-lista { max-height: 20rem; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--bs-border-color) transparent; }

/* Campos de búsqueda con algo escrito: fondo corporativo suave (también con el foco; hace falta que tengan placeholder) */
.form-control[type="search"]:not(:placeholder-shown),
.form-control[type="search"]:not(:placeholder-shown):focus { background-color: var(--si-suave); }

/* Campo de búsqueda al lado del título de cada cuadro del lateral */
.lateral-buscar { max-width: 9rem; }

/* Años del archivo (lateral): se ven unos 6 (cada fila mide unos 2.55rem) y el resto, con scroll */
.archivo-lista { max-height: 15.3rem; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--bs-border-color) transparent; }

/* Documento de una biblioteca restringido a algún nivel (no es para todo el mundo): en naranja y negrita */
.doc-restringido { color: #d96500; }

/* Campaña activa (columna derecha): fondo blanco */
.campana-portada { background-color: #fff; }
/* Fondo de la portada: las ondas azules detrás de las dos columnas, con una capa blanca encima (el primer degradado) para
   no perder contraste con el texto; subir el .25 la suaviza más. Solo desde lg, con las dos columnas lado a lado; en
   móvil, apiladas, el fondo se recortaría mal y se queda blanco. La columna de la campaña deja de ser blanca para que se vea. */
@media (min-width: 992px) {
  .portada {
    background: linear-gradient(rgba(255, 255, 255, .7), rgba(255, 255, 255, .7)),
      url('../imagenes/ondas-transparentes-azul-desvanecidas-apaisado.webp') center / cover no-repeat;
  }
  .portada .campana-portada { background-color: transparent; }
}
.campana-cartel {
  max-height: min(70vh, calc(100vh - var(--si-alto-menu) - 15rem));
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
/* En la página de la campaña, el cartel deja sitio para que el título, una descripción corta y los botones quepan
   en la ventana sin bajar (con-editar: además, la fila del botón "Editar la campaña") */
.campana-cartel.campana-cartel-pagina { max-height: calc(100dvh - var(--si-alto-menu) - 13rem); min-height: 12rem; }
.campana-cartel.campana-cartel-pagina.con-editar { max-height: calc(100dvh - var(--si-alto-menu) - 15.5rem); }

/* Contenido bajo la portada: el borde izquierdo de las fichas queda alineado con "Hola".
   El texto de la cabecera (max 640px) va centrado en su columna: en escritorio la columna es la mitad
   de la pantalla (borde en 25% - 320px) y en móvil toda la pantalla (50% - 320px). El mínimo es el
   margen de la columna (1.5rem, 3rem en pantallas xl). */
.portada-contenido {
  --margen: 1.5rem;
  padding-left: max(var(--margen), calc(50% - 320px));
  padding-right: var(--margen);
}
@media (min-width: 992px) {
  .portada-contenido { padding-left: max(var(--margen), calc(25% - 320px)); }
}
@media (min-width: 1200px) {
  .portada-contenido { --margen: 3rem; }
}

/* Tarjetas de publicaciones */
/* Todas las imágenes con la proporción de SI INFORMA (1000x334); las que no la tienen
   se ven enteras, centradas y con blanco a los lados. */
.tarjeta-post .card-img-top {
  aspect-ratio: 1000 / 334;
  object-fit: contain;
  background-color: #fff;
}
.tarjeta-post { transition: transform .15s ease, box-shadow .15s ease; }
.tarjeta-post:hover { transform: translateY(-2px); box-shadow: var(--bs-box-shadow) !important; }

/* Imagen de la cabecera de un post: misma proporción que las fichas, entera y con el color de su borde */
.post-imagen {
  width: 100%;
  aspect-ratio: 1000 / 334;
  object-fit: contain;
  background-color: #fff;
}

/* Fecha sobre la imagen de SI INFORMA (abajo a la izquierda). El tamaño sigue al ancho de la imagen (cqw), con un
   mínimo para que se lea en las tarjetas pequeñas. Ver fechaSobreImagen() en php/datos.php. */
.imagen-fecha-caja { position: relative; container-type: inline-size; }
.imagen-fecha-caja > img { display: block; }
.imagen-fecha {
  position: absolute;
  left: 3%;
  bottom: 5%;
  color: #fff;
  font-weight: 700;
  font-size: max(.65rem, 2.4cqw);
  line-height: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
  pointer-events: none;
}

/* Texto del post (HTML escrito con el editor): que nada se salga de la columna */
.post-contenido { overflow-wrap: break-word; }
.post-contenido img,
.post-contenido iframe,
.post-contenido video { max-width: 100%; height: auto; }
.post-contenido table { max-width: 100%; }
/* Respuestas de "SI te preguntas..." (HTML del editor): sin hueco bajo el último párrafo */
.faq-respuesta { overflow-wrap: break-word; }
.faq-respuesta table { max-width: 100%; }
.faq-respuesta > :last-child { margin-bottom: 0; }
/* Las ondas del logo delante de cada pregunta (imagenes/ondas.png, más alta que ancha) */
.faq-ondas { height: 1.4em; width: auto; flex-shrink: 0; margin-right: .6rem; }

/* Mientras js/navegacion.js carga otra página */
#contenido { transition: opacity .15s ease; }
#contenido.cargando { opacity: .45; pointer-events: none; }

/* Contador de comentarios de la ficha: el icono y el número con el borde SUPERIOR a la misma altura.
   align-items-start solo alinea las cajas, y el dibujo no está en el mismo sitio dentro de ellas
   (medido con las fuentes: la tinta del icono de comentarios empieza a 0 em del borde de arriba de su caja
   con line-height 1, la de la cifra de Open Sans a 0,17 em), así que se sube la cifra esa diferencia.
   El icono de pendientes (reloj de arena) empieza a 0,063 em: 0,17 - 0,063 = 0,107 em. */
.ficha-contador {
  /* es un <button> (despliega los comentarios en la ficha): sin aspecto de botón y por encima del
     enlace que cubre la ficha (stretched-link, z-index 1) para que se pueda pulsar */
  display: flex;
  align-items: flex-start;
  gap: .25rem;
  position: relative;
  z-index: 2;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  line-height: 1;
  cursor: pointer;
}
.ficha-contador:hover { color: var(--si-primario); }
.ficha-contador[hidden] { display: none; }
.ficha-contador .bi { display: block; line-height: 1; }
.ficha-contador .bi::before { vertical-align: top; }
.ficha-contador .ficha-numero { display: block; line-height: 1; margin-top: -.17em; }
.ficha-contador .ficha-numero[hidden] { display: none; }
.ficha-contador-pendientes .ficha-numero { margin-top: -.107em; }

/* Comentarios desplegados dentro de la ficha: por encima del enlace que cubre la ficha, y sin sombras
   propias para que no parezcan fichas dentro de la ficha */
.ficha-panel { position: relative; z-index: 2; }
.ficha-panel .card { box-shadow: none !important; border: 1px solid var(--bs-border-color) !important; }

/* Tooltips de Bootstrap (data-tooltip="…", los activa js/funciones.js): fondo corporativo suave, texto
   oscuro y opaco (se superponen al contenido). La flecha usa la misma variable de fondo. */
.tooltip {
  --bs-tooltip-bg: var(--si-suave);
  --bs-tooltip-color: var(--si-muy-oscuro);
  --bs-tooltip-opacity: 1;
  --bs-tooltip-padding-x: .6rem;
  --bs-tooltip-padding-y: .3rem;
  filter: drop-shadow(0 2px 4px rgba(0, 39, 44, .18));
}
.tooltip-inner { font-weight: 600; }

/* Última ficha con la que se ha interactuado (SI.ultimoPost en js/funciones.js): anillo fino corporativo,
   en box-shadow para no mover nada. Va por encima de .shadow-sm y del :hover, que son !important. */
.tarjeta-post.ficha-reciente { box-shadow: 0 0 0 2px rgba(var(--si-primario-rgb), .6), var(--bs-box-shadow-sm) !important; }
.tarjeta-post.ficha-reciente:hover { box-shadow: 0 0 0 2px rgba(var(--si-primario-rgb), .6), var(--bs-box-shadow) !important; }

/* Zona grande de "Arrastra aquí el archivo o haz click" (subirarchivos.php) */
.zona-soltar {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 16rem;
  padding: 1.5rem;
  text-align: center;
  border: 2px dashed rgba(var(--si-primario-rgb), .5);
  border-radius: 1rem;
  background-color: rgba(var(--si-primario-rgb), .04);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.zona-soltar:hover,
.zona-soltar:focus-visible,
.zona-soltar.sobre { border-color: var(--si-primario); background-color: var(--si-suave); outline: 0; }
.zona-soltar .zona-icono { display: block; font-size: 3.5rem; line-height: 1; color: var(--si-primario); margin-bottom: .75rem; }
.zona-soltar .zona-vista { max-width: 100%; max-height: 10rem; object-fit: contain; }

/* Gestión de archivos (verarchivos.php): lista con scroll, miniaturas y fila recién subida */
.archivos-lista { max-height: 34rem; overflow-y: auto; }
.archivo-miniatura {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: .5rem;
  background-color: #f3f4f5;
}
.archivo-miniatura img { width: 100%; height: 100%; object-fit: cover; }
.archivo-miniatura .bi { font-size: 1.6rem; line-height: 1; }
.archivo-fila.archivo-nuevo { background-color: var(--si-suave); }

/* Páginas de gestión a casi todo el ancho de la ventana: el mismo margen lateral que la portada (1,5 rem,
   3 rem en pantallas xl), con tope para que en pantallas enormes las líneas no se hagan interminables. */
.contenido-ancho { --margen: 1.5rem; padding-left: var(--margen); padding-right: var(--margen); max-width: 1800px; }
@media (min-width: 1200px) { .contenido-ancho { --margen: 3rem; } }

/* Editor de publicaciones (editapost.php): la barra de acciones (Guardar...) se queda fija justo debajo del menú */
.barra-editor { top: var(--si-alto-menu); z-index: 1019; }
.note-editor .note-editable { background-color: #fff; }

/* Adjuntos en la ficha (pintaFicha): enlaces sencillos encima de la fecha, por encima del enlace que cubre la ficha
   (stretched-link, z-index 1) para que abran el archivo y no el post */
.ficha-adjuntos a { position: relative; z-index: 2; max-width: 14rem; text-decoration: none; }
.ficha-adjuntos a:hover { text-decoration: underline; }
.ficha-adjuntos .bi { margin-right: .15rem; }

/* El "SI" del título de «SI te preguntas...» (faqs.php) es el logo azul y negro. Sus letras ocupan el 65 % de abajo de la imagen (las
   ondas suben por encima), y las mayúsculas de Open Sans miden 0,714 em: con 1,1 em de alto las letras del logo igualan a las mayúsculas;
   se pone 1,25 em para que se note un poco más. Apoyado en la línea del texto. */
.titulo-si { height: 1.25em; width: auto; vertical-align: baseline; }
/* En el menú, las ondas del logo suben por encima de la línea de texto y la harían más alta, bajando «te preguntas...» respecto a
   las demás opciones. Con margen superior negativo el logo sigue en su sitio pero ya no agranda la línea. */
.navbar-si .titulo-si { margin-top: -.6em; }

/* Doodle de Inicio (php/doodles.php): sustituye al "Hola." a todo el ancho de la columna izquierda, centrado en vertical con el
   resto. La imagen manda en la altura (con su proporción, hasta un máximo) y el texto con los botones va a su lado; si no
   cabe (columna estrecha, móvil), el texto baja debajo de la imagen. */
.doodle-hola { display: flex; align-items: center; gap: 1.5rem 3rem; flex-wrap: wrap; width: 100%; position: relative; }
.doodle-caja { flex: 0 0 auto; width: clamp(130px, 15vw, 190px); }
.doodle-caja img { display: block; width: 100%; height: auto; max-height: 340px; object-fit: contain; }
.doodle-hola-texto { flex: 1 1 260px; min-width: 0; }
.doodle-etiqueta { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #ff7b00; }
.doodle-titulo { font-weight: 700; line-height: 1.2; color: var(--si-muy-oscuro); }
.doodle-titulo a { color: inherit; text-decoration: none; }
.doodle-titulo a:hover { color: var(--si-primario); }
.doodle-texto { color: var(--si-gris-oscuro); }
.doodle-cerrar { position: absolute; top: -.4rem; right: -.4rem; border: 0; background: transparent; color: inherit; opacity: .5; line-height: 1; padding: .25rem; }
.doodle-cerrar:hover { opacity: 1; }

/* Rótulo "Todos" del cuadro Etiquetas del lateral (pintaLateral): separa los más usados del resto, con el corporativo suave */
.etiquetas-separador { background-color: var(--si-suave); color: var(--si-muy-oscuro); border-radius: .375rem; }

/* Página del alto de la ventana (menos el menú) en la que solo hace scroll una parte, marcada con .alto-pantalla-scroll
   (p. ej. la lista de /etiquetas): el título y el buscador se quedan arriba. Como .columnas-scroll, solo en pantallas
   grandes; en el móvil la página crece y hace scroll entera. */
@media (min-width: 992px) {
  .alto-pantalla { height: calc(100vh - var(--si-alto-menu)); display: flex; flex-direction: column; }
  .alto-pantalla > .alto-pantalla-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--bs-border-color) transparent; }
}

/* Tabla de /registro: la fila de títulos se queda arriba mientras se baja por el listado */
.registro-tabla thead th { position: sticky; top: 0; z-index: 1; background: var(--bs-body-bg); }

/* Cabecera de cada grupo en el modo "Parecidas" de /etiquetas */
.grupo-parecidas { background-color: var(--si-suave); color: var(--si-muy-oscuro); }

/* Listas de /accesosdirectos: cada grupo de Inicio (Para todo el mundo, Para afiliados...) sobre fondo corporativo suave */
.grupo-accesos { background-color: var(--si-suave); }
.grupo-accesos > h2, .grupo-accesos > h3 { color: var(--si-muy-oscuro); }
.grupo-accesos-gris { background-color: #ececed; }   /* la zona sin grupos (Publicaciones), entera en gris suave */

/* Pasos numerados de /afiliate: círculo con el número en el color corporativo */
.paso-numero {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--si-primario);
  color: #fff;
  font-weight: 700;
  font-size: 1.15rem;
}

/* Tamaños de letra reducidos reutilizables (los mismos que en los otros proyectos): relativos al texto de alrededor */
.pequenya8 { font-size: 0.8em; }
.pequenya9 { font-size: 0.9em; }

/* Etiquetas de la ficha (pintaFicha): son enlaces a su etiqueta, por encima del enlace que cubre la ficha
   (stretched-link, z-index 1) para que lleven a la etiqueta y no al post */
.ficha-etiqueta { position: relative; z-index: 2; text-decoration: none; }
.ficha-etiqueta:hover { filter: brightness(1.12); }

/* Solapas (bibliotecas): la seleccionada, con el texto y una raya abajo en el color corporativo */
.solapas-si .nav-link { color: var(--bs-body-color); }
.solapas-si .nav-link:hover { color: var(--si-primario); }
.solapas-si .nav-link.active { color: var(--si-oscuro); font-weight: 600; box-shadow: inset 0 -3px 0 var(--si-primario); }

/* Cuadros del lateral a los que se baja desde el menú (data-ir-a): que no queden tapados por el menú fijo de arriba */
.lateral-cuadro { scroll-margin-top: calc(var(--si-alto-menu) + 1rem); }

/* Propuesta (propuesta.php): debajo del título, dos columnas que llenan el resto de la pantalla (.alto-pantalla), cada una
   con su scroll. La derecha es el debate: la lista hace scroll y el cuadro de comentar (card-footer) se queda siempre abajo.
   Solo en pantallas grandes; en el móvil va todo seguido. */
@media (min-width: 992px) {
  .propuesta-columnas { flex: 1 1 auto; min-height: 0; flex-wrap: nowrap; }
  .propuesta-columnas > * { min-height: 0; }
  .propuesta-columnas > .propuesta-derecha { display: flex; flex-direction: column; }
  .propuesta-izquierda { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--bs-border-color) transparent; }
  .propuesta-debate { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .propuesta-debate .debate-lista { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--bs-border-color) transparent; }
}
.propuesta-debate .debate-lista .card { box-shadow: none !important; border: 1px solid var(--bs-border-color) !important; }
/* En el móvil, el debate ocupa el alto de la parte visible (menos el menú): la lista hace scroll encima y el cuadro de comentar
   se queda pegado abajo, siempre a la vista */
@media (max-width: 991.98px) {
  .propuesta-debate { height: calc(100vh - var(--si-alto-menu) - 1.5rem); height: calc(100dvh - var(--si-alto-menu) - 1.5rem); display: flex; flex-direction: column; }
  .propuesta-debate .debate-lista { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--bs-border-color) transparent; }
}

/* Los accesos de encima de las publicaciones (hasta 6): algo más compactos para que en la mayoría de pantallas quepan en una fila. */
.accesos-pequenos { gap: .4rem !important; }
.accesos-pequenos .btn { font-size: .9rem; padding-left: .6rem !important; padding-right: .6rem !important; white-space: nowrap; }

/* «Pregunta al convenio» (#modal-convenio en php/plantilla.php): la respuesta llega en texto plano, con saltos de línea */
.convenio-texto { white-space: pre-line; }