/* ============================================================
   GECONOT · componentes.css
   Botones, cards, métricas, tablas, badges de estado, formularios,
   modales y toasts. Clases en español (CLAUDE.md).
   ============================================================ */

/* ---------- ENCABEZADO DE PÁGINA ---------- */
.encabezado-pagina {
  display: flex; align-items: flex-start; gap: 16px;
  flex-wrap: wrap; margin-bottom: 22px;
}
.encabezado-pagina__texto h2 { font-size: 1.5rem; }
.encabezado-pagina__texto p { color: var(--texto-secundario); margin-top: 4px; }
.encabezado-pagina__acciones { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- BOTONES ---------- */
.boton-principal, .boton-accion, .boton-secundario, .boton-peligro {
  display: inline-flex; align-items: center; gap: 8px;
  border: none; cursor: pointer;
  padding: 10px 18px; border-radius: var(--radio-sm);
  font-weight: 700; font-size: 0.9rem; font-family: inherit;
  transition: transform var(--transicion), box-shadow var(--transicion), background var(--transicion);
}
/* La sombra es del ÁMBAR del propio botón. Estaba en índigo rgba(99,102,241),
   resto de la paleta anterior: dejaba un halo violeta alrededor de un botón
   amarillo. Una sombra solo resulta creíble si es del color de lo que la
   proyecta. */
.boton-principal {
  background: var(--gradiente-primario); color: var(--sobre-primario);
  box-shadow: 0 8px 20px rgba(211, 158, 0, 0.35);
}
.boton-principal:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(211, 158, 0, 0.45); }
.boton-secundario {
  background: #fff; color: var(--texto-principal);
  border: 1px solid var(--borde-suave);
}
.boton-secundario:hover { border-color: var(--color-primario); color: var(--color-primario-texto); }
.boton-peligro { background: var(--color-peligro); color: #fff; }
.boton-peligro:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(239, 68, 68, 0.4); }
.boton-accion {
  background: var(--fondo-app); color: var(--texto-secundario);
  padding: 7px 12px; font-size: 0.82rem;
}
.boton-accion:hover { background: var(--color-primario); color: var(--sobre-primario); }
.boton-accion.peligro:hover { background: var(--color-peligro); }
.boton-principal:disabled, .boton-accion:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ---------- CARDS ---------- */
.tarjeta {
  background: var(--fondo-card);
  border-radius: var(--radio);
  box-shadow: var(--sombra-card);
  border: 1px solid var(--borde-suave);
}
.tarjeta__cabecera {
  padding: 18px 22px; border-bottom: 1px solid var(--borde-suave);
  display: flex; align-items: center; gap: 12px;
}
.tarjeta__cabecera h3 { font-size: 1.05rem; }
.tarjeta__cuerpo { padding: 22px; }

/* ---------- MÉTRICAS (dashboard) ---------- */
.rejilla-metricas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px; margin-bottom: 24px;
}
.metrica {
  background: var(--fondo-card);
  border-radius: var(--radio);
  box-shadow: var(--sombra-card);
  border: 1px solid var(--borde-suave);
  padding: 20px;
  display: flex; align-items: center; gap: 16px;
}
.metrica__icono {
  width: 50px; height: 50px; flex-shrink: 0;
  border-radius: var(--radio-sm); display: grid; place-items: center;
  font-size: 1.3rem; color: var(--sobre-primario);
  background: var(--color-primario);
}
.metrica--exito .metrica__icono { background: var(--color-exito); }
.metrica--aviso .metrica__icono { background: var(--color-aviso); }
.metrica--peligro .metrica__icono { background: var(--color-peligro); }
.metrica--info  .metrica__icono { background: var(--color-info); }
.metrica--neutra .metrica__icono { background: var(--texto-secundario); }
.metrica__valor { font-size: 1.7rem; font-weight: 800; line-height: 1; }
.metrica__etiqueta { color: var(--texto-secundario); font-size: 0.85rem; margin-top: 4px; }

