body {
        font-family: Arial, sans-serif;
        margin: 0;
        background-color: #f4f4f4;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .container {
        width: 90%;
        max-width: 1200px;
        margin-bottom: 20px;
      }
      .container-tabla-periodica {
        width: 100%;
        max-width: 1200px;
        margin: 1rem auto;
        padding: 0 1%;
        box-sizing: border-box;
        perspective: 1500px;
      }
      h1 {
        text-align: center;
        color: #333;
      }

      .intro-copy {
        max-width: 800px;
        margin: 0 auto 20px;
        color: #555;
        font-size: 0.95rem;
        text-align: center;
      }

      .periodic-table {
        display: grid;
        grid-template-columns: repeat(18, 1fr);
        gap: 2px;
        margin-bottom: 15px;
        width: 100%;
      }
      .element {
        aspect-ratio: 1 / 1;
        position: relative;
        cursor: pointer;
        transition:
          transform 0.7s,
          box-shadow 0.4s,
          opacity 0.3s;
        transform-style: preserve-3d;
        border: 1px solid transparent;
      }

      .element:hover:not(.block-highlighted-element):not(.type-highlighted):not(
          .heisenberg-mode .element
        ) {
        /* Evitar doble efecto con heisenberg */
        transform: rotateY(180deg) scale(1.35);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
        z-index: 20;
      }
      .element.block-highlighted-element:hover,
      .element.type-highlighted:hover {
        transform: rotateY(180deg) scale(1.35);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
        z-index: 20;
      }

      .element-face {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        padding: 2px;
        box-sizing: border-box;
        border: 1px solid #888;
        border-radius: 4px;
      }

      .element-front {
        z-index: 2;
        padding-top: 10px;
        overflow: hidden;
        isolation: isolate;
        --phase-effect-color: #163b46;
      }

      .element-front > :not(.phase-visual) {
        z-index: 2;
      }

      .phase-visual {
        position: absolute;
        inset: 0;
        z-index: 0;
        width: 100%;
        height: 100%;
        border-radius: inherit;
        pointer-events: none;
      }

      .phase-solid-fill {
        fill: var(--phase-effect-color);
        opacity: 0.045;
      }

      .phase-solid-particles {
        opacity: 0.16;
      }

      .phase-solid-surface {
        fill: none;
        stroke: var(--phase-effect-color);
        stroke-width: 1.2;
        opacity: 0.17;
      }

      .phase-liquid-wave {
        fill: var(--phase-effect-color);
      }

      .phase-liquid-wave[data-wave-layer="back"] {
        opacity: 0.085;
      }

      .phase-liquid-wave[data-wave-layer="front"] {
        opacity: 0.15;
      }

      .phase-gas-particle {
        fill: var(--phase-effect-color);
        opacity: 0.24;
        transform-box: fill-box;
        transform-origin: center;
        animation: phase-gas-drift var(--gas-duration, 5s) ease-in-out
          var(--gas-delay, 0s) infinite alternate;
      }

      .phase-unknown-mark {
        position: absolute;
        right: 4px;
        bottom: 2px;
        z-index: 3;
        font-size: clamp(7px, 0.9vw, 10px);
        font-weight: 800;
        line-height: 1;
        opacity: 0.5;
      }

      .element.phase-estimated .phase-unknown-mark {
        opacity: 0.68;
      }

      @keyframes phase-gas-drift {
        0% {
          transform: translate(var(--gas-x1, -4px), var(--gas-y1, 3px))
            scale(0.88);
        }
        50% {
          opacity: 0.38;
        }
        100% {
          transform: translate(var(--gas-x2, 5px), var(--gas-y2, -5px))
            scale(1.12);
        }
      }

      .element-back {
        transform: rotateY(180deg);
        background-color: #fdfdfd;
        color: #333;
        font-size: clamp(5.5px, 0.85vw, 7.5px);
        line-height: 1.1;
        overflow-y: auto;
        justify-content: center;
        gap: 1px;
        padding: 3px;
      }

      .element-back .abundance-info {
        width: 95%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 2px;
      }

      .element-back .abundance-icon {
        font-size: clamp(7.5px, 1.25vw, 10.5px);
        flex-shrink: 0;
        width: 12px;
        text-align: center;
      }
      .element-back .abundance-text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex-grow: 1;
      }

      .atomic-number {
        position: absolute;
        top: 1px;
        left: 2px;
        font-size: clamp(6.5px, 1vw, 8.5px);
        font-weight: bold;
        opacity: 0.6;
        z-index: 5;
        color: inherit;
      }

      .symbol {
        font-size: clamp(9.5px, 1.7vw, 12.5px);
        font-weight: 700;
        margin-bottom: 1px;
      }
      .name {
        font-size: clamp(5.5px, 1vw, 7px);
        text-align: center;
        line-height: 1;
        word-break: break-word;
        margin-top: 0;
      }

      .empty {
        background-color: transparent;
        border: none;
        aspect-ratio: 1 / 1;
      }
      .f-placeholder {
        background-color: #f0f0f0;
        border: 1px dashed #ccc;
        cursor: pointer;
        aspect-ratio: 1 / 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: clamp(8px, 1.2vw, 10px);
        color: #777;
        padding: 2px;
        box-sizing: border-box;
        text-align: center;
        transition:
          opacity 0.3s,
          border-color 0.3s,
          box-shadow 0.3s,
          background-color 0.2s;
      }
      .f-placeholder:hover:not(.active-placeholder) {
        background-color: #e0e0e0;
      }
      .f-placeholder.active-placeholder {
        border-style: solid;
        border-width: 2px;
        border-color: #007bff !important;
        box-shadow: 0 0 10px rgba(0, 123, 255, 0.4);
      }

      .f-block-container {
        margin: 10px auto 0 auto;
        width: calc((100% / 18) * 15);
      }
      .f-block-label {
        font-size: clamp(10px, 1.5vw, 12px);
        color: #333;
        text-align: left;
        margin-bottom: 5px;
        font-weight: bold;
      }
      .f-block {
        display: grid;
        grid-template-columns: repeat(15, 1fr);
        gap: 2px;
        width: 100%;
        transition: opacity 0.3s;
      }
      .f-block.block-highlighted .element .element-front {
        outline: 3px solid #007bff;
        outline-offset: -2px;
      }
      .f-block .element:hover {
        transform: rotateY(180deg) scale(1.35);
        z-index: 20;
      }

      .legend {
        display: flex;
        flex-direction: column;
        gap: 14px;
        padding: 16px 18px;
        margin-top: 20px;
        background-color: #fff;
        border-radius: 12px;
        box-shadow: 0 3px 12px rgba(24, 42, 34, 0.08);
      }
      .legend-items {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px 10px;
        padding-top: 10px;
        border-top: 1px solid #eef2f0;
      }
      .legend-item {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: clamp(10px, 1.4vw, 11px);
        cursor: pointer;
        padding: 4px 7px;
        border-radius: 4px;
        transition: background-color 0.2s;
        border: 1px solid transparent;
      }
      .legend-item:hover {
        background-color: #e9ecef;
      }
      .legend-item input[type="checkbox"] {
        display: none;
      }
      .legend-color-box {
        width: 16px;
        height: 16px;
        border: 1px solid #777;
        border-radius: 3px;
        display: inline-block;
        flex-shrink: 0;
      }
      .legend-item input[type="checkbox"]:checked + .legend-color-box {
        outline: 2px solid #0056b3;
        outline-offset: 1px;
      }
      .legend-item input[type="checkbox"]:checked + .legend-color-box + span {
        font-weight: bold;
        color: #0056b3;
      }

      .element.type-highlighted .element-front {
        outline: 2.5px solid #198754;
        outline-offset: -2px;
      }
      .element.heisenberg-highlighted .element-front {
        /* No se usa directamente para resaltar, es un estado */
        /* No necesita estilo aquí si los estilos de .heisenberg-mode .element son suficientes */
      }

      .table-filtering
        .element:not(.type-highlighted):not(.block-highlighted-element):not(
          .heisenberg-special
        ),
      .table-filtering .f-placeholder:not(.active-placeholder) {
        opacity: 0.25;
        pointer-events: none;
      }
      .table-filtering
        .f-block:not(.block-highlighted)
        .element:not(.type-highlighted):not(.heisenberg-special) {
        opacity: 0.25;
        pointer-events: none;
      }
      .table-filtering
        .f-block.block-highlighted
        .element:not(.type-highlighted):not(.heisenberg-special) {
        opacity: 0.25;
        pointer-events: none;
      }
      .table-filtering .f-block.block-highlighted .element.type-highlighted,
      .table-filtering .f-block.block-highlighted .element.heisenberg-special,
      .element.type-highlighted.block-highlighted-element,
      .element.heisenberg-special.block-highlighted-element {
        opacity: 1 !important;
        pointer-events: auto !important;
      }

      .inputs {
        display: flex;
        gap: 15px;
        margin: 1.5rem 0;
        flex-wrap: wrap;
        justify-content: center;
      }
      .inputs label {
        display: flex;
        flex-direction: column;
        font-size: 1rem;
        color: #555;
        align-items: center;
      }
      .inputs input {
        width: 80px;
        padding: 5px;
        margin-top: 5px;
        border: 1px solid #ddd;
        border-radius: 4px;
      }
      .inputs button {
        padding: 8px 16px;
        background-color: #007bff;
        color: #fff;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        align-self: flex-end;
      }
      .inputs button:hover {
        background-color: #0056b3;
      }

      .atom-display-area {
        display: flex;
        flex-direction: column;
        gap: 20px;
        width: 100%;
      }
      .atom-view {
        --atom-view-center: #f8fbfc;
        --atom-view-middle: #e7eef0;
        --atom-view-edge: #cbd8dc;
        width: 100%;
        height: 300px;
        border: 1px solid #c6d2d3;
        border-radius: 12px;
        background:
          radial-gradient(
            circle at 50% 44%,
            var(--atom-view-center) 0%,
            var(--atom-view-middle) 48%,
            var(--atom-view-edge) 100%
          );
        box-shadow:
          inset 0 0 55px rgba(57, 81, 88, 0.08),
          0 3px 12px rgba(24, 42, 34, 0.09);
        cursor: grab;
        overflow: hidden;
        user-select: none;
        touch-action: none;
        box-sizing: border-box;
        transition:
          border-color 0.35s ease,
          box-shadow 0.35s ease;
      }
      .atom-view .atom-fallback {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        padding: 24px;
        box-sizing: border-box;
        text-align: center;
        font-size: 0.95rem;
        line-height: 1.5;
        color: #4a5a5f;
        cursor: default;
        user-select: text;
        touch-action: auto;
      }
      .atom-view canvas {
        display: block;
        width: 100%;
        height: 100%;
      }
      .atom-view:active {
        cursor: grabbing;
      }
      .atom-details {
        width: 100%;
        padding: 10px;
        border: 1px solid #d9e0dc;
        border-radius: 10px;
        background: #edf1ef;
        box-shadow: 0 3px 12px rgba(24, 42, 34, 0.1);
        font-size: 0.85rem;
        overflow-y: auto;
        scrollbar-color: #98a59f transparent;
        scrollbar-gutter: stable;
        box-sizing: border-box;
      }
      .atom-details p {
        line-height: 1.45;
      }
      .atom-details strong {
        color: #333;
      }
      .atom-details hr {
        border: 0;
        border-top: 1px solid #eee;
        margin: 12px 0;
      }
      .atom-details .sub-info {
        margin-left: 15px;
      }

      @media (min-width: 601px) {
        .atom-display-area {
          flex-direction: row;
        }
        .atom-view {
          width: 50%;
          height: 480px;
        }
        .atom-details {
          width: 50%;
          padding: 10px;
          font-size: 0.9rem;
          max-height: 480px;
        }
        .f-block-container,
        .f-block {
          display: grid;
        }

        .symbol {
          font-size: clamp(12.5px, 1.9vw, 15.5px);
        }
        .name {
          font-size: clamp(8.5px, 1.2vw, 10.5px);
        }
        .atomic-number {
          font-size: clamp(8.5px, 1.1vw, 10px);
        }

        .element-back {
          font-size: clamp(8px, 1vw, 9px);
        }
        .element-back .abundance-icon {
          font-size: clamp(10px, 1.4vw, 12px);
          width: 14px;
        }
      }

      @media (max-width: 600px) {
        .container-tabla-periodica {
          padding: 0 1%;
        }
        .periodic-table {
          grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
          gap: 2px;
        }

        .element {
          padding-top: 9px;
        }
        .element:hover:not(.heisenberg-mode .element) {
          /* No aplicar este hover si está en modo heisenberg */
          transform: scale(1.1);
          z-index: 20;
        }
        .element:hover .element-back {
          display: none;
        }
        .periodic-table .symbol {
          font-size: 0.65rem;
        }
        .periodic-table .name {
          font-size: 0.38rem;
        }
        .atomic-number {
          font-size: 0.55rem;
        }

        .f-block-container,
        .f-placeholder {
          display: none;
        }
        .inputs {
          flex-direction: column;
          align-items: center;
        }
        .inputs input,
        .inputs button {
          width: 80%;
          max-width: 200px;
        }
        .inputs button {
          margin-top: 10px;
        }
        .legend {
          gap: 8px;
          padding: 10px;
        }
        .legend-item {
          font-size: 10px;
        }
        .legend-color-box {
          width: 15px;
          height: 15px;
        }
        .element.type-highlighted .element-front,
        .element.heisenberg-highlighted .element-front {
          outline-width: 1.5px;
        }
      }

      body.heisenberg-mode {
        background: radial-gradient(
          circle,
          hsl(90, 67%, 22%) 10%,
          hsl(84, 71%, 7%) 40%,
          hsl(90, 100%, 8%) 100%
        );
        background-size: cover;
        color: #ffffff;
      }
      body.heisenberg-mode h1,
      body.heisenberg-mode .f-block-label,
      body.heisenberg-mode .legend-item span,
      body.heisenberg-mode .inputs label,
      body.heisenberg-mode .atom-details {
        color: #e0e0e0;
      }
      body.heisenberg-mode .atom-details strong {
        color: #f5f5f5;
      }
      body.heisenberg-mode .atom-details hr {
        border-top: 1px solid #444;
      }

      body.heisenberg-mode .element .element-front {
        background-color: hsla(113, 40%, 4%, 0.65) !important;
        color: hsla(120, 6%, 30%, 0.95) !important;
        border-color: hsla(120, 6%, 15%, 0.95) !important;
      }
      body.heisenberg-mode .element .atomic-number {
        color: hsla(120, 6%, 30%, 0.75) !important;
      }
      body.heisenberg-mode .element.heisenberg-special .element-front {
        background: linear-gradient(135deg, #3e8467, #1a432e) !important;
        color: #ffffff !important;
        border-color: #5db88c !important;
      }
      body.heisenberg-mode .element.heisenberg-special .atomic-number {
        color: #ffffff !important;
        opacity: 0.8;
      }
      body.heisenberg-mode .element.type-highlighted .element-front {
        background: linear-gradient(135deg, #3e8467, #1a432e) !important;
        color: #ffffff !important;
        border-color: #83c59a !important;
        outline: 2px solid #a9e8c1;
        outline-offset: -2px;
        box-shadow:
          inset 0 0 0 1px rgba(255, 255, 255, 0.14),
          0 0 13px rgba(93, 184, 140, 0.38);
      }
      body.heisenberg-mode .element.type-highlighted .atomic-number {
        color: #ffffff !important;
        opacity: 0.85;
      }
      body.heisenberg-mode
        .element:hover:not(.block-highlighted-element):not(.type-highlighted) {
        transform: rotateY(180deg) scale(1.35); /* Mantener el giro también en modo Heisenberg */
        box-shadow: 0 8px 30px rgba(50, 150, 100, 0.3);
      }
      body.heisenberg-mode .element .element-back {
        background-color: #101f15;
        color: #b0d4b9;
        border-color: #3e8467;
      }
      body.heisenberg-mode .element-back .abundance-icon {
        color: #83c59a;
      }
      body.heisenberg-mode .legend {
        background-color: rgba(16, 31, 21, 0.8);
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
      }
      body.heisenberg-mode .legend-item:hover {
        background-color: rgba(62, 132, 103, 0.3);
      }
      body.heisenberg-mode
        .legend-item
        input[type="checkbox"]:checked
        + .legend-color-box {
        outline-color: #83c59a;
      }
      body.heisenberg-mode
        .legend-item
        input[type="checkbox"]:checked
        + .legend-color-box
        + span {
        color: #83c59a;
      }
      body.heisenberg-mode .f-placeholder {
        background-color: hsla(113, 40%, 8%, 0.6) !important;
        color: hsla(120, 6%, 40%, 0.95) !important;
        border-color: hsla(120, 6%, 25%, 0.95) !important;
      }
      body.heisenberg-mode .f-placeholder.active-placeholder {
        border-color: #3e8467 !important;
        box-shadow: 0 0 10px rgba(62, 132, 103, 0.5);
      }

      /* V2: la casilla permanece estable; la información secundaria vive en un tooltip. */
      .element:hover,
      .f-block .element:hover,
      body.heisenberg-mode .element:hover {
        transform: translateY(-2px) scale(1.03) !important;
        box-shadow: 0 7px 18px rgba(0, 0, 0, 0.24) !important;
        z-index: 20;
      }
      .element-back {
        display: none !important;
      }
      .element.is-selected .element-front {
        outline: 2px solid rgba(10, 112, 130, 0.95);
        outline-offset: -2px;
        box-shadow:
          inset 0 0 0 1px rgba(255, 255, 255, 0.72),
          0 0 0 2px rgba(16, 132, 151, 0.2),
          0 0 14px rgba(12, 122, 141, 0.58);
      }
      body.heisenberg-mode .element.is-selected .element-front {
        outline: 3px solid #a9e8c1;
        outline-offset: -3px;
        box-shadow:
          inset 0 0 0 1px rgba(255, 255, 255, 0.16),
          0 0 15px rgba(93, 184, 140, 0.42);
      }
      .element:focus-visible {
        outline: 3px solid #006edb;
        outline-offset: 2px;
        z-index: 30;
      }

      .element-tooltip {
        position: fixed;
        z-index: 1000;
        width: min(260px, calc(100vw - 24px));
        padding: 12px 14px;
        border: 1px solid #c9c9c9;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.98);
        color: #26302c;
        box-shadow: 0 12px 34px rgba(0, 0, 0, 0.2);
        pointer-events: none;
      }
      .element-tooltip[hidden] {
        display: none;
      }
      .element-tooltip strong {
        display: block;
        margin-bottom: 7px;
        font-size: 0.85rem;
      }
      .element-tooltip dl {
        margin: 0;
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 4px 14px;
        font-size: 0.72rem;
      }
      .element-tooltip dt {
        color: #68716d;
      }
      .element-tooltip dd {
        margin: 0;
        font-weight: 700;
        text-align: right;
      }
      body.heisenberg-mode .element-tooltip {
        border-color: #3e8467;
        background: rgba(10, 27, 18, 0.98);
        color: #edf8f1;
        box-shadow: 0 12px 34px rgba(0, 0, 0, 0.48);
      }
      body.heisenberg-mode .element-tooltip dt {
        color: #91bda2;
      }

      .inputs select {
        min-width: 180px;
        max-width: 260px;
        padding: 5px;
        margin-top: 5px;
        border: 1px solid #ddd;
        border-radius: 4px;
        background: #fff;
        color: #333;
      }
      body.heisenberg-mode .inputs input,
      body.heisenberg-mode .inputs select {
        border-color: #3e684f;
        background: #101f15;
        color: #e7f4eb;
      }
      body.heisenberg-mode .atom-details {
        border-color: #294735;
        background: rgba(8, 22, 14, 0.88);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.34);
        scrollbar-color: #3e684f transparent;
      }
      body.heisenberg-mode .atom-view {
        --atom-view-center: #173a27;
        --atom-view-middle: #0d2417;
        --atom-view-edge: #061009;
        border-color: #3e7654;
        box-shadow:
          inset 0 0 65px rgba(0, 0, 0, 0.42),
          0 0 20px rgba(66, 150, 100, 0.2);
      }
      body.heisenberg-mode .inputs button {
        background: #2e7654;
      }
      body.heisenberg-mode .inputs button:hover {
        background: #3e8467;
      }

      .atom-details-header {
        --details-accent: #6f8279;
        --details-accent-text: #fff;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 13px;
        padding: 14px;
        border: 1px solid #d5ded9;
        border-radius: 11px;
        background:
          linear-gradient(
            135deg,
            color-mix(in srgb, var(--details-accent) 14%, white),
            #fff 56%
          );
        box-shadow: 0 2px 8px rgba(30, 48, 40, 0.07);
      }

      .atom-details-symbol {
        display: grid;
        width: 58px;
        height: 58px;
        place-items: center;
        border: 1px solid
          color-mix(in srgb, var(--details-accent) 70%, #526058);
        border-radius: 14px;
        background: var(--details-accent);
        color: var(--details-accent-text);
        box-shadow:
          inset 0 0 0 1px rgba(255, 255, 255, 0.35),
          0 4px 12px rgba(27, 43, 36, 0.14);
        font-size: 1.5rem;
        font-weight: 800;
      }

      .atom-details-kicker {
        display: block;
        margin-bottom: 2px;
        color: #66736d;
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 0.055em;
        text-transform: uppercase;
      }

      .atom-details-title {
        margin: 0;
        color: #1e2d27;
        font-size: 1.14rem;
        line-height: 1.15;
      }

      .atom-particle-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        margin-top: 8px;
      }

      .atom-particle-chip {
        padding: 3px 7px;
        border: 1px solid rgba(91, 111, 101, 0.22);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.68);
        color: #52615a;
        font-size: 0.65rem;
        white-space: nowrap;
      }

      .atom-particle-chip strong {
        color: #20342b;
      }

      .atom-electron-config {
        margin: 8px 0 0;
        color: #5b6862;
        font-size: 0.68rem;
      }

      .atom-electron-config strong {
        color: #263a31;
      }

      .atom-details-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        margin-top: 10px;
      }

      .detail-card {
        --card-accent: #688077;
        position: relative;
        min-width: 0;
        overflow: hidden;
        padding: 12px 13px 11px;
        border: 1px solid #d8e0dc;
        border-radius: 10px;
        background: #fff;
        box-shadow: 0 2px 7px rgba(27, 44, 36, 0.06);
      }

      .detail-card::before {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 3px;
        background: var(--card-accent);
        content: "";
      }

      .detail-card[data-card-kind="isotope"] {
        --card-accent: #2688a0;
      }

      .detail-card[data-card-kind="physical"] {
        --card-accent: #2d8a72;
      }

      .detail-card[data-card-kind="chemical"] {
        --card-accent: #92712c;
      }

      .detail-card[data-card-kind="abundance"] {
        --card-accent: #6876a8;
      }

      .detail-card[data-card-kind="history"] {
        --card-accent: #735f9a;
      }

      .detail-card-title {
        display: flex;
        align-items: center;
        gap: 7px;
        margin: 0 0 8px;
        color: #26362f;
        font-size: 0.79rem;
        letter-spacing: 0.01em;
      }

      .detail-card-title::before {
        width: 7px;
        height: 7px;
        border-radius: 2px;
        background: var(--card-accent);
        content: "";
        flex: 0 0 auto;
      }

      .detail-list {
        margin: 0;
      }

      .detail-list > div {
        display: grid;
        grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
        gap: 9px;
        align-items: start;
        padding: 6px 0;
        border-bottom: 1px solid #edf0ee;
      }

      .detail-list > div:last-child {
        padding-bottom: 0;
        border-bottom: 0;
      }

      .detail-list dt {
        color: #727d78;
        font-size: 0.67rem;
        line-height: 1.35;
      }

      .detail-list dd {
        margin: 0;
        color: #27342e;
        font-size: 0.72rem;
        font-weight: 650;
        line-height: 1.35;
        overflow-wrap: anywhere;
        text-align: right;
      }

      .detail-note {
        margin: 9px 0 0;
        padding: 8px 9px;
        border-radius: 7px;
        background: #f2f6f4;
        color: #58655f;
        font-size: 0.68rem;
      }

      .detail-copy + .detail-copy {
        margin-top: 10px;
        padding-top: 9px;
        border-top: 1px solid #edf0ee;
      }

      .detail-copy-label {
        display: block;
        margin-bottom: 3px;
        color: #707c76;
        font-size: 0.64rem;
        font-weight: 750;
        letter-spacing: 0.04em;
        text-transform: uppercase;
      }

      .detail-copy p {
        margin: 0;
        color: #303e37;
        font-size: 0.72rem;
      }

      .abundance-heading {
        display: flex;
        gap: 10px;
        align-items: flex-start;
        justify-content: space-between;
        margin-bottom: 10px;
      }

      .abundance-heading .detail-card-title {
        margin-bottom: 3px;
      }

      .abundance-intro {
        margin: 0;
        color: #69756f;
        font-size: 0.66rem;
        line-height: 1.35;
      }

      .abundance-scale-label {
        flex: 0 0 auto;
        padding: 3px 7px;
        border: 1px solid #d9dfdc;
        border-radius: 999px;
        background: #f4f6f5;
        color: #68736e;
        font-size: 0.58rem;
        font-weight: 700;
        white-space: nowrap;
      }

      .abundance-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
      }

      .abundance-chart {
        --abundance-color: #6876a8;
        min-width: 0;
        padding: 10px;
        border: 1px solid
          color-mix(in srgb, var(--abundance-color) 22%, #dfe4e1);
        border-radius: 9px;
        background: color-mix(
          in srgb,
          var(--abundance-color) 5%,
          #fff
        );
      }

      .abundance-chart[data-abundance-kind="universe"] {
        --abundance-color: #6659bd;
      }

      .abundance-chart[data-abundance-kind="crust"] {
        --abundance-color: #b36c31;
      }

      .abundance-chart[data-abundance-kind="body"] {
        --abundance-color: #b84f70;
      }

      .abundance-chart-header {
        display: flex;
        gap: 7px;
        align-items: center;
      }

      .abundance-chart-icon {
        display: grid;
        width: 25px;
        height: 25px;
        flex: 0 0 auto;
        place-items: center;
        border-radius: 7px;
        background: color-mix(
          in srgb,
          var(--abundance-color) 13%,
          white
        );
        color: var(--abundance-color);
      }

      .abundance-chart-icon svg {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 1.8;
      }

      .abundance-chart-label {
        min-width: 0;
        color: #626e68;
        font-size: 0.61rem;
        font-weight: 800;
        letter-spacing: 0.045em;
        line-height: 1.2;
        text-transform: uppercase;
      }

      .abundance-chart-value {
        min-height: 1.4em;
        margin: 8px 0 7px;
        color: #27352f;
        font-size: 0.91rem;
        font-weight: 800;
        line-height: 1.25;
        overflow-wrap: anywhere;
      }

      .abundance-track {
        position: relative;
        height: 7px;
        overflow: hidden;
        border-radius: 999px;
        background: #e3e8e5;
      }

      .abundance-fill {
        display: block;
        width: var(--abundance-fill, 0%);
        height: 100%;
        min-width: 0;
        border-radius: inherit;
        background: linear-gradient(
          90deg,
          color-mix(in srgb, var(--abundance-color) 72%, white),
          var(--abundance-color)
        );
        box-shadow: 0 0 7px
          color-mix(in srgb, var(--abundance-color) 35%, transparent);
        transform-origin: left center;
        animation: abundance-grow 520ms cubic-bezier(0.22, 0.8, 0.3, 1)
          both;
      }

      .abundance-chart.is-trace .abundance-fill,
      .abundance-chart.is-zero .abundance-fill {
        width: 0;
        min-width: 0;
        box-shadow: none;
      }

      .abundance-chart.is-missing {
        border-style: dashed;
        background: #fafbfa;
      }

      .abundance-chart.is-missing .abundance-chart-icon {
        background: #f0f2f1;
        color: #9aa39f;
      }

      .abundance-chart.is-missing .abundance-chart-value,
      .abundance-chart.is-missing .abundance-chart-label {
        color: #89928e;
      }

      .abundance-chart.is-missing .abundance-track {
        background: repeating-linear-gradient(
          135deg,
          #e7eae8 0 5px,
          #f3f5f4 5px 10px
        );
      }

      .abundance-chart-meta {
        display: flex;
        gap: 6px;
        align-items: center;
        justify-content: space-between;
        min-height: 1.35em;
        margin-top: 6px;
        color: #747f7a;
        font-size: 0.58rem;
        line-height: 1.25;
      }

      .abundance-chart-rank {
        color: var(--abundance-color);
        font-weight: 800;
        text-align: right;
      }

      .abundance-note {
        margin: 8px 0 0;
        color: #77817c;
        font-size: 0.58rem;
        line-height: 1.35;
      }

      @keyframes abundance-grow {
        from {
          transform: scaleX(0);
          opacity: 0.45;
        }
        to {
          transform: scaleX(1);
          opacity: 1;
        }
      }

      @media (min-width: 1000px) {
        .atom-details-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .detail-card--wide {
          grid-column: 1 / -1;
        }
        .abundance-grid {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }
      }

      @media (max-width: 430px) {
        .abundance-heading {
          display: block;
        }
        .abundance-scale-label {
          display: inline-block;
          margin-top: 6px;
        }
      }

      body.heisenberg-mode .atom-details-header,
      body.heisenberg-mode .detail-card {
        border-color: #294735;
        background: #101f15;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.24);
      }

      body.heisenberg-mode .atom-details-header {
        background: linear-gradient(135deg, #173124, #101f15 58%);
      }

      body.heisenberg-mode .atom-details-symbol {
        --details-accent: #2f7655 !important;
        --details-accent-text: #fff !important;
        border-color: #5db88c;
      }

      body.heisenberg-mode .atom-details-kicker,
      body.heisenberg-mode .atom-electron-config,
      body.heisenberg-mode .detail-list dt,
      body.heisenberg-mode .detail-copy-label {
        color: #91bda2;
      }

      body.heisenberg-mode .atom-details-title,
      body.heisenberg-mode .atom-electron-config strong,
      body.heisenberg-mode .detail-card-title,
      body.heisenberg-mode .detail-list dd,
      body.heisenberg-mode .detail-copy p {
        color: #edf8f1;
      }

      body.heisenberg-mode .atom-particle-chip {
        border-color: #315d43;
        background: #173124;
        color: #b4d6c0;
      }

      body.heisenberg-mode .atom-particle-chip strong {
        color: #fff;
      }

      body.heisenberg-mode .detail-card {
        --card-accent: #5db88c !important;
      }

      body.heisenberg-mode .detail-list > div,
      body.heisenberg-mode .detail-copy + .detail-copy {
        border-color: #294735;
      }

      body.heisenberg-mode .detail-note {
        background: #173124;
        color: #b4d6c0;
      }

      body.heisenberg-mode .abundance-intro,
      body.heisenberg-mode .abundance-note,
      body.heisenberg-mode .abundance-chart-meta {
        color: #91bda2;
      }

      body.heisenberg-mode .abundance-scale-label {
        border-color: #315d43;
        background: #173124;
        color: #b4d6c0;
      }

      body.heisenberg-mode .abundance-chart {
        --abundance-color: #5db88c !important;
        border-color: #315d43;
        background: #13281c;
      }

      body.heisenberg-mode .abundance-chart-icon {
        background: #1c3c2a;
        color: #83d0a3;
      }

      body.heisenberg-mode .abundance-chart-label,
      body.heisenberg-mode .abundance-chart-value {
        color: #edf8f1;
      }

      body.heisenberg-mode .abundance-track {
        background: #294735;
      }

      body.heisenberg-mode .abundance-chart.is-missing {
        border-color: #294735;
        background: rgba(16, 31, 21, 0.64);
      }

      body.heisenberg-mode .abundance-chart.is-missing .abundance-track {
        background: repeating-linear-gradient(
          135deg,
          #223c2c 0 5px,
          #183022 5px 10px
        );
      }

      @media (prefers-reduced-motion: reduce) {
        .abundance-fill {
          animation: none;
        }
      }

      .temperature-control {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        border: none;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        color: #26302c;
      }

      .temperature-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        margin-bottom: 6px;
      }

      .temperature-heading > div,
      .temperature-lower-row,
      .temperature-presets,
      .phase-summary {
        min-width: 0;
      }

      .temperature-heading h2 {
        margin: 0;
        font-size: 0.95rem;
        font-weight: 700;
        display: inline-block;
      }

      .temperature-heading p {
        display: inline-block;
        margin: 0 0 0 8px;
        color: #68716d;
        font-size: 0.72rem;
      }

      .temperature-output {
        min-width: 80px;
        color: #173e4a;
        font-size: 1.15rem;
        font-weight: 800;
        line-height: 1;
        text-align: right;
        white-space: nowrap;
      }

      .temperature-controls-row {
        display: grid;
        grid-template-columns: minmax(180px, 1fr) auto;
        align-items: center;
        gap: 14px;
      }

      .temperature-range {
        width: 100%;
        accent-color: #146c7c;
        cursor: ew-resize;
      }

      .temperature-exact {
        display: flex;
        align-items: center;
        gap: 5px;
        color: #555;
        font-size: 0.76rem;
        white-space: nowrap;
      }

      .temperature-input-wrap {
        display: inline-flex;
        align-items: center;
        overflow: hidden;
        border: 1px solid #bcc6c1;
        border-radius: 6px;
        background: #fff;
      }

      .temperature-number {
        width: 70px;
        padding: 4px 4px 4px 6px;
        border: 0;
        background: transparent;
        color: inherit;
        font: inherit;
        font-size: 0.82rem;
        text-align: right;
      }

      .temperature-number:focus {
        outline: 2px solid #15788b;
        outline-offset: -2px;
      }

      .temperature-unit {
        padding-right: 6px;
        color: #68716d;
        font-size: 0.8rem;
      }

      .temperature-lower-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 6px 12px;
        margin-top: 6px;
      }

      .temperature-presets,
      .phase-summary {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 5px;
      }

      .temperature-preset {
        padding: 3px 7px;
        border: 1px solid #c8d0cc;
        border-radius: 999px;
        background: #f7f9f8;
        color: #35433d;
        cursor: pointer;
        font-size: 0.66rem;
      }

      .temperature-preset:hover,
      .temperature-preset.is-active {
        border-color: #287988;
        background: #e4f3f5;
        color: #0d5967;
      }

      .phase-count {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 0.66rem;
        white-space: nowrap;
      }

      .phase-count::before {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #6d7a74;
        content: "";
      }

      .phase-count[data-phase="solido"]::before {
        border-radius: 2px;
        background: #596c73;
      }

      .phase-count[data-phase="liquido"]::before {
        background: #168ba0;
      }

      .phase-count[data-phase="gas"]::before {
        border: 1px solid #66727d;
        background: transparent;
      }

      .phase-count[data-phase="desconocido"]::before {
        background: #b1b6b3;
      }

      body.heisenberg-mode .legend {
        border-color: #315d43;
        background: rgba(16, 31, 21, 0.92);
        color: #edf8f1;
        box-shadow: 0 3px 15px rgba(0, 0, 0, 0.28);
      }

      body.heisenberg-mode .legend-items {
        border-top-color: #1f3d2b;
      }

      body.heisenberg-mode .temperature-control {
        color: #edf8f1;
      }

      body.heisenberg-mode .temperature-heading p,
      body.heisenberg-mode .temperature-exact,
      body.heisenberg-mode .temperature-unit,
      body.heisenberg-mode .temperature-note {
        color: #91bda2;
      }

      body.heisenberg-mode .temperature-output {
        color: #83d5a1;
      }

      body.heisenberg-mode .temperature-range {
        accent-color: #5db88c;
      }

      body.heisenberg-mode .temperature-input-wrap {
        border-color: #3e684f;
        background: #101f15;
      }

      body.heisenberg-mode .temperature-preset {
        border-color: #3e684f;
        background: #173124;
        color: #c9e7d3;
      }

      body.heisenberg-mode .temperature-preset:hover,
      body.heisenberg-mode .temperature-preset.is-active {
        border-color: #83c59a;
        background: #244c35;
        color: #fff;
      }

      body.heisenberg-mode .element-front {
        --phase-effect-color: #78d99b !important;
      }

      body.heisenberg-mode
        .element:not(.heisenberg-special)
        .phase-visual {
        opacity: 0.32;
      }

      @media (prefers-reduced-motion: reduce) {
        .phase-gas-particle {
          animation: none;
        }
      }

      @media (max-width: 768px) {
      .skip-link {
        position: absolute;
        top: -9999px;
        left: 1rem;
        z-index: 10000;
        padding: 0.75rem 1.25rem;
        background: #111;
        color: #fff;
        font-size: 0.95rem;
        font-weight: 600;
        text-decoration: none;
        border-radius: 4px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        transition: top 0.2s ease-in-out;
      }
      .skip-link:focus,
      .skip-link:focus-visible {
        top: 1rem;
        outline: 2px solid #00c8ff;
        outline-offset: 2px;
      }
      body {
          width: 100%;
          overflow-x: hidden;
        }
        body > h1,
        body > p {
          max-width: calc(100vw - 24px) !important;
          box-sizing: border-box;
        }
        .temperature-control {
          width: 100%;
          max-width: 100%;
          padding: 0;
        }
        .temperature-controls-row {
          grid-template-columns: 1fr;
          gap: 8px;
        }
        .temperature-heading {
          align-items: center;
        }
        .temperature-lower-row {
          align-items: flex-start;
          flex-direction: column;
          gap: 8px;
        }
        .temperature-presets,
        .phase-summary {
          width: 100%;
        }
        .container-tabla-periodica {
          width: 100vw;
          max-width: 100vw;
          min-width: 0;
          overflow-x: hidden;
          padding: 0 12px 10px;
        }
        .container {
          min-width: 0;
        }
        .periodic-table {
          width: 100%;
          min-width: 0;
          grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
          gap: 4px;
        }
        .periodic-table .element {
          min-width: 0;
          padding-top: 0;
        }
        .periodic-table .symbol {
          font-size: clamp(0.78rem, 3.8vw, 1rem);
        }
        .periodic-table .name {
          font-size: clamp(0.48rem, 2.35vw, 0.63rem);
          line-height: 1.08;
        }
        .periodic-table .atomic-number {
          font-size: clamp(0.5rem, 2.2vw, 0.63rem);
        }
        .f-placeholder {
          display: none !important;
        }
        .f-block-container {
          display: none !important;
        }
        .legend {
          width: 100%;
          min-width: 0;
          box-sizing: border-box;
        }
      }

      /* Ficha de elemento: panel contextual para consultar sin abandonar la tabla. */
      body.workspace-open {
        overflow: hidden;
      }

      .element-workspace-backdrop {
        position: fixed;
        inset: 0;
        z-index: 998;
        border: 0;
        background: rgba(18, 28, 24, 0.52);
        opacity: 0;
        visibility: hidden;
        cursor: pointer;
        transition:
          opacity 220ms ease,
          visibility 220ms ease;
      }

      .element-workspace {
        position: fixed;
        inset: 0 0 0 auto;
        z-index: 999;
        display: flex;
        width: min(820px, 94vw);
        height: 100dvh;
        flex-direction: column;
        overflow: hidden;
        border-left: 1px solid #cbd5d0;
        background: #f4f7f5;
        box-shadow: -18px 0 55px rgba(18, 35, 27, 0.22);
        transform: translateX(105%);
        visibility: hidden;
        transition:
          transform 260ms cubic-bezier(0.22, 0.8, 0.3, 1),
          visibility 260ms ease;
      }

      body.workspace-open .element-workspace-backdrop {
        opacity: 1;
        visibility: visible;
      }

      body.workspace-open .element-workspace {
        transform: translateX(0);
        visibility: visible;
      }

      .workspace-toolbar {
        display: flex;
        min-height: 54px;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 0 18px;
        border-bottom: 1px solid #d7dfdb;
        background: rgba(255, 255, 255, 0.96);
      }

      .workspace-toolbar-copy {
        min-width: 0;
      }

      .workspace-eyebrow {
        display: block;
        color: #718079;
        font-size: 0.61rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .workspace-toolbar strong {
        color: #203029;
        font-size: 0.9rem;
      }

      .workspace-close {
        display: grid;
        width: 36px;
        height: 36px;
        flex: 0 0 auto;
        place-items: center;
        border: 1px solid #cbd5d0;
        border-radius: 50%;
        background: #fff;
        color: #32423b;
        cursor: pointer;
        font-size: 1.35rem;
        line-height: 1;
      }

      .workspace-close:hover {
        border-color: #70827a;
        background: #edf2ef;
      }

      .workspace-tabs {
        display: flex;
        flex: 0 0 auto;
        gap: 4px;
        overflow-x: auto;
        padding: 8px 12px;
        border-bottom: 1px solid #d7dfdb;
        background: #fff;
        scrollbar-width: none;
      }

      .workspace-tabs::-webkit-scrollbar {
        display: none;
      }

      .workspace-tab {
        flex: 1 0 auto;
        padding: 8px 11px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: #63716b;
        cursor: pointer;
        font-size: 0.72rem;
        font-weight: 750;
        white-space: nowrap;
      }

      .workspace-tab:hover {
        background: #eef3f0;
        color: #26372f;
      }

      .workspace-tab[aria-selected="true"] {
        background: #dcecef;
        color: #0d5b69;
      }

      .element-workspace .container {
        width: 100%;
        max-width: none;
        min-height: 0;
        margin: 0;
        padding: 16px;
        overflow: auto;
        box-sizing: border-box;
      }

      .element-workspace .atom-display-area {
        display: grid;
        grid-template-columns: minmax(260px, 0.78fr) minmax(340px, 1.22fr);
        gap: 14px;
        align-items: start;
      }

      .element-workspace .atom-stage {
        position: sticky;
        top: 0;
        min-width: 0;
      }

      .element-workspace .inputs {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
        margin: 0 0 10px;
        padding: 10px;
        border: 1px solid #d9e0dc;
        border-radius: 10px;
        background: #fff;
      }

      .element-workspace .inputs label:first-child,
      .element-workspace .inputs button {
        grid-column: 1 / -1;
      }

      .element-workspace .inputs label {
        min-width: 0;
        align-items: stretch;
        color: #69756f;
        font-size: 0.64rem;
      }

      .element-workspace .inputs input,
      .element-workspace .inputs select,
      .element-workspace .inputs button {
        width: 100%;
        max-width: none;
        min-width: 0;
        box-sizing: border-box;
      }

      .element-workspace .inputs select {
        max-width: none;
      }

      .element-workspace .inputs button {
        margin-top: 2px;
      }

      .element-workspace .atom-view {
        width: 100%;
        height: min(38vh, 310px);
      }

      .element-workspace .atom-details {
        width: 100%;
        max-height: none;
        padding: 0;
        overflow: visible;
        border: 0;
        background: transparent;
        box-shadow: none;
      }

      .element-workspace[data-active-tab="summary"]
        .detail-card:not([data-card-kind="identity"]):not(
          [data-card-kind="isotope"]
        ),
      .element-workspace[data-active-tab="properties"]
        .detail-card:not([data-card-kind="physical"]):not(
          [data-card-kind="chemical"]
        ),
      .element-workspace[data-active-tab="abundance"]
        .detail-card:not([data-card-kind="abundance"]),
      .element-workspace[data-active-tab="history"]
        .detail-card:not([data-card-kind="history"]) {
        display: none;
      }

      .element-workspace[data-active-tab="atom"] .atom-details-grid {
        display: none;
      }

      .element-workspace .atom-details-grid {
        grid-template-columns: minmax(0, 1fr);
      }

      .element-workspace .detail-card--wide {
        grid-column: auto;
      }

      body.heisenberg-mode .element-workspace {
        border-color: #315d43;
        background: #09170f;
        box-shadow: -18px 0 55px rgba(0, 0, 0, 0.48);
      }

      body.heisenberg-mode .workspace-toolbar,
      body.heisenberg-mode .workspace-tabs {
        border-color: #294735;
        background: #101f15;
      }

      body.heisenberg-mode .workspace-eyebrow,
      body.heisenberg-mode .workspace-tab {
        color: #91bda2;
      }

      body.heisenberg-mode .workspace-toolbar strong {
        color: #edf8f1;
      }

      body.heisenberg-mode .workspace-close {
        border-color: #3e684f;
        background: #173124;
        color: #edf8f1;
      }

      body.heisenberg-mode .workspace-tab:hover {
        background: #173124;
        color: #fff;
      }

      body.heisenberg-mode .workspace-tab[aria-selected="true"] {
        background: #244c35;
        color: #a9e8c1;
      }

      body.heisenberg-mode .element-workspace .inputs {
        border-color: #294735;
        background: #101f15;
      }

      @media (max-width: 680px) {
        .element-workspace {
          inset: 0;
          width: 100vw;
          border-left: 0;
          transform: translateY(105%);
        }

        .workspace-toolbar {
          min-height: 50px;
          padding: 0 12px;
        }

        .workspace-tabs {
          padding: 7px 8px;
        }

        .workspace-tab {
          padding: 8px 10px;
        }

        .element-workspace .container {
          padding: 10px 12px 24px;
        }

        .element-workspace .atom-display-area {
          display: block;
        }

        .element-workspace .atom-stage {
          position: static;
        }

        .element-workspace:not([data-active-tab="atom"]) .atom-stage {
          display: none;
        }

        .element-workspace[data-active-tab="atom"] .atom-details-header {
          margin-top: 10px;
        }

        .element-workspace .atom-view {
          height: min(39vh, 300px);
        }

        .element-workspace .atom-details-header {
          position: sticky;
          top: -10px;
          z-index: 2;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .element-workspace,
        .element-workspace-backdrop {
          transition: none;
        }
      }

      .quiz-entry {
        display: flex;
        justify-content: center;
        margin: -5px auto 18px;
      }

      .quiz-entry-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 9px 14px;
        border: 1px solid #c797dc;
        border-radius: 10px;
        background: linear-gradient(135deg, #f2dffc, #ead8f4);
        color: #650094;
        box-shadow: 0 3px 10px rgba(94, 29, 120, 0.11);
        font-size: 0.76rem;
        font-weight: 800;
        text-decoration: none;
        transition:
          transform 160ms ease,
          box-shadow 160ms ease;
      }

      .quiz-entry-link:hover {
        box-shadow: 0 6px 16px rgba(94, 29, 120, 0.17);
        transform: translateY(-2px);
      }

      .quiz-entry-link:focus-visible {
        outline: 3px solid rgba(147, 0, 211, 0.28);
        outline-offset: 2px;
      }

      body.heisenberg-mode .quiz-entry-link {
        border-color: #4f9570;
        background: #173124;
        color: #a9e8c1;
      }

      /* Panel abierto: el átomo ocupa el centro y las tarjetas lo rodean. */
      .element-dashboard {
        width: min(96%, 1440px);
        max-width: 1440px;
        margin: 24px auto 32px;
      }

      .element-dashboard .atom-display-area,
      .element-dashboard .atom-details,
      .element-dashboard .atom-details-grid {
        display: contents;
      }

      .element-dashboard .atom-display-area {
        width: 100%;
      }

      .element-dashboard {
        display: grid;
        grid-template-columns:
          minmax(250px, 0.85fr)
          minmax(360px, 1.3fr)
          minmax(250px, 0.85fr);
        grid-template-areas:
          "hero hero hero"
          "left atom right"
          "abundance abundance abundance"
          "history history history";
        gap: 14px;
        align-items: start;
      }

      .element-dashboard .atom-details,
      .element-dashboard .atom-details-grid {
        width: auto;
        max-height: none;
        padding: 0;
        overflow: visible;
        border: 0;
        background: transparent;
        box-shadow: none;
      }

      .element-dashboard .atom-details-header {
        grid-area: hero;
        grid-template-columns: auto minmax(210px, 0.7fr) minmax(560px, 1.3fr);
        align-items: center;
      }

      .element-dashboard .atom-stage {
        grid-area: atom;
        display: flex;
        min-width: 0;
        flex-direction: column;
        padding: 12px;
        border: 1px solid #d8e0dc;
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 3px 12px rgba(24, 42, 34, 0.08);
      }

      .element-dashboard .atom-view {
        width: 100%;
        height: 100%;
        min-height: 430px;
        flex: 1 1 auto;
      }

      .element-dashboard .inputs {
        display: grid;
        grid-template-columns:
          minmax(180px, 1.5fr)
          repeat(3, minmax(72px, 0.65fr))
          auto;
        gap: 8px;
        align-items: end;
        margin: 0;
        padding-left: 14px;
        border-left: 1px solid rgba(91, 111, 101, 0.2);
      }

      .element-dashboard .inputs label:first-child,
      .element-dashboard .inputs button {
        grid-column: auto;
      }

      .element-dashboard .inputs label {
        min-width: 0;
        align-items: stretch;
        font-size: 0.72rem;
      }

      .model-field-label {
        color: #66736d;
        font-weight: 700;
      }

      .model-field-hint {
        min-height: 1.15em;
        margin-top: 3px;
        color: #7b8781;
        font-size: 0.58rem;
        line-height: 1.15;
        overflow-wrap: anywhere;
      }

      .model-field.is-caution input,
      .model-field.is-caution select {
        border-color: #bd7a26;
        background: #fff9ef;
        box-shadow: 0 0 0 2px rgba(189, 122, 38, 0.1);
      }

      .model-field.is-info input,
      .model-field.is-info select {
        border-color: #2d8293;
        background: #f1fafb;
      }

      .element-dashboard .inputs input,
      .element-dashboard .inputs select,
      .element-dashboard .inputs button {
        width: 100%;
        max-width: none;
        min-width: 0;
        box-sizing: border-box;
      }

      .element-dashboard .inputs select {
        max-width: none;
      }

      .element-dashboard .inputs button {
        min-height: 31px;
        padding-inline: 13px;
        white-space: nowrap;
      }

      .model-status-badge {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        margin-top: 7px;
        padding: 4px 8px;
        border: 1px solid #92b9a6;
        border-radius: 999px;
        background: #edf8f2;
        color: #246247;
        font-size: 0.62rem;
        font-weight: 800;
      }

      .model-status-badge::before {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
        content: "";
      }

      .model-status-badge[data-tone="info"] {
        border-color: #8eb8c2;
        background: #eef8fa;
        color: #176679;
      }

      .model-status-badge[data-tone="warning"] {
        border-color: #d4ad70;
        background: #fff8eb;
        color: #8a5819;
      }

      .model-validation-card {
        --card-accent: #b1782e;
        grid-area: right;
        align-self: start;
      }

      .model-validation-summary {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 10px;
      }

      .model-validation-summary span {
        padding: 4px 7px;
        border-radius: 999px;
        background: #f3f6f4;
        color: #56635d;
        font-size: 0.64rem;
      }

      .model-validation-card .detail-note {
        line-height: 1.45;
      }

      .element-dashboard .detail-card {
        height: auto;
        box-sizing: border-box;
      }

      .element-dashboard .detail-column {
        display: flex;
        min-width: 0;
        flex-direction: column;
        gap: 14px;
        align-self: start;
      }

      .element-dashboard .detail-column:empty {
        display: none;
      }

      .element-dashboard .detail-column--left {
        grid-area: left;
      }

      .element-dashboard .detail-column--right {
        grid-area: right;
      }

      .element-dashboard [data-card-kind="abundance"] {
        grid-area: abundance;
      }

      .element-dashboard [data-card-kind="history"] {
        grid-area: history;
      }

      body.heisenberg-mode .element-dashboard .atom-stage {
        border-color: #294735;
        background: #101f15;
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.28);
      }

      body.heisenberg-mode .model-field-label,
      body.heisenberg-mode .model-field-hint {
        color: #91bda2;
      }

      body.heisenberg-mode .model-field.is-caution input,
      body.heisenberg-mode .model-field.is-caution select {
        border-color: #b68b42;
        background: #2d2615;
      }

      body.heisenberg-mode .model-field.is-info input,
      body.heisenberg-mode .model-field.is-info select {
        border-color: #4b9880;
        background: #13281c;
      }

      body.heisenberg-mode .model-validation-summary span {
        background: #173124;
        color: #b4d6c0;
      }

      @media (max-width: 1050px) {
        .element-dashboard {
          grid-template-columns: minmax(300px, 1fr) minmax(300px, 1fr);
          grid-template-areas:
            "hero hero"
            "atom atom"
            "left right"
            "abundance abundance"
            "history history";
        }

        .element-dashboard .atom-view {
          min-height: 390px;
        }

        .element-dashboard .atom-details-header {
          grid-template-columns: auto minmax(0, 1fr);
        }

        .element-dashboard .atom-details-header .inputs {
          grid-column: 1 / -1;
          width: 100%;
          margin-top: 10px;
          padding: 10px 0 0;
          border-top: 1px solid rgba(91, 111, 101, 0.2);
          border-left: 0;
          box-sizing: border-box;
        }
      }

      @media (min-width: 1051px) {
        .element-dashboard.model-nucleus-custom {
          grid-template-columns: minmax(460px, 1.5fr) minmax(290px, 0.75fr);
          grid-template-areas:
            "hero hero"
            "atom right";
        }
      }

      @media (max-width: 680px) {
        .element-dashboard {
          width: calc(100vw - 24px);
          grid-template-columns: minmax(0, 1fr);
          grid-template-areas:
            "hero"
            "atom"
            "left"
            "right"
            "abundance"
            "history";
          gap: 10px;
          margin-top: 16px;
        }

        .element-dashboard .atom-stage {
          padding: 10px;
        }

        .element-dashboard .atom-view {
          height: 330px;
          min-height: 330px;
        }

        .element-dashboard .inputs {
          grid-template-columns: repeat(3, minmax(0, 1fr));
          margin-bottom: 8px;
        }

        .element-dashboard .inputs label:first-child,
        .element-dashboard .inputs button {
          grid-column: 1 / -1;
        }

        .element-dashboard .detail-column {
          gap: 10px;
        }
      }

      /* Identidad Akutángulo: interfaz morada sin alterar colores científicos. */
      body:not(.heisenberg-mode) {
        background:
          radial-gradient(circle at 50% -18rem, #f1e2f8 0, transparent 38rem),
          #f7f3f9;
        color: #2d2431;
      }

      body:not(.heisenberg-mode) h1 {
        color: #2d2431;
      }

      body:not(.heisenberg-mode) .temperature-control,
      body:not(.heisenberg-mode) .legend,
      body:not(.heisenberg-mode) .element-dashboard .atom-stage {
        border-color: #e2d8e7;
        background-color: rgba(255, 255, 255, 0.96);
        box-shadow: 0 4px 14px rgba(70, 28, 86, 0.1);
      }

      body:not(.heisenberg-mode) .temperature-output {
        color: #650094;
      }

      body:not(.heisenberg-mode) .temperature-range {
        accent-color: #9300D3;
      }

      body:not(.heisenberg-mode) .temperature-number:focus {
        outline-color: #9300D3;
      }

      body:not(.heisenberg-mode) .temperature-preset:hover,
      body:not(.heisenberg-mode) .temperature-preset.is-active {
        border-color: #a84bcf;
        background: #f0dcfa;
        color: #650094;
      }

      body:not(.heisenberg-mode) .inputs button {
        background: #9300D3;
      }

      body:not(.heisenberg-mode) .inputs button:hover {
        background: #650094;
      }

      body:not(.heisenberg-mode)
        .legend-item
        input[type="checkbox"]:checked
        + .legend-color-box {
        outline-color: #9300D3;
      }

      body:not(.heisenberg-mode)
        .legend-item
        input[type="checkbox"]:checked
        + .legend-color-box
        + span {
        color: #650094;
      }

      body:not(.heisenberg-mode) .element.type-highlighted .element-front {
        outline-color: #9300D3;
      }

      body:not(.heisenberg-mode) .element.is-selected .element-front {
        outline-color: #9300D3;
        box-shadow:
          inset 0 0 0 1px rgba(255, 255, 255, 0.72),
          0 0 0 2px rgba(147, 0, 211, 0.18),
          0 0 14px rgba(147, 0, 211, 0.48);
      }

      body:not(.heisenberg-mode) .element:focus-visible {
        outline-color: #9300D3;
      }

      body:not(.heisenberg-mode) .atom-view {
        --atom-view-center: #fdfaff;
        --atom-view-middle: #f0e7f4;
        --atom-view-edge: #ddd0e3;
        border-color: #d8c9df;
        box-shadow:
          inset 0 0 55px rgba(90, 44, 108, 0.08),
          0 3px 12px rgba(70, 28, 86, 0.09);
      }

      body:not(.heisenberg-mode) .element-dashboard .atom-details-header {
        --details-accent: #9300D3 !important;
        --details-accent-text: #fff !important;
        border-color: #decfe5;
        background: linear-gradient(135deg, #f0dcfa, #fff 58%);
        box-shadow: 0 3px 12px rgba(70, 28, 86, 0.09);
      }

      body:not(.heisenberg-mode) .atom-details-kicker,
      body:not(.heisenberg-mode) .atom-electron-config,
      body:not(.heisenberg-mode) .model-field-label,
      body:not(.heisenberg-mode) .model-field-hint {
        color: #756c79;
      }

      body:not(.heisenberg-mode) .atom-details-title,
      body:not(.heisenberg-mode) .atom-electron-config strong {
        color: #2d2431;
      }

      body:not(.heisenberg-mode) .element-dashboard .inputs {
        border-left-color: rgba(147, 0, 211, 0.18);
      }

      body:not(.heisenberg-mode) .inputs input,
      body:not(.heisenberg-mode) .inputs select {
        border-color: #d9cbe0;
        background: #fff;
        color: #2d2431;
      }

      body:not(.heisenberg-mode) .model-field.is-info input,
      body:not(.heisenberg-mode) .model-field.is-info select {
        border-color: #a84bcf;
        background: #faf2fd;
      }

      body:not(.heisenberg-mode) .model-status-badge {
        border-color: #c38cda;
        background: #f0dcfa;
        color: #650094;
      }

      body:not(.heisenberg-mode) .model-status-badge[data-tone="info"] {
        border-color: #b667d5;
        background: #f5e8fb;
        color: #7610a5;
      }

      body:not(.heisenberg-mode) .detail-card {
        --card-accent: #9300D3;
        border-color: #e2d8e7;
        box-shadow: 0 2px 8px rgba(70, 28, 86, 0.07);
      }

      body:not(.heisenberg-mode) .detail-card[data-card-kind="isotope"] {
        --card-accent: #b14fe0;
      }

      body:not(.heisenberg-mode) .detail-card[data-card-kind="physical"] {
        --card-accent: #8c2aba;
      }

      body:not(.heisenberg-mode) .detail-card[data-card-kind="chemical"] {
        --card-accent: #6f218f;
      }

      body:not(.heisenberg-mode) .detail-card[data-card-kind="abundance"] {
        --card-accent: #a659c6;
      }

      body:not(.heisenberg-mode) .detail-card[data-card-kind="history"] {
        --card-accent: #65327c;
      }

      body:not(.heisenberg-mode) .detail-note,
      body:not(.heisenberg-mode) .model-validation-summary span {
        background: #f6f0f8;
        color: #655a69;
      }

      body:not(.heisenberg-mode) .detail-list > div,
      body:not(.heisenberg-mode) .detail-copy + .detail-copy {
        border-color: #f0e8f3;
      }

      body:not(.heisenberg-mode) .quiz-entry-link {
        border-color: #c797dc;
        background: linear-gradient(135deg, #f2dffc, #ead8f4);
        color: #650094;
      }