/* --- DiviconType Theme: Divicon Dev Dark v1.3.1 --- */

/* 1. Variables de Color del Tema (Basadas en divicon.dev) */
:root { /* O un selector específico como body.dct-theme-divicon-dev */
  --dct-body-bg: #1A1A1A; /* Carbon Profundo */
  --dct-color-primary-bg: #2b2b2b; /* Gris oscuro intermedio */
  --dct-color-primary-text: #F56E0F; /* Naranja Atómico */
  --dct-color-secondary-text: #39FF14; /* Verde Neon Técnico */
  --dct-color-accent-tip: #39FF14; /* Verde Neon Técnico */
  --dct-color-accent-note: #61dafb; /* Azul (Mantenido de base, puedes cambiarlo) */
  --dct-color-accent-warn: #ffca28; /* Amarillo (Mantenido de base, puedes cambiarlo) */
  --dct-color-text-light: #F0F0F0; /* Aluminio Suave */
  --dct-color-text-lighter: #f5f5f5; /* Casi blanco */
  --dct-color-text-medium: #5E6A77; /* Acero Templado */
  --dct-color-text-dark: #1A1A1A; /* Carbon Profundo (para texto sobre fondos claros) */
  --dct-color-bg-dark-1: #111;       /* Más oscuro */
  --dct-color-bg-dark-2: #1e1e1e;       /* Oscuro intermedio */
  --dct-color-bg-dark-3: #2a2a2a;       /* Ligeramente más claro */
  --dct-color-border: #5E6A77;       /* Acero Templado (bordes principales) */
  --dct-color-border-light: #333;       /* Borde más sutil */
  --dct-font-headings: 'Space Grotesk', sans-serif;
  --dct-font-body: 'Inter', sans-serif;
  --dct-font-code: 'Fira Code', monospace;

  /* Variables RGB */
  --dct-color-primary-text-rgb: 245, 110, 15;
  --dct-color-secondary-text-rgb: 57, 255, 20;
  --dct-color-accent-warn-rgb: 211, 185, 149; /* Aprox Warm Sand, mantener o cambiar */
}

/* 2. Aplicar Colores a los Componentes */

/* Chip */
.dct-chip { font-family: var(--dct-font-code); border: none; }
.dct-chip.dct-chip-default, .dct-chip.dct-chip-orange { background-color: var(--dct-color-primary-bg); color: var(--dct-color-primary-text); }
.dct-chip.dct-chip-green { background-color: rgba(var(--dct-color-secondary-text-rgb), 0.15); color: var(--dct-color-secondary-text); }
.dct-chip.dct-chip-blue { background-color: rgba(97, 218, 251, 0.15); color: var(--dct-color-accent-note); }
.dct-chip.dct-chip-grey { background-color: var(--dct-color-border); color: var(--dct-color-text-light); }

/* Box (Tip, Note, Warn) - Usando estilo blockquote */
.dct-box { background: var(--dct-color-bg-dark-2); color: var(--dct-color-text-light); border-left-color: var(--dct-color-border); /* Default */ }
.dct-box.dct-box-tip { border-left-color: var(--dct-color-accent-tip); } /* Verde */
.dct-box.dct-box-note { border-left-color: var(--dct-color-accent-note); } /* Azul */
.dct-box.dct-box-warn { border-left-color: var(--dct-color-accent-warn); } /* Amarillo */
/* Aplicar fuente body */
.dct-box, .dct-box p { font-family: var(--font-body); }

/* Code Block - Usando estilo pre */
.dct-code-block-wrapper pre { background-color: var(--dct-color-bg-dark-2); color: var(--dct-color-text-light); border-color: var(--dct-color-border); font-family: var(--dct-font-code); }
.dct-code-block-wrapper code { color: inherit; font-family: inherit; }

/* Section Title - Usando estilo h2/h3/h4 */
.dct-section-title { border-bottom-color: var(--dct-color-border-light); font-family: var(--dct-font-headings); }
.dct-section-number { background-color: transparent; color: var(--dct-color-primary-text); font-family: var(--dct-font-headings); border: 2px solid var(--dct-color-primary-text); }
.dct-section-text { color: var(--dct-color-text-light); }

/* Path - Usando estilo texto-url-ejemplo */
.dct-path { background-color: var(--dct-color-bg-dark-2); color: var(--dct-color-text-medium); font-family: var(--dct-font-code); border: 1px solid var(--dct-color-border-light); padding: 0.2em 0.5em; font-size: 0.85em;}

/* Prop */
.dct-prop-name { color: var(--dct-color-primary-text); font-family: var(--dct-font-code); }
.dct-prop-desc { color: var(--dct-color-text-light); font-family: var(--dct-font-body); } /* Texto normal */

