/* Variables globales de dimensionamiento de tarjetas y cuadrícula */
:root {
  --rejilla-columnas: 4;
  --rejilla-ancho-columna: 445px;
  --rejilla-gap: 20px;
  --tarjeta-alto-baja: 240px;
  --tarjeta-alto-media: 320px;
  --tarjeta-alto-alta: 440px;
}

/* Estilos globales y reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Barras de desplazamiento (scrollbars) estilizadas globales */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 9999px;
  transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.35);
}

::-webkit-scrollbar-corner {
  background: transparent;
}

html {
  scrollbar-gutter: stable;
  overflow-y: scroll;
}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: #111317;
  color: #e5e7eb;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 20px 24px 36px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Contenedor principal adaptable */
.pantalla-inicio {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Cabecera superior */
.cabecera-superior {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  z-index: 50;
  margin-bottom: 8px;
}

.zona-usuario {
  position: relative;
}

.boton-perfil {
  background: #191c22;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 6px 5px 14px;
  color: #e2e8f0;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.boton-perfil:hover {
  background: #232730;
  border-color: rgba(255, 255, 255, 0.16);
}

.contenedor-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #232730;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #94a3b8;
  flex-shrink: 0;
}

.icono-avatar {
  width: 100%;
  height: 100%;
}

.icono-avatar-defecto {
  width: 16px;
  height: 16px;
}

.imagen-avatar-usuario {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fila-usuario-menu {
  display: flex;
  align-items: center;
  gap: 10px;
}

.avatar-menu {
  width: 32px;
  height: 32px;
}

.info-usuario-menu {
  min-width: 0;
  flex: 1;
}

/* Menú desplegable */
.menu-desplegable {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 210px;
  background: #1b1e26;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  animation: aparecerMenu 0.16s ease-out;
}

@keyframes aparecerMenu {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cabecera-menu {
  padding: 8px 10px 4px;
}

.etiqueta-sesion {
  font-size: 11px;
  color: #94a3b8;
  margin-bottom: 2px;
}

.usuario-actual {
  font-size: 13px;
  font-weight: 600;
  color: #f1f5f9;
}

.separador-menu {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 4px 0;
}

.opcion-menu {
  background: transparent;
  border: none;
  border-radius: 8px;
  color: #cbd5e1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease, color 0.15s ease;
  width: 100%;
}

.opcion-menu:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

.opcion-peligro {
  color: #f87171;
}

.opcion-peligro:hover {
  background: rgba(239, 68, 68, 0.12);
  color: #fca5a5;
}

.icono-opcion {
  width: 16px;
  height: 16px;
}

/* Sección del reloj central */
.seccion-reloj {
  text-align: center;
  margin-top: 14px;
  margin-bottom: 28px;
}

.hora-principal {
  font-size: 58px;
  font-weight: 600;
  letter-spacing: -1px;
  color: #f8fafc;
  line-height: 1.1;
}

.fecha-principal {
  font-size: 16px;
  color: #94a3b8;
  margin-top: 6px;
  font-weight: 400;
}

/* Rejilla de tarjetas */
.rejilla-panel {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--rejilla-columnas, 4), minmax(0, 1fr));
  grid-gap: var(--rejilla-gap, 20px);
  grid-auto-flow: row;
  align-items: stretch;
  width: 100%;
}