/* ---------- TABLAS ---------- */
.tabla-envoltura { overflow-x: auto; }
.tabla-datos { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.tabla-datos thead th {
  text-align: left; padding: 13px 16px;
  font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--texto-tenue); font-weight: 700;
  border-bottom: 2px solid var(--borde-suave); white-space: nowrap;
}
.tabla-datos tbody td { padding: 14px 16px; border-bottom: 1px solid var(--borde-suave); }
.tabla-datos tbody tr { transition: background var(--transicion); }
.tabla-datos tbody tr:hover { background: #f8fafc; }
.tabla-datos tbody tr:last-child td { border-bottom: none; }
.celda-principal { font-weight: 700; color: var(--texto-principal); }
.celda-acciones { display: flex; gap: 6px; white-space: nowrap; }

/* ---------- BADGES / ETIQUETAS DE ESTADO ---------- */
.etiqueta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 20px;
  font-size: 0.76rem; font-weight: 700; white-space: nowrap;
}
.etiqueta::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.etiqueta--activa, .etiqueta--enviado, .etiqueta--activo,
.etiqueta--exito { background: #d1fae5; color: #047857; }
.etiqueta--inactiva, .etiqueta--bloqueado, .etiqueta--inactivo,
.etiqueta--peligro { background: #fee2e2; color: #b91c1c; }
.etiqueta--espera_auditoria, .etiqueta--en_auditoria,
.etiqueta--aviso { background: #fef3c7; color: #b45309; }
.etiqueta--info { background: #cffafe; color: #0e7490; }
.etiqueta--neutra { background: #e2e8f0; color: #475569; }

/* Chip de rol */
.chip-rol {
  display: inline-flex; padding: 3px 10px; border-radius: 7px;
  font-size: 0.74rem; font-weight: 700;
  background: var(--color-primario-tenue); color: var(--color-primario-fuerte);
}

/* ---------- FORMULARIOS ---------- */
.grupo-campo { margin-bottom: 16px; }
.grupo-campo label { display: block; font-weight: 600; font-size: 0.85rem; margin-bottom: 6px; }
.campo-texto, .campo-select, textarea.campo-texto {
  width: 100%; padding: 11px 13px;
  border: 1px solid var(--borde-suave); border-radius: var(--radio-sm);
  font-family: inherit; font-size: 0.92rem; background: #fff;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.campo-texto:focus, .campo-select:focus {
  outline: none; border-color: var(--color-primario);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.fila-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 575px) { .fila-campos { grid-template-columns: 1fr; } }

/* Errores de validación inline */
.campo-error { border-color: var(--color-peligro) !important; box-shadow: 0 0 0 3px rgba(193, 39, 45, 0.12) !important; }
.mensaje-error { color: var(--color-peligro); font-size: 0.78rem; margin-top: 5px; font-weight: 600; }

/* Ficha de detalle (modal de solo lectura) */
.ficha-detalle { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px 18px; }
.ficha-detalle__item { min-width: 0; }
.ficha-detalle__clave { font-size: 0.72rem; color: var(--texto-secundario); text-transform: uppercase; letter-spacing: 0.04em; }
.ficha-detalle__valor { font-weight: 700; font-size: 0.92rem; margin-top: 2px; word-break: break-word; }
.ficha-detalle .ancho-total { grid-column: 1 / -1; }

/* ---------- OPCIÓN CON EXPLICACIÓN (elegir método de verificación) ----------
   Tarjetas en vez de un desplegable: la diferencia de seguridad entre recibir
   el código por correo o generarlo con una app merece leerse antes de elegir. */
.opcion-metodo {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 13px; margin-bottom: 9px;
  border: 1.5px solid var(--borde-suave); border-radius: var(--radio-sm);
  cursor: pointer; background: #fff; transition: border-color var(--transicion);
  font-size: 0.88rem; line-height: 1.5;
}
.opcion-metodo:hover { border-color: var(--color-primario); }
.opcion-metodo:has(input:checked) {
  border-color: var(--color-primario);
  box-shadow: 0 4px 14px rgba(224, 168, 0, 0.16);
}
.opcion-metodo input { margin-top: 3px; accent-color: var(--color-primario); }

/* ---------- CAMPO DE CONTRASEÑA CON BOTÓN DE VER ----------
   Envuelve un .campo-texto[type=password] y un <button class="ojo">; el
   comportamiento lo pone Auth.alternarClave (compartido/js/auth.js). */
.campo-clave { position: relative; }
.campo-clave .campo-texto { padding-right: 42px; }
.campo-clave .ojo {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--texto-tenue); cursor: pointer;
  width: 32px; height: 32px; border-radius: 8px; font-size: 1rem;
}
.campo-clave .ojo:hover { color: var(--color-primario-texto); }

/* ---------- BARRA DE HERRAMIENTAS (filtros) ---------- */
.barra-herramientas {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
  margin-bottom: 18px;
}
.buscador { position: relative; flex: 1; min-width: 200px; }
.buscador input { padding-left: 38px; }
.buscador__icono { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--texto-tenue); }

/* ---------- MODAL ---------- */
.modal-fondo {
  position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55);
  /* Altura del viewport REAL (ver .app-shell en layout.css): con `inset: 0` a
     secas, en el móvil el fondo se dimensiona contra un alto que cambia al
     retraerse la barra del navegador y el diálogo se descoloca. */
  height: 100vh; height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  z-index: 1060; padding: 18px; opacity: 0; pointer-events: none;
  /* El scroll dentro del diálogo no arrastra la página de detrás. */
  overscroll-behavior: contain;
  transition: opacity var(--transicion);
}
.modal-fondo.visible { opacity: 1; pointer-events: auto; }
/* .modal-caja (no usar .modal: colisiona con la clase .modal de Bootstrap) */
.modal-caja {
  background: #fff; border-radius: var(--radio);
  width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto;
  box-shadow: var(--sombra-flotante);
  transform: translateY(16px) scale(0.98); transition: transform var(--transicion);
}
.modal-fondo.visible .modal-caja { transform: none; }
.modal__cabecera { padding: 20px 22px; border-bottom: 1px solid var(--borde-suave); display: flex; align-items: center; }
.modal__cabecera h3 { font-size: 1.15rem; }
.modal__cuerpo { padding: 22px; }
.modal__pie { padding: 16px 22px; border-top: 1px solid var(--borde-suave); display: flex; justify-content: flex-end; gap: 10px; }

/* ---------- TOASTS ---------- */
.contenedor-toasts {
  position: fixed; top: 18px; right: 18px; z-index: 1080;
  display: flex; flex-direction: column; gap: 10px;
}
/* .toast-aviso (no usar .toast: colisiona con la clase .toast de Bootstrap) */
.toast-aviso {
  background: #fff; border-radius: var(--radio-sm);
  box-shadow: var(--sombra-flotante);
  padding: 14px 18px; min-width: 280px;
  display: flex; align-items: center; gap: 12px;
  border-left: 4px solid var(--color-primario);
  animation: entrar-toast 0.25s ease;
}
.toast--exito { border-left-color: var(--color-exito); }
.toast--peligro { border-left-color: var(--color-peligro); }
.toast--aviso { border-left-color: var(--color-aviso); }
.toast__icono { font-size: 1.2rem; }
@keyframes entrar-toast { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- LISTA CLAVE-VALOR ---------- */
.lista-datos { display: flex; flex-direction: column; }
.lista-datos__fila {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--borde-suave);
}
.lista-datos__fila:last-child { border-bottom: none; }
.lista-datos__clave { color: var(--texto-secundario); font-size: 0.88rem; }
.lista-datos__valor { font-weight: 700; font-size: 0.9rem; text-align: right; }

/* ---------- MOSAICO DE DATOS DEL ENTORNO ---------- */
.rejilla-entorno {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px;
}
.dato-entorno {
  display: flex; align-items: center; gap: 13px;
  background: var(--fondo-app); border-radius: var(--radio-sm);
  padding: 14px 16px;
}
.dato-entorno__icono {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--radio-xs);
  background: #fff; color: var(--color-primario-texto);
  display: grid; place-items: center; font-size: 1.1rem;
  box-shadow: var(--sombra-card);
}
.dato-entorno__clave { font-size: 0.72rem; color: var(--texto-secundario); text-transform: uppercase; letter-spacing: 0.04em; }
.dato-entorno__valor { font-weight: 700; font-size: 0.92rem; margin-top: 2px; }

/* ---------- INTERRUPTOR (toggle) ---------- */
.interruptor { position: relative; display: inline-block; width: 50px; height: 28px; flex-shrink: 0; }
.interruptor input { display: none; }
.interruptor__pista {
  position: absolute; inset: 0; background: #cbd5e1; border-radius: 30px;
  cursor: pointer; transition: background var(--transicion);
}
.interruptor__pista::before {
  content: ""; position: absolute; width: 22px; height: 22px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: transform var(--transicion);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.interruptor input:checked + .interruptor__pista { background: var(--color-exito); }
.interruptor input:checked + .interruptor__pista::before { transform: translateX(22px); }

.fila-opcion {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--borde-suave);
}
.fila-opcion:last-child { border-bottom: none; }
.fila-opcion__texto { flex: 1; min-width: 0; }
.fila-opcion__titulo { font-weight: 700; font-size: 0.92rem; }
.fila-opcion__desc { color: var(--texto-secundario); font-size: 0.83rem; margin-top: 2px; }

/* ---------- MEDIDOR DE FORTALEZA DE CONTRASEÑA ---------- */
.fortaleza { display: flex; gap: 5px; margin-top: 8px; }
.fortaleza__seg { flex: 1; height: 5px; border-radius: 4px; background: var(--borde-suave); transition: background var(--transicion); }
.fortaleza__texto { font-size: 0.78rem; margin-top: 5px; font-weight: 600; }

/* Criterios RECOMENDADOS de la contraseña. Se listan para orientar, no para
   bloquear: por eso el que no se cumple se ve atenuado, no en rojo — no es un
   error, es un consejo que la persona puede no seguir. */
.criterios-clave {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 3px 12px;
}
.criterio {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  color: var(--texto-tenue);
  transition: color var(--transicion);
}
.criterio i { font-size: 0.72rem; }
.criterio--ok { color: var(--color-exito); }
.criterios-clave__titulo {
  font-size: 0.74rem;
  color: var(--texto-tenue);
  margin-top: 10px;
}

/* ---------- BARRA DE PROGRESO ---------- */
.barra-progreso { background: var(--fondo-app); border-radius: 20px; height: 8px; overflow: hidden; margin-top: 8px; }
.barra-progreso__relleno { height: 100%; background: var(--gradiente-primario); border-radius: 20px; transition: width 0.4s ease; }
.metrica__barra { width: 100%; }

/* ---------- ESTADO VACÍO ---------- */
.estado-vacio { text-align: center; padding: 50px 20px; color: var(--texto-tenue); }
.estado-vacio__icono { font-size: 2.6rem; opacity: 0.4; margin-bottom: 10px; }

/* ---------- LÍNEA DE TIEMPO (auditoría) ---------- */
.linea-tiempo { position: relative; padding-left: 28px; }
.linea-tiempo::before { content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: var(--borde-suave); }
.evento-auditoria { position: relative; padding-bottom: 20px; }
.evento-auditoria::before {
  content: ""; position: absolute; left: -27px; top: 4px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--color-primario); border: 3px solid #fff;
  box-shadow: 0 0 0 1px var(--borde-suave);
}
.evento-auditoria__hora { font-size: 0.76rem; color: var(--texto-tenue); }
.evento-auditoria__texto { font-weight: 600; }

