/* ============================================================
   Salubox Alianzas — Componentes compartidos
   Piezas que se repetían (con hex sueltos) en 2 o más pantallas:
   botones, login, tablas, badges, mensajes, filas de formulario.
   Enlazar junto con tokens.css y base.css.
   ============================================================ */

/* --- Botones --- */
.sb-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  font-size: .95rem;
  padding: .7rem 1.3rem;
  border-radius: var(--sb-caja-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease;
}
.sb-btn:hover { text-decoration: none; transform: translateY(-1px); }
.sb-btn--primary { background: var(--sb-azul-fuerte); color: #fff; }
.sb-btn--primary:hover { background: var(--sb-azul-hover); }
.sb-btn--accent { background: var(--sb-verde-fuerte); color: #fff; }
.sb-btn--accent:hover { background: var(--sb-verde-hover); }
.sb-btn--ghost { background: #fff; color: var(--sb-azul-fuerte); border-color: var(--sb-borde); }
.sb-btn--ghost:hover { border-color: var(--sb-azul); }

/* --- Login (admin/atención — overlay centrado, id="login-box") --- */
#login-box {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 1rem;
  background: var(--sb-fondo); border: 1px solid var(--sb-borde); border-radius: var(--sb-radio);
  padding: 2.75rem; box-shadow: var(--sb-sombra);
}
#login-box img { height: 44px; width: auto; margin: 0 auto 1.2rem; display: block; }

/* --- Login (médico/paciente — simple, en el flujo de la página) --- */
#login-box.simple {
  position: static; transform: none; max-width: 320px; margin: 60px auto; padding: 0;
  background: none; border: none; box-shadow: none; gap: 10px;
}

#login-box input {
  padding: .8rem 1rem; border: 1.5px solid var(--sb-borde); border-radius: 20px;
  font-family: var(--sb-font); font-size: 1rem;
}
#login-box .sb-btn {
  justify-content: center; padding: .8rem 1.3rem; font-size: 1rem; width: 100%; box-sizing: border-box;
}

/* --- Texto de estado, sin caja (formularios de una sola línea) --- */
.error { color: var(--sb-error); font-size: .85rem; }
.ok { color: var(--sb-verde-hover); font-size: .85rem; }

/* --- Mensaje de bloque: error o éxito (paneles de atención/admin) --- */
.msg { margin-bottom: 1rem; padding: .8rem 1rem; border-radius: 12px; font-size: .85rem; }
.msg.ok { background: var(--sb-fondo-verde); color: var(--sb-verde-hover); }
.msg.error { background: var(--sb-error-fondo); color: var(--sb-error); }

/* --- Distintivo de estado (activo/inactivo) --- */
.badge { display: inline-block; padding: .15rem .55rem; border-radius: 20px; font-size: .72rem; font-weight: 700; }
.badge.activo { background: var(--sb-fondo-verde); color: var(--sb-verde-hover); }
.badge.inactivo { background: var(--sb-error-fondo); color: var(--sb-error); }

/* --- Botón chico tipo pastilla (acciones de fila) --- */
button.pill {
  background: #fff; border: 1.5px solid var(--sb-borde); color: var(--sb-tinta);
  padding: .35rem .8rem; border-radius: 20px; font-size: .8rem; font-weight: 600; cursor: pointer;
}
button.pill:hover { border-color: var(--sb-azul); color: var(--sb-azul); }
button.pill.confirmar { border-color: var(--sb-verde-hover); color: var(--sb-verde-hover); }

/* --- Tabla de datos --- */
table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--sb-radio); overflow: hidden; box-shadow: var(--sb-sombra); }
th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--sb-texto-suave); padding: .7rem 1rem; border-bottom: 2px solid var(--sb-borde); }
td { padding: .6rem 1rem; border-bottom: 1px solid var(--sb-borde); font-size: .9rem; vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
td input[type="date"] { padding: .35rem .5rem; border: 1.5px solid var(--sb-borde); border-radius: 8px; font-size: .85rem; font-family: var(--sb-font); }

/* --- Fila de filtros/alta: inputs y selects en línea --- */
.filtros, .alta { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1.4rem; align-items: center; }
.filtros select, .alta input, .alta select {
  padding: .6rem 1rem; border: 1.5px solid var(--sb-borde); border-radius: 20px; font-size: .9rem; font-family: var(--sb-font);
}
.filtros select { min-width: 190px; }
.alta textarea {
  padding: .6rem 1rem; border: 1.5px solid var(--sb-borde); border-radius: 12px; font-size: .9rem;
  font-family: var(--sb-font); width: 100%; min-height: 3rem;
}
.filtros label.check { display: flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--sb-texto); cursor: pointer; }

.sub { color: var(--sb-texto-suave); margin-bottom: 1.6rem; }