/* =============================================
   deaf.css v1.0.1 — spacing & alignment fixes
   CSS Framework for the Deaf Community
   https://github.com/paskuvan/deaf
   MIT License
   ============================================= */

/* 1. Tokens */
/* =============================================
   deaf.css — Design Tokens
   Variables base del framework
   ============================================= */

:root {

  /* --- Colores principales --- */
  --deaf-primary:        #1A6EFF;
  --deaf-primary-dark:   #0A4FCC;
  --deaf-primary-light:  #E8F0FF;

  --deaf-accent:         #FF5C1A;
  --deaf-accent-dark:    #CC3D00;
  --deaf-accent-light:   #FFF0EB;

  /* --- Colores de estado (nunca solo color, siempre + icono) --- */
  --deaf-success:        #1DB954;
  --deaf-success-bg:     #E6F9ED;
  --deaf-warning:        #F5A623;
  --deaf-warning-bg:     #FEF6E4;
  --deaf-error:          #E63946;
  --deaf-error-bg:       #FDEAEB;
  --deaf-info:           #1A6EFF;
  --deaf-info-bg:        #E8F0FF;

  /* --- Neutros --- */
  --deaf-white:          #FFFFFF;
  --deaf-gray-50:        #F8F9FA;
  --deaf-gray-100:       #F1F3F5;
  --deaf-gray-200:       #E9ECEF;
  --deaf-gray-300:       #DEE2E6;
  --deaf-gray-400:       #CED4DA;
  --deaf-gray-500:       #ADB5BD;
  --deaf-gray-600:       #6C757D;
  --deaf-gray-700:       #495057;
  --deaf-gray-800:       #343A40;
  --deaf-gray-900:       #212529;
  --deaf-black:          #0D0D0D;

  /* --- Tipografía --- */
  --deaf-font-sans:      'Atkinson Hyperlegible', 'Segoe UI', system-ui, sans-serif;
  --deaf-font-mono:      'JetBrains Mono', 'Fira Code', monospace;

  --deaf-text-xs:        0.75rem;
  --deaf-text-sm:        0.875rem;
  --deaf-text-base:      1rem;
  --deaf-text-lg:        1.125rem;
  --deaf-text-xl:        1.25rem;
  --deaf-text-2xl:       1.5rem;
  --deaf-text-3xl:       1.875rem;
  --deaf-text-4xl:       2.25rem;

  --deaf-leading-tight:  1.25;
  --deaf-leading-normal: 1.6;
  --deaf-leading-loose:  1.9;

  --deaf-tracking-wide:  0.025em;
  --deaf-tracking-wider: 0.05em;

  /* --- Espaciado --- */
  --deaf-space-1:   0.25rem;
  --deaf-space-2:   0.5rem;
  --deaf-space-3:   0.75rem;
  --deaf-space-4:   1rem;
  --deaf-space-5:   1.25rem;
  --deaf-space-6:   1.5rem;
  --deaf-space-8:   2rem;
  --deaf-space-10:  2.5rem;
  --deaf-space-12:  3rem;
  --deaf-space-16:  4rem;

  /* --- Bordes --- */
  --deaf-radius-sm:   4px;
  --deaf-radius:      8px;
  --deaf-radius-lg:   12px;
  --deaf-radius-xl:   20px;
  --deaf-radius-full: 9999px;

  --deaf-border:      1px solid var(--deaf-gray-200);
  --deaf-border-md:   2px solid var(--deaf-gray-300);
  --deaf-border-lg:   3px solid var(--deaf-gray-400);

  /* --- Sombras --- */
  --deaf-shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
  --deaf-shadow:     0 4px 12px rgba(0,0,0,0.10);
  --deaf-shadow-lg:  0 8px 24px rgba(0,0,0,0.14);
  --deaf-shadow-xl:  0 16px 48px rgba(0,0,0,0.18);

  /* --- Transiciones --- */
  --deaf-transition:      all 0.2s ease;
  --deaf-transition-slow: all 0.4s ease;

  /* --- Focus (accesibilidad crítica) --- */
  --deaf-focus-ring:      0 0 0 3px var(--deaf-primary-light), 0 0 0 5px var(--deaf-primary);
  --deaf-focus-ring-dark: 0 0 0 3px rgba(26,110,255,0.2), 0 0 0 5px var(--deaf-primary);

  /* --- Z-index --- */
  --deaf-z-base:    1;
  --deaf-z-overlay: 100;
  --deaf-z-modal:   200;
  --deaf-z-toast:   300;
  --deaf-z-sign:    400;

  /* --- Animaciones especiales sordos --- */
  --deaf-flash-duration:  0.4s;
  --deaf-flash-repeat:    3;
  --deaf-pulse-duration:  1s;
}

/* Modo oscuro */
@media (prefers-color-scheme: dark) {
  :root {
    --deaf-white:      #1A1A2E;
    --deaf-gray-50:    #16213E;
    --deaf-gray-100:   #1F2B47;
    --deaf-gray-200:   #2A3A5C;
    --deaf-gray-900:   #E8EAF0;
    --deaf-black:      #F0F2F8;
    --deaf-border:     1px solid var(--deaf-gray-200);
  }
}


/* 2. Base */
/* =============================================
   deaf.css — Reset Base Accesible
   ============================================= */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Respetar preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--deaf-font-sans);
  font-size: var(--deaf-text-base);
  line-height: var(--deaf-leading-normal);
  color: var(--deaf-gray-900);
  background-color: var(--deaf-white);
  -webkit-font-smoothing: antialiased;
}

/* Focus visible fuerte — crítico para comunidad sorda que navega con teclado */
:focus-visible {
  outline: none;
  box-shadow: var(--deaf-focus-ring);
  border-radius: var(--deaf-radius-sm);
}

:focus:not(:focus-visible) {
  outline: none;
}

img, video, svg {
  display: block;
  max-width: 100%;
}

/* Asegurar que videos tengan controles visibles */
video {
  width: 100%;
  height: auto;
}

