/* =============================================
   VARIABLES Y TEMAS (OSCURO POR DEFECTO)
   ============================================= */
:root {
    --fuente-principal: "Georgia", serif;
    --radio-borde-grande: 16px;
    --radio-borde-pequeno: 8px;
    --transicion-rapida: all 0.3s ease;
    --max-width: 800px;
    --color-primario: #28a745; /* Green for filled orbitals */
    --color-secundario: #e53636;
    --color-fondo: #000000;
    --color-superficie: #1c1c1e;
    --color-texto-principal: #f5f5f7;
    --color-texto-secundario: #86868b;
    --color-borde: #3a3a3c;
    --color-info-fondo: #1a2633;
    --color-info-borde: #264060;
    --color-info-texto: #b3d7ff;
    --sombra: 0 4px 25px rgba(0, 0, 0, 0.25);
    color-scheme: dark;
}

/* ... (El resto de los estilos base y de layout son iguales a la versión anterior) ... */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: var(--fuente-principal);
    background-color: var(--color-fondo);
    color: var(--color-texto-principal);
    line-height: 1.5;
    padding: 1.5rem 1rem;
    transition: background-color var(--transicion-rapida), color var(--transicion-rapida);
}
.container { max-width: var(--max-width); margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem; }
.main-header { text-align: center; }
.main-header h1 { font-size: clamp(1.75rem, 5vw, 2.25rem); font-weight: 700; }

/* PANEL DE APLICACIÓN */
.app-panel {
    background-color: var(--color-superficie);
    border-radius: var(--radio-borde-grande);
    border: 1px solid var(--color-borde);
    box-shadow: var(--sombra);
    padding: 1.5rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    transition: var(--transicion-rapida);
}
.result-display { text-align: center; }
.element-symbol-display { font-size: clamp(4rem, 15vw, 6rem); font-weight: 800; color: var(--color-primario); line-height: 1; }
.configuration-output { font-size: clamp(1rem, 4vw, 1.25rem); font-weight: 500; color: var(--color-texto-secundario); margin: 1rem 0 1.5rem; word-break: break-word; min-height: 1.5em; }
.info-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
.chip { background-color: var(--color-fondo); padding: 0.5rem 1rem; border-radius: var(--radio-borde-pequeno); border: 1px solid var(--color-borde); font-size: 0.9rem; color: var(--color-texto-secundario); }
.chip strong { font-weight: 600; color: var(--color-texto-principal); margin-left: 0.4rem; }
.controls-fieldset { border: none; padding-top: 1.5rem; border-top: 1px solid var(--color-borde); }
.input-group { display: flex; gap: 1rem; margin-bottom: 1rem; }
.input-item { flex: 1; }
.input-item label { font-size: 0.9rem; font-weight: 500; color: var(--color-texto-secundario); display: block; margin-bottom: 0.5rem; }
.input-field { width: 100%; padding: 0.75rem; font-size: 1rem; text-align: center; background-color: var(--color-fondo); border: 1px solid var(--color-borde); border-radius: var(--radio-borde-pequeno); color: var(--color-texto-principal); transition: var(--transicion-rapida); }
.input-field:focus { outline: none; border-color: var(--color-primario); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primario) 25%, transparent); }
.checkbox-item { display: flex; align-items: center; justify-content: center; gap: 0.75rem; cursor: pointer; }
.checkbox-item input { accent-color: var(--color-primario); width: 1.2em; height: 1.2em; cursor: pointer; }
.checkbox-item label { user-select: none; cursor: pointer; color: var(--color-texto-secundario); font-weight: 500; }

