/* Evita conflictos de gestos/scroll con el canvas de JSmol */
#jsmol-container canvas {
  touch-action: none;
}
/**
 * geometria-molecular.css
 *
 * Hoja de estilos profesional y optimizada para el visualizador 3D.
 * Tema corporativo oscuro, coherente con el laboratorio.
 */

/* 1) Variables del tema */
:root {
  --fuente-principal: "Georgia", serif;
  --max-width: 1200px;
  --radio-lg: 16px;
  --radio-sm: 8px;
  --transicion: 0.25s ease;
  --sombra: 0 8px 30px rgba(0,0,0,.35);

  --color-primario: #28a745;
  --color-acento: #3498db;
  --color-peligro: #e53636;

  --color-fondo: #000000;
  --color-superficie: #1c1c1e;
  --color-superficie-2: #0f1113;
  --color-borde: #303033;
  --color-texto: #f5f5f7;
  --color-texto-2: #a0a0a5;
  color-scheme: dark;
}

/* 2) Reset y base */
*,*::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);line-height:1.5;padding:1.25rem 1rem}
.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.8rem,5vw,2.4rem);font-weight:700}
.main-header .subtitle{color:var(--color-texto-2);margin-top:.4rem}

/* 3) Panel principal */
.app-panel{background:linear-gradient(180deg,var(--color-superficie) 0%,var(--color-superficie-2) 100%);border-radius:var(--radio-lg);border:1px solid var(--color-borde);box-shadow:var(--sombra);padding:1.25rem;display:grid;grid-template-columns:1fr;gap:1.5rem}
@media (min-width: 992px){.app-panel{grid-template-columns:2fr 1fr;padding:1.75rem;gap:2rem}}

/* 4) Buscador */
.search-form{display:flex;flex-direction:column;gap:.75rem}
.input-group{display:flex;gap:.75rem}
.input-field{flex:1;min-width:220px;padding:.75rem 1rem;font-size:1rem;background-color:var(--color-fondo);border:1px solid var(--color-borde);border-radius:var(--radio-sm);color:var(--color-texto)}
.button{padding:.7rem 1.25rem;border:1px solid var(--color-borde);border-radius:var(--radio-sm);background-color:var(--color-primario);color:#fff;font-weight:700;cursor:pointer;transition:background-color var(--transicion),transform var(--transicion)}
.button:hover{background-color:#1f8a39}
.button:active{transform:translateY(1px)}
.input-field:focus,.select-field:focus,.button:focus{outline:2px solid color-mix(in srgb, var(--color-primario) 55%, transparent);outline-offset:2px}

.button-secondary{background-color:#2c3e50;border-color:#2c3e50}
.button-secondary:hover{background-color:#22303f}

/* 5) Chips / tarjetas de geometrías populares */
.chips-wrapper{margin-top:.75rem}
.chips-title{font-size:.95rem;color:var(--color-texto-2);margin-bottom:.5rem}
.chip-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.75rem}
.geometry-card{background-color:var(--color-fondo);border:1px solid var(--color-borde);border-radius:12px;padding:.9rem 1rem;text-align:center;font-weight:700;color:var(--color-texto);cursor:pointer;transition:transform var(--transicion),border-color var(--transicion),box-shadow var(--transicion)}
.geometry-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.35)}
.geometry-card.active{border-color:var(--color-primario);box-shadow:0 0 0 3px color-mix(in srgb, var(--color-primario) 20%, transparent)}

/* 6) Visor */
.viewer-container{position:relative;border-radius:var(--radio-lg);border:1px solid var(--color-borde);background-color:var(--color-superficie);display:flex;align-items:stretch;justify-content:center;overflow:hidden;content-visibility:auto;contain-intrinsic-size:520px 900px;margin-top:1rem;margin-bottom:.25rem;padding:.4rem .4rem .8rem}
#jsmol-container{width:100%;aspect-ratio:16/9;max-height:520px;min-height:220px;display:block}
.loader{position:absolute;left:1rem;bottom:1rem;background-color:rgba(0,0,0,.4);padding:.6rem .9rem;border-radius:10px;border:1px solid var(--color-borde);backdrop-filter: blur(6px)}

/* 7) Panel de controles */
.controls-panel{background-color:var(--color-superficie);border-radius:var(--radio-lg);border:1px solid var(--color-borde);padding:1.1rem}
.controls-panel h2{text-align:center;margin:0 0 1rem 0}
.title-sub{margin-bottom:.5rem}
.control-group{display:flex;flex-direction:column;gap:.8rem;margin-bottom:1.1rem}
.checkbox-item{display:flex;align-items:center;gap:.6rem;color:var(--color-texto-2)}
.checkbox-item input{accent-color:var(--color-primario);width:1.2em;height:1.2em}
.select-field{width:100%;padding:.65rem .75rem;border:1px solid var(--color-borde);border-radius:var(--radio-sm);background-color:var(--color-fondo);color:var(--color-texto)}

/* 8) Mensajes y links */
.error-message{display:block;color:#fff;background-color:color-mix(in srgb, var(--color-peligro) 15%, transparent);border:1px solid var(--color-peligro);border-radius:var(--radio-sm);padding:.9rem;margin-top:1rem}
#more-info-link{display:inline-block;margin-top:.5rem;color:var(--color-primario);text-decoration:none;font-weight:600}
#more-info-link:hover{text-decoration:underline}

/* 9) Panel de geometrías (guía expandible) */
.knowledge-panel{background:linear-gradient(180deg,var(--color-superficie) 0%,var(--color-superficie-2) 100%);border:1px solid var(--color-borde);border-radius:var(--radio-lg);box-shadow:var(--sombra)}
.accordion-toggle{width:100%;background:transparent;color:var(--color-texto);text-align:left;padding:1rem 1.25rem;border:none;border-bottom:1px solid var(--color-borde);font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:space-between}
.accordion-toggle:hover{background-color:rgba(255,255,255,.03)}
.accordion-content{padding:1rem 1.25rem;display:none}
.accordion-content[aria-hidden="false"]{display:block}
.guide-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.75rem}
.guide-card{background-color:var(--color-fondo);border:1px solid var(--color-borde);border-radius:12px;padding:.8rem .9rem}
.guide-card h3{font-size:1rem;margin-bottom:.35rem}
.guide-card p{color:var(--color-texto-2);font-size:.93rem;margin-bottom:.6rem}
.guide-card button{margin-top:auto}

/* 10) Utilidades */
.separator{border:0;border-top:1px solid var(--color-borde);margin:1rem 0}
[hidden]{display:none !important}
@media (prefers-reduced-motion: reduce){*{transition:none !important;animation:none !important}}