/* ============================================================
   TARJETAS HERO (estilo dashboard de referencia)
   ============================================================ */
.rejilla-hero {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 18px; margin-bottom: 18px;
}
@media (max-width: 991px) { .rejilla-hero { grid-template-columns: 1fr; } }

.hero {
  border-radius: var(--radio);
  padding: 24px;
  color: #fff;
  position: relative; overflow: hidden;
}
/* Carbón, el mismo tono del menú lateral.
   Antes era el degradado ámbar a toda superficie: en un bloque de este tamaño el
   amarillo satura la vista y compite con lo único que debería destacar ahí, que
   son las cifras. Blanco tampoco vale —se confundiría con las tarjetas y con el
   fondo—, así que el bloque toma el carbón que la marca ya usa en el sidebar:
   contrasta con el gris de la página, no cansa, y deja que el ámbar vuelva a
   ser un acento en vez de un fondo.
   El nombre de la clase se conserva para no tocar las vistas; ya no describe un
   color desde que la paleta dejó de ser violeta. */
.hero--violeta { background: var(--sidebar-fondo); }
.hero__titulo { font-size: 1.05rem; font-weight: 700; color: #fff; }
.hero__sub { color: rgba(255, 255, 255, 0.68); font-size: 0.83rem; margin-top: 2px; }

/* Caja de estadística dentro del hero */
.hero__stats { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.hero__stat {
  /* Sobre carbón, un velo claro con un borde tenue: sin el borde las cajas se
     diluían en el fondo oscuro. */
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radio-sm);
  padding: 13px 16px; flex: 1; min-width: 110px;
}
/* La cifra en ámbar: es el dato que se viene a leer, y ahora que el fondo no es
   amarillo el color de marca puede hacer de acento. 8.6:1 sobre el carbón. */
.hero__stat-valor { font-size: 1.45rem; font-weight: 800; line-height: 1; color: var(--color-primario); }
.hero__stat-etiqueta { font-size: 0.75rem; color: rgba(255, 255, 255, 0.72); margin-top: 5px; }

/* Tarjeta de alerta sobria (resalta una cifra clave en blanco) */
.tarjeta-alerta {
  background: var(--fondo-card);
  border: 1px solid var(--borde-suave);
  border-left: 4px solid var(--color-primario);
  border-radius: var(--radio);
  box-shadow: var(--sombra-card);
  padding: 24px;
  display: flex; flex-direction: column;
}
.tarjeta-alerta__icono {
  width: 46px; height: 46px; border-radius: var(--radio-sm);
  background: var(--color-primario-tenue); color: var(--color-primario-texto);
  display: grid; place-items: center; font-size: 1.3rem; margin-bottom: 14px;
}
.tarjeta-alerta__cifra { font-size: 2.4rem; font-weight: 800; line-height: 1; color: var(--color-primario-texto); margin-top: 6px; }

/* ============================================================
   FILTROS DE FECHA + GRÁFICAS (Chart.js)
   ============================================================ */
.barra-filtros {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--fondo-card); border: 1px solid var(--borde-suave);
  border-radius: var(--radio); box-shadow: var(--sombra-card);
  padding: 12px 14px; margin-bottom: 18px;
}
/* Las píldoras envuelven. Sin esto, el grupo era un bloque indivisible de cinco
   botones en una sola línea: la barra de filtros sí permitía saltos, pero el
   grupo no, así que en el móvil se salía de la tarjeta por la derecha. */
