/* ============================================================================
   DARK THEME - TEMA OSCURO
   ============================================================================
   Este archivo define todas las variables de color, sombras y estilos
   específicos para el tema oscuro (tema por defecto)
   ============================================================================ */

:root {
  /* ========== Colores de Fondo ========== */
  --bg-primary: #0a0a0a;
  --bg-secondary: #0a0a0a;
  --bg-tertiary: #364388;
  --bg-buttons: #00DBD9;
  --bg-code: #000000;

  /* ========== Colores de Texto ========== */
  --text-primary: #79F4F2;
  --text-secondary: #a0a0a0;
  --text-muted: #666666;
  --text-inverse: #000000;
  --text-button: #ffffff;

  /* ========== Bordes ========== */
  --border-primary: #364388;
  --border-secondary: #2a2a2a;
  --border-focus: #333333;

  /* ========== Marca/Branding ========== */
  --brand-primary: #ffffff;
  --brand-secondary: #B8B6EA;
  --brand-accent: #364388;
  --brand-accent-hover: #B8B6EA;
  --brand-accent-light: #B8B6EA;
  --brand-accent-border: #364388;

  /* ========== Colores Semánticos ========== */
  --color-success: #666666;
  --color-warning: #808080;
  --color-error: #333333;
  --color-info: #4a4a4a;

  /* ========== Colores HTTP Methods ========== */
  --color-get: #ffffff;
  --color-post: #a0a0a0;
  --color-put: #666666;
  --color-delete: #999999;
  --color-patch: #cccccc;

  /* ========== Sombras ========== */
  --shadow-sm: 0 1px 2px 0 rgb(255 255 255 / 0.02);
  --shadow: 0 1px 3px 0 rgb(255 255 255 / 0.05),
    0 1px 2px -1px rgb(255 255 255 / 0.02);
  --shadow-md: 0 4px 6px -1px rgb(255 255 255 / 0.05),
    0 2px 4px -2px rgb(255 255 255 / 0.02);
  --shadow-lg: 0 10px 15px -3px rgb(255 255 255 / 0.05),
    0 4px 6px -4px rgb(255 255 255 / 0.02);
  --shadow-xl: 0 20px 25px -5px rgb(255 255 255 / 0.05),
    0 8px 10px -6px rgb(255 255 255 / 0.02);
}

/* ============================================================================
   ESTILOS ESPECÍFICOS DE COMPONENTES EN TEMA DARK
   ============================================================================ */

/* Method Badges - Tema Oscuro */
.method-get {
  background-color: rgba(102, 102, 102, 0.15);
  color: #666666;
  border-color: rgba(102, 102, 102, 0.3);
}

.method-post {
  background-color: rgba(74, 74, 74, 0.15);
  color: #4a4a4a;
  border-color: rgba(74, 74, 74, 0.3);
}

.method-put {
  background-color: rgba(128, 128, 128, 0.15);
  color: #808080;
  border-color: rgba(128, 128, 128, 0.3);
}

.method-delete {
  background-color: rgba(51, 51, 51, 0.15);
  color: #333333;
  border-color: rgba(51, 51, 51, 0.3);
}

.method-patch {
  background-color: rgba(204, 204, 204, 0.15);
  color: #cccccc;
  border-color: rgba(204, 204, 204, 0.3);
}

/* Alert/Notification Boxes - Tema Oscuro */
.note-box {
  border-left-color: #4a4a4a;
  background-color: rgba(74, 74, 74, 0.06);
  color: var(--text-secondary);
  border-color: rgba(74, 74, 74, 0.15);
}

.note-box::before {
  background-color: #4a4a4a;
}

.audience-box {
  border-left-color: #666666;
  background-color: rgba(102, 102, 102, 0.06);
  color: var(--text-secondary);
  border-color: rgba(102, 102, 102, 0.15);
}

.audience-box::before {
  background-color: #666666;
}

.warning-box {
  border-left-color: #808080;
  background-color: rgba(128, 128, 128, 0.06);
  color: var(--text-secondary);
  border-color: rgba(128, 128, 128, 0.15);
}

.warning-box::before {
  background-color: #808080;
}

.success-box {
  border-left-color: #666666;
  background-color: rgba(102, 102, 102, 0.06);
  color: var(--text-secondary);
  border-color: rgba(102, 102, 102, 0.15);
}

.success-box::before {
  background-color: #666666;
}

.error-box {
  border-left-color: #333333;
  background-color: rgba(51, 51, 51, 0.06);
  color: var(--text-secondary);
  border-color: rgba(51, 51, 51, 0.15);
}

.error-box::before {
  background-color: #333333;
}

/* Alert Component - Tema Oscuro */
.alert-warning {
  border-left-color: #808080;
  background-color: rgba(128, 128, 128, 0.05);
  border-color: rgba(128, 128, 128, 0.15);
}

.alert-warning::before {
  background-color: #808080;
}

.alert-error,
.alert-danger {
  border-left-color: #333333;
  background-color: rgba(51, 51, 51, 0.05);
  border-color: rgba(51, 51, 51, 0.15);
}

.alert-error::before,
.alert-danger::before {
  background-color: #333333;
}

.alert-success {
  border-left-color: #666666;
  background-color: rgba(102, 102, 102, 0.05);
  border-color: rgba(102, 102, 102, 0.15);
}

.alert-success::before {
  background-color: #666666;
}

.alert-info {
  border-left-color: #4a4a4a;
  background-color: rgba(74, 74, 74, 0.05);
  border-color: rgba(74, 74, 74, 0.15);
}

.alert-info::before {
  background-color: #4a4a4a;
}

/* Scrollbar - Tema Oscuro */
.code-block pre::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.code-block pre::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
}

.code-block pre::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

.toc-sidebar::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

.toc-sidebar::-webkit-scrollbar-thumb {
  background: var(--border-primary);
}

.toc-sidebar::-webkit-scrollbar-thumb:hover {
  background: var(--border-secondary);
}

/* Required/Optional Indicators - Tema Oscuro */
.required-indicator {
  background-color: #666666;
}

.optional-indicator {
  background-color: #6b7280;
}

.required-badge {
  background-color: rgba(102, 102, 102, 0.1);
  color: #666666;
  border: 1px solid rgba(102, 102, 102, 0.2);
}

.optional-badge {
  background-color: rgba(107, 114, 128, 0.1);
  color: #6b7280;
  border: 1px solid rgba(107, 114, 128, 0.2);
}

/* Feature Icon - Tema Oscuro */
.feature-icon {
  background-color: rgba(255, 255, 255, 0.05);
}

.feature-item:hover .feature-icon {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Copy Button - Tema Oscuro */
.copy-button {
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #a0a0a0;
}

.copy-button:hover {
  background-color: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.2);
}

.copy-button.copied {
  background-color: rgba(102, 102, 102, 0.2);
  color: #666666;
  border-color: rgba(102, 102, 102, 0.3);
}

/* Alert Dismiss - Tema Oscuro */
.alert-dismiss:hover {
  background-color: rgba(255, 255, 255, 0.1);
}