/* ============================================================================
   LIGHT THEME - TEMA CLARO
   ============================================================================
   Este archivo define todas las variables de color, sombras y estilos
   específicos para el tema claro, sobrescribiendo las del tema dark
   ============================================================================ */

[data-theme="light"] {
  /* ========== Colores de Fondo ========== */
  --bg-primary: #EBEBF9;
  --bg-secondary: #f8f9fa;
  --bg-tertiary: #B8B6EA;
  --bg-code: #f8f9fa;
  --bg-button: #8988DA;

  /* ========== Colores de Texto ========== */
  --text-primary: #000000;
  --text-secondary: #6c757d;
  --text-muted: #adb5bd;
  --text-inverse: #ffffff;

  /* ========== Bordes ========== */
  --border-primary: #B8B6EA;
  --border-secondary: #B8B6EA;
  --border-focus: #B8B6EA;

  /* ========== Marca/Branding ========== */
  --brand-primary: #000000;
  --brand-secondary: #6c757d;
  --brand-accent: #8988DA;
  --brand-accent-hover: #B8B6EA;
  --brand-accent-light: #B8B6EA;
  --brand-accent-border: #B8B6EA;

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

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

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

/* Method Badges - Tema Claro */
[data-theme="light"] .method-get {
  background-color: rgba(102, 102, 102, 0.1);
  color: #666666;
  border-color: rgba(102, 102, 102, 0.2);
}

[data-theme="light"] .method-post {
  background-color: #79F4F2;
  color: #4a4a4a;
  border-color: rgba(74, 74, 74, 0.2);
}

[data-theme="light"] .method-put {
  background-color: rgba(128, 128, 128, 0.1);
  color: #808080;
  border-color: rgba(128, 128, 128, 0.2);
}

[data-theme="light"] .method-delete {
  background-color: rgba(51, 51, 51, 0.1);
  color: #333333;
  border-color: rgba(51, 51, 51, 0.2);
}

[data-theme="light"] .method-patch {
  background-color: rgba(204, 204, 204, 0.1);
  color: #cccccc;
  border-color: rgba(204, 204, 204, 0.2);
}

/* Alert/Notification Boxes - Tema Claro */
[data-theme="light"] .note-box {
  background-color: rgba(74, 74, 74, 0.08);
  border-color: rgba(74, 74, 74, 0.2);
}

[data-theme="light"] .audience-box {
  background-color: rgba(102, 102, 102, 0.08);
  border-color: rgba(102, 102, 102, 0.2);
}

[data-theme="light"] .warning-box {
  background-color: rgba(128, 128, 128, 0.08);
  border-color: rgba(128, 128, 128, 0.2);
}

/* Code Block - Tema Claro */
[data-theme="light"] .code-block {
  background-color: #f8f8f8;
  border-color: var(--border-primary);
}

[data-theme="light"] .code-block pre {
  color: #B8B6EA;
}

[data-theme="light"] .code-title {
  background-color: #e8e8e8;
  color: #1a1a1a;
  border-bottom-color: var(--border-primary);
}

[data-theme="light"] .code-block:hover {
  border-color: #8988DA;
}

/* Code Block Tokens - Tema Claro */
[data-theme="light"] .code-block .token.comment,
[data-theme="light"] .code-block .token.prolog,
[data-theme="light"] .code-block .token.doctype,
[data-theme="light"] .code-block .token.cdata {
  color: #708090;
}

[data-theme="light"] .code-block .token.punctuation {
  color: #2d3748;
}

[data-theme="light"] .code-block .token.property,
[data-theme="light"] .code-block .token.tag,
[data-theme="light"] .code-block .token.boolean,
[data-theme="light"] .code-block .token.number,
[data-theme="light"] .code-block .token.constant,
[data-theme="light"] .code-block .token.symbol,
[data-theme="light"] .code-block .token.deleted {
  color: #e53e3e;
}

[data-theme="light"] .code-block .token.selector,
[data-theme="light"] .code-block .token.attr-name,
[data-theme="light"] .code-block .token.string,
[data-theme="light"] .code-block .token.char,
[data-theme="light"] .code-block .token.builtin,
[data-theme="light"] .code-block .token.inserted {
  color: #38a169;
}

[data-theme="light"] .code-block .token.operator,
[data-theme="light"] .code-block .token.entity,
[data-theme="light"] .code-block .token.url,
[data-theme="light"] .code-block .language-css .token.string,
[data-theme="light"] .code-block .style .token.string {
  color: #d69e2e;
}

[data-theme="light"] .code-block .token.atrule,
[data-theme="light"] .code-block .token.attr-value,
[data-theme="light"] .code-block .token.function,
[data-theme="light"] .code-block .token.class-name {
  color: #805ad5;
}

[data-theme="light"] .code-block .token.keyword {
  color: #3182ce;
}

[data-theme="light"] .code-block .token.regex,
[data-theme="light"] .code-block .token.important,
[data-theme="light"] .code-block .token.variable {
  color: #d53f8c;
}

/* Scrollbar - Tema Claro */
[data-theme="light"] .code-block pre::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .code-block pre::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .code-block pre::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

[data-theme="light"] .toc-sidebar::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

[data-theme="light"] .toc-sidebar::-webkit-scrollbar-thumb {
  background: var(--border-primary);
}

[data-theme="light"] .toc-sidebar::-webkit-scrollbar-thumb:hover {
  background: var(--border-secondary);
}

/* Testimonial - Tema Claro */
[data-theme="light"] .testimonial-item::before {
  color: var(--text-muted);
}

/* Feature Icon - Tema Claro */
[data-theme="light"] .feature-icon {
  background-color: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .feature-item:hover .feature-icon {
  background-color: rgba(0, 0, 0, 0.1);
}

/* Alert - Tema Claro */
[data-theme="light"] .alert {
  background-color: var(--bg-secondary);
  border-color: var(--border-secondary);
}

[data-theme="light"] .alert-warning {
  background-color: rgba(128, 128, 128, 0.08);
  border-color: rgba(128, 128, 128, 0.2);
}

[data-theme="light"] .alert-error,
[data-theme="light"] .alert-danger {
  background-color: rgba(51, 51, 51, 0.08);
  border-color: rgba(51, 51, 51, 0.2);
}

[data-theme="light"] .alert-success {
  background-color: rgba(102, 102, 102, 0.08);
  border-color: rgba(102, 102, 102, 0.2);
}

[data-theme="light"] .alert-info {
  background-color: rgba(74, 74, 74, 0.08);
  border-color: rgba(74, 74, 74, 0.2);
}

/* Alert Dismiss - Tema Claro */
[data-theme="light"] .alert-dismiss:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

/* Error Example - Tema Claro */
[data-theme="light"] .error-example .code-title {
  background-color: rgba(51, 51, 51, 0.1);
  color: #333333;
  border-bottom-color: rgba(51, 51, 51, 0.2);
}

/* Example Tabs - Tema Claro */
[data-theme="light"] .example-tab.active {
  background-color: var(--bg-button);
  color: var(--bg-primary);
}

[data-theme="light"] .example-tab.active::after {
  background-color: var(--bg-button);
}

/* Required/Optional Indicators - Tema Claro */
[data-theme="light"] .required-indicator {
  background-color: #666666;
}

[data-theme="light"] .optional-indicator {
  background-color: #9ca3af;
}

[data-theme="light"] .required-badge {
  background-color: #6666661a;
  color: #666666;
  border-color: #66666633;
}

[data-theme="light"] .optional-badge {
  background-color: #9ca3af1a;
  color: #9ca3af;
  border-color: #9ca3af33;
}

/* Copy Button - Tema Claro */
[data-theme="light"] .copy-button {
  background-color: var(--bg-tertiary);
  border-color: var(--border-primary);
  color: var(--text-secondary);
}

[data-theme="light"] .copy-button:hover {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

[data-theme="light"] .copy-button.copied {
  background-color: var(--brand-accent);
  color: #ffffff;
}

/* Line Numbers - Tema Claro */
[data-theme="light"] .line-numbers-rows > span:before {
  color: #EBEBF9 !important;
}

[data-theme="light"] .line-numbers .line-numbers-rows {
  border-right-color: #d3d3ff !important;
}

/* Banks Catalog - Tema Claro */
[data-theme="light"] .bank-item {
  background: var(--bg-primary);
  border-color: var(--border-primary);
}

[data-theme="light"] .bank-item:hover {
  background: var(--bg-secondary);
  border-color: var(--text-brand);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .bank-code {
  background: rgba(12, 19, 37, 0.1);
}

[data-theme="light"] .banks-search-input {
  background: var(--bg-primary);
  border-color: var(--border-primary);
}

[data-theme="light"] .banks-search-input:focus {
  background: var(--bg-secondary);
  border-color: var(--text-brand);
  box-shadow: 0 0 0 3px rgba(12, 19, 37, 0.1);
}

/* Layout Components - Tema Claro */
[data-theme="light"] .navbar {
  background-color: var(--bg-primary);
  border-bottom: 1px solid var(--border-primary);
}

[data-theme="light"] .sidebar {
  background-color: var(--bg-secondary);
  border-right: 1px solid var(--border-primary);
}

[data-theme="light"] .toc-sidebar {
  background-color: var(--bg-secondary);
  border-left: 1px solid var(--border-primary);
}

[data-theme="light"] .footer {
  background-color: var(--bg-primary);
  border-top: 1px solid var(--border-primary);
}

/* Content Sections - Tema Claro */
[data-theme="light"] .hero-section {
  background-color: var(--bg-primary);
  border-color: var(--border-primary);
}

[data-theme="light"] .content-section {
  background-color: var(--bg-secondary);
  border-color: var(--border-primary);
}

[data-theme="light"] .quick-start-section {
  background-color: var(--bg-secondary);
  border-color: var(--border-primary);
}

[data-theme="light"] .step-item {
  background-color: var(--bg-secondary);
  border-color: var(--border-primary);
}

[data-theme="light"] .step-item:hover {
  border-color: var(--brand-accent);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .feature-item {
  background-color: var(--bg-secondary);
  border-color: var(--border-primary);
}

[data-theme="light"] .feature-item:hover {
  border-color: var(--brand-accent);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .testimonial-item {
  background-color: var(--bg-secondary);
  border-color: var(--border-primary);
}

[data-theme="light"] .testimonial-item:hover {
  border-color: var(--border-secondary);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

/* Table - Tema Claro */
[data-theme="light"] .table-container {
  background-color: var(--bg-tertiary);
  border-color: var(--border-secondary);
}

/* Code Examples - Tema Claro */
[data-theme="light"] .code-examples-section {
  background-color: var(--bg-secondary);
  border-color: var(--border-primary);
}

[data-theme="light"] .multi-tech-examples {
  background-color: var(--bg-secondary);
  border-color: var(--border-primary);
}

[data-theme="light"] .tech-tabs {
  background-color: var(--bg-tertiary);
  border-bottom-color: var(--border-primary);
}

[data-theme="light"] .tech-tab {
  border-right-color: var(--border-primary);
}

[data-theme="light"] .tech-tab.active::after {
  background-color: var(--brand-accent);
}

[data-theme="light"] .example-header {
  background-color: var(--bg-secondary);
  border-bottom-color: var(--border-primary);
}

[data-theme="light"] .response-example {
  background-color: var(--bg-secondary);
  border-top-color: var(--border-primary);
}

/* Buttons - Tema Claro */
[data-theme="light"] .btn-primary {
  background-color: var(--brand-accent);
  border-color: var(--brand-accent);
}

[data-theme="light"] .btn-outline {
  color: var(--brand-accent);
  border-color: var(--brand-accent-border);
}

[data-theme="light"] .btn-outline:hover {
  background-color: var(--brand-accent-light);
  color: var(--brand-accent);
}

/* Brand Badge - Tema Claro */
[data-theme="light"] .hero-brand-badge {
  background: linear-gradient(135deg, var(--brand-accent-light),
      rgba(0, 0, 0, 0.05));
  color: var(--brand-accent);
  border-color: var(--brand-accent-border);
}

/* Icons - Tema Claro */
[data-theme="light"] .step-number {
  background-color: var(--brand-accent);
  color: #ffffff;
}

[data-theme="light"] .section-icon {
  background-color: var(--brand-accent);
  color: #ffffff;
}

[data-theme="light"] .section-icon:hover {
  background-color: var(--brand-accent-hover);
}

/* Hover Effects - Tema Claro */
[data-theme="light"] .hero-section:hover {
  border-color: var(--brand-accent);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .quick-start-section:hover {
  border-color: var(--brand-accent);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .alert:hover {
  border-color: var(--brand-accent);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

/* Endpoint Banner - Tema Claro */
[data-theme="light"] .endpoint-banner {
  background: linear-gradient(135deg, #DDF5FF 0%,
      #005980 100%);
  border-color: #005980;
  backdrop-filter: blur(8px);
}

[data-theme="light"] .endpoint-banner:hover {
  background: linear-gradient(135deg, #DDF5FF 0%,
      #005980 100%);
  border-color: rgba(0, 0, 0, 0.25);
  box-shadow: 0 4px 12px #005980;
}

[data-theme="light"] .endpoint-banner-icon {
  color: #000000;
  opacity: 0.9;
}

[data-theme="light"] .endpoint-label {
  color: #000000;
  opacity: 1;
}

[data-theme="light"] .endpoint-url-text {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .endpoint-copy-btn {
  color: #000000;
  border-color: rgba(0, 0, 0, 0.25);
  opacity: 0.8;
}

[data-theme="light"] .endpoint-copy-btn:hover {
  background: rgba(0, 0, 0, 0.1);
  opacity: 1;
}

[data-theme="light"] .endpoint-banner-note {
  color: var(--text-secondary);
  opacity: 0.9;
}

[data-theme="light"] .endpoint-banner-note i {
  color: #000000;
  opacity: 0.7;
}