a {
  color: var(--deaf-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: var(--deaf-transition);
}

a:hover {
  color: var(--deaf-primary-dark);
  text-decoration-thickness: 2px;
}

button {
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  border: none;
  background: none;
}

ul, ol {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: var(--deaf-leading-tight);
  letter-spacing: var(--deaf-tracking-wide);
}

p {
  max-width: 70ch;
  line-height: var(--deaf-leading-normal);
}

/* Screen reader only — ocultar visualmente pero mantener para lectores */
.deaf-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.deaf-sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}


/* 3. Components */
/* =============================================
   deaf.css — Botones
   ============================================= */

.deaf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--deaf-space-2);
  padding: 0.625rem var(--deaf-space-5);
  font-family: var(--deaf-font-sans);
  font-size: var(--deaf-text-sm);
  font-weight: 700;
  letter-spacing: var(--deaf-tracking-wide);
  line-height: 1.25;
  min-height: 40px;
  border-radius: var(--deaf-radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition: var(--deaf-transition);
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  position: relative;
  overflow: hidden;
}

.deaf-btn:focus-visible {
  box-shadow: var(--deaf-focus-ring);
  outline: none;
}

/* Variantes */
.deaf-btn--primary {
  background: var(--deaf-primary);
  color: #fff;
  border-color: var(--deaf-primary);
}
.deaf-btn--primary:hover {
  background: var(--deaf-primary-dark);
  border-color: var(--deaf-primary-dark);
  transform: translateY(-1px);
  box-shadow: var(--deaf-shadow);
}

.deaf-btn--secondary {
  background: transparent;
  color: var(--deaf-primary);
  border-color: var(--deaf-primary);
}
.deaf-btn--secondary:hover {
  background: var(--deaf-primary-light);
  transform: translateY(-1px);
}

.deaf-btn--danger {
  background: var(--deaf-error);
  color: #fff;
  border-color: var(--deaf-error);
}
.deaf-btn--danger:hover {
  background: var(--deaf-accent-dark);
  transform: translateY(-1px);
  box-shadow: var(--deaf-shadow);
}

.deaf-btn--ghost {
  background: transparent;
  color: var(--deaf-gray-700);
  border-color: var(--deaf-gray-300);
}
.deaf-btn--ghost:hover {
  background: var(--deaf-gray-100);
  border-color: var(--deaf-gray-400);
}

/* Tamaños */
.deaf-btn--sm {
  padding: 0.375rem var(--deaf-space-3);
  font-size: var(--deaf-text-xs);
  min-height: 32px;
}
.deaf-btn--lg {
  padding: 0.75rem var(--deaf-space-8);
  font-size: var(--deaf-text-lg);
  min-height: 48px;
  border-radius: var(--deaf-radius-lg);
}
.deaf-btn--xl {
  padding: 1rem var(--deaf-space-10);
  font-size: var(--deaf-text-xl);
  min-height: 56px;
  border-radius: var(--deaf-radius-xl);
}

/* Full width */
.deaf-btn--full {
  width: 100%;
}

/* Estado disabled */
.deaf-btn:disabled,
.deaf-btn--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Botón con indicador visual de acción (importante para sordos) */
.deaf-btn--visual-feedback::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.3);
  opacity: 0;
  transition: opacity 0.1s;
}
.deaf-btn--visual-feedback:active::after {
  opacity: 1;
}

/* =============================================
   deaf.css — Badges y Status Indicators
   Siempre usan icono + color (nunca solo color)
   ============================================= */

.deaf-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--deaf-space-1);
  padding: 0.3rem var(--deaf-space-3);
  font-size: var(--deaf-text-xs);
  font-weight: 700;
  letter-spacing: var(--deaf-tracking-wider);
  text-transform: uppercase;
  border-radius: var(--deaf-radius-full);
  line-height: 1.4;
  white-space: nowrap;
}

