/* =====================================================================
   Amadent · Design System — Status & UI surface tokens (complementario)
   Dra. Amanda Zenón · Ortodoncia

   Módulo aparte para CONSUMIDORES de app (no es parte del manual de marca).
   1) Colores de estado success/danger/warning/info, cada uno con su par
      fondo (tint) + texto (strong), estilo #dcfce7/#166534.
   2) Tokens de sidebar en clave de marca (teal/grafito) — reemplazan al
      slate #1e293b… del sistema anterior.

   Todo armonizado con el teal #01AD9D y los neutros fríos de la marca.
   Pegar DESPUÉS de tokens/colors.css (usa --teal, --teal-deep como ancla).
   ===================================================================== */

:root{
  /* =================================================================
     1 · COLORES DE ESTADO
     --color-X        sólido (badges, puntos, bordes, íconos)
     --color-X-bg     fondo tint (alerts, chips, filas)
     --color-X-text   texto / ícono sobre el tint (contraste AA)
     --color-X-border borde del tint
     ================================================================= */

  /* ---- Success — verde teal (sintoniza con el primario) ------------- */
  --color-success:        #1F9D6B;
  --color-success-bg:     #DCF3E8;
  --color-success-text:   #15663F;
  --color-success-border: #B6E4D0;

  /* ---- Danger — rosa-rojo derivado del acento de "don'ts" ----------- */
  --color-danger:         #C2415F;
  --color-danger-bg:      #FBE7EC;
  --color-danger-text:    #9B2C46;
  --color-danger-border:  #F2C7D2;

  /* ---- Warning — ámbar cálido, único contrapunto a los fríos -------- */
  --color-warning:        #C9871F;
  --color-warning-bg:     #FBEFD6;
  --color-warning-text:   #8A5612;
  --color-warning-border: #EFD9AC;

  /* ---- Info — el teal de marca como estado informativo ------------- */
  --color-info:           #01AD9D;
  --color-info-bg:        #E2F6F3;   /* = --mist */
  --color-info-text:      #016F63;   /* = --teal-deep */
  --color-info-border:    #BEEAE3;   /* = --aqua */

  /* Aliases neutrales por compatibilidad con sistemas previos */
  --color-positive: var(--color-success);
  --color-negative: var(--color-danger);
  --color-caution:  var(--color-warning);
  --color-neutral:  var(--color-info);

  /* =================================================================
     2 · SIDEBAR — clave de marca (sustituye slate #1e293b…)
     Superficie fría profunda teñida de teal + acento primario activo.
     ================================================================= */

  --sidebar-bg:            #16302C;   /* superficie base — ink-teal profundo */
  --sidebar-bg-elevated:   #1E3D38;   /* header / footer del panel */
  --sidebar-hover:         #244A44;   /* hover de ítem */
  --sidebar-active:        #01AD9D;   /* fondo del ítem activo — teal de marca */
  --sidebar-active-soft:   rgba(1,173,157,.16); /* activo sutil (sin relleno pleno) */

  --sidebar-text:          #A9C7C1;   /* texto base — frío atenuado */
  --sidebar-text-muted:    #6F8C87;   /* secciones / metadatos */
  --sidebar-text-active:   #FFFFFF;   /* texto sobre activo pleno */
  --sidebar-text-hover:    #EAF5F2;   /* texto en hover */
  --sidebar-icon:          #7FA8A1;   /* íconos en reposo */

  --sidebar-border:        rgba(255,255,255,.07);
  --sidebar-rail:          #01AD9D;   /* barrita/indicador del activo — teal de marca */
  --sidebar-focus-ring:    #45C2B5;   /* teal medio */
}

/* =====================================================================
   Clases utilitarias opcionales — pares de estado listos para usar.
   Uso:  <span class="az-status az-status--success">Aprobado</span>
   ===================================================================== */
.az-status{
  display:inline-flex; align-items:center; gap:.5em;
  padding:.28em .7em; border-radius:var(--radius-pill, 999px);
  font-family:var(--font-sans, sans-serif); font-size:.82em; font-weight:600;
  line-height:1.2; border:1px solid transparent;
}
.az-status--success{ background:var(--color-success-bg); color:var(--color-success-text); border-color:var(--color-success-border); }
.az-status--danger { background:var(--color-danger-bg);  color:var(--color-danger-text);  border-color:var(--color-danger-border); }
.az-status--warning{ background:var(--color-warning-bg); color:var(--color-warning-text); border-color:var(--color-warning-border); }
.az-status--info   { background:var(--color-info-bg);    color:var(--color-info-text);    border-color:var(--color-info-border); }

/* Punto de estado (precede a un label) */
.az-dot{ width:.6em; height:.6em; border-radius:50%; flex:0 0 auto; display:inline-block; }
.az-dot--success{ background:var(--color-success); }
.az-dot--danger { background:var(--color-danger); }
.az-dot--warning{ background:var(--color-warning); }
.az-dot--info   { background:var(--color-info); }