.grupo-pildoras {
  display: inline-flex; flex-wrap: wrap; max-width: 100%;
  background: var(--fondo-app); border-radius: var(--radio-sm); padding: 3px; gap: 2px;
}
.pildora-filtro {
  border: none; background: transparent; cursor: pointer;
  padding: 7px 14px; border-radius: 8px;
  font-family: inherit; font-size: 0.85rem; font-weight: 600; color: var(--texto-secundario);
  transition: background var(--transicion), color var(--transicion);
}
.pildora-filtro:hover { color: var(--color-primario-texto); }
.pildora-filtro.activa { background: #fff; color: var(--color-primario-texto); box-shadow: var(--sombra-card); }

.rango-fechas { display: none; align-items: center; gap: 8px; }
.rango-fechas.visible { display: inline-flex; }
.rango-fechas input { padding: 7px 10px; border: 1px solid var(--borde-suave); border-radius: var(--radio-sm); font-family: inherit; font-size: 0.85rem; }
.rango-fechas span { color: var(--texto-tenue); font-size: 0.85rem; }

.barra-filtros__derecha { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* Rótulo alternativo, corto, que sustituye al largo en pantallas estrechas.
   Se usa donde dejar solo el icono sería ambiguo: dos botones de exportación
   seguidos necesitan que se distinga cuál es cuál. */
.texto-boton-corto { display: none; }

/* ---------- RESPONSIVE DE LA BARRA DE FILTROS ---------- */
@media (max-width: 767px) {
  .barra-filtros { padding: 10px; gap: 10px; }
  /* Cada bloque ocupa su propia línea completa y reparte el ancho entre sus
     botones, en vez de pelearse los tres por una sola fila. */
  .grupo-pildoras { width: 100%; }
  .grupo-pildoras .pildora-filtro { flex: 1 1 auto; padding: 8px 10px; font-size: 0.8rem; }
  .rango-fechas.visible { display: flex; flex-wrap: wrap; width: 100%; }
  .rango-fechas input { flex: 1 1 130px; min-width: 0; }
  .barra-filtros__derecha { width: 100%; margin-left: 0; }
  .barra-filtros__derecha > * { flex: 1 1 0; min-width: 0; justify-content: center; }
  .texto-boton-corto { display: inline; }
}

/* Rejilla de tarjetas de gráfica (flex: las tarjetas crecen y llenan el ancho) */
.rejilla-graficos {
  display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 18px;
}
.rejilla-graficos > * { flex: 1 1 320px; min-width: 0; }
.rejilla-graficos .ancho-completo { flex-basis: 100%; }
.grafico-caja { position: relative; height: 280px; }
.grafico-caja--bajo { height: 240px; }
.tarjeta__cabecera .boton-accion { margin-left: auto; }

/* Gráfico de barras dentro del hero (override de color) */
.grafico-hero { display: flex; align-items: flex-end; gap: 12px; height: 150px; margin-top: 22px; }
.grafico-hero__barra { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.grafico-hero__valor { font-size: 0.7rem; color: rgba(255, 255, 255, 0.72); }
.grafico-hero__col { width: 60%; border-radius: 8px 8px 0 0; background: rgba(255, 255, 255, 0.75); }
.grafico-hero__dia { font-size: 0.76rem; font-weight: 700; color: rgba(255, 255, 255, 0.9); }

/* ---------- CABECERA DE TARJETA APILADA ----------
   El título en su propia línea y los botones debajo, en fila. Es lo que evita
   que un botón largo («Generar backup ahora») se salga de la tarjeta en el
   móvil peleándose con el título por la misma línea. */
.tarjeta__cabecera--apilada {
  flex-direction: column; align-items: stretch; gap: 14px;
}
.tarjeta__cabecera--apilada h3 { line-height: 1.35; }
.cabecera-acciones {
  display: flex; gap: 8px; flex-wrap: wrap;
}
/* Desde tableta hacia abajo los botones se reparten el ancho a partes iguales,
   así que ninguno desborda por muy largo que sea su texto. */
@media (max-width: 767px) {
  .cabecera-acciones > * { flex: 1 1 0; min-width: 0; justify-content: center; }
}

/* ---------- PAGINACIÓN DE TABLAS ---------- */
.paginacion {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 4px 2px; margin-top: 6px;
  border-top: 1px solid var(--borde-suave);
}
.paginacion__info { font-size: 0.82rem; color: var(--texto-tenue); }
.paginacion__botones { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.paginacion__actual {
  font-size: 0.82rem; font-weight: 700; color: var(--texto-principal);
  padding: 0 8px; white-space: nowrap;
}
.boton-pagina {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: 10px;
  border: 1px solid var(--borde-suave); background: #fff;
  color: var(--texto-principal); font-size: 0.82rem; font-weight: 600;
  cursor: pointer; transition: all var(--transicion);
}
.boton-pagina:hover:not(:disabled) {
  background: var(--color-primario); color: var(--sobre-primario);
  border-color: var(--color-primario);
}
.boton-pagina:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---------- RESPONSIVE: BOTONES SOLO CON ICONO ----------
   En pantallas estrechas los rótulos de paginación, filtros y exportación se
   ocultan y queda el icono. El texto sigue en el DOM dentro de .texto-boton, y
   cada botón lleva su `title`/`aria-label`, así que no se pierde para quien
   navega con lector de pantalla ni al pasar el ratón. */
@media (max-width: 767px) {
  .texto-boton { display: none; }
  .boton-pagina { padding: 9px 11px; }
  .paginacion { justify-content: space-between; }
  .paginacion__botones { margin-left: 0; }
  .paginacion__actual { padding: 0 4px; }
  .barra-filtros__derecha .boton-secundario,
  .barra-herramientas .boton-secundario { padding: 10px 12px; }
}

/* ============================================================
   MARCA — icono de GECONOT (sobre con aviso)
   ============================================================ */

/* El icono se pinta como MÁSCARA sobre `currentColor`, no como <img>. Así el
   mismo archivo sirve en el sidebar oscuro y en la tarjeta clara del login: hereda
   el color del texto de su contenedor. Con <img> harían falta dos versiones del
   dibujo, y dos versiones acaban desincronizándose.

   La ruta del `mask` es relativa a ESTE archivo, no a la página que lo enlaza,
   así que funciona igual desde cualquier profundidad de carpetas. */
.icono-marca {
  display: inline-block;
  width: 1em; height: 1em;
  background: currentColor;
  -webkit-mask: url(../img/geconot-marca.svg) center / contain no-repeat;
  mask: url(../img/geconot-marca.svg) center / contain no-repeat;
  flex-shrink: 0;
}

/* Las cajas de marca llevaban una «G» blanca sobre ámbar: 1,6:1, ilegible. El
   contenido pasa a `--sobre-primario`, que es el color pensado para ir encima
   del primario, y el icono lo hereda. */
.barra-lateral__logo,
.barra-lateral-cliente__logo,
.acceso__marca-logo-icono,
.acceso-tarjeta__logo-movil-icono,
.acceso-app__logo {
  color: var(--sobre-primario);
}

/* Tamaño del icono dentro de cada caja: algo menor que la caja, para que
   respire y no toque los bordes redondeados. */
.barra-lateral__logo .icono-marca,
.barra-lateral-cliente__logo .icono-marca { font-size: 22px; }
.acceso__marca-logo-icono .icono-marca { font-size: 26px; }
.acceso-tarjeta__logo-movil-icono .icono-marca { font-size: 24px; }
.acceso-app__logo .icono-marca { font-size: 34px; }