.deaf-badge--success  { background: var(--deaf-success-bg);  color: #0D5C2A; border: 1px solid var(--deaf-success); }
.deaf-badge--warning  { background: var(--deaf-warning-bg);  color: #7A4E00; border: 1px solid var(--deaf-warning); }
.deaf-badge--error    { background: var(--deaf-error-bg);    color: #7A1520; border: 1px solid var(--deaf-error); }
.deaf-badge--info     { background: var(--deaf-info-bg);     color: #0A3A8A; border: 1px solid var(--deaf-info); }
.deaf-badge--neutral  { background: var(--deaf-gray-100);    color: var(--deaf-gray-700); border: 1px solid var(--deaf-gray-300); }

/* Dot indicator — punto de estado animado */
.deaf-dot {
  display: inline-flex;
  align-items: center;
  gap: var(--deaf-space-2);
  font-size: var(--deaf-text-sm);
  font-weight: 600;
}

.deaf-dot::before {
  content: '';
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: var(--deaf-radius-full);
  flex-shrink: 0;
  margin-top: 1px;
}

.deaf-dot--online::before    { background: var(--deaf-success); animation: deaf-pulse-border 1.5s ease infinite; }
.deaf-dot--offline::before   { background: var(--deaf-gray-400); }
.deaf-dot--busy::before      { background: var(--deaf-error); }
.deaf-dot--away::before      { background: var(--deaf-warning); }

/* Status bar — barra de estado completa */
.deaf-status-bar {
  display: flex;
  align-items: center;
  gap: var(--deaf-space-4);
  padding: var(--deaf-space-3) var(--deaf-space-5);
  background: var(--deaf-gray-50);
  border: var(--deaf-border);
  border-radius: var(--deaf-radius-lg);
  font-size: var(--deaf-text-sm);
  min-height: 44px;
}

.deaf-status-bar__item {
  display: flex;
  align-items: center;
  gap: var(--deaf-space-2);
  color: var(--deaf-gray-700);
}

/* =============================================
   deaf.css — Formularios Accesibles
   Labels siempre visibles, errores con icono
   ============================================= */

.deaf-form {
  display: flex;
  flex-direction: column;
  gap: var(--deaf-space-5);
}

/* --- Field wrapper --- */
.deaf-field {
  display: flex;
  flex-direction: column;
  gap: var(--deaf-space-2);
}

/* --- Label --- */
.deaf-label {
  font-size: var(--deaf-text-sm);
  font-weight: 700;
  color: var(--deaf-gray-800);
  letter-spacing: var(--deaf-tracking-wide);
  display: flex;
  align-items: center;
  gap: var(--deaf-space-2);
}

.deaf-label--required::after {
  content: '✱';
  color: var(--deaf-error);
  font-size: 0.65rem;
  vertical-align: super;
}

/* --- Inputs base --- */
.deaf-input,
.deaf-textarea,
.deaf-select {
  width: 100%;
  padding: 0.625rem var(--deaf-space-4);
  font-family: var(--deaf-font-sans);
  font-size: var(--deaf-text-base);
  color: var(--deaf-gray-900);
  background: var(--deaf-white);
  border: 2px solid var(--deaf-gray-300);
  border-radius: var(--deaf-radius);
  transition: var(--deaf-transition);
  appearance: none;
  line-height: 1.5;
  min-height: 44px;
}

.deaf-input::placeholder,
.deaf-textarea::placeholder {
  color: var(--deaf-gray-400);
}

.deaf-input:hover,
.deaf-textarea:hover,
.deaf-select:hover {
  border-color: var(--deaf-gray-400);
}

.deaf-input:focus,
.deaf-textarea:focus,
.deaf-select:focus {
  outline: none;
  border-color: var(--deaf-primary);
  box-shadow: var(--deaf-focus-ring);
}

/* --- Estados --- */
.deaf-input--success {
  border-color: var(--deaf-success);
  background: var(--deaf-success-bg);
}

.deaf-input--error {
  border-color: var(--deaf-error);
  background: var(--deaf-error-bg);
  animation: deaf-shake 0.4s ease-in-out 1;
}

.deaf-input--warning {
  border-color: var(--deaf-warning);
  background: var(--deaf-warning-bg);
}

/* --- Mensaje de ayuda y error --- */
.deaf-field-hint {
  font-size: var(--deaf-text-xs);
  color: var(--deaf-gray-500);
  display: flex;
  align-items: center;
  gap: var(--deaf-space-1);
}

.deaf-field-error {
  font-size: var(--deaf-text-xs);
  font-weight: 700;
  color: var(--deaf-error);
  display: flex;
  align-items: center;
  gap: var(--deaf-space-1);
}

.deaf-field-success {
  font-size: var(--deaf-text-xs);
  font-weight: 700;
  color: var(--deaf-success);
  display: flex;
  align-items: center;
  gap: var(--deaf-space-1);
}

/* --- Textarea --- */
.deaf-textarea {
  resize: vertical;
  min-height: 120px;
}

/* --- Select con icono --- */
.deaf-select-wrapper {
  position: relative;
}

.deaf-select {
  padding-right: 2.5rem;
  cursor: pointer;
}

.deaf-select-wrapper::after {
  content: '▼';
  position: absolute;
  right: var(--deaf-space-4);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 0.65rem;
  color: var(--deaf-gray-500);
}

/* --- Checkbox y Radio accesibles --- */
.deaf-check,
.deaf-radio {
  display: flex;
  align-items: flex-start;
  gap: var(--deaf-space-3);
  cursor: pointer;
  font-size: var(--deaf-text-sm);
  color: var(--deaf-gray-800);
  line-height: var(--deaf-leading-normal);
}

.deaf-check input[type="checkbox"],
.deaf-radio input[type="radio"] {
  appearance: none;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border: 2px solid var(--deaf-gray-400);
  background: var(--deaf-white);
  cursor: pointer;
  transition: var(--deaf-transition);
  position: relative;
  margin-top: 1px;
}

.deaf-check input[type="checkbox"] {
  border-radius: var(--deaf-radius-sm);
}

.deaf-radio input[type="radio"] {
  border-radius: var(--deaf-radius-full);
}

.deaf-check input[type="checkbox"]:checked,
.deaf-radio input[type="radio"]:checked {
  background: var(--deaf-primary);
  border-color: var(--deaf-primary);
}

.deaf-check input[type="checkbox"]:checked::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 900;
}

.deaf-radio input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: var(--deaf-radius-full);
  background: #fff;
}

.deaf-check input:focus-visible,
.deaf-radio input:focus-visible {
  outline: none;
  box-shadow: var(--deaf-focus-ring);
}

/* --- Toggle / Switch visual --- */
.deaf-toggle {
  display: flex;
  align-items: center;
  gap: var(--deaf-space-3);
  cursor: pointer;
  font-size: var(--deaf-text-sm);
  color: var(--deaf-gray-800);
}

.deaf-toggle input {
  display: none;
}

.deaf-toggle__track {
  width: 44px;
  height: 24px;
  background: var(--deaf-gray-300);
  border-radius: var(--deaf-radius-full);
  position: relative;
  transition: var(--deaf-transition);
  flex-shrink: 0;
}

.deaf-toggle__track::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: var(--deaf-radius-full);
  top: 3px;
  left: 3px;
  transition: var(--deaf-transition);
  box-shadow: var(--deaf-shadow-sm);
}

.deaf-toggle input:checked + .deaf-toggle__track {
  background: var(--deaf-primary);
}

.deaf-toggle input:checked + .deaf-toggle__track::after {
  transform: translateX(20px);
}

/* Label del toggle con mejor line-height */
.deaf-toggle {
  line-height: 1.5;
}

.deaf-toggle input:focus-visible + .deaf-toggle__track {
  box-shadow: var(--deaf-focus-ring);
}

/* --- Input con icono --- */
.deaf-input-group {
  position: relative;
}

.deaf-input-group .deaf-input {
  padding-left: 2.875rem;
}

.deaf-input-group__icon {
  position: absolute;
  left: var(--deaf-space-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--deaf-gray-400);
  font-size: 1rem;
  pointer-events: none;
  line-height: 1;
}

/* --- Disabled --- */
.deaf-input:disabled,
.deaf-textarea:disabled,
.deaf-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--deaf-gray-100);
}

