/* --- DiviconType Theme: Agencia Light v2.0 (Rediseño SaaS Minimalista) --- */
/* Objetivo: Estilo corporativo, minimalista y limpio con acentos de marca (Púrpura/Naranja). */

/* 1. Variables de Color del Tema */
:root {
  --dct-body-bg: #ffffff; /* Fondo blanco para limpieza */
  --dct-color-primary: #6A3EBE; /* Púrpura (Accent) */
  --dct-color-secondary: #FF9900; /* Naranja (Alerta/Secundario) */
  --dct-color-danger: #D93649; /* Rojo */
  --dct-color-text-dark: #1f2937; /* Gris Oscuro (Texto y Títulos) */
  --dct-color-text-heading: #1f2937;
  --dct-color-text-medium: #64748b; /* Gris Pizarra (Para Path/Detalles) */
  --dct-color-text-light: #FFFFFF; /* Blanco */
  --dct-color-bg-light-1: #FFFFFF; /* Blanco base */
  --dct-color-bg-light-2: #f7f7f7; /* Gris muy pálido (fondo alterno) */
  --dct-color-bg-light-3: rgba(217, 54, 73, 0.05); /* Rojo muy sutil para Warnings */
  --dct-color-bg-light-4: rgba(255, 153, 0, 0.05); /* Naranja muy sutil para Notes */
  --dct-color-border: #e0e0e0; /* Borde gris claro */
  --dct-color-border-medium: #e2e8f0; /* Borde dashed */
  --dct-font-headings: 'Space Grotesk', sans-serif;
  --dct-font-body: 'Inter', sans-serif;
  --dct-font-code: 'Fira Code', 'Courier New', monospace;

  /* Variables RGB */
  --dct-color-primary-rgb: 106, 62, 190;
  --dct-color-secondary-rgb: 255, 153, 0;
  --dct-color-danger-rgb: 217, 54, 73;
}

/* 2. Aplicar Colores a los Componentes */

/* Chip: Más redondeado, fondos más limpios (usando light-2 para default) */
.dct-chip { font-family: var(--dct-font-body); border: 1px solid var(--dct-color-border); border-radius: 4px; }
.dct-chip.dct-chip-default { background-color: var(--dct-color-bg-light-2); color: var(--dct-color-primary); }
.dct-chip.dct-chip-orange { background-color: var(--dct-color-bg-light-4); color: var(--dct-color-secondary); border: 1px solid rgba(255, 153, 0, 0.3);}
.dct-chip.dct-chip-purple { background-color: rgba(106, 62, 190, 0.05); color: var(--dct-color-primary); border: 1px solid rgba(106, 62, 190, 0.3); }
.dct-chip.dct-chip-red { background-color: var(--dct-color-bg-light-3); color: var(--dct-color-danger); border: 1px solid rgba(217, 54, 73, 0.3);}

/* Box (Tip, Note, Warn): Minimalista, fondo blanco, mayor radio, sombra limpia */
.dct-box {
    background: var(--dct-color-bg-light-1);
    color: var(--dct-color-text-dark);
    border-radius: 0.5rem; /* 8px de redondeo */
    font-family: var(--dct-font-body);
    border-left-width: 5px;
    box-shadow: 0 4px 12px -1px rgba(0, 0, 0, 0.05); /* Sombra limpia */
    border: 1px solid var(--dct-color-border); /* Borde sutil */
    border-top: none;
    border-right: none;
    border-bottom: none;
}
.dct-box.dct-box-tip { border-left-color: var(--dct-color-primary); background-color: rgba(106, 62, 190, 0.03); } /* Púrpura muy sutil */
.dct-box.dct-box-note { border-left-color: var(--dct-color-secondary); background-color: var(--dct-color-bg-light-4); } /* Naranja sutil */
.dct-box.dct-box-warn { border-left-color: var(--dct-color-danger); background-color: var(--dct-color-bg-light-3); } /* Rojo sutil */