/* Capa de carga inicial con fondo transparente durante la colocación */
.cortina-colocacion-tarjetas {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  z-index: 40;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.cortina-colocacion-tarjetas.desvanecer {
  opacity: 0;
  visibility: hidden;
}

.spinner-colocacion-tarjetas {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(255, 255, 255, 0.12);
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: girarSpinner 0.75s linear infinite;
}

@keyframes girarSpinner {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Estado de carga individual por tarjeta */
.tarjeta {
  position: relative;
  background: #17191e;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 18px;
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.cuerpo-tarjeta {
  position: relative;
  min-height: 48px;
}

/* Ocultar contenido mientras la tarjeta esté cargando */
.tarjeta-en-carga .cuerpo-tarjeta > *:not(.cargador-tarjeta-overlay) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Contenido revelado con transición suave cuando la tarjeta está lista */
.tarjeta-cargada .cuerpo-tarjeta > *:not(.cargador-tarjeta-overlay) {
  animation: animarEntradaContenidoTarjeta 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes animarEntradaContenidoTarjeta {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Indicador de carga propio de cada tarjeta sobre fondo transparente */
.cargador-tarjeta-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: transparent;
  z-index: 10;
  pointer-events: none;
  min-height: 80px;
  transition: opacity 0.18s ease, visibility 0.18s ease;
}

.cargador-tarjeta-overlay.desvanecer {
  opacity: 0;
  visibility: hidden;
}

.spinner-tarjeta-anillo {
  width: 24px;
  height: 24px;
  border: 2.5px solid rgba(255, 255, 255, 0.12);
  border-top-color: #60a5fa;
  border-radius: 50%;
  animation: girarSpinner 0.7s linear infinite;
}

.texto-cargador-tarjeta {
  font-size: 11.5px;
  color: #64748b;
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.2px;
}

/* Ancho configurable de las tarjetas */
.tarjeta-ancho-1 {
  grid-column: span 1;
}

.tarjeta-ancho-2 {
  grid-column: span 2;
}

.tarjeta-ancho-3 {
  grid-column: span 3;
}

.tarjeta-ancho-4 {
  grid-column: 1 / -1;
}

/* Altura configurable de las tarjetas */
.tarjeta-alto-auto {
  height: auto;
}

.tarjeta-alto-baja {
  height: var(--tarjeta-alto-baja);
}

.tarjeta-alto-media {
  height: var(--tarjeta-alto-media);
}

.tarjeta-alto-alta {
  height: var(--tarjeta-alto-alta);
}

.tarjeta-alto-baja .cuerpo-tarjeta,
.tarjeta-alto-media .cuerpo-tarjeta,
.tarjeta-alto-alta .cuerpo-tarjeta {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  padding-right: 4px;
}

/* En la tarjeta de tareas, mantener el navegador de listas fijo arriba y hacer scroll solo en las tareas */
.tarjeta-alto-baja.tarjeta-tareas .cuerpo-tarjeta,
.tarjeta-alto-media.tarjeta-tareas .cuerpo-tarjeta,
.tarjeta-alto-alta.tarjeta-tareas .cuerpo-tarjeta {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-right: 0;
}

.tarjeta-alto-baja.tarjeta-tareas .lista-tareas,
.tarjeta-alto-media.tarjeta-tareas .lista-tareas,
.tarjeta-alto-alta.tarjeta-tareas .lista-tareas {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  padding-right: 4px;
}

/* Estilos comunes de tarjeta */
.tarjeta {
  background: #17191e;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 18px;
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.tarjeta:hover {
  border-color: rgba(255, 255, 255, 0.12);
}

.cabecera-tarjeta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  color: #d1d5db;
}

.icono-cabecera {
  width: 16px;
  height: 16px;
  color: #94a3b8;
  flex-shrink: 0;
}

.titulo-tarjeta {
  font-size: 13.5px;
  font-weight: 600;
  color: #d1d5db;
  letter-spacing: 0.1px;
}

.cuerpo-tarjeta {
  flex: 1;
}

/* Tarjeta del tiempo interactiva */
.tarjeta-clicable {
  cursor: pointer;
  user-select: none;
}

.cuerpo-tiempo {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  padding-top: 2px;
}

.fila-clima-principal {
  display: flex;
  align-items: center;
  gap: 12px;
}

.clima-icono-contenedor {
  width: 58px;
  height: 52px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icono-clima {
  width: 100%;
  height: 100%;
}

.clima-temperaturas-bloque {
  display: flex;
  flex-direction: column;
}

.fila-temp-termometro {
  display: flex;
  align-items: center;
  gap: 4px;
}

.icono-termometro {
  width: 19px;
  height: 19px;
  color: #ea580c;
}

.clima-temperatura {
  font-size: 36px;
  font-weight: 700;
  color: #f97316;
  line-height: 1.1;
  letter-spacing: -0.5px;
}

.fila-clima-subvalores {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  color: #94a3b8;
  margin-top: 2px;
}

.clima-sensacion strong {
  color: #e2e8f0;
}

.clima-max-min {
  display: flex;
  gap: 6px;
  font-weight: 600;
}

.temp-max {
  color: #f87171;
}

.temp-min {
  color: #38bdf8;
}

/* Métricas rápidas de precipitación y viento */
.fila-clima-metricas-rapidas {
  display: flex;
  align-items: center;
  gap: 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 6px 10px;
}

.metrica-rapida {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #cbd5e1;
  font-weight: 500;
}

.icono-metrica-mini {
  width: 15px;
  height: 15px;
}

.flecha-viento {
  display: inline-block;
  font-size: 12px;
  color: #93c5fd;
  transition: transform 0.3s ease;
  line-height: 1;
}

.pie-tarjeta-tiempo {
  display: flex;
  align-items: center;
  margin-top: 2px;
}

.clima-estado {
  font-size: 12.5px;
  color: #cbd5e1;
  font-weight: 500;
}

/* Rejilla de marcadores solo con iconos 50x50 */
.malla-accesos {
  display: grid;
  grid-template-columns: repeat(auto-fill, 50px);
  gap: 12px;
  align-items: center;
}

.item-acceso {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  border-radius: 12px;
  width: 50px;
  height: 50px;
  transition: transform 0.15s ease;
}

.item-acceso:hover {
  transform: translateY(-2px);
}

.icono-caja {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
  background: #20242d;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.item-acceso:hover .icono-caja {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55);
}

.imagen-marcador-cuadrado {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

.icono-caja svg {
  width: 28px;
  height: 28px;
  color: #94a3b8;
}

.nombre-acceso {
  font-size: 11.5px;
  color: #94a3b8;
  text-align: center;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Tarjeta del calendario: Eventos reales de hoy */
.cuerpo-calendario {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.calendario-dia-bloque {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.etiqueta-hoy {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.12);
  padding: 2px 7px;
  border-radius: 6px;
}

.calendario-dia-texto {
  font-size: 16px;
  font-weight: 600;
  color: #f1f5f9;
  letter-spacing: -0.2px;
}

.lista-eventos-hoy {
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
}

.item-evento-hoy {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-left: 3px solid #3b82f6;
  border-radius: 8px;
  transition: all 0.15s ease;
}

.item-evento-hoy:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}

.hora-evento-hoy {
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  min-width: 65px;
  flex-shrink: 0;
}

.titulo-evento-hoy {
  font-size: 12.5px;
  font-weight: 500;
  color: #e2e8f0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.sin-eventos-hoy, .cargando-eventos-texto {
  font-size: 12.5px;
  color: #64748b;
  padding: 10px 0;
  font-style: italic;
}

.aviso-sin-config-calendario {
  font-size: 12px;
  color: #94a3b8;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  line-height: 1.4;
}

/* ==================================================
   Modal detallado de calendario (Mes / Semana / 3 días)
   ================================================== */
.cabecera-con-subtitulo {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.subtitulo-modal-calendario {
  font-size: 12px;
  color: #94a3b8;
}

.selector-vistas-calendario {
  display: flex;
  gap: 6px;
  background: rgba(0, 0, 0, 0.25);
  padding: 4px;
  border-radius: 10px;
  margin-bottom: 16px;
  width: fit-content;
}

.btn-vista-calendario {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 12.5px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-vista-calendario:hover {
  color: #ffffff;
}

.btn-vista-calendario.activa {
  background: #3b82f6;
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.35);
}

.vista-calendario-bloque {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Vista 1: Mes completo en el modal */
.cabecera-mes-modal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 6px;
}

.btn-mes-nav {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
  box-sizing: border-box;
  flex-shrink: 0;
}

.btn-mes-nav:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

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

.btn-mes-nav svg {
  width: 18px;
  height: 18px;
}

.titulo-mes-modal {
  font-size: 16px;
  font-weight: 600;
  color: #f1f5f9;
  text-transform: capitalize;
}

.dias-semana-modal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.rejilla-dias-modal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

.celda-dia-modal {
  min-height: 58px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.celda-dia-modal:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

.celda-dia-modal.otro-mes {
  opacity: 0.3;
}

.celda-dia-modal.hoy {
  border-color: #3b82f6;
  background: rgba(59, 130, 246, 0.08);
}

.celda-dia-modal.seleccionado {
  outline: 2px solid #3b82f6;
  outline-offset: -1px;
}

.num-dia-modal {
  font-size: 13px;
  font-weight: 600;
  color: #cbd5e1;
}

.celda-dia-modal.hoy .num-dia-modal {
  color: #3b82f6;
}

.indicador-eventos-puntos {
  display: flex;
  gap: 3px;
  align-items: center;
}

.punto-evento {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #3b82f6;
}

.bloque-eventos-dia-seleccionado {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.subtitulo-dia-seleccionado {
  font-size: 13px;
  font-weight: 600;
  color: #94a3b8;
  margin-bottom: 8px;
}

.lista-eventos-dia-modal {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 180px;
  overflow-y: auto;
}

/* Vista 2: Semana */
.rejilla-semana-calendario {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  min-height: 320px;
}

.columna-semana-dia {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.columna-semana-dia.hoy {
  border-color: rgba(59, 130, 246, 0.5);
  background: rgba(59, 130, 246, 0.05);
}

.cabecera-columna-semana {
  text-align: center;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.dia-nombre-semana {
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
}

.dia-num-semana {
  font-size: 16px;
  font-weight: 700;
  color: #f1f5f9;
}

.columna-semana-dia.hoy .dia-num-semana {
  color: #3b82f6;
}

.eventos-columna-semana {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.tarjeta-evento-semana {
  background: rgba(255, 255, 255, 0.04);
  border-left: 3px solid #3b82f6;
  border-radius: 6px;
  padding: 5px 6px;
  font-size: 11.5px;
}

.tarjeta-evento-semana .hora {
  font-size: 10px;
  font-weight: 600;
  color: #94a3b8;
  display: block;
}

.tarjeta-evento-semana .titulo {
  color: #e2e8f0;
  font-weight: 500;
  word-break: break-word;
}

/* Vista 3: 3 días */
.rejilla-tres-dias-calendario {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  min-height: 320px;
}

.columna-tres-dias {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.columna-tres-dias.hoy {
  border-color: rgba(59, 130, 246, 0.65);
  background: rgba(59, 130, 246, 0.08);
  box-shadow: 0 0 16px rgba(59, 130, 246, 0.12);
}

.cabecera-columna-tres-dias {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.cabecera-columna-tres-dias.hoy {
  border-bottom-color: rgba(59, 130, 246, 0.35);
}

.fecha-columna-tres-dias {
  font-size: 13.5px;
  font-weight: 600;
  color: #94a3b8;
  text-align: center;
  width: 100%;
}

.fecha-columna-tres-dias.es-hoy {
  color: #3b82f6;
  font-weight: 700;
}

.eventos-columna-tres-dias {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.tarjeta-evento-tres-dias {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-left: 4px solid #3b82f6;
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.tarjeta-evento-tres-dias .hora {
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
}

.tarjeta-evento-tres-dias .titulo {
  font-size: 13px;
  font-weight: 500;
  color: #f1f5f9;
}

.tarjeta-evento-tres-dias .ubicacion {
  font-size: 11px;
  color: #64748b;
}

/* Tarjeta de tareas */
.cuerpo-tareas {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  overflow-x: hidden;
}

.navegador-listas-tareas {
  display: flex;
  align-items: center;
  gap: 5px;
  background: #121418;
  border-radius: 12px;
  padding: 4px;
  min-width: 0;
  max-width: 100%;
}

.btn-flecha-lista {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.btn-flecha-lista svg {
  width: 14px;
  height: 14px;
}

.btn-flecha-lista:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.btn-flecha-lista:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}

.cinta-listas-tareas {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  min-width: 0;
  flex: 1;
}

.cinta-listas-tareas::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.btn-pildora-lista {
  background: transparent;
  border: 1px solid transparent;
  color: #94a3b8;
  font-size: 11.5px;
  font-weight: 500;
  font-family: inherit;
  padding: 5px 10px;
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.btn-pildora-lista:hover {
  color: #f1f5f9;
  background: rgba(255, 255, 255, 0.05);
}

.btn-pildora-lista.activa {
  background: rgba(245, 158, 11, 0.16);
  color: #fbbf24;
  font-weight: 600;
  border-color: rgba(245, 158, 11, 0.35);
}

.contenido-texto-tarea {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.fila-titulo-tarea {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.notas-tarea {
  font-size: 11px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.badge-hora-tarea {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  padding: 2px 7px;
  border-radius: 6px;
  margin-left: auto;
  flex-shrink: 0;
  white-space: nowrap;
}

.badge-hora-tarea svg {
  width: 12px;
  height: 12px;
  color: currentColor;
}

.badge-hora-tarea.hoy {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.25);
}

.badge-hora-tarea.vencida {
  color: #f87171;
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.25);
}

.completada .badge-hora-tarea {
  opacity: 0.5;
  text-decoration: line-through;
}

.badge-lista-tarea {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.07);
  color: #94a3b8;
  font-weight: 500;
  white-space: nowrap;
}

.lista-tareas {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.item-tarea {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  min-width: 0;
  max-width: 100%;
}

.casilla-tarea {
  width: 17px;
  height: 17px;
  border: 1.5px solid #64748b;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.item-tarea.completada .casilla-tarea {
  background: #10b981;
  border-color: #10b981;
}

.check-icono {
  width: 12px;
  height: 12px;
  stroke: #ffffff;
  stroke-width: 2.5;
  display: none;
}

.item-tarea.completada .check-icono {
  display: block;
}

.texto-tarea {
  font-size: 13px;
  color: #cbd5e1;
  word-break: break-word;
  overflow-wrap: break-word;
  transition: color 0.15s ease;
}

.item-tarea.completada .texto-tarea {
  text-decoration: line-through;
  color: #64748b;
}

/* Tarjeta de monitorización */
.cuerpo-monitorizacion {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
}

.zona-graficos-recursos {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 8px 0;
}

.grafico-circular {
  position: relative;
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.anillo-progreso {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.anillo-fondo {
  fill: none;
  stroke: #252831;
  stroke-width: 8;
}

.anillo-valor {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.8s ease;
}

.anillo-cpu {
  stroke: #8d6b4f;
}

.anillo-ram {
  stroke: #9d7756;
}

.texto-grafico {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.etiqueta-recurso {
  font-size: 13px;
  font-weight: 600;
  color: #f1f5f9;
}

.porcentaje-recurso {
  font-size: 11.5px;
  color: #94a3b8;
}

/* Badges de estado en verde */
.zona-estados-servicios {
  display: flex;
  gap: 10px;
}

.insignia-estado {
  flex: 1;
  border-radius: 12px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
  font-weight: 500;
}

.estado-activo {
  background: #1e9668;
  color: #ffffff;
}

.icono-insignia {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
}

.icono-insignia svg {
  width: 100%;
  height: 100%;
}

.texto-insignia {
  flex: 1;
  margin-left: 8px;
}

.simbolo-check {
  font-weight: bold;
  font-size: 13px;
}

/* Tarjeta de saldos bancarios */
.tarjeta-saldos {
  background: #17191e;
  border-radius: 18px;
  padding: 18px 22px 20px;
}

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

.titulo-con-icono-tarjeta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icono-cabecera-saldos {
  color: #10b981;
}

.acciones-cabecera-saldos {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.meta-saldo-fecha {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: #94a3b8;
  white-space: nowrap;
}

.icono-reloj-saldos {
  width: 13px;
  height: 13px;
  min-width: 13px;
  min-height: 13px;
  color: #94a3b8;
  flex-shrink: 0;
}

.btn-toggle-privacidad {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: #94a3b8;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
  flex-shrink: 0;
}

.btn-toggle-privacidad:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #f1f5f9;
  border-color: rgba(255, 255, 255, 0.16);
}

.btn-toggle-privacidad svg {
  width: 15px;
  height: 15px;
}

.cuerpo-saldos {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.rejilla-cuentas-saldos {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.tarjeta-cuenta-saldo {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.tarjeta-cuenta-saldo:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
  transform: translateY(-1px);
}

.info-cuenta-saldo {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.badge-banco-saldo {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}

.badge-bankinter {
  background: rgba(234, 88, 12, 0.15);
  color: #fb923c;
  border: 1px solid rgba(234, 88, 12, 0.3);
}

.badge-ing {
  background: rgba(255, 98, 0, 0.15);
  color: #fdba74;
  border: 1px solid rgba(255, 98, 0, 0.3);
}

.nombre-cuenta-saldo {
  font-size: 12.5px;
  font-weight: 500;
  color: #cbd5e1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.importe-cuenta-saldo {
  font-size: 15px;
  font-weight: 700;
  color: #f8fafc;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}

.cargando-saldos-texto {
  font-size: 12.5px;
  color: #64748b;
  font-style: italic;
  padding: 10px 0;
}

/* Tarjeta de noticias 20 minutos */
.tarjeta-noticias {
  background: #17191e;
  border-radius: 18px;
  padding: 18px 22px 20px;
  display: flex;
  flex-direction: column;
}

.cuerpo-noticias {
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
}

.lista-noticias-20m {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.item-noticia-20m {
  display: flex;
  align-items: stretch;
  width: 100%;
  position: relative;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.item-noticia-20m.eliminando {
  opacity: 0;
  transform: translateX(18px);
  pointer-events: none;
}

.enlace-noticia-20m {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  min-width: 0;
  padding: 10px 42px 10px 14px; /* Espacio reservado para el botón dentro */
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  text-decoration: none;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  position: relative;
}

.enlace-noticia-20m:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}

.btn-borrar-noticia {
  position: absolute;
  top: 9px;
  right: 9px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: #64748b;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s ease;
  padding: 0;
  z-index: 2;
}

.btn-borrar-noticia svg {
  width: 13px;
  height: 13px;
}

.btn-borrar-noticia:hover {
  background: rgba(34, 197, 94, 0.2);
  border-color: rgba(34, 197, 94, 0.45);
  color: #4ade80;
  transform: scale(1.1);
}

.tarjeta-noticias-valladolid .btn-borrar-noticia:hover {
  background: rgba(244, 63, 94, 0.2);
  border-color: rgba(244, 63, 94, 0.45);
  color: #fb7185;
  transform: scale(1.1);
}

/* Estado cuando todas las noticias han sido leídas */
.item-noticia-completada {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  text-align: center;
  gap: 6px;
  width: 100%;
  background: rgba(255, 255, 255, 0.015);
  border: 1px dashed rgba(255, 255, 255, 0.08);
  border-radius: 14px;
}

.icono-check-todo {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.12);
  color: #4ade80;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.tarjeta-noticias-valladolid .icono-check-todo {
  background: rgba(244, 63, 94, 0.12);
  color: #fb7185;
}

.icono-check-todo svg {
  width: 20px;
  height: 20px;
}

.titulo-noticias-leidas {
  font-size: 13.5px;
  font-weight: 600;
  color: #f1f5f9;
  margin: 0;
}

.subtitulo-noticias-leidas {
  font-size: 11.5px;
  color: #94a3b8;
  margin: 0 0 10px;
}

.btn-restablecer-noticias-vacio {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-restablecer-noticias-vacio:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.acciones-cabecera-tarjeta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.btn-accion-icono-tarjeta {
  background: transparent;
  border: none;
  color: #64748b;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
}

.btn-accion-icono-tarjeta:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #e2e8f0;
}

.btn-accion-icono-tarjeta svg {
  width: 14px;
  height: 14px;
}

.enlace-noticia-20m:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(59, 130, 246, 0.4);
  transform: translateY(-1px);
}

.meta-noticia-20m {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}

.categoria-noticia-20m {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-size: 10px;
  color: #60a5fa;
  background: rgba(59, 130, 246, 0.15);
  padding: 2px 7px;
  border-radius: 6px;
  border: 1px solid rgba(59, 130, 246, 0.25);
}

.hora-noticia-20m {
  color: #94a3b8;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

.titulo-noticia-20m {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  color: #e2e8f0;
  transition: color 0.15s ease;
}

.enlace-noticia-20m:hover .titulo-noticia-20m {
  color: #ffffff;
}

/* Detalles para noticias de Valladolid */
.icono-cabecera-valladolid {
  color: #fb7185;
}

.categoria-noticia-valladolid {
  color: #fb7185;
  background: rgba(244, 63, 94, 0.15);
  border-color: rgba(244, 63, 94, 0.25);
}

.tarjeta-noticias-valladolid .enlace-noticia-20m:hover {
  border-color: rgba(244, 63, 94, 0.4);
}

.item-noticia-cargando,
.item-noticia-vacio,
.item-noticia-error {
  font-size: 12.5px;
  color: #64748b;
  font-style: italic;
  padding: 12px 0;
  text-align: center;
  list-style: none;
}

/* Tarjeta MediaTracker */
.tarjeta-mediatracker {
  background: #17191e;
  border-radius: 18px;
  padding: 18px 22px 20px;
  display: flex;
  flex-direction: column;
}

.cuerpo-mediatracker {
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
}

.lista-proximo-ver-mt {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-height: 420px;
  overflow-y: auto;
  padding-right: 4px;
}

.lista-proximo-ver-mt::-webkit-scrollbar {
  width: 5px;
}

.lista-proximo-ver-mt::-webkit-scrollbar-track {
  background: transparent;
}

.lista-proximo-ver-mt::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 3px;
}

.lista-proximo-ver-mt::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.22);
}

.enlace-proximo-ver-mt {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  text-decoration: none;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.enlace-proximo-ver-mt:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(192, 132, 252, 0.4);
  transform: translateY(-1px);
}

.contenedor-caratula-mt {
  width: 38px;
  height: 56px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.caratula-mt {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.icono-placeholder-mt {
  width: 20px;
  height: 20px;
  color: #64748b;
}

.info-proximo-ver-mt {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.fila-titulo-mt {
  display: flex;
  align-items: center;
  gap: 8px;
}

.titulo-serie-mt {
  font-size: 13.5px;
  font-weight: 600;
  color: #f1f5f9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.15s ease;
}

.enlace-proximo-ver-mt:hover .titulo-serie-mt {
  color: #ffffff;
}

.fila-sub-mt {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  min-width: 0;
}

.badge-ep-mt {
  font-size: 10.5px;
  font-weight: 700;
  color: #c084fc;
  background: rgba(192, 132, 252, 0.14);
  border: 1px solid rgba(192, 132, 252, 0.28);
  padding: 1px 6px;
  border-radius: 5px;
  flex-shrink: 0;
  letter-spacing: 0.2px;
}

.titulo-ep-mt {
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11.5px;
}

.badge-fecha-mt {
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
  text-align: center;
}

.badge-fecha-hoy {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.14);
  border-color: rgba(74, 222, 128, 0.32);
}

.badge-fecha-manana {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.14);
  border-color: rgba(56, 189, 248, 0.3);
}

.item-mt-cargando,
.item-mt-vacio,
.item-mt-error {
  font-size: 12.5px;
  color: #64748b;
  font-style: italic;
  padding: 12px 0;
  text-align: center;
}

/* Tarjeta Google Fit */
.tarjeta-fit {
  background: #17191e;
  border-radius: 18px;
  padding: 18px 22px 20px;
  display: flex;
  flex-direction: column;
}

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

.meta-fit-fecha {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: #64748b;
  white-space: nowrap;
  margin-left: auto;
}

.icono-reloj-fit {
  width: 13px;
  height: 13px;
  min-width: 13px;
  min-height: 13px;
  color: #64748b;
  flex-shrink: 0;
}

.icono-cabecera-fit {
  color: #10b981;
}

.cuerpo-fit {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  width: 100%;
}

.bloque-fit-principal {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cabecera-pasos-fit {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.numero-pasos-fit {
  font-size: 26px;
  font-weight: 700;
  color: #f1f5f9;
  letter-spacing: -0.5px;
}

.etiqueta-pasos-fit {
  font-size: 13px;
  color: #94a3b8;
  margin-left: 6px;
}

.meta-pasos-fit {
  font-size: 11.5px;
  color: #64748b;
  font-weight: 500;
}

.barra-progreso-fit-fondo {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
}

.barra-progreso-fit-relleno {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #06b6d4, #10b981);
  border-radius: 999px;
  transition: width 0.4s ease;
}

.porcentaje-pasos-texto {
  font-size: 11px;
  color: #10b981;
  font-weight: 600;
  text-align: right;
}

.rejilla-metricas-fit {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
}

.tarjeta-metrica-fit {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 10px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.icono-metrica-fit {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icono-metrica-fit svg {
  width: 15px;
  height: 15px;
}

.icono-cardio {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

.icono-calorias {
  background: rgba(249, 115, 22, 0.15);
  color: #fb923c;
}

.icono-distancia {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}

.datos-metrica-fit {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.valor-metrica-fit {
  font-size: 13px;
  font-weight: 700;
  color: #e2e8f0;
  white-space: nowrap;
}

.valor-metrica-fit small {
  font-size: 10px;
  font-weight: normal;
  color: #94a3b8;
}

.nombre-metrica-fit {
  font-size: 10px;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.estado-fit-desconectado {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 12px;
  gap: 12px;
}

.icono-fit-candado {
  width: 32px;
  height: 32px;
  color: #94a3b8;
}

.texto-fit-reconectar {
  font-size: 13px;
  color: #94a3b8;
  margin: 0;
}

.btn-conectar-fit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #2563eb;
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 10px;
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 600;
  transition: background 0.15s ease, transform 0.15s ease;
}

.btn-conectar-fit:hover {
  background: #1d4ed8;
  transform: translateY(-1px);
}

.cargando-fit-texto {
  font-size: 12.5px;
  color: #64748b;
  font-style: italic;
  padding: 16px 0;
  text-align: center;
}

/* Tarjeta Home Assistant */
.tarjeta-home-assistant {
  background: #17191e;
  border-radius: 18px;
  padding: 18px 22px 20px;
  display: flex;
  flex-direction: column;
}

.icono-cabecera-ha {
  color: #38bdf8;
}

.cuerpo-ha {
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
}

.lista-dispositivos-ha {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.item-dispositivo-ha {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.item-dispositivo-ha:hover {
  background: rgba(255, 255, 255, 0.04);
}

.item-dispositivo-ha.activo {
  border-color: rgba(56, 189, 248, 0.35);
  background: rgba(56, 189, 248, 0.03);
}

.icono-bloque-ha {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #94a3b8;
  transition: all 0.2s ease;
}

.item-dispositivo-ha.activo .icono-bloque-ha {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
}

.icono-disp-ha {
  width: 18px;
  height: 18px;
}

.info-dispositivo-ha {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.nombre-disp-ha {
  font-size: 13.5px;
  font-weight: 600;
  color: #f1f5f9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sub-disp-ha {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: #94a3b8;
}

.item-dispositivo-ha.activo .estado-disp-ha {
  color: #4ade80;
  font-weight: 500;
}

.badge-bateria-ha {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  padding: 1px 6px;
  border-radius: 5px;
}

.badge-bateria-ha svg {
  width: 12px;
  height: 12px;
}

.controles-disp-ha {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.toggle-ha {
  position: relative;
  width: 42px;
  height: 24px;
  background: rgba(255, 255, 255, 0.12);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  padding: 2px;
  transition: background 0.2s ease;
  flex-shrink: 0;
}

.toggle-ha.activo {
  background: #38bdf8;
}

.deslizador-toggle-ha {
  display: block;
  width: 20px;
  height: 20px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.toggle-ha.activo .deslizador-toggle-ha {
  transform: translateX(18px);
}

.btn-accion-vacuum-ha {
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #38bdf8;
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.btn-accion-vacuum-ha:hover {
  background: rgba(56, 189, 248, 0.25);
  transform: translateY(-1px);
}

.btn-accion-vacuum-ha.limpiando {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #f87171;
}

.cargando-ha-texto {
  font-size: 12.5px;
  color: #64748b;
  font-style: italic;
  padding: 16px 0;
  text-align: center;
}

/* Modal simple para avisos */
.modal-fondo {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  animation: aparecerFondo 0.15s ease-out;
}

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

.modal-caja {
  background: #1c1f27;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 24px;
  max-width: 420px;
  width: 90%;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}

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

.modal-texto {
  font-size: 13.5px;
  color: #94a3b8;
  line-height: 1.5;
  margin-bottom: 18px;
}

.boton-modal {
  background: #3b82f6;
  color: #ffffff;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  float: right;
  transition: background 0.15s ease;
}

.boton-modal:hover {
  background: #2563eb;
}

/* Modal de configuración */
.modal-caja-ancha {
  max-width: 880px;
  width: 94%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 28px 32px;
}

.modal-cabecera-con-cierre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.boton-cerrar-cruz {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.boton-cerrar-cruz:hover {
  color: #f1f5f9;
}

.pestañas-configuracion {
  display: flex;
  background: #121418;
  border-radius: 10px;
  padding: 3px;
  gap: 4px;
  margin-bottom: 20px;
}

.tab-config {
  flex: 1;
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 12.5px;
  font-weight: 500;
  font-family: inherit;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tab-config:hover {
  color: #f1f5f9;
}

.tab-config.activa {
  background: #2563eb;
  color: #ffffff;
}

.descripcion-seccion {
  font-size: 13px;
  color: #94a3b8;
  margin-bottom: 16px;
}

.formulario-config {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.fila-campos-doble {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.grupo-campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.etiqueta-campo {
  font-size: 12px;
  font-weight: 500;
  color: #cbd5e1;
}

.control-campo {
  background: #111317;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 9px 12px;
  color: #f8fafc;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s ease;
}

.control-campo:focus {
  border-color: #3b82f6;
}

.fila-botones-accion {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
}

.boton-accion-primario {
  background: #2563eb;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease;
}

.boton-accion-primario:hover {
  background: #1d4ed8;
}

.boton-accion-secundario {
  background: rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
  border: none;
  border-radius: 8px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  margin-right: 8px;
  transition: background 0.15s ease;
}

.boton-accion-secundario:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

/* Selector de tipo de marcador en modal */
.selector-tipo-marcadores {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  background: rgba(255, 255, 255, 0.04);
  padding: 4px;
  border-radius: 10px;
}

.btn-tipo-marcador {
  flex: 1;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: #94a3b8;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.btn-tipo-marcador.activo {
  background: #2563eb;
  color: #ffffff;
}

/* Fila de subida de icono y vista previa 65x65 */
.fila-subida-icono {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-top: 4px;
}

.grupo-subida-archivo {
  flex: 1;
}

.control-archivo {
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
}

.pista-campo {
  font-size: 11px;
  color: #64748b;
  margin-top: 4px;
  display: block;
}

.contenedor-previa-marcador {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.caja-previa-65 {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: #111317;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.caja-previa-65 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.texto-sin-imagen {
  font-size: 11px;
  color: #64748b;
  font-weight: 600;
}

/* Lista de administración de marcadores */
.bloque-lista-marcadores {
  margin-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 14px;
}

.subtitulo-lista-marcadores {
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
  margin-bottom: 10px;
}

.lista-admin-marcadores {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
  padding-right: 4px;
}

.item-admin-marcador {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #14171d;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 8px 12px;
  transition: border-color 0.15s ease;
}

.item-admin-marcador:hover {
  border-color: rgba(255, 255, 255, 0.12);
}

.info-admin-marcador {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.mini-caja-icono {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  background: #20242d;
  flex-shrink: 0;
  overflow: hidden;
}

.mini-caja-icono svg {
  width: 18px;
  height: 18px;
}

.mini-caja-icono img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.textos-admin-marcador {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.nombre-admin-marcador {
  font-size: 13px;
  font-weight: 600;
  color: #f1f5f9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.url-admin-marcador {
  font-size: 11px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}

.acciones-admin-marcador {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.btn-admin-accion {
  background: transparent;
  border: none;
  border-radius: 6px;
  color: #94a3b8;
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}

.btn-admin-accion:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.btn-admin-accion.btn-peligro:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

.btn-admin-accion svg {
  width: 15px;
  height: 15px;
}

/* Selector de color y lista de calendarios */
.selector-color-envoltorio {
  display: flex;
  align-items: center;
  gap: 10px;
}

.control-color {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 44px;
  height: 38px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  cursor: pointer;
  padding: 2px;
}

.control-color::-webkit-color-swatch-wrapper {
  padding: 0;
}

.control-color::-webkit-color-swatch {
  border: none;
  border-radius: 6px;
}

.pista-color {
  font-size: 12px;
  font-family: monospace;
  color: #94a3b8;
}

.muestra-color-cal {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15);
}

.btn-toggle-cal {
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid rgba(34, 197, 94, 0.3);
  background: rgba(34, 197, 94, 0.12);
  color: #4ade80;
  transition: all 0.15s ease;
}

.btn-toggle-cal:hover {
  background: rgba(34, 197, 94, 0.22);
}

.btn-toggle-cal.inactivo {
  background: rgba(148, 163, 184, 0.12);
  color: #94a3b8;
  border-color: rgba(148, 163, 184, 0.2);
}

.btn-toggle-cal.inactivo:hover {
  background: rgba(148, 163, 184, 0.2);
  color: #cbd5e1;
}

/* Sección Google Tasks en modal */
.bloque-estado-google-tasks {
  margin-bottom: 16px;
}

.tarjeta-estado-conexion {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #14171d;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 12px 16px;
}

.punto-estado-conexion {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.punto-estado-conexion.conectado {
  background: #22c55e;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
}

.punto-estado-conexion.desconectado {
  background: #ef4444;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
}

.texto-estado-conexion {
  font-size: 13.5px;
  color: #e2e8f0;
  font-weight: 500;
}

.aviso-oauth-uri {
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: #94a3b8;
}

.aviso-oauth-uri code {
  color: #60a5fa;
  font-family: monospace;
  font-size: 12px;
  word-break: break-all;
  user-select: all;
}

.boton-accion-peligro {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.boton-accion-peligro:hover {
  background: rgba(239, 68, 68, 0.25);
  color: #ffffff;
  border-color: #ef4444;
}

.aviso-sin-config-tareas {
  background: rgba(59, 130, 246, 0.08);
  border: 1px dashed rgba(59, 130, 246, 0.3);
  border-radius: 10px;
  padding: 16px;
  text-align: center;
  color: #94a3b8;
  font-size: 13px;
  line-height: 1.5;
  cursor: pointer;
  transition: all 0.15s ease;
}

.aviso-sin-config-tareas:hover {
  background: rgba(59, 130, 246, 0.14);
  border-color: #3b82f6;
  color: #f1f5f9;
}

/* Configuración de dimensiones de cuadrícula y tipos de altura */
.bloque-dimensiones-tarjetas {
  background: #14171d;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 16px 18px 18px;
  margin: 14px 0 20px;
}

.subtitulo-seccion-config {
  font-size: 13.5px;
  font-weight: 600;
  color: #f1f5f9;
  margin-bottom: 2px;
}

.subtitulo-seccion-config-sec {
  font-size: 13px;
  font-weight: 600;
  color: #cbd5e1;
  margin: 20px 0 10px;
}

/* Gestión de foto o logo de perfil de usuario */
.bloque-perfil-avatar {
  background: #14171d;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 16px 18px 18px;
  margin: 14px 0 20px;
}

.fila-gestion-avatar {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 14px;
}

.zona-preview-avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.contenedor-avatar-grande {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #232730;
  border: 2px solid rgba(255, 255, 255, 0.12);
  color: #94a3b8;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
}

.contenedor-avatar-grande .imagen-avatar-usuario {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.icono-avatar-defecto-grande {
  width: 38px;
  height: 38px;
}

.nombre-usuario-preview {
  font-size: 12.5px;
  font-weight: 600;
  color: #cbd5e1;
}

.zona-controles-avatar {
  flex: 1;
  min-width: 0;
}

.formulario-avatar {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fila-botones-avatar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.separador-seccion-config {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 22px 0 18px;
}

.boton-peligro-borde {
  border-color: rgba(239, 68, 68, 0.35) !important;
  color: #f87171 !important;
}

.boton-peligro-borde:hover {
  background: rgba(239, 68, 68, 0.12) !important;
  border-color: rgba(239, 68, 68, 0.6) !important;
  color: #fca5a5 !important;
}

.fila-campos-grid-config {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.grupo-campo-dimension {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.grupo-campo-dimension .control-campo {
  font-size: 13px;
  padding: 8px 10px;
}

/* Editor de tarjetas en configuración (orden, tamaño y visibilidad) */
.lista-editor-tarjetas {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 14px 0 18px;
}

.item-editor-tarjeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #14171d;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 12px 18px;
  gap: 16px;
  transition: all 0.15s ease;
}

.item-editor-tarjeta:hover {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
}

.item-editor-tarjeta.inactivo {
  opacity: 0.55;
}

.info-editor-tarjeta {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.orden-numero-badge {
  font-size: 11.5px;
  font-weight: 700;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.06);
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nombre-editor-tarjeta {
  font-size: 14px;
  font-weight: 600;
  color: #f1f5f9;
  white-space: nowrap;
}

.controles-editor-tarjeta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.grupo-control-editor {
  display: flex;
  align-items: center;
  gap: 5px;
}

.etiqueta-mini-control {
  font-size: 11px;
  font-weight: 500;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.selector-tamano-tarjeta,
.selector-alto-tarjeta {
  background: #1e222a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 7px;
  color: #cbd5e1;
  font-size: 12.5px;
  padding: 6px 10px;
  cursor: pointer;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s ease;
}

.selector-tamano-tarjeta:focus,
.selector-alto-tarjeta:focus {
  border-color: #3b82f6;
}

.btn-visibilidad-tarjeta {
  font-size: 11px;
  font-weight: 500;
  padding: 4px 9px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid rgba(34, 197, 94, 0.3);
  background: rgba(34, 197, 94, 0.12);
  color: #4ade80;
  transition: all 0.15s ease;
}

.btn-visibilidad-tarjeta:hover {
  background: rgba(34, 197, 94, 0.22);
}

.btn-visibilidad-tarjeta.oculta {
  background: rgba(148, 163, 184, 0.12);
  color: #94a3b8;
  border-color: rgba(148, 163, 184, 0.2);
}

.btn-visibilidad-tarjeta.oculta:hover {
  background: rgba(148, 163, 184, 0.2);
  color: #cbd5e1;
}

.botones-mover-tarjeta {
  display: flex;
  gap: 4px;
}

.btn-mover-orden {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.15s ease;
}

.btn-mover-orden:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.2);
}

.btn-mover-orden:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}

.btn-mover-orden svg {
  width: 14px;
  height: 14px;
}

.fila-botones-accion-separada {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
}

/* Notificaciones no intrusivas tipo toast (sin bloquear la pantalla) */
.contenedor-toasts {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  z-index: 100000;
  pointer-events: none;
}

.toast-notificacion {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #181b22;
  color: #f1f5f9;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 4px solid #3b82f6;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 13px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.toast-notificacion.visible {
  opacity: 1;
  transform: translateY(0);
}

.toast-notificacion.exito {
  border-left-color: #22c55e;
}

.toast-notificacion.error {
  border-left-color: #ef4444;
}

/* Modal de calendario amplio */
.modal-caja-calendario {
  max-width: 1080px;
  width: 95%;
  max-height: 92vh;
  overflow-y: auto;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Modal detallado del clima (Yr.no) */
.modal-caja-muy-ancha {
  max-width: 740px;
  max-height: 88vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cabecera-titulo-clima {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.subtitulo-origen-clima {
  font-size: 11.5px;
  color: #60a5fa;
  font-weight: 500;
}

.cuerpo-modal-clima {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.tarjeta-clima-actual-modal {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.7) 0%, rgba(15, 23, 42, 0.9) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.icono-modal-clima-grande {
  width: 72px;
  height: 64px;
  flex-shrink: 0;
}

.info-modal-clima-actual {
  display: flex;
  flex-direction: column;
}

.temp-modal-destacada {
  display: flex;
  align-items: flex-start;
  font-size: 46px;
  font-weight: 700;
  color: #f97316;
  line-height: 1;
}

.unidad-c {
  font-size: 20px;
  color: #94a3b8;
  margin-top: 4px;
  margin-left: 2px;
}

.desc-modal-clima {
  font-size: 15px;
  font-weight: 600;
  color: #f1f5f9;
  margin-top: 4px;
}

.subdatos-modal-clima {
  display: flex;
  gap: 14px;
  font-size: 12.5px;
  color: #94a3b8;
  margin-top: 6px;
}

.color-max {
  color: #f87171;
}

.color-min {
  color: #38bdf8;
}

/* Cuadrícula de métricas del modal */
.malla-metricas-detalladas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.tarjeta-metrica-modal {
  background: #14171d;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.etiqueta-metrica-modal {
  font-size: 11.5px;
  color: #94a3b8;
  text-transform: none;
  letter-spacing: normal;
}

.valor-metrica-modal {
  font-size: 17px;
  font-weight: 700;
  color: #f8fafc;
  display: flex;
  align-items: center;
  gap: 6px;
}

.flecha-viento-modal {
  font-size: 14px;
  color: #60a5fa;
  display: inline-block;
}

.detalle-secundario-metrica {
  font-size: 11px;
  color: #64748b;
}

/* Pronóstico por horas */
.subtitulo-bloque-clima {
  font-size: 13px;
  font-weight: 600;
  color: #cbd5e1;
  margin-bottom: 10px;
}

.carrusel-horas-clima {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-behavior: smooth;
}

.tarjeta-hora-item {
  background: #14171d;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 10px 12px;
  min-width: 68px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.hora-texto-item {
  font-size: 11px;
  color: #94a3b8;
}

.icono-hora-mini {
  width: 28px;
  height: 28px;
}

.temp-hora-item {
  font-size: 13.5px;
  font-weight: 600;
  color: #f8fafc;
}

.precip-hora-item {
  font-size: 10px;
  color: #60a5fa;
  font-weight: 500;
}

/* Pronóstico para los próximos días */
.lista-dias-clima {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fila-dia-clima {
  background: #14171d;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 10px 14px;
  display: grid;
  grid-template-columns: 120px 36px 1fr 60px;
  align-items: center;
  gap: 12px;
}

.nombre-dia-clima {
  font-size: 13px;
  font-weight: 500;
  color: #e2e8f0;
}

.icono-dia-clima {
  width: 26px;
  height: 26px;
}

.rango-termico-dia {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
}

.min-dia-texto {
  color: #38bdf8;
  font-weight: 600;
  min-width: 26px;
}

.max-dia-texto {
  color: #f87171;
  font-weight: 600;
  min-width: 26px;
}

.barra-termica-fondo {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.barra-termica-relleno {
  height: 100%;
  background: linear-gradient(90deg, #38bdf8 0%, #f97316 100%);
  border-radius: 4px;
}

.precip-dia-texto {
  font-size: 11.5px;
  color: #60a5fa;
  font-weight: 500;
  text-align: right;
}

.pie-modal-clima {
  font-size: 11px;
  color: #64748b;
  text-align: right;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 10px;
}

.enlace-yr {
  color: #60a5fa;
  text-decoration: none;
}

.enlace-yr:hover {
  text-decoration: underline;
}

/* Clases de utilidad */
.oculto {
  display: none !important;
}

/* Adaptación responsiva escalonada según el tamaño de la ventana */
.tarjeta {
  min-width: 0;
  max-width: 100%;
}

.cuerpo-tarjeta {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 1350px) {
  .rejilla-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-gap: 16px;
    width: 100%;
  }

  .tarjeta-ancho-2,
  .tarjeta-ancho-3,
  .tarjeta-ancho-4 {
    grid-column: 1 / -1;
  }

  .rejilla-cuentas-saldos {
    width: 100%;
  }

  .malla-accesos {
    grid-template-columns: repeat(auto-fill, 50px);
    gap: 10px;
  }
}

@media (max-width: 780px) {
  body {
    padding: 12px 14px 20px;
  }

  .rejilla-panel {
    grid-template-columns: 1fr;
    grid-gap: 14px;
  }

  .tarjeta {
    grid-column: 1 / -1 !important;
  }

  .hora-principal {
    font-size: 42px;
  }

  .malla-accesos {
    grid-template-columns: repeat(auto-fill, 50px);
    gap: 10px;
    justify-content: center;
  }
}

/* ==================================================
   Sistema de temas visuales
   ================================================== */

/* Pestaña y selector de temas en configuración */
.rejilla-selector-temas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 14px;
}

.tarjeta-tema-opcion {
  background: rgba(255, 255, 255, 0.03);
  border: 2px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}

.tarjeta-tema-opcion:hover {
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.tarjeta-tema-opcion.seleccionada {
  border-color: #3b82f6;
  background: rgba(59, 130, 246, 0.08);
}

/* Previsualizaciones gráficas de cada tema */
.previa-tema {
  height: 85px;
  border-radius: 10px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.previa-tema-default {
  background: #111317;
}

.previa-tema-catppuccin {
  background: #181825;
}

.previa-barra-superior {
  height: 10px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.08);
  width: 60%;
  margin-left: auto;
}

.previa-cuerpo-grid {
  display: flex;
  gap: 6px;
  flex: 1;
}

.previa-minitarjeta {
  flex: 1;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.previa-tema-default .previa-minitarjeta {
  background: #17191e;
}

.previa-tema-catppuccin .previa-minitarjeta {
  background: #222436;
}

.previa-muestras {
  display: flex;
  gap: 5px;
  align-items: center;
}

.punto-color {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.c-def-1 { background: #f97316; }
.c-def-2 { background: #38bdf8; }
.c-def-3 { background: #10b981; }

.c-cat-1 { background: #8aadf4; }
.c-cat-2 { background: #f5a97f; }
.c-cat-3 { background: #c6a0f6; }

.info-tema-opcion {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.nombre-tema-fila {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nombre-tema {
  font-size: 14px;
  font-weight: 600;
  color: #f1f5f9;
}

.marca-activo-tema {
  font-size: 11px;
  font-weight: 600;
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.15);
  padding: 2px 7px;
  border-radius: 6px;
  display: none;
}

.tarjeta-tema-opcion.seleccionada .marca-activo-tema {
  display: inline-block;
}

.desc-tema {
  font-size: 12px;
  color: #94a3b8;
}

/* ==================================================
   Tema Catppuccin (inspirado en la captura adjunta)
   ================================================== */
html[data-tema="catppuccin"] body {
  background-color: #181825;
  color: #cad3f5;
}

html[data-tema="catppuccin"] .cabecera-superior .boton-perfil {
  background: #222436;
  border-color: rgba(202, 211, 245, 0.12);
  color: #cad3f5;
}

html[data-tema="catppuccin"] .cabecera-superior .boton-perfil:hover {
  background: #2e324a;
  border-color: #8aadf4;
}

html[data-tema="catppuccin"] .menu-desplegable {
  background: #222436;
  border-color: rgba(202, 211, 245, 0.14);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.6);
}

html[data-tema="catppuccin"] .usuario-actual {
  color: #cad3f5;
}

html[data-tema="catppuccin"] .etiqueta-sesion {
  color: #a5adcb;
}

html[data-tema="catppuccin"] .separador-menu {
  background: rgba(202, 211, 245, 0.08);
}

html[data-tema="catppuccin"] .opcion-menu {
  color: #cad3f5;
}

html[data-tema="catppuccin"] .opcion-menu:hover {
  background: rgba(202, 211, 245, 0.08);
  color: #ffffff;
}

html[data-tema="catppuccin"] .hora-principal {
  color: #8aadf4;
}

html[data-tema="catppuccin"] .fecha-principal {
  color: #a5adcb;
}

html[data-tema="catppuccin"] .tarjeta {
  background: #222436;
  border-color: rgba(202, 211, 245, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

html[data-tema="catppuccin"] .tarjeta:hover {
  border-color: rgba(138, 173, 244, 0.35);
}

html[data-tema="catppuccin"] .titulo-tarjeta {
  color: #cad3f5;
}

html[data-tema="catppuccin"] .icono-cabecera {
  color: #8aadf4;
}

html[data-tema="catppuccin"] .clima-temperatura {
  color: #f5a97f;
}

html[data-tema="catppuccin"] .icono-termometro {
  color: #f5a97f;
}

html[data-tema="catppuccin"] .clima-sensacion {
  color: #a5adcb;
}

html[data-tema="catppuccin"] .clima-sensacion strong {
  color: #cad3f5;
}

html[data-tema="catppuccin"] .fila-clima-metricas-rapidas {
  background: #1e2030;
  border-color: rgba(202, 211, 245, 0.08);
}

html[data-tema="catppuccin"] .metrica-rapida {
  color: #cad3f5;
}

html[data-tema="catppuccin"] .flecha-viento {
  color: #8aadf4;
}

html[data-tema="catppuccin"] .clima-estado {
  color: #cad3f5;
}

html[data-tema="catppuccin"] .icono-caja {
  background: #1e2030;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

html[data-tema="catppuccin"] .nombre-acceso {
  color: #a5adcb;
}

html[data-tema="catppuccin"] .item-acceso:hover .nombre-acceso {
  color: #cad3f5;
}

html[data-tema="catppuccin"] .etiqueta-hoy {
  color: #8aadf4;
  background: rgba(138, 173, 244, 0.15);
}

html[data-tema="catppuccin"] .calendario-dia-texto {
  color: #cad3f5;
}

html[data-tema="catppuccin"] .item-evento-hoy {
  background: #1e2030;
  border-color: rgba(202, 211, 245, 0.08);
  border-left-color: #8aadf4;
}

html[data-tema="catppuccin"] .titulo-evento-hoy {
  color: #cad3f5;
}

html[data-tema="catppuccin"] .btn-vista-calendario.activa {
  background: #8aadf4;
  color: #181825;
  box-shadow: 0 2px 8px rgba(138, 173, 244, 0.35);
}

html[data-tema="catppuccin"] .celda-dia-modal {
  background: #1e2030;
  border-color: rgba(202, 211, 245, 0.06);
}

html[data-tema="catppuccin"] .btn-mes-nav {
  background: #1e2030;
  border-color: rgba(202, 211, 245, 0.12);
  color: #cad3f5;
}

html[data-tema="catppuccin"] .btn-mes-nav:hover {
  background: #363a4f;
  border-color: #8aadf4;
  color: #8aadf4;
}

html[data-tema="catppuccin"] .celda-dia-modal.hoy {
  border-color: #8aadf4;
  background: rgba(138, 173, 244, 0.1);
}

html[data-tema="catppuccin"] .celda-dia-modal.hoy .num-dia-modal {
  color: #8aadf4;
}

html[data-tema="catppuccin"] .punto-evento {
  background: #8aadf4;
}

html[data-tema="catppuccin"] .columna-semana-dia,
html[data-tema="catppuccin"] .columna-tres-dias {
  background: #1e2030;
  border-color: rgba(202, 211, 245, 0.06);
}

html[data-tema="catppuccin"] .columna-semana-dia.hoy,
html[data-tema="catppuccin"] .columna-tres-dias.hoy {
  border-color: rgba(138, 173, 244, 0.65);
  background: rgba(138, 173, 244, 0.08);
  box-shadow: 0 0 16px rgba(138, 173, 244, 0.15);
}

html[data-tema="catppuccin"] .cabecera-columna-tres-dias.hoy {
  border-bottom-color: rgba(138, 173, 244, 0.35);
}

html[data-tema="catppuccin"] .fecha-columna-tres-dias {
  color: #a5adcb;
}

html[data-tema="catppuccin"] .fecha-columna-tres-dias.es-hoy {
  color: #8aadf4;
  font-weight: 700;
}

html[data-tema="catppuccin"] .tarjeta-evento-semana,
html[data-tema="catppuccin"] .tarjeta-evento-tres-dias {
  background: #24273a;
  border-left-color: #8aadf4;
}

html[data-tema="catppuccin"] * {
  scrollbar-color: rgba(202, 211, 245, 0.22) transparent;
}

html[data-tema="catppuccin"] ::-webkit-scrollbar-thumb {
  background: rgba(202, 211, 245, 0.2);
}

html[data-tema="catppuccin"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(138, 173, 244, 0.45);
}

html[data-tema="catppuccin"] .navegador-listas-tareas {
  background: #181825;
}

html[data-tema="catppuccin"] .btn-flecha-lista {
  background: #24273a;
  border-color: rgba(202, 211, 245, 0.1);
  color: #cad3f5;
}

html[data-tema="catppuccin"] .btn-flecha-lista:hover:not(:disabled) {
  background: #363a4f;
  color: #ffffff;
}

html[data-tema="catppuccin"] .btn-pildora-lista {
  color: #a5adcb;
}

html[data-tema="catppuccin"] .btn-pildora-lista:hover {
  background: rgba(202, 211, 245, 0.08);
  color: #cad3f5;
}

html[data-tema="catppuccin"] .btn-pildora-lista.activa {
  background: rgba(245, 169, 127, 0.18);
  color: #f5a97f;
  border-color: rgba(245, 169, 127, 0.35);
}

html[data-tema="catppuccin"] .badge-hora-tarea {
  background: #1e2030;
  border-color: rgba(202, 211, 245, 0.08);
  color: #a5adcb;
}

html[data-tema="catppuccin"] .badge-hora-tarea.hoy {
  color: #8aadf4;
  background: rgba(138, 173, 244, 0.15);
  border-color: rgba(138, 173, 244, 0.25);
}

html[data-tema="catppuccin"] .badge-hora-tarea.vencida {
  color: #ed8796;
  background: rgba(237, 135, 150, 0.15);
  border-color: rgba(237, 135, 150, 0.25);
}

html[data-tema="catppuccin"] .badge-lista-tarea {
  background: rgba(202, 211, 245, 0.08);
  color: #a5adcb;
}

html[data-tema="catppuccin"] .casilla-tarea {
  border-color: #6e738d;
}

html[data-tema="catppuccin"] .item-tarea.completada .casilla-tarea {
  background: #a6da95;
  border-color: #a6da95;
}

html[data-tema="catppuccin"] .texto-tarea {
  color: #cad3f5;
}

html[data-tema="catppuccin"] .item-tarea.completada .texto-tarea {
  color: #6e738d;
}

html[data-tema="catppuccin"] .modal-caja {
  background: #222436;
  border-color: rgba(202, 211, 245, 0.14);
}

html[data-tema="catppuccin"] .modal-titulo {
  color: #cad3f5;
}

html[data-tema="catppuccin"] .pestañas-configuracion {
  border-color: rgba(202, 211, 245, 0.1);
}

html[data-tema="catppuccin"] .tab-config {
  color: #a5adcb;
}

html[data-tema="catppuccin"] .tab-config.activa {
  background: #8aadf4;
  color: #181825;
  font-weight: 600;
}

html[data-tema="catppuccin"] .control-campo {
  background: #181825;
  border-color: rgba(202, 211, 245, 0.16);
  color: #cad3f5;
}

html[data-tema="catppuccin"] .control-campo:focus {
  border-color: #8aadf4;
}

html[data-tema="catppuccin"] .etiqueta-campo {
  color: #a5adcb;
}

html[data-tema="catppuccin"] .pista-campo {
  color: #6e738d;
}

html[data-tema="catppuccin"] .btn-tipo-marcador {
  color: #a5adcb;
}

html[data-tema="catppuccin"] .btn-tipo-marcador.activo {
  background: #363a4f;
  color: #8aadf4;
}

html[data-tema="catppuccin"] .item-admin-marcador {
  background: #1e2030;
  border-color: rgba(202, 211, 245, 0.08);
}

html[data-tema="catppuccin"] .nombre-admin-marcador {
  color: #cad3f5;
}

html[data-tema="catppuccin"] .url-admin-marcador {
  color: #a5adcb;
}

html[data-tema="catppuccin"] .boton-accion-primario {
  background: #8aadf4;
  color: #181825;
  font-weight: 600;
}

html[data-tema="catppuccin"] .boton-accion-primario:hover {
  background: #b4befe;
}

html[data-tema="catppuccin"] .tarjeta-tema-opcion.seleccionada {
  border-color: #8aadf4;
  background: rgba(138, 173, 244, 0.12);
}

html[data-tema="catppuccin"] .tarjeta-tema-opcion.seleccionada .marca-activo-tema {
  color: #8aadf4;
  background: rgba(138, 173, 244, 0.2);
}

html[data-tema="catppuccin"] .icono-cabecera-saldos {
  color: #a6da95;
}

html[data-tema="catppuccin"] .valor-saldo-total {
  color: #a6da95;
}

html[data-tema="catppuccin"] .tarjeta-cuenta-saldo {
  background: #1e2030;
  border-color: rgba(202, 211, 245, 0.06);
}

html[data-tema="catppuccin"] .tarjeta-cuenta-saldo:hover {
  background: #24273a;
  border-color: rgba(202, 211, 245, 0.14);
}

html[data-tema="catppuccin"] .importe-cuenta-saldo {
  color: #cad3f5;
}

html[data-tema="catppuccin"] .nombre-cuenta-saldo {
  color: #a5adcb;
}

html[data-tema="catppuccin"] .item-editor-tarjeta {
  background: #1e2030;
  border-color: rgba(202, 211, 245, 0.08);
}

html[data-tema="catppuccin"] .nombre-editor-tarjeta {
  color: #cad3f5;
}

html[data-tema="catppuccin"] .orden-numero-badge {
  background: rgba(202, 211, 245, 0.06);
  color: #a5adcb;
}

html[data-tema="catppuccin"] .selector-tamano-tarjeta,
html[data-tema="catppuccin"] .selector-alto-tarjeta {
  background: #181825;
  border-color: rgba(202, 211, 245, 0.16);
  color: #cad3f5;
}

html[data-tema="catppuccin"] .btn-mover-orden {
  background: #181825;
  border-color: rgba(202, 211, 245, 0.12);
  color: #cad3f5;
}

html[data-tema="catppuccin"] .btn-mover-orden:hover:not(:disabled) {
  background: #363a4f;
  border-color: #8aadf4;
  color: #8aadf4;
}

html[data-tema="catppuccin"] .tarjeta-noticias {
  background: #222436;
  border-color: rgba(202, 211, 245, 0.08);
}

html[data-tema="catppuccin"] .enlace-noticia-20m {
  background: #1e2030;
  border-color: rgba(202, 211, 245, 0.06);
}

html[data-tema="catppuccin"] .enlace-noticia-20m:hover {
  background: #24273a;
  border-color: rgba(138, 173, 244, 0.35);
}

html[data-tema="catppuccin"] .categoria-noticia-20m {
  background: rgba(138, 173, 244, 0.15);
  border-color: rgba(138, 173, 244, 0.25);
  color: #8aadf4;
}

html[data-tema="catppuccin"] .hora-noticia-20m {
  color: #a5adcb;
}

html[data-tema="catppuccin"] .titulo-noticia-20m {
  color: #cad3f5;
}

html[data-tema="catppuccin"] .enlace-noticia-20m:hover .titulo-noticia-20m {
  color: #ffffff;
}

html[data-tema="catppuccin"] .icono-cabecera-valladolid {
  color: #f38ba8;
}

html[data-tema="catppuccin"] .categoria-noticia-valladolid {
  background: rgba(243, 139, 168, 0.15);
  border-color: rgba(243, 139, 168, 0.25);
  color: #f38ba8;
}

html[data-tema="catppuccin"] .tarjeta-noticias-valladolid .enlace-noticia-20m:hover {
  border-color: rgba(243, 139, 168, 0.35);
}

html[data-tema="catppuccin"] .btn-borrar-noticia {
  background: #1e2030;
  border-color: rgba(202, 211, 245, 0.06);
  color: #a5adcb;
}

html[data-tema="catppuccin"] .btn-borrar-noticia:hover {
  background: rgba(166, 218, 149, 0.15);
  border-color: rgba(166, 218, 149, 0.35);
  color: #a6da95;
}

html[data-tema="catppuccin"] .tarjeta-noticias-valladolid .btn-borrar-noticia:hover {
  background: rgba(243, 139, 168, 0.15);
  border-color: rgba(243, 139, 168, 0.35);
  color: #f38ba8;
}

html[data-tema="catppuccin"] .item-noticia-completada {
  background: #1e2030;
  border-color: rgba(202, 211, 245, 0.1);
}

html[data-tema="catppuccin"] .btn-accion-icono-tarjeta {
  color: #a5adcb;
}

html[data-tema="catppuccin"] .btn-accion-icono-tarjeta:hover {
  background: #24273a;
  color: #cad3f5;
}

html[data-tema="catppuccin"] .spinner-colocacion-tarjetas,
html[data-tema="catppuccin"] .spinner-tarjeta-anillo {
  border-color: rgba(202, 211, 245, 0.12);
  border-top-color: #8aadf4;
}

html[data-tema="catppuccin"] .texto-cargador-tarjeta {
  color: #a5adcb;
}

html[data-tema="catppuccin"] .tarjeta-mediatracker {
  background: #222436;
  border-color: rgba(202, 211, 245, 0.08);
}

html[data-tema="catppuccin"] .enlace-proximo-ver-mt {
  background: #1e2030;
  border-color: rgba(202, 211, 245, 0.06);
}

html[data-tema="catppuccin"] .enlace-proximo-ver-mt:hover {
  background: #24273a;
  border-color: rgba(198, 160, 246, 0.35);
}

html[data-tema="catppuccin"] .titulo-serie-mt {
  color: #cad3f5;
}

html[data-tema="catppuccin"] .enlace-proximo-ver-mt:hover .titulo-serie-mt {
  color: #ffffff;
}

html[data-tema="catppuccin"] .badge-ep-mt {
  background: rgba(198, 160, 246, 0.15);
  border-color: rgba(198, 160, 246, 0.25);
  color: #c6a0f6;
}

html[data-tema="catppuccin"] .titulo-ep-mt {
  color: #a5adcb;
}

html[data-tema="catppuccin"] .badge-fecha-mt {
  background: #1e2030;
  border-color: rgba(202, 211, 245, 0.08);
  color: #a5adcb;
}

html[data-tema="catppuccin"] .badge-fecha-hoy {
  color: #a6da95;
  background: rgba(166, 218, 149, 0.15);
  border-color: rgba(166, 218, 149, 0.3);
}

html[data-tema="catppuccin"] .badge-fecha-manana {
  color: #91d7e3;
  background: rgba(145, 215, 227, 0.15);
  border-color: rgba(145, 215, 227, 0.3);
}

html[data-tema="catppuccin"] .tarjeta-fit {
  background: #222436;
  border-color: rgba(202, 211, 245, 0.08);
}

html[data-tema="catppuccin"] .icono-cabecera-fit {
  color: #a6da95;
}

html[data-tema="catppuccin"] .bloque-fit-principal,
html[data-tema="catppuccin"] .tarjeta-metrica-fit {
  background: #1e2030;
  border-color: rgba(202, 211, 245, 0.06);
}

html[data-tema="catppuccin"] .numero-pasos-fit {
  color: #cad3f5;
}

html[data-tema="catppuccin"] .meta-fit-fecha,
html[data-tema="catppuccin"] .icono-reloj-fit {
  color: #6e738d;
}

html[data-tema="catppuccin"] .etiqueta-pasos-fit,
html[data-tema="catppuccin"] .meta-pasos-fit {
  color: #a5adcb;
}

html[data-tema="catppuccin"] .porcentaje-pasos-texto {
  color: #a6da95;
}

html[data-tema="catppuccin"] .icono-cardio {
  background: rgba(237, 135, 150, 0.15);
  color: #ed8796;
}

html[data-tema="catppuccin"] .icono-calorias {
  background: rgba(245, 169, 127, 0.15);
  color: #f5a97f;
}

html[data-tema="catppuccin"] .icono-distancia {
  background: rgba(138, 173, 244, 0.15);
  color: #8aadf4;
}

html[data-tema="catppuccin"] .valor-metrica-fit {
  color: #cad3f5;
}

html[data-tema="catppuccin"] .valor-metrica-fit small,
html[data-tema="catppuccin"] .nombre-metrica-fit {
  color: #a5adcb;
}

html[data-tema="catppuccin"] .btn-conectar-fit {
  background: #8aadf4;
  color: #1e2030;
}

html[data-tema="catppuccin"] .btn-conectar-fit:hover {
  background: #7aa2f7;
}

html[data-tema="catppuccin"] .tarjeta-home-assistant {
  background: #222436;
  border-color: rgba(202, 211, 245, 0.08);
}

html[data-tema="catppuccin"] .icono-cabecera-ha {
  color: #8aadf4;
}

html[data-tema="catppuccin"] .item-dispositivo-ha {
  background: #1e2030;
  border-color: rgba(202, 211, 245, 0.06);
}

html[data-tema="catppuccin"] .item-dispositivo-ha:hover {
  background: #24273a;
}

html[data-tema="catppuccin"] .item-dispositivo-ha.activo {
  border-color: rgba(138, 173, 244, 0.35);
  background: rgba(138, 173, 244, 0.04);
}

html[data-tema="catppuccin"] .nombre-disp-ha {
  color: #cad3f5;
}

html[data-tema="catppuccin"] .sub-disp-ha {
  color: #a5adcb;
}

html[data-tema="catppuccin"] .item-dispositivo-ha.activo .estado-disp-ha {
  color: #a6da95;
}

html[data-tema="catppuccin"] .toggle-ha.activo {
  background: #8aadf4;
}

html[data-tema="catppuccin"] .btn-accion-vacuum-ha {
  background: rgba(138, 173, 244, 0.15);
  border-color: rgba(138, 173, 244, 0.3);
  color: #8aadf4;
}

html[data-tema="catppuccin"] .btn-accion-vacuum-ha:hover {
  background: rgba(138, 173, 244, 0.25);
}

html[data-tema="catppuccin"] .bloque-dimensiones-tarjetas {
  background: #1e2030;
  border-color: rgba(202, 211, 245, 0.08);
}

html[data-tema="catppuccin"] .bloque-perfil-avatar {
  background: #1e2030;
  border-color: rgba(202, 211, 245, 0.08);
}

html[data-tema="catppuccin"] .contenedor-avatar-grande,
html[data-tema="catppuccin"] .contenedor-avatar {
  background-color: #24273a;
  border-color: rgba(202, 211, 245, 0.15);
  color: #a5adcb;
}

/* ==================================================
   Tarjeta de Monitorización con diseño idéntico a Saldos
   ================================================== */
.tarjeta-monitorizacion {
  cursor: pointer;
  overflow: hidden;
}

.tarjeta-monitorizacion:hover {
  border-color: rgba(59, 130, 246, 0.3);
}

.cuerpo-monitorizacion {
  overflow: hidden;
  max-height: 100%;
}

.fila-mon-cuenta {
  cursor: pointer;
}

/* Badges de secciones de monitorización */
.badge-mon-proxmox {
  background: rgba(234, 88, 12, 0.15);
  color: #fb923c;
  border: 1px solid rgba(234, 88, 12, 0.3);
}

.badge-mon-dispositivos {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.badge-mon-servicios {
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.3);
}

/* Badges de estado en el lateral derecho */
.badge-estado-mon {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.02em;
}

.badge-mon-ok {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.badge-mon-advertencia,
.badge-mon-warn {
  background: rgba(234, 179, 8, 0.15);
  color: #facc15;
  border: 1px solid rgba(234, 179, 8, 0.35);
}

.badge-mon-critico,
.badge-mon-crit {
  background: rgba(239, 68, 68, 0.18);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.35);
}

.badge-mon-desconocido {
  background: rgba(249, 115, 22, 0.18);
  color: #fb923c;
  border: 1px solid rgba(249, 115, 22, 0.35);
}

/* Semáforo indicador global junto a la hora */
.semaforo-indicador {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.semaforo-ok {
  background: #22c55e;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
}

.semaforo-advertencia,
.semaforo-warn {
  background: #eab308;
  box-shadow: 0 0 8px rgba(234, 179, 8, 0.6);
}

.semaforo-critico,
.semaforo-crit {
  background: #ef4444;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
}

.semaforo-desconocido {
  background: #f97316;
  box-shadow: 0 0 8px rgba(249, 115, 22, 0.6);
}

/* ==================================================
   Pestañas de MediaTracker (Próximos episodios / Pendientes de ver)
   ================================================== */
.cabecera-mediatracker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.selector-pestañas-mt {
  display: inline-flex;
  align-items: center;
  background: #121418;
  border-radius: 9px;
  padding: 2px;
  gap: 2px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.btn-pestaña-mt {
  background: transparent;
  border: none;
  border-radius: 7px;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 9px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.btn-pestaña-mt:hover {
  color: #f1f5f9;
}

.btn-pestaña-mt.activa {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-weight: 600;
}

/* Badge de episodios pendientes en la lista de MediaTracker */
.badge-episodios-pendientes {
  background: rgba(59, 130, 246, 0.16);
  border: 1px solid rgba(59, 130, 246, 0.35);
  color: #93c5fd;
  font-size: 10.5px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 6px;
}

/* ==================================================
   Home Assistant: Enlace y estado "En línea"
   ================================================== */
.cabecera-ha {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.acciones-cabecera-ha {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-enlace-ha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  text-decoration: none;
  transition: all 0.15s ease;
}

.btn-enlace-ha svg {
  width: 14px;
  height: 14px;
}

.btn-enlace-ha:hover {
  background: rgba(59, 130, 246, 0.14);
  border-color: rgba(59, 130, 246, 0.35);
  color: #60a5fa;
  transform: translateY(-1px);
}

.punto-conexion-ha {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
  display: inline-block;
  margin-right: 5px;
}

/* Gestor de entidades de Home Assistant en el modal de configuración */
.bloque-config-ha {
  margin-top: 14px;
}

.lista-gestor-entidades-ha {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 260px;
  overflow-y: auto;
  padding-right: 4px;
  margin-top: 10px;
}

.item-gestor-ha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 8px 12px;
  gap: 10px;
}

.info-gestor-ha {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.nombre-gestor-ha {
  font-size: 13px;
  font-weight: 600;
  color: #f1f5f9;
}

.id-gestor-ha {
  font-size: 11px;
  color: #64748b;
  font-family: monospace;
}

.acciones-gestor-ha {
  display: flex;
  align-items: center;
  gap: 4px;
}

.btn-mini-gestor {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
}

.btn-mini-gestor svg {
  width: 13px;
  height: 13px;
}

.btn-mini-gestor:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.btn-mini-eliminar:hover {
  background: rgba(239, 68, 68, 0.16) !important;
  border-color: rgba(239, 68, 68, 0.35) !important;
  color: #fca5a5 !important;
}

.fila-agregar-entidad-ha {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.grupo-campo-flex {
  flex: 2;
  min-width: 180px;
}

.grupo-campo-boton {
  flex-shrink: 0;
}

/* ==================================================
   Modal de Historial de Saldos con Gráfico SVG Interactivo
   ================================================== */
.modal-caja-saldo {
  max-width: 680px;
}

.cuerpo-modal-saldo {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 16px 20px 24px;
}

.rejilla-metricas-saldo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.tarjeta-metrica-saldo {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.etiqueta-metrica-saldo {
  font-size: 11.5px;
  color: #94a3b8;
}

.valor-metrica-saldo {
  font-size: 18px;
  font-weight: 700;
  color: #f8fafc;
}

.valor-saldo-min {
  color: #fb7185;
}

.valor-saldo-max {
  color: #4ade80;
}

.bloque-grafico-saldo {
  background: #13151a;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cabecera-grafico-saldo {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.titulo-grafico-curva {
  font-size: 13px;
  font-weight: 600;
  color: #f1f5f9;
}

.subtitulo-grafico-curva {
  font-size: 11px;
  color: #64748b;
}

.contenedor-svg-grafico-saldo {
  width: 100%;
  height: 220px;
  position: relative;
}

.contenedor-svg-grafico-saldo svg {
  width: 100%;
  height: 100%;
  display: block;
}

.tooltip-grafico-saldo {
  position: absolute;
  background: #1e222b;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 11.5px;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  transform: translate(-50%, -120%);
  white-space: nowrap;
  z-index: 10;
  transition: opacity 0.1s ease;
}

.bloque-tabla-historico-saldo {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.subtitulo-historico-saldo {
  font-size: 12.5px;
  font-weight: 600;
  color: #cbd5e1;
}

.tabla-envoltorio-saldo {
  max-height: 160px;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
}

.tabla-saldo-registros {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.tabla-saldo-registros th,
.tabla-saldo-registros td {
  padding: 8px 12px;
  text-align: left;
}

.tabla-saldo-registros th {
  background: rgba(255, 255, 255, 0.03);
  color: #94a3b8;
  font-weight: 600;
  font-size: 11.5px;
}

.tabla-saldo-registros tr:not(:last-child) td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.tabla-saldo-registros td:last-child {
  text-align: right;
  font-weight: 600;
  color: #f1f5f9;
}

/* ==================================================
   Modal Detallado de Google Fit
   ================================================== */
.modal-caja-fit {
  max-width: 640px;
}

.cuerpo-modal-fit {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 20px 24px;
}

.bloque-destacado-pasos-fit {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fila-info-destacada-pasos {
  display: flex;
  align-items: center;
  gap: 14px;
}

.icono-destacado-fit {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(59, 130, 246, 0.14);
  color: #60a5fa;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icono-destacado-fit svg {
  width: 24px;
  height: 24px;
}

.textos-pasos-fit {
  flex: 1;
  min-width: 0;
}

.etiqueta-destacada-pasos {
  font-size: 12px;
  color: #94a3b8;
}

.valor-destacado-pasos {
  font-size: 24px;
  font-weight: 700;
  color: #f8fafc;
  line-height: 1.1;
  margin-top: 2px;
}

.valor-destacado-pasos small {
  font-size: 14px;
  font-weight: 400;
  color: #64748b;
}

.porcentaje-destacado-fit {
  font-size: 18px;
  font-weight: 700;
  color: #60a5fa;
}

.barra-progreso-fit-fondo {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 9999px;
  overflow: hidden;
}

.barra-progreso-fit-avance {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #60a5fa);
  border-radius: 9999px;
  transition: width 0.4s ease;
}

.rejilla-metricas-fit-modal {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.tarjeta-metrica-fit-modal {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.icono-metrica-fit-modal {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icono-metrica-fit-modal svg {
  width: 20px;
  height: 20px;
}

.icono-metrica-fit-modal.calorias {
  background: rgba(249, 115, 22, 0.14);
  color: #fb923c;
}

.icono-metrica-fit-modal.distancia {
  background: rgba(34, 197, 94, 0.14);
  color: #4ade80;
}

.icono-metrica-fit-modal.tiempo {
  background: rgba(168, 85, 247, 0.14);
  color: #c084fc;
}

.icono-metrica-fit-modal.cardio {
  background: rgba(239, 68, 68, 0.14);
  color: #f87171;
}

.datos-metrica-fit-modal {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.etiqueta-metrica-fit {
  font-size: 11.5px;
  color: #94a3b8;
}

.valor-metrica-fit {
  font-size: 16px;
  font-weight: 700;
  color: #f8fafc;
}

.valor-metrica-fit small {
  font-size: 12px;
  font-weight: 400;
  color: #94a3b8;
}

.meta-metrica-fit {
  font-size: 11px;
  color: #64748b;
}

/* ==================================================
   Modal de visor web de noticias
   ================================================== */
.modal-caja-noticia {
  width: 95%;
  max-width: 1200px;
  height: 90vh;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  padding: 14px 18px 18px;
  background: #14171d;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.75);
}

.cabecera-visor-noticia {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-shrink: 0;
}

.info-visor-noticia {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.badge-fuente-noticia {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}

.badge-fuente-20m {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.badge-fuente-valladolid {
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.3);
}

.titulo-visor-noticia {
  font-size: 15px;
  font-weight: 600;
  color: #f1f5f9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

.acciones-visor-noticia {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.boton-accion-modal {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
  border-radius: 8px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
}

.boton-accion-modal:hover {
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
  border-color: rgba(59, 130, 246, 0.4);
}

.boton-accion-modal svg {
  width: 16px;
  height: 16px;
}

.cuerpo-visor-noticia {
  flex: 1;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.iframe-visor-noticia {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  background: #ffffff;
}

.cargador-visor-noticia {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #14171d;
  color: #cbd5e1;
  z-index: 2;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.cargador-visor-noticia.oculto {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}