/* =============================================
   deaf.css — Modal / Dialog Accesible
   Con animación visual fuerte al abrir
   ============================================= */

@keyframes deaf-modal-in {
  from { opacity: 0; transform: scale(0.92) translateY(16px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}

@keyframes deaf-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* --- Overlay --- */
.deaf-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  z-index: var(--deaf-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--deaf-space-4);
  animation: deaf-overlay-in 0.25s ease;
}

.deaf-modal-overlay--hidden {
  display: none;
}

/* --- Modal box --- */
.deaf-modal {
  background: var(--deaf-white);
  border-radius: var(--deaf-radius-xl);
  box-shadow: var(--deaf-shadow-xl);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  animation: deaf-modal-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  border: var(--deaf-border);
}

.deaf-modal--sm  { max-width: 360px; }
.deaf-modal--lg  { max-width: 720px; }
.deaf-modal--xl  { max-width: 960px; }
.deaf-modal--full { max-width: 100%; max-height: 100vh; border-radius: 0; }

/* --- Header --- */
.deaf-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--deaf-space-5) var(--deaf-space-6);
  border-bottom: var(--deaf-border);
  gap: var(--deaf-space-3);
}

.deaf-modal__title {
  font-size: var(--deaf-text-xl);
  font-weight: 700;
  color: var(--deaf-gray-900);
  display: flex;
  align-items: center;
  gap: var(--deaf-space-2);
}

.deaf-modal__close {
  width: 36px;
  height: 36px;
  border-radius: var(--deaf-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--deaf-gray-500);
  font-size: 1.2rem;
  cursor: pointer;
  transition: var(--deaf-transition);
  flex-shrink: 0;
  border: 2px solid transparent;
}

.deaf-modal__close:hover {
  background: var(--deaf-gray-100);
  color: var(--deaf-gray-900);
}

.deaf-modal__close:focus-visible {
  outline: none;
  border-color: var(--deaf-primary);
  box-shadow: var(--deaf-focus-ring);
}

/* --- Body --- */
.deaf-modal__body {
  padding: var(--deaf-space-6);
  color: var(--deaf-gray-700);
  line-height: var(--deaf-leading-normal);
}

/* --- Footer --- */
.deaf-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--deaf-space-3);
  padding: var(--deaf-space-5) var(--deaf-space-6);
  border-top: var(--deaf-border);
  flex-wrap: wrap;
}

/* --- Variantes de modal --- */
/* Modal de alerta urgente — parpadea al abrir */
.deaf-modal--urgent .deaf-modal__header {
  background: var(--deaf-error-bg);
  border-bottom-color: var(--deaf-error);
}

.deaf-modal--urgent .deaf-modal__title {
  color: #7A1520;
}

.deaf-modal--urgent {
  border: 2px solid var(--deaf-error);
  animation: deaf-modal-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
             deaf-flash 0.4s ease-in-out 0.3s 2;
}

/* Modal de éxito */
.deaf-modal--success .deaf-modal__header {
  background: var(--deaf-success-bg);
  border-bottom-color: var(--deaf-success);
}

.deaf-modal--success .deaf-modal__title {
  color: #0D5C2A;
}

/* =============================================
   deaf.css — Navbar / Navigation
   ============================================= */

.deaf-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--deaf-space-6);
  height: 64px;
  background: var(--deaf-white);
  border-bottom: var(--deaf-border);
  position: sticky;
  top: 0;
  z-index: var(--deaf-z-overlay);
  gap: var(--deaf-space-4);
}

.deaf-navbar--dark {
  background: var(--deaf-gray-900);
  border-bottom-color: rgba(255,255,255,0.08);
}

.deaf-navbar--transparent {
  background: transparent;
  border-bottom-color: transparent;
  position: absolute;
  width: 100%;
}

/* --- Brand / Logo --- */
.deaf-navbar__brand {
  display: flex;
  align-items: center;
  gap: var(--deaf-space-2);
  font-weight: 800;
  font-size: var(--deaf-text-lg);
  color: var(--deaf-gray-900);
  text-decoration: none;
  flex-shrink: 0;
}

.deaf-navbar--dark .deaf-navbar__brand { color: #fff; }

/* --- Nav links --- */
.deaf-navbar__nav {
  display: flex;
  align-items: center;
  gap: var(--deaf-space-1);
  list-style: none;
}

.deaf-navbar__link {
  display: flex;
  align-items: center;
  gap: var(--deaf-space-2);
  padding: var(--deaf-space-2) var(--deaf-space-4);
  border-radius: var(--deaf-radius);
  font-size: var(--deaf-text-sm);
  font-weight: 600;
  color: var(--deaf-gray-600);
  text-decoration: none;
  transition: var(--deaf-transition);
  white-space: nowrap;
  line-height: 1.5;
}

.deaf-navbar__link:hover {
  background: var(--deaf-gray-100);
  color: var(--deaf-gray-900);
}

.deaf-navbar__link--active {
  background: var(--deaf-primary-light);
  color: var(--deaf-primary-dark);
}

.deaf-navbar--dark .deaf-navbar__link { color: rgba(255,255,255,0.6); }
.deaf-navbar--dark .deaf-navbar__link:hover { background: rgba(255,255,255,0.08); color: #fff; }
.deaf-navbar--dark .deaf-navbar__link--active { background: rgba(26,110,255,0.2); color: #6EB5FF; }

.deaf-navbar__link:focus-visible {
  outline: none;
  box-shadow: var(--deaf-focus-ring);
}

/* --- Actions (right side) --- */
.deaf-navbar__actions {
  display: flex;
  align-items: center;
  gap: var(--deaf-space-2);
  flex-shrink: 0;
}

/* --- Notification badge en navbar --- */
.deaf-navbar__notify {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: var(--deaf-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--deaf-gray-600);
  transition: var(--deaf-transition);
  border: 2px solid transparent;
}

.deaf-navbar__notify:hover {
  background: var(--deaf-gray-100);
  color: var(--deaf-gray-900);
}

.deaf-navbar__notify:focus-visible {
  outline: none;
  box-shadow: var(--deaf-focus-ring);
}

/* Punto rojo de notificación — siempre visible */
.deaf-navbar__notify-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 10px;
  height: 10px;
  background: var(--deaf-error);
  border-radius: var(--deaf-radius-full);
  border: 2px solid var(--deaf-white);
  animation: deaf-pulse-border 1.5s ease infinite;
}

/* --- Mobile menu button --- */
.deaf-navbar__burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--deaf-radius);
  transition: var(--deaf-transition);
}