/* Títulos dentro de box (mantener) */
.dct-box.dct-box-note h3, .dct-box.dct-box-note strong:first-child { color: var(--dct-color-secondary) !important; font-weight: 800; }
.dct-box.dct-box-warn h3, .dct-box.dct-box-warn strong:first-child { color: var(--dct-color-danger) !important; font-weight: bold; }
.dct-box.dct-box-tip h3, .dct-box.dct-box-tip strong:first-child { color: var(--dct-color-primary) !important; font-weight: bold; }

/* Code Block: Fondo más corporativo */
.dct-code-block-wrapper pre { background-color: var(--dct-color-text-heading); color: var(--dct-color-text-light); border-color: var(--dct-color-border); font-family: var(--dct-font-code); border-radius: 8px; }
.dct-code-block-wrapper code { color: inherit; font-family: inherit; }

/* Section Title: Línea simple y limpia */
.dct-section-title { font-family: var(--dct-font-headings); } /* Usar Space Grotesk para títulos de sección */
h2.dct-section-title { border-bottom: 2px solid var(--dct-color-primary); color: var(--dct-color-text-heading); font-weight: 700; } /* Línea Púrpura más delgada */
h3.dct-section-title { border-bottom: 1px dashed var(--dct-color-border); color: var(--dct-color-text-heading); font-weight: 600; }
h4.dct-section-title { border-bottom: 1px dotted var(--dct-color-border); color: var(--dct-color-text-heading); }
.dct-section-number {
    background-color: var(--dct-color-primary);
    color: var(--dct-color-text-light);
    border-radius: 4px;
    font-weight: 600;
}
.dct-section-text { color: var(--dct-color-text-heading); }

/* Path: Limpio */
.dct-path { background-color: var(--dct-color-bg-light-2); color: var(--dct-color-text-medium); font-family: var(--dct-font-code); border: 1px solid var(--dct-color-border); border-radius: 4px; }

/* Prop: Limpio */
.dct-prop-name { color: var(--dct-color-primary); font-family: var(--dct-font-body); font-weight: 600; }
.dct-prop-desc { color: var(--dct-color-text-dark); font-family: var(--dct-font-body); }

/* Table: Minimalista y profesional */
.dct-table-wrapper { border-color: var(--dct-color-border); border-radius: 8px; border: 1px solid var(--dct-color-border); } /* Más redondeo y borde exterior */
.dct-table-wrapper table { background-color: var(--dct-color-bg-light-1); color: var(--dct-color-text-dark); font-family: var(--dct-font-body); }
.dct-table-wrapper th, .dct-table-wrapper td { border-color: var(--dct-color-border); color: var(--dct-color-text-dark); }
.dct-table-wrapper th {
    background-color: var(--dct-color-primary);
    color: var(--dct-color-text-light);
    font-family: var(--dct-font-body);
    font-weight: 700; /* Más corporativo */
    border-bottom: 2px solid var(--dct-color-primary);
}
.dct-table-wrapper tbody tr:nth-child(odd) { background-color: var(--dct-body-bg); } /* Usa fondo base (blanco) */
.dct-table-wrapper tbody tr:hover { background-color: var(--dct-color-bg-light-2); } /* Hover sutil en gris claro */

/* Stack */
@media (max-width: 700px) {
  .dct-table--stack table tr { border-color: var(--dct-color-border); background: var(--dct-color-bg-light-2); }
  .dct-table--stack table td { border-bottom-color: var(--dct-color-border); color: var(--dct-color-text-dark);}
  .dct-table--stack table td::before { color: var(--dct-color-primary); 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); }
}

/* KBD: Limpio */
.dct-kbd { background-color: var(--dct-color-bg-light-2); color: var(--dct-color-text-dark); border-color: var(--dct-color-border); font-family: var(--dct-font-code); box-shadow: 1px 1px 1px rgba(0,0,0,0.05); }