/* DIAGRAMA DE MOELLER */
.moeller-container { border-radius: var(--radio-borde-grande); border: 1px solid var(--color-borde); overflow: hidden; }
.moeller-toggle { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 1rem 1.5rem; font-size: 1.1rem; font-weight: 600; cursor: pointer; background-color: var(--color-superficie); border-bottom: 1px solid transparent; transition: border-color 0.2s; }
.moeller-container[open] > .moeller-toggle { border-color: var(--color-borde); }
.moeller-toggle::-webkit-details-marker { display: none; }
.moeller-toggle-icon { width: 1.5rem; height: 1.5rem; transition: transform var(--transicion-rapida); }
.moeller-container[open] .moeller-toggle-icon { transform: rotate(180deg); }
.moeller-diagram { padding: 1rem; background-color: var(--color-superficie); }
.moeller-canvas { display: block; width: 100%; user-select: none; color-scheme: inherit; }

/* Estilos para elementos SVG generados por JS */
.moeller-bg-arrow {
    stroke: var(--color-borde);
    stroke-width: 1.5;
    fill: none;
    marker-end: url(#arrowhead);
}

.moeller-arrowhead {
    fill: var(--color-borde);
}

.moeller-orbital-circle {
    fill: var(--color-superficie);
    stroke: var(--color-borde);
    stroke-width: 1.5;
    transition: fill 0.3s ease, stroke 0.3s ease;
}

.filled .moeller-orbital-circle {
    fill: color-mix(in srgb, var(--color-primario) 20%, transparent);
    stroke: var(--color-primario);
}

.last-filled .moeller-orbital-circle {
    fill: color-mix(in srgb, var(--color-secundario) 25%, transparent);
    stroke: var(--color-secundario);
}

.moeller-bg-orbital {
    font-family: "Georgia", serif;
    font-size: 16px;
    fill: var(--color-texto-secundario);
    text-anchor: middle;
    dominant-baseline: middle;
    transition: fill 0.3s ease, font-weight 0.3s ease;
}

.filled .moeller-bg-orbital {
    fill: var(--color-texto-principal);
    font-weight: bold;
}

.last-filled .moeller-bg-orbital {
    fill: var(--color-secundario);
    font-weight: bold;
}

.progress-path {
    fill: none;
    stroke: var(--color-secundario);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke-dashoffset 0.8s ease-in-out;
}

/* TARJETA DE DETALLES Y AVISO */
.details-card { background-color: var(--color-superficie); border-radius: var(--radio-borde-grande); border: 1px solid var(--color-borde); padding: 1.5rem; }
.card-title { font-size: 1.25rem; font-weight: 600; margin-bottom: 1rem; }
#element-info-table { width: 100%; border-collapse: collapse; }
#element-info-table td { padding: 0.8rem 0.25rem; border-bottom: 1px solid var(--color-borde); }
#element-info-table tr:last-child td { border-bottom: none; }
#element-info-table td:first-child { color: var(--color-texto-secundario); }
#element-info-table td:last-child { text-align: right; font-weight: 600; }
.disclaimer-notice { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem; border-radius: var(--radio-borde-pequeno); background-color: var(--color-info-fondo); border: 1px solid var(--color-info-borde); color: var(--color-info-texto); }
.disclaimer-icon { flex-shrink: 0; width: 1.5rem; height: 1.5rem; margin-top: 0.1rem; }
.disclaimer-text { font-size: 0.9rem; }
.disclaimer-text a { color: var(--color-primario); font-weight: 500; text-decoration: none; }
.disclaimer-text a:hover { text-decoration: underline; }
.error-message { display: none; padding: 1rem; margin-bottom: 1rem; color: var(--color-texto-principal); background-color: color-mix(in srgb, var(--color-secundario) 15%, transparent); border: 1px solid var(--color-secundario); border-radius: var(--radio-borde-pequeno); font-weight: 500; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }

@media (min-width: 640px) {
    .app-panel { grid-template-columns: 2fr 1fr; gap: 2.5rem; padding: 2rem; }
    .controls-fieldset { padding-top: 0; border-top: none; border-left: 1px solid var(--color-borde); padding-left: 2.5rem; display: flex; flex-direction: column; justify-content: center; }
    .input-group { flex-direction: column; }
}