.deaf-navbar__burger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--deaf-gray-700);
  border-radius: 2px;
  transition: var(--deaf-transition);
}

/* --- Breadcrumb --- */
.deaf-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--deaf-space-2);
  list-style: none;
  font-size: var(--deaf-text-sm);
  flex-wrap: wrap;
}

.deaf-breadcrumb__item {
  display: flex;
  align-items: center;
  gap: var(--deaf-space-2);
  color: var(--deaf-gray-500);
}

.deaf-breadcrumb__item:last-child {
  color: var(--deaf-gray-900);
  font-weight: 600;
}

.deaf-breadcrumb__item::after {
  content: '/';
  color: var(--deaf-gray-300);
}

.deaf-breadcrumb__item:last-child::after {
  display: none;
}

.deaf-breadcrumb a {
  color: inherit;
  text-decoration: none;
  transition: var(--deaf-transition);
}

.deaf-breadcrumb a:hover { color: var(--deaf-primary); }

/* --- Responsive --- */
@media (max-width: 768px) {
  .deaf-navbar__nav { display: none; }
  .deaf-navbar__burger { display: flex; }
}


/* 4. Accessibility — el corazón del framework */
/* =============================================
   deaf.css — Alertas Visuales
   El componente estrella del framework.
   Reemplaza alertas auditivas con señales visuales
   ============================================= */

/* --- Animaciones base --- */
@keyframes deaf-flash {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

@keyframes deaf-shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-8px); }
  40%       { transform: translateX(8px); }
  60%       { transform: translateX(-5px); }
  80%       { transform: translateX(5px); }
}

@keyframes deaf-pulse-border {
  0%, 100% { box-shadow: 0 0 0 0 rgba(230, 57, 70, 0.6); }
  50%       { box-shadow: 0 0 0 12px rgba(230, 57, 70, 0); }
}

@keyframes deaf-slide-in-bottom {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@keyframes deaf-slide-in-top {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

@keyframes deaf-zoom-in {
  from { transform: scale(0.8); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

@keyframes deaf-border-pulse {
  0%, 100% { border-color: var(--deaf-error); }
  50%       { border-color: transparent; }
}

/* --- Alerta base --- */
.deaf-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--deaf-space-4);
  padding: var(--deaf-space-4) var(--deaf-space-5);
  border-radius: var(--deaf-radius-lg);
  border-left: 5px solid transparent;
  font-size: var(--deaf-text-sm);
  line-height: var(--deaf-leading-normal);
  position: relative;
  transition: var(--deaf-transition);
}

.deaf-alert__icon {
  font-size: 1.35rem;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 2px;
}

.deaf-alert__title {
  font-weight: 700;
  font-size: var(--deaf-text-base);
  margin-bottom: var(--deaf-space-1);
  display: block;
  line-height: 1.3;
}

.deaf-alert__body {
  flex: 1;
  min-width: 0;
}

/* --- Variantes de estado --- */
.deaf-alert--success {
  background: var(--deaf-success-bg);
  border-left-color: var(--deaf-success);
  color: #0D5C2A;
}

.deaf-alert--warning {
  background: var(--deaf-warning-bg);
  border-left-color: var(--deaf-warning);
  color: #7A4E00;
}

.deaf-alert--error {
  background: var(--deaf-error-bg);
  border-left-color: var(--deaf-error);
  color: #7A1520;
}

.deaf-alert--info {
  background: var(--deaf-info-bg);
  border-left-color: var(--deaf-info);
  color: #0A3A8A;
}

/* --- Modificadores de animación visual --- */

/* Parpadeo — para llamar atención urgente */
.deaf-alert--flash {
  animation: deaf-flash var(--deaf-flash-duration) ease-in-out 3;
}

/* Temblor — para errores críticos */
.deaf-alert--shake {
  animation: deaf-shake 0.5s ease-in-out 1;
}

/* Pulso de borde — alerta continua */
.deaf-alert--pulse {
  animation: deaf-pulse-border 1.5s ease-in-out infinite;
}

/* Borde parpadeante */
.deaf-alert--blink-border {
  animation: deaf-border-pulse 0.6s ease-in-out 4;
}

/* --- Toast / Notificación flotante --- */
.deaf-toast-container {
  position: fixed;
  bottom: var(--deaf-space-6);
  right: var(--deaf-space-6);
  z-index: var(--deaf-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--deaf-space-3);
  max-width: 380px;
  width: 100%;
}

.deaf-toast-container--top {
  top: var(--deaf-space-6);
  bottom: auto;
}

.deaf-toast-container--center {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

.deaf-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--deaf-space-3);
  padding: var(--deaf-space-4) var(--deaf-space-5);
  padding-right: var(--deaf-space-10);
  background: var(--deaf-white);
  border-radius: var(--deaf-radius-lg);
  box-shadow: var(--deaf-shadow-xl);
  border: var(--deaf-border);
  animation: deaf-slide-in-bottom 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
}

.deaf-toast--top {
  animation-name: deaf-slide-in-top;
}

/* Barra de progreso del toast */
.deaf-toast::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--deaf-primary);
  animation: deaf-toast-progress 4s linear forwards;
  width: 100%;
}