/* Inline Code: Limpio */
.dct-inline-code { background-color: var(--dct-color-bg-light-2); color: var(--dct-color-text-medium); border-color: var(--dct-color-border); font-family: var(--dct-font-code); }

/* Card: Mayor radio y sombra limpia */
.dct-card {
    background-color: var(--dct-color-bg-light-1);
    border-color: var(--dct-color-border);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    border-radius: 8px; /* Mayor redondeo */
}
.dct-card-title { color: var(--dct-color-primary); border-bottom-color: var(--dct-color-border); font-family: var(--dct-font-headings); }
.dct-card-content { color: var(--dct-color-text-dark); font-family: var(--dct-font-body); }

/* Pros Cons List: Limpio y utiliza acentos de marca */
.dct-pros-cons-list { background-color: var(--dct-color-bg-light-1); border-color: var(--dct-color-border); border-radius: 8px; }
.dct-list-pros .dct-pros-cons-title { background-color: rgba(var(--dct-color-primary-rgb), 0.1); color: var(--dct-color-primary); border-bottom-color: rgba(var(--dct-color-primary-rgb), 0.3); }
.dct-list-pros li::before { content: '✓'; color: var(--dct-color-primary); } /* Púrpura (éxito) */
.dct-list-cons .dct-pros-cons-title { background-color: rgba(var(--dct-color-danger-rgb), 0.1); color: var(--dct-color-danger); border-bottom-color: rgba(var(--dct-color-danger-rgb), 0.3); }
.dct-list-cons li::before { content: '✕'; color: var(--dct-color-danger); } /* Rojo (falla/contra) */

/* Steps List: Limpio y corporativo */
.dct-steps ol::before { background-color: var(--dct-color-primary); } /* Línea Púrpura */
.dct-steps li { color: var(--dct-color-text-dark); font-family: var(--dct-font-body); }
.dct-steps li:last-child::after { background: var(--dct-body-bg, #ffffff); } /* Ocultar línea con fondo blanco */
.dct-steps li::before { background-color: var(--dct-color-primary); color: var(--dct-color-text-light); font-family: var(--dct-font-body); font-weight: 700; }

/* TLDR: Destacado, minimalista, con borde púrpura fuerte */
.dct-tldr-box {
    border-left-color: var(--dct-color-primary); /* Borde púrpura fuerte */
    background-color: rgba(106, 62, 190, 0.03); /* Fondo blanco con tinte púrpura */
    border: 1px solid rgba(106, 62, 190, 0.1);
    border-right: none;
    border-top: none;
    border-bottom: none;
    border-radius: 0.5rem;
    box-shadow: none; /* Eliminar sombra para un look plano/limpio */
}
.dct-tldr-title {
    color: var(--dct-color-primary); /* Título en Púrpura */
    font-weight: 700;
}
.dct-tldr-content strong {
    color: var(--dct-color-primary);
}

/* Efectos de Enlace: Limpios y profesionales */
/* Usamos el secondary (Naranja) solo para el hover si es un enlace de interacción */
.divicon-textos, body.dct-theme-agencia-light, :root {
    --link-1: var(--dct-color-primary); /* Púrpura */
    --link-2: var(--dct-color-secondary); /* Naranja */
    --link-3: rgba(var(--dct-color-primary-rgb), 0.2); /* Púrpura muy sutil */
    --text: var(--dct-color-text-dark);
    --link-hover-text: var(--dct-color-primary); /* Mantener púrpura en hover */
    --link-hover-text-darkbg: var(--dct-color-text-light);
}
.dct-link-style-2:hover { color: var(--dct-color-secondary) !important; } /* Excepción: Hover a Naranja */
.dct-link-style-5::before { background-color: var(--link-3); } /* Subrayado púrpura tenue */


/* --- Fin Rediseño SaaS Minimalista --- */