/* ============================================================
   Dentalplus · app.css
   Punto de entrada CSS. Importa el sistema de diseño en orden correcto.
   Las fuentes IBM Plex se sirven localmente desde /assets/fonts/.
   ============================================================ */

/* 1. Sistema de diseño.
   Los @import se eliminaron: ahora el helper estilos() de PHP emite un <link>
   por hoja, cada uno con su sello de versión (?v=fecha-de-modificación). Con
   @import las hojas quedaban fuera de ese control y el navegador servía copias
   viejas después de cada cambio; además se descargaban en serie. El orden de
   carga lo garantiza estilos(): tokens → base → componentes → layout → app. */

/* 2. Tipografías locales (sin dependencia de Google Fonts) */
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../fonts/IBMPlexSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../fonts/IBMPlexSans-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../fonts/IBMPlexSans-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../fonts/IBMPlexSans-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/IBMPlexMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/IBMPlexMono-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* 2. Sistema de diseño (en orden correcto) */

/* 3. Ajustes específicos de la app (override sobre el sistema de diseño) */


/* Página de login */
.pagina-acceso {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--lienzo);
  padding: var(--e-6);
}

.tarjeta-acceso {
  width: 100%;
  max-width: 420px;
  padding: var(--e-8);
}

.acceso__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-3);
  margin-bottom: var(--e-6);
}

.acceso__logo-img {
  height: 48px;
  width: auto;
}

.acceso__titulo {
  text-align: center;
  margin-bottom: var(--e-6);
}

/* Nav lateral — sección separadora */
.nav-lateral__seccion {
  padding: var(--e-2) var(--e-3) var(--e-1);
  font: var(--peso-medio) var(--txt-xs)/1 var(--fuente);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #64748b;
  margin-top: var(--e-2);
}

/* Tarjetas del dashboard */
.indicador {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}

.indicador__valor {
  font: var(--peso-fuerte) var(--txt-3xl)/1 var(--fuente-mono);
  color: var(--primario-texto);
}

.indicador__etiqueta {
  font: var(--peso-normal) var(--txt-sm)/1.3 var(--fuente);
  color: var(--texto-suave);
}

/* Selector de clínica */
.clinica-selector {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}

.clinica-opcion {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  padding: var(--e-4) var(--e-5);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-lg);
  background: var(--superficie);
  cursor: pointer;
  text-decoration: none;
  color: var(--texto-fuerte);
  transition: border-color var(--t-media) var(--curva),
              background var(--t-media) var(--curva);
  min-height: 72px;
}

.clinica-opcion:hover {
  border-color: var(--color-primario);
  background: var(--primario-tenue);
}

.clinica-opcion__nombre {
  font: var(--peso-semi) var(--txt-base)/1.3 var(--fuente);
}

.clinica-opcion__rol {
  font: var(--peso-normal) var(--txt-xs)/1 var(--fuente);
  color: var(--texto-suave);
}

/* Vista previa de colores en configuración de marca */
.vista-previa-marca {
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.vista-previa-marca__barra {
  height: 8px;
}

.vista-previa-marca__cuerpo {
  padding: var(--e-5);
  display: flex;
  gap: var(--e-3);
  flex-wrap: wrap;
}

/* Input de color */
.campo-color {
  display: flex;
  align-items: center;
  gap: var(--e-3);
}

.campo-color input[type="color"] {
  width: 48px;
  height: 48px;
  padding: 2px;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-md);
  cursor: pointer;
  background: none;
}

/* Formulario de perfil */
.form-avatar {
  display: flex;
  align-items: center;
  gap: var(--e-5);
  margin-bottom: var(--e-5);
}

/* Tabla de clínicas/usuarios */
.estado-badge {
  display: inline-flex;
}

/* Paginación */
.paginacion-simple {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  margin-top: var(--e-5);
  flex-wrap: wrap;
}

.paginacion-simple__info {
  font-size: var(--txt-sm);
  color: var(--texto-suave);
}

/* Buscador */
.buscador {
  display: flex;
  gap: var(--e-3);
  flex-wrap: wrap;
  align-items: flex-end;
}

.buscador .campo {
  flex: 1;
  min-width: 220px;
}

/* Logo de la clínica en el encabezado */
.app__lateral-marca img {
  height: 32px;
  width: auto;
  object-fit: contain;
}

.app__lateral-marca span {
  font: var(--peso-fuerte) var(--txt-base)/1 var(--fuente);
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Zona de subida de logo */
.logo-preview {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  margin-bottom: var(--e-4);
}

.logo-preview img {
  max-height: 80px;
  max-width: 200px;
  object-fit: contain;
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  padding: var(--e-2);
}