@keyframes deaf-toast-progress {
  from { width: 100%; }
  to   { width: 0%; }
}

.deaf-toast--success::after { background: var(--deaf-success); }
.deaf-toast--warning::after { background: var(--deaf-warning); }
.deaf-toast--error::after   { background: var(--deaf-error); }

.deaf-toast__icon {
  font-size: 1.35rem;
  flex-shrink: 0;
  margin-top: 1px;
  line-height: 1;
}

.deaf-toast__close {
  position: absolute;
  top: var(--deaf-space-3);
  right: var(--deaf-space-3);
  width: 28px;
  height: 28px;
  border-radius: var(--deaf-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: var(--deaf-gray-500);
  cursor: pointer;
  transition: var(--deaf-transition);
  border: 1px solid var(--deaf-gray-200);
}

.deaf-toast__close:hover {
  background: var(--deaf-gray-100);
  color: var(--deaf-gray-900);
}

/* --- Alerta de pantalla completa (urgente) --- */
.deaf-alert--fullscreen {
  position: fixed;
  inset: 0;
  z-index: var(--deaf-z-modal);
  border-radius: 0;
  border-left: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: var(--deaf-text-xl);
  animation: deaf-flash 0.3s ease-in-out 5;
}

/* --- Banner superior de alerta --- */
.deaf-banner {
  width: 100%;
  padding: var(--deaf-space-4) var(--deaf-space-6);
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--deaf-space-3);
  font-weight: 600;
  font-size: var(--deaf-text-sm);
  letter-spacing: var(--deaf-tracking-wide);
}

.deaf-banner--warning {
  background: var(--deaf-warning);
  color: #fff;
  animation: deaf-flash 0.5s ease-in-out 2;
}

.deaf-banner--error {
  background: var(--deaf-error);
  color: #fff;
  animation: deaf-flash 0.4s ease-in-out 3;
}

.deaf-banner--success {
  background: var(--deaf-success);
  color: #fff;
}

/* =============================================
   deaf.css — Sign Language Embed
   Componente para videos de lengua de señas
   ============================================= */

/* --- Contenedor flotante de señas --- */
.deaf-sign-widget {
  position: fixed;
  bottom: var(--deaf-space-6);
  right: var(--deaf-space-6);
  z-index: var(--deaf-z-sign);
  width: 200px;
  border-radius: var(--deaf-radius-xl);
  overflow: hidden;
  box-shadow: var(--deaf-shadow-xl);
  border: 3px solid var(--deaf-primary);
  background: var(--deaf-black);
  transition: var(--deaf-transition-slow);
  animation: deaf-zoom-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.deaf-sign-widget:hover {
  transform: scale(1.05);
  box-shadow: var(--deaf-shadow-xl), 0 0 0 4px var(--deaf-primary-light);
}

.deaf-sign-widget--expanded {
  width: 320px;
}

.deaf-sign-widget--minimized {
  width: 60px;
  height: 60px;
  border-radius: var(--deaf-radius-full);
  cursor: pointer;
}

.deaf-sign-widget__video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: inherit;
}

.deaf-sign-widget__controls {
  position: absolute;
  top: var(--deaf-space-2);
  right: var(--deaf-space-2);
  display: flex;
  gap: var(--deaf-space-1);
}

.deaf-sign-widget__btn {
  width: 28px;
  height: 28px;
  border-radius: var(--deaf-radius-full);
  background: rgba(0,0,0,0.6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  cursor: pointer;
  transition: var(--deaf-transition);
  border: 1px solid rgba(255,255,255,0.2);
}

.deaf-sign-widget__btn:hover {
  background: rgba(0,0,0,0.9);
}

.deaf-sign-widget__label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--deaf-space-3) var(--deaf-space-3) var(--deaf-space-2);
  background: linear-gradient(transparent, rgba(0,0,0,0.85));
  color: #fff;
  font-size: var(--deaf-text-xs);
  font-weight: 600;
  letter-spacing: var(--deaf-tracking-wider);
  text-transform: uppercase;
  line-height: 1.4;
}

/* --- Embed inline de señas dentro de contenido --- */
.deaf-sign-inline {
  display: inline-flex;
  align-items: center;
  gap: var(--deaf-space-2);
  padding: var(--deaf-space-1) var(--deaf-space-3);
  background: var(--deaf-primary-light);
  border: 1px solid var(--deaf-primary);
  border-radius: var(--deaf-radius-full);
  font-size: var(--deaf-text-sm);
  font-weight: 600;
  color: var(--deaf-primary-dark);
  cursor: pointer;
  transition: var(--deaf-transition);
  text-decoration: none;
}

.deaf-sign-inline:hover {
  background: var(--deaf-primary);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--deaf-shadow);
}

.deaf-sign-inline__icon {
  font-size: 1rem;
}

/* --- Tarjeta de señas --- */
.deaf-sign-card {
  border-radius: var(--deaf-radius-lg);
  overflow: hidden;
  border: var(--deaf-border);
  box-shadow: var(--deaf-shadow);
  background: var(--deaf-white);
  transition: var(--deaf-transition);
}

.deaf-sign-card:hover {
  box-shadow: var(--deaf-shadow-lg);
  transform: translateY(-2px);
}

.deaf-sign-card__video-wrapper {
  position: relative;
  background: var(--deaf-black);
  aspect-ratio: 4/3;
}

.deaf-sign-card__video-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.deaf-sign-card__badge {
  position: absolute;
  top: var(--deaf-space-2);
  left: var(--deaf-space-2);
  padding: var(--deaf-space-1) var(--deaf-space-2);
  background: var(--deaf-primary);
  color: #fff;
  border-radius: var(--deaf-radius-full);
  font-size: var(--deaf-text-xs);
  font-weight: 700;
  letter-spacing: var(--deaf-tracking-wider);
  text-transform: uppercase;
}