/* Table - Usando estilo tabla divicon.dev */
.dct-table-wrapper { border-color: var(--dct-color-border); border-radius: 4px; }
.dct-table-wrapper table { background-color: transparent; color: var(--dct-color-text-light); font-family: var(--dct-font-body); border-radius: 0; }
.dct-table-wrapper th, .dct-table-wrapper td { border-color: var(--dct-color-border); color: var(--dct-color-text-light); }
.dct-table-wrapper th { background-color: rgba(var(--dct-color-acero-templado-rgb, 94, 106, 119), 0.6); color: var(--dct-color-text-light); border-bottom: 2px solid var(--dct-color-primary-text); font-family: var(--dct-font-body); font-weight: bold;}
.dct-table-wrapper tbody tr:nth-child(odd) { background-color: rgba(var(--color-aluminio-suave-rgb, 240, 240, 240), 0.04); }
.dct-table-wrapper tbody tr:hover td { background-color: var(--dct-color-secondary-text) !important; color: var(--dct-color-text-dark) !important; } /* Hover verde */
/* Stack */
@media (max-width: 700px) {
  .dct-table--stack table tr { border-color: var(--dct-color-border); background: var(--dct-color-bg-dark-3); }
  .dct-table--stack table td { border-bottom-color: var(--dct-color-border-light); color: var(--dct-color-text-light);}
  .dct-table--stack table td::before { color: var(--dct-color-primary-text); font-family: var(--dct-font-body); font-weight: 600; }
  .dct-table--stack.dct-table--no-border table td { border-bottom-color: var(--dct-color-border-light); }
}

/* KBD - Usando estilo kbd */
.dct-kbd { background-color: var(--dct-color-text-medium); color: var(--dct-color-text-light); border-color: rgba(var(--color-aluminio-suave-rgb, 240, 240, 240), 0.3); font-family: var(--dct-font-code); box-shadow: 1px 1px 1px rgba(var(--color-carbon-profundo-rgb, 26, 26, 26), 0.5); }

/* Inline Code - Usando estilo :not(pre) > code */
.dct-inline-code { background-color: var(--dct-color-text-medium) !important; color: var(--dct-color-text-light) !important; border: none; font-family: var(--dct-font-code); font-weight: normal; }

/* Card */
.dct-card { background-color: var(--dct-color-bg-dark-2); border-color: var(--dct-color-border); }
.dct-card-title { color: var(--dct-color-primary-text); border-bottom-color: var(--dct-color-border-light); font-family: var(--dct-font-headings); }
.dct-card-content { color: var(--dct-color-text-light); font-family: var(--dct-font-body); }

/* Pros Cons List */
.dct-pros-cons-list { background-color: var(--dct-color-bg-dark-2); border-color: var(--dct-color-border); }
.dct-pros-cons-list li { color: var(--dct-color-text-light); font-family: var(--dct-font-body); }
.dct-list-pros .dct-pros-cons-title { background-color: rgba(var(--dct-color-secondary-text-rgb), 0.1); color: var(--dct-color-secondary-text); border-bottom-color: rgba(var(--dct-color-secondary-text-rgb), 0.3); font-family: var(--dct-font-headings);}
.dct-list-pros li::before { content: '✓'; color: var(--dct-color-secondary-text); } /* Check verde */
.dct-list-cons .dct-pros-cons-title { background-color: rgba(var(--dct-color-primary-text-rgb), 0.1); color: var(--dct-color-primary-text); border-bottom-color: rgba(var(--dct-color-primary-text-rgb), 0.3); font-family: var(--dct-font-headings);}
.dct-list-cons li::before { content: '✕'; color: var(--dct-color-primary-text); } /* X naranja */

