/**
 * css/components.css
 * Componentes reutilizables: logo, botones, mensajes, etiquetas de estado,
 * ventana modal y aviso temporal.
 */

/* Logo de POS LISTO (login y menú lateral) */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.3px;
}
.logo i {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--mint);
  display: grid;
  place-items: center;
}
.logo svg {
  width: 20px;
  height: 20px;
}
/* Botones: principal (índigo), .mint (acción positiva), .ghost (secundario), .sm (compacto) */
.btn {
  border: 0;
  border-radius: 11px;
  padding: 13px 20px;
  font-weight: 600;
  cursor: pointer;
  background: var(--indigo);
  color: #fff;
  transition: 0.15s;
}
.btn:hover {
  background: var(--indigo2);
}
.btn.full {
  width: 100%;
  margin-top: 22px;
  padding: 14px;
}
.btn.mint {
  background: var(--mint);
}
.btn.mint:hover {
  background: #1c9e78;
}
.btn.ghost {
  background: var(--card);
  color: var(--ink);
  border: 1.5px solid var(--line);
}
.btn.ghost:hover {
  background: var(--paper);
}
.btn.sm {
  padding: 7px 12px;
  font-size: 13px;
  border-radius: 9px;
}
/* Botón con apariencia de enlace */
.link {
  background: 0;
  border: 0;
  color: var(--indigo2);
  font-weight: 600;
  cursor: pointer;
  margin-top: 16px;
  font-size: 14px;
}
/* Mensajes de error (rojo) e informativos (.info, verde) */
.msg {
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 14px;
  margin-top: 16px;
  background: var(--badbg);
  color: var(--badfg);
}
.msg.info {
  background: var(--mintbg);
  color: var(--okfg);
}
/* Aviso de advertencia (errores encontrados al leer un archivo, por ejemplo) */
.msg.warn {
  background: var(--warnbg);
  color: var(--warnfg);
}
/* Etiquetas de estado de empresas e invitaciones */
.tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 12.5px;
  font-weight: 600;
}
.t-activa {
  background: var(--mintbg);
  color: var(--okfg);
}
.t-suspendida {
  background: var(--warnbg);
  color: var(--warnfg);
}
.t-inactiva {
  background: var(--soft2);
  color: #555;
}
.t-vencida {
  background: var(--badbg);
  color: var(--badfg);
}
/* Ventana modal del formulario de nueva empresa */
dialog {
  border: 0;
  border-radius: 18px;
  padding: 0;
  width: min(560px, 94vw);
  box-shadow: 0 30px 80px #1d1b3a55;
}
dialog::backdrop {
  background: #1d1b3a88;
}
dialog form {
  padding: 26px;
}
dialog h3 {
  font-size: 22px;
}
/* Aviso temporal en la parte inferior */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: #fff;
  padding: 12px 20px;
  border-radius: 12px;
  z-index: 99;
  font-weight: 500;
}