.deaf-sign-card__body {
  padding: var(--deaf-space-4);
}

.deaf-sign-card__title {
  font-size: var(--deaf-text-lg);
  font-weight: 700;
  margin-bottom: var(--deaf-space-1);
  color: var(--deaf-gray-900);
}

.deaf-sign-card__meta {
  font-size: var(--deaf-text-xs);
  color: var(--deaf-gray-500);
  display: flex;
  gap: var(--deaf-space-3);
  margin-top: var(--deaf-space-3);
}

/* --- Caption / Subtítulos accesibles --- */
.deaf-caption {
  display: block;
  padding: var(--deaf-space-3) var(--deaf-space-4);
  background: rgba(0, 0, 0, 0.85);
  color: #ffffff;
  font-size: var(--deaf-text-lg);
  line-height: var(--deaf-leading-normal);
  letter-spacing: var(--deaf-tracking-wide);
  border-radius: var(--deaf-radius);
  max-width: 80%;
  margin: 0 auto;
}

.deaf-caption--high-contrast {
  background: #000000;
  color: #FFFF00;
  font-weight: 700;
}

.deaf-caption--large {
  font-size: var(--deaf-text-2xl);
}

/* =============================================
   deaf.css — Flashbar & High Contrast
   Componentes únicos para comunidad sorda
   ============================================= */

/* -----------------------------------------------
   FLASHBAR — Barra de alerta en toda la pantalla
   Reemplaza alertas sonoras del sistema
   ----------------------------------------------- */

@keyframes deaf-flashbar-in {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

@keyframes deaf-screen-flash {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.15; }
}

.deaf-flashbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: calc(var(--deaf-z-toast) + 10);
  padding: var(--deaf-space-4) var(--deaf-space-6);
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--deaf-space-4);
  font-weight: 700;
  font-size: var(--deaf-text-base);
  letter-spacing: var(--deaf-tracking-wide);
  animation: deaf-flashbar-in 0.3s ease, deaf-flash 0.5s ease-in-out 0.3s 3;
  box-shadow: var(--deaf-shadow-xl);
}

.deaf-flashbar--error {
  background: var(--deaf-error);
  color: #fff;
}

.deaf-flashbar--warning {
  background: var(--deaf-warning);
  color: #fff;
}

.deaf-flashbar--success {
  background: var(--deaf-success);
  color: #fff;
}

.deaf-flashbar--info {
  background: var(--deaf-primary);
  color: #fff;
}

.deaf-flashbar__content {
  display: flex;
  align-items: center;
  gap: var(--deaf-space-3);
  flex: 1;
}

.deaf-flashbar__icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  animation: deaf-shake 0.5s ease-in-out 0.8s 1;
}

.deaf-flashbar__text {
  flex: 1;
}

.deaf-flashbar__title {
  display: block;
  font-size: var(--deaf-text-lg);
  font-weight: 800;
}

.deaf-flashbar__sub {
  display: block;
  font-size: var(--deaf-text-sm);
  opacity: 0.85;
  font-weight: 400;
  margin-top: 2px;
}

.deaf-flashbar__close {
  width: 32px;
  height: 32px;
  border-radius: var(--deaf-radius-full);
  background: rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--deaf-transition);
  border: 2px solid rgba(255,255,255,0.3);
  flex-shrink: 0;
  color: #fff;
  font-size: 0.9rem;
}

.deaf-flashbar__close:hover {
  background: rgba(255,255,255,0.35);
}

.deaf-flashbar__close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.5);
}

/* --- Flashbar contador (para múltiples alertas) --- */
.deaf-flashbar__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 var(--deaf-space-2);
  background: rgba(255,255,255,0.25);
  border-radius: var(--deaf-radius-full);
  font-size: var(--deaf-text-xs);
  font-weight: 800;
  flex-shrink: 0;
}

/* --- Flash de pantalla completa --- */
/* Para alertas extremadamente urgentes (ej: emergencia) */
.deaf-screen-flash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: calc(var(--deaf-z-modal) + 10);
  animation: deaf-screen-flash 0.25s ease-in-out 6;
}

.deaf-screen-flash--red    { background: rgba(230, 57, 70, 0.5); }
.deaf-screen-flash--yellow { background: rgba(245, 166, 35, 0.4); }
.deaf-screen-flash--green  { background: rgba(29, 185, 84, 0.3); }
.deaf-screen-flash--blue   { background: rgba(26, 110, 255, 0.3); }

/* -----------------------------------------------
   ALTO CONTRASTE
   Clase global: .deaf-high-contrast en <html> o en cualquier contenedor
   ----------------------------------------------- */

.deaf-high-contrast,
.deaf-high-contrast * {
  --deaf-primary:        #0057FF;
  --deaf-primary-dark:   #0040CC;
  --deaf-primary-light:  #D6E4FF;

  --deaf-success:        #007A2F;
  --deaf-success-bg:     #C3FFDC;
  --deaf-warning:        #8A5000;
  --deaf-warning-bg:     #FFE8B0;
  --deaf-error:          #C0000A;
  --deaf-error-bg:       #FFD6D8;

  --deaf-gray-900:       #000000;
  --deaf-gray-800:       #111111;
  --deaf-gray-700:       #222222;
  --deaf-gray-600:       #333333;
  --deaf-gray-500:       #555555;
  --deaf-gray-400:       #777777;
  --deaf-gray-300:       #AAAAAA;
  --deaf-gray-200:       #CCCCCC;
  --deaf-gray-100:       #EEEEEE;
  --deaf-white:          #FFFFFF;

  --deaf-leading-normal: 1.8;
  --deaf-text-base:      1.0625rem;
  --deaf-tracking-wide:  0.04em;

  --deaf-border:         2px solid #000000;
  --deaf-border-md:      3px solid #000000;

  --deaf-focus-ring:     0 0 0 3px #fff, 0 0 0 6px #000;
}

