/* Tecnifum — Componentes: iconos, botones, tarjetas y chips de estado.
   El efecto vidrio y la barra viven en vidrio.css. */

/* Icono SVG: hereda el color del texto y no se deforma dentro de un flex */
.icono {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* El atributo hidden del navegador NO oculta elementos SVG: la hoja de estilos
   del agente de usuario limita esa regla al espacio de nombres HTML. Hay que
   declararla aquí o los tres iconos del interruptor se dibujan encimados. */
.icono[hidden] {
  display: none;
}

/* El logo original es azul oscuro y se pierde sobre fondo oscuro.
   Se intercambia por la variante clara según el tema activo. */
.logo--oscuro { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .logo--claro { display: none; }
  :root:not([data-tema="claro"]) .logo--oscuro { display: block; }
}

:root[data-tema="oscuro"] .logo--claro { display: none; }
:root[data-tema="oscuro"] .logo--oscuro { display: block; }

/* =========================================================
   BOTONES
   ========================================================= */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-2);
  padding: var(--espacio-3) var(--espacio-6);
  border: 1px solid transparent;
  border-radius: var(--radio-completo);
  font-size: var(--texto-sm);
  font-weight: var(--peso-fuerte);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transicion-rapida),
              border-color var(--transicion-rapida),
              transform var(--transicion-rapida);
}

.boton:active {
  transform: translateY(1px);
}

.boton--primario {
  background-color: var(--marca-fuerte);
  color: var(--sobre-marca);
}

.boton--primario:hover {
  background-color: var(--marca);
  color: var(--sobre-marca);
}

.boton--secundario {
  background-color: transparent;
  border-color: var(--borde-fuerte);
  color: var(--texto);
}

.boton--secundario:hover {
  background-color: var(--marca-suave);
  color: var(--texto);
}

/* Botón cuadrado solo con icono (cambio de tema, menú) */
.boton--icono {
  width: 40px;
  height: 40px;
  padding: 0;
  background-color: transparent;
  border-color: var(--borde);
  color: var(--texto);
}

.boton--icono:hover {
  background-color: var(--marca-suave);
}

/* =========================================================
   TARJETAS
   ========================================================= */
.tarjeta {
  padding: var(--espacio-6);
  background-color: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-sm);
  transition: box-shadow var(--transicion-normal),
              transform var(--transicion-normal);
}

.tarjeta:hover {
  box-shadow: var(--sombra-md);
  transform: translateY(-2px);
}

.tarjeta__icono {
  width: 40px;
  height: 40px;
  margin-bottom: var(--espacio-4);
  color: var(--marca);
}

.tarjeta p {
  color: var(--texto-secundario);
  font-size: var(--texto-sm);
  margin-bottom: 0;
}

/* =========================================================
   CHIPS DE ESTADO OPERATIVO
   El color SIEMPRE va acompañado de texto: nunca es el único
   portador de la información, para quien no distingue colores.
   ========================================================= */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  padding: var(--espacio-1) var(--espacio-3);
  border-radius: var(--radio-completo);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
}

.chip--conforme { background-color: var(--conforme-suave); color: var(--conforme); }
.chip--atencion { background-color: var(--atencion-suave); color: var(--atencion); }
.chip--critico  { background-color: var(--critico-suave);  color: var(--critico); }

.chip__punto {
  width: 8px;
  height: 8px;
  border-radius: var(--radio-completo);
  background-color: currentColor;
  flex-shrink: 0;
}

/* =========================================================
   REDES SOCIALES
   ========================================================= */
.redes {
  display: flex;
  gap: var(--espacio-3);
  margin: var(--espacio-4) 0 0;
  padding: 0;
  list-style: none;
}

.redes a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background-color: var(--marca-suave);
  border: 1px solid var(--borde);
  border-radius: var(--radio-completo);
  color: var(--marca);
  transition: background-color var(--transicion-rapida),
              color var(--transicion-rapida);
}

.redes a:hover {
  background-color: var(--marca-fuerte);
  color: var(--sobre-marca);
}

.redes .icono {
  width: 26px;
  height: 26px;
}

/* Etiqueta del tipo de línea: WhatsApp u oficina */
.contacto__nota {
  margin-left: var(--espacio-2);
  padding: 2px var(--espacio-2);
  background-color: var(--marca-suave);
  border-radius: var(--radio-completo);
  color: var(--texto-secundario);
  font-size: var(--texto-xs);
  font-weight: var(--peso-normal);
}

.contacto__rotulo-redes {
  margin-top: var(--espacio-8);
}