/* Steps List */
.dct-steps ol::before { background-color: var(--dct-color-primary-text); } /* Línea naranja */
.dct-steps li { color: var(--dct-color-text-light); font-family: var(--dct-font-body); }
.dct-steps li:last-child::after { background: var(--dct-body-bg, #1A1A1A); } /* Ocultar línea */
.dct-steps li::before { background-color: var(--dct-color-primary-text); color: var(--dct-color-text-dark); font-family: var(--dct-font-body); } /* Círculo naranja, num oscuro */

/* Efectos de Enlace */
/* Mapear variables base a las del tema */
.divicon-textos, body { /* Alcance amplio */
    --link-1: var(--dct-color-primary-text); /* Naranja */
    --link-2: var(--dct-color-secondary-text); /* Verde */
    --link-3: rgba(var(--dct-color-primary-text-rgb), 0.4); /* Naranja semitransparente */
    --text: var(--dct-color-text-light); /* Texto claro */
    --link-hover-text: var(--dct-color-secondary-text); /* Verde hover */
    --link-hover-text-darkbg: var(--dct-color-text-light); /* Blanco hover */
}

/* Aplicar color base a los estilos de enlace */
.dct-link-style-1 { color: var(--link-1) !important; box-shadow: inset 0 0 0 0 var(--link-1); }
.dct-link-style-1:hover { color: var(--link-hover-text-darkbg) !important; box-shadow: inset 200px 0 0 0 var(--link-1); }

.dct-link-style-2 { color: var(--link-1) !important; }
.dct-link-style-2::before { background-color: var(--link-1); }
.dct-link-style-2:hover { color: var(--link-hover-text) !important; } /* Hover a Verde */

.dct-link-style-3 { color: var(--text) !important; }
.dct-link-style-3::before { background-color: var(--link-1); }
.dct-link-style-3:hover { color: var(--text) !important; }

.dct-link-style-4 { color: var(--link-1) !important; }
.dct-link-style-4::before { background-color: var(--link-1); }
.dct-link-style-4::after { color: var(--link-1) !important; }

.dct-link-style-5 { color: var(--text) !important; }
.dct-link-style-5::before { background-color: var(--link-3); }
.dct-link-style-5:hover { color: var(--text) !important; }

.dct-link-style-6 { color: var(--text) !important; background-image: linear-gradient(var(--link-2) 50%, var(--link-2) 50%); } /* Fondo Verde */
.dct-link-style-6:hover { color: var(--dct-color-text-dark) !important; /* Texto oscuro */ }

/* --- v1.1.0: Colores TL;DR --- */
.dct-tldr-box {
  background-color: var(--dct-color-bg-dark-2, #1e1e1e);
  color: var(--dct-color-text-light, #ccc);
  border-left-color: var(--dct-color-primary-text, #ffa64d); /* Naranja */
  border-top: 1px solid var(--dct-color-border-light, #333);
  border-right: 1px solid var(--dct-color-border-light, #333);
  border-bottom: 1px solid var(--dct-color-border-light, #333);
}
.dct-tldr-title {
  color: var(--dct-color-primary-text, #ffa64d); /* Título Naranja */
  font-family: var(--dct-font-headings);
}
.dct-tldr-content {
  color: var(--dct-color-text-light, #ccc);
  font-family: var(--dct-font-body);
}
.dct-tldr-content strong {
  color: var(--dct-color-text-lighter, #f5f5f5);
}

/* --- v1.2.0: Colores para [tool] / [req] --- */
a.dct-chip {
  /* Hereda los estilos de .dct-chip.dct-chip-default */
  background-color: var(--dct-color-primary-bg, #2b2b2b);
  color: var(--dct-color-primary-text, #ffa64d);
}
a.dct-chip:hover {
  background-color: var(--dct-color-primary-text, #ffa64d); /* Invertir colores */
  color: var(--dct-color-primary-bg, #2b2b2b);
}
/* Estilo para un chip sin enlace (opcional) */
span.dct-tool-no-link {
   background-color: var(--dct-color-border, #333);
   color: var(--dct-color-text-medium, #5E6A77);
}

/* --- v1.3.2: Estilos para Shortcodes de Estado (Fusión) --- */

/* 🟢 Estable (Stable) - usa colores 'tip' (Verde Neón) */
.dct-box.dct-box-status-stable {
  border-left-color: var(--dct-color-accent-tip); /* Verde Neon */
  background-color: rgba(var(--dct-color-secondary-text-rgb), 0.05); /* Fondo verde muy sutil */
}
.dct-box.dct-box-status-stable h3,
.dct-box.dct-box-status-stable strong:first-child {
  color: var(--dct-color-accent-tip);
  font-weight: bold;
}

/* 🟠 Experimental (Experimental) - usa colores 'warn' (Amarillo/Naranja) */
.dct-box.dct-box-status-experimental {
  border-left-color: var(--dct-color-accent-warn); /* Amarillo */
  background-color: rgba(var(--dct-color-accent-warn-rgb), 0.05);
}
.dct-box.dct-box-status-experimental h3,
.dct-box.dct-box-status-experimental strong:first-child {
  color: var(--dct-color-accent-warn);
  font-weight: bold;
}

/* 🔵 En Desarrollo (Dev) - usa colores 'note' (Azul) */
.dct-box.dct-box-status-dev {
  border-left-color: var(--dct-color-accent-note); /* Azul */
  background-color: rgba(97, 218, 251, 0.05);
}
.dct-box.dct-box-status-dev h3,
.dct-box.dct-box-status-dev strong:first-child {
  color: var(--dct-color-accent-note);
  font-weight: bold;
}

/* 🔴 Deprecado (Deprecated) - usa colores Naranja Atómico como rojo */
.dct-box.dct-box-status-deprecated {
  border-left-color: var(--dct-color-primary-text); /* Naranja Atómico */
  background-color: rgba(var(--dct-color-primary-text-rgb), 0.05);
}
.dct-box.dct-box-status-deprecated h3,
.dct-box.dct-box-status-deprecated strong:first-child {
  color: var(--dct-color-primary-text);
  font-weight: bold;
}