/* En modo alto contraste, los botones primarios son negro sobre amarillo */
.deaf-high-contrast .deaf-btn--primary {
  background: #000;
  color: #FFE600;
  border-color: #000;
}

.deaf-high-contrast .deaf-btn--primary:hover {
  background: #111;
  box-shadow: 0 4px 0 #FFE600;
}

.deaf-high-contrast .deaf-btn--secondary {
  border-color: #000;
  color: #000;
}

/* Inputs en alto contraste */
.deaf-high-contrast .deaf-input,
.deaf-high-contrast .deaf-textarea,
.deaf-high-contrast .deaf-select {
  border: 2px solid #000;
  background: #fff;
  color: #000;
}

.deaf-high-contrast .deaf-input:focus,
.deaf-high-contrast .deaf-textarea:focus {
  border-color: #0057FF;
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px #0057FF;
}

/* Alertas en alto contraste */
.deaf-high-contrast .deaf-alert {
  border-left-width: 6px;
  font-weight: 600;
}

/* Toggle de alto contraste en botón */
.deaf-contrast-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--deaf-space-2);
  padding: var(--deaf-space-2) var(--deaf-space-3);
  font-size: var(--deaf-text-sm);
  font-weight: 700;
  border: 2px solid var(--deaf-gray-300);
  border-radius: var(--deaf-radius);
  cursor: pointer;
  transition: var(--deaf-transition);
  background: var(--deaf-white);
  color: var(--deaf-gray-700);
}

.deaf-contrast-toggle:hover {
  border-color: var(--deaf-gray-600);
  background: var(--deaf-gray-100);
}

.deaf-contrast-toggle:focus-visible {
  outline: none;
  box-shadow: var(--deaf-focus-ring);
}


/* 5. Utilities */
/* =============================================
   deaf.css — Utilities: Espaciado y Layout
   ============================================= */

/* --- Flex helpers --- */
.d-flex       { display: flex; }
.d-inline-flex{ display: inline-flex; }
.d-grid       { display: grid; }
.d-block      { display: block; }
.d-hidden     { display: none; }

.d-items-center  { align-items: center; }
.d-items-start   { align-items: flex-start; }
.d-items-end     { align-items: flex-end; }
.d-justify-center{ justify-content: center; }
.d-justify-between{ justify-content: space-between; }
.d-justify-end   { justify-content: flex-end; }
.d-flex-col      { flex-direction: column; }
.d-flex-wrap     { flex-wrap: wrap; }
.d-gap-1  { gap: var(--deaf-space-1); }
.d-gap-2  { gap: var(--deaf-space-2); }
.d-gap-3  { gap: var(--deaf-space-3); }
.d-gap-4  { gap: var(--deaf-space-4); }
.d-gap-6  { gap: var(--deaf-space-6); }
.d-gap-8  { gap: var(--deaf-space-8); }

/* --- Padding --- */
.d-p-1  { padding: var(--deaf-space-1); }
.d-p-2  { padding: var(--deaf-space-2); }
.d-p-3  { padding: var(--deaf-space-3); }
.d-p-4  { padding: var(--deaf-space-4); }
.d-p-6  { padding: var(--deaf-space-6); }
.d-p-8  { padding: var(--deaf-space-8); }
.d-px-4 { padding-left: var(--deaf-space-4); padding-right: var(--deaf-space-4); }
.d-py-4 { padding-top: var(--deaf-space-4); padding-bottom: var(--deaf-space-4); }
.d-px-6 { padding-left: var(--deaf-space-6); padding-right: var(--deaf-space-6); }
.d-py-6 { padding-top: var(--deaf-space-6); padding-bottom: var(--deaf-space-6); }

/* --- Margin --- */
.d-m-auto   { margin: auto; }
.d-mx-auto  { margin-left: auto; margin-right: auto; }
.d-mt-2     { margin-top: var(--deaf-space-2); }
.d-mt-4     { margin-top: var(--deaf-space-4); }
.d-mt-8     { margin-top: var(--deaf-space-8); }
.d-mb-2     { margin-bottom: var(--deaf-space-2); }
.d-mb-4     { margin-bottom: var(--deaf-space-4); }
.d-mb-8     { margin-bottom: var(--deaf-space-8); }

/* --- Ancho --- */
.d-w-full   { width: 100%; }
.d-max-sm   { max-width: 640px; }
.d-max-md   { max-width: 768px; }
.d-max-lg   { max-width: 1024px; }
.d-max-xl   { max-width: 1280px; }

/* --- Tipografía --- */
.d-text-xs    { font-size: var(--deaf-text-xs); }
.d-text-sm    { font-size: var(--deaf-text-sm); }
.d-text-base  { font-size: var(--deaf-text-base); }
.d-text-lg    { font-size: var(--deaf-text-lg); }
.d-text-xl    { font-size: var(--deaf-text-xl); }
.d-text-2xl   { font-size: var(--deaf-text-2xl); }
.d-text-3xl   { font-size: var(--deaf-text-3xl); }
.d-font-bold  { font-weight: 700; }
.d-font-semibold { font-weight: 600; }
.d-text-center{ text-align: center; }
.d-text-right { text-align: right; }
.d-uppercase  { text-transform: uppercase; }
.d-tracking-wide { letter-spacing: var(--deaf-tracking-wide); }

/* --- Border radius --- */
.d-rounded-sm   { border-radius: var(--deaf-radius-sm); }
.d-rounded      { border-radius: var(--deaf-radius); }
.d-rounded-lg   { border-radius: var(--deaf-radius-lg); }
.d-rounded-full { border-radius: var(--deaf-radius-full); }

/* --- Sombras --- */
.d-shadow-sm  { box-shadow: var(--deaf-shadow-sm); }
.d-shadow     { box-shadow: var(--deaf-shadow); }
.d-shadow-lg  { box-shadow: var(--deaf-shadow-lg); }

/* --- Container --- */
.deaf-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--deaf-space-6);
}