:root{ --gap:6px; --cell:75px; --radius:8px; --font-small:11px; --label:20px; --table-w: calc(var(--label) + 18 * var(--cell) + 18 * var(--gap)); }
*{box-sizing:border-box;}
body{ font-family: "EB Garamond", Georgia, serif; margin:0; background:#ECEFF4; color:#0f172a; font-size: 17px; }
button, input, select, textarea { font-family: inherit; }
/* Mejorar la experiencia de scroll horizontal dentro de iframes en móvil */
html, body{ overscroll-behavior-x: contain; background:#ECEFF4; }
header{ padding:16px 0; display:flex; gap:12px; align-items:center; justify-content:space-between; position:sticky; top:0;
  background:#ECEFF4; z-index:5; }
header .container{ width: var(--table-w); margin: 0 auto; display:flex; gap:12px; align-items:center; }
header h1{ font-size:20px; margin:0; font-weight:700; letter-spacing:.2px; color:#0f172a; }
header .actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-left:auto; }
header .mode-banner{ flex:1; }
header .mode-banner-inner{
  background:#f8fafc; border:1px solid #e2e8f0; color:#334155; padding:10px 12px; border-radius:10px;
  display:flex; align-items:center; gap:8px; font-size:14px;
}
button, input[type="file"]::file-selector-button{ background:#ffffff; color:#0f172a; border:1px solid #cbd5e1; padding:8px 12px; border-radius:8px; cursor:pointer; font-size:14px; }
button:hover, input[type="file"]::file-selector-button:hover{ background:#f1f5f9; }
.status{ font-size:14px; color:#475569; }
.wrap{ padding:0px 0 0px; margin: 0; overflow-x:auto; overflow-y:visible; -webkit-overflow-scrolling:touch; touch-action: pan-x pan-y; position: relative; }
.legend{
  position: absolute;
  left: calc(var(--label) + var(--gap) + 2 * (var(--cell) + var(--gap)));
  top: calc(2 * (var(--cell) + var(--gap)));
  width: calc(10 * var(--cell) + 9 * var(--gap));
  height: var(--cell);
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
}
.legend-inner{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; font-size:17px; color:#475569; }
.chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid #cbd5e1; border-radius:999px; background:#ffffff; }
.swatch{ width:14px; height:14px; border-radius:4px; border:1px solid #cbd5e1; display:inline-block }
.grid{ display:grid; grid-template-columns:repeat(18, var(--cell)); grid-auto-rows:var(--cell); gap:var(--gap); justify-content:start; opacity:.45; filter:grayscale(1); pointer-events:none; transition:opacity .2s ease, filter .2s ease; }
.grid.ready{ opacity:1; filter:none; pointer-events:auto; }
.cell{ background:#ffffff; border:1px solid #cbd5e1; border-radius:var(--radius); position:relative; overflow:hidden; cursor:pointer; transition:transform .06s ease, box-shadow .12s ease, opacity .15s ease, filter .15s ease; box-shadow: 0 1px 1px rgba(15,23,42,.04), 0 2px 6px rgba(15,23,42,.06); }
.cell:hover{ transform: translateY(-2px); box-shadow: 0 2px 4px rgba(15,23,42,.06), 0 8px 16px rgba(15,23,42,.08); }
.cell.dimmed{ opacity:.18; filter:grayscale(.8); }
.cell.dimmed:hover, .cell.dimmed:focus{ opacity:.85; filter:none; }
.search-box{ position:relative; display:inline-flex; align-items:center; }
.search-input{ padding:7px 10px 7px 30px; border-radius:8px; border:1px solid #cbd5e1; font-size:14px; width:240px; background:#ffffff; color:#0f172a; outline:none; transition:border-color .15s ease, box-shadow .15s ease; }
.search-input:focus{ border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.15); }
.search-icon{ position:absolute; left:9px; font-size:13px; color:#64748b; pointer-events:none; }
.cell.disabled{ background:transparent; border:none; box-shadow:none; pointer-events:none; }
.cell .content{ position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:#334155; padding:0; box-sizing:border-box; }
.cell[data-filled="true"] .content{ color:#0f172a; }
/* Número atómico: distancia proporcional al tamaño de la celda */
.z{ position:absolute; top: calc(var(--cell) * 0.08); left: calc(var(--cell) * 0.1066667); font-size:14px; opacity:.85; }
/* Símbolo centrado exactamente en la celda */
.sym{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-weight:700; font-size:20px; line-height:1; }
/* Nombre: distancia proporcional desde la base */
.name{ position:absolute; bottom: calc(var(--cell) * 0.08); left: calc(var(--cell) * 0.08); right: calc(var(--cell) * 0.08); text-align:center; font-size:14px; color:#334155; opacity:.9; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; pointer-events:none; }

/* Ajuste responsivo: símbolo más pequeño en pantallas estrechas */
@media (max-width: 900px){
  .sym{ font-size:18px; }
}
.metal{ background: linear-gradient(180deg,#dbeafe,#bfdbfe); }
.non-metal{ background: linear-gradient(180deg,#dcfce7,#bbf7d0); }
.metalloid{ background: linear-gradient(180deg,#fef9c3,#fde68a); }
.noble-gas{ background: linear-gradient(180deg,#ede9fe,#ddd6fe); }
.unknown{ background: linear-gradient(180deg,#ffffff,#f3f6fb); }
/* Mantener un borde sutil para mejorar contraste con el fondo global */
.cell.metal,.cell.non-metal,.cell.metalloid,.cell.noble-gas,.cell.unknown{ border-color:#cbd5e1; }

dialog::backdrop{ background: rgba(0,0,0,.35); }
dialog{ border:1px solid #e2e8f0; border-radius:14px; padding:0; background:#ffffff; color:#0f172a; width:min(940px,96vw); }
.modal-head{ padding:14px 18px; border-bottom:1px solid #e2e8f0; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.modal-body{ padding:16px 18px; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.field{ display:flex; flex-direction:column; gap:6px; background:#f8fafc; border:1px solid #e2e8f0; padding:10px 12px; border-radius:10px; }
.field.inline2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.field input,.field select,.field textarea{ width:100%; background:transparent; color:#0f172a; border:none; outline:none; font-size:14px; }
.full{ grid-column: 1 / -1; }
.modal-actions{ padding:14px 18px; display:flex; justify-content:flex-end; gap:10px; border-top:1px solid #e2e8f0; background:#f8fafc; }
.muted{ color:#64748b; font-size:14px; }
.hint{ font-size:14px; opacity:.8; }
.footer-note{ margin-top:12px; color:#64748b; font-size:14px; }
.gate{
  position: absolute;
  left: calc(var(--label) + var(--gap) + 2 * (var(--cell) + var(--gap)));
  top: calc(var(--cell) + var(--gap));
  width: calc(10 * var(--cell) + 9 * var(--gap));
  height: var(--cell);
  z-index: 5;
  display: flex;
  align-items: center;
}
.gate-inner{
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
  background:#f8fafc; border:1px solid #e2e8f0; padding:12px; border-radius:10px;
  width: 100%;
}
.gate input{ background:#ffffff; color:#0f172a; border:1px solid #cbd5e1; border-radius:8px; padding:10px 12px; font-size:14px; min-width:260px; }
/* Enmascarado visual para inputs type=text que no deben activar gestores de contraseñas */
.masked{ -webkit-text-security: disc; }
/* Hacer el campo de contraseña más corto que el valor por defecto */
#pass{ min-width:180px; }
.gate .room{ font-size:14px; color:#475569; }

/* Contenedor del título: horizontalmente entre columnas 2 y 17, alineado con la fila 1 */
.room-title{
  position: absolute;
  z-index: 6;
  left: calc(var(--label) + var(--gap) + 1 * (var(--cell) + var(--gap))); /* inicio columna 2 */
  width: calc(16 * var(--cell) + 15 * var(--gap)); /* columnas 2..17 */
  top: calc(var(--gap) + (var(--cell) / 2)); /* alineamos por centro vertical */
  display:flex; align-items:center; justify-content:flex-start; padding:6px 12px; box-sizing:border-box;
  pointer-events:auto;
}
/* El input dentro de room-title debe expandirse para ocupar el espacio restante */
.room-title-text{ flex: 1 1 auto; min-width:0; padding:4px 0; border-radius:0; border:none; background:transparent; color:#0f172a; font-size:23px; font-family: 'Cabin Sketch', cursive; text-align:center; outline:none; }
/* placeholder for contenteditable */
.room-title-text:empty:before{ content: attr(data-placeholder); color:#64748b; }
.room-title-label{ margin-right:12px; color:#475569; font-size:17px; flex: 0 0 auto; }
.room-title .gate-input{ flex: 1 1 auto; min-width:0; }
.gate-input{ background:#ffffff; color:#0f172a; border:1px solid #cbd5e1; border-radius:8px; padding:10px 12px; font-size:14px; min-width:260px; }

/* Mode Banner */
.mode-dot{ width:8px; height:8px; border-radius:999px; background:#64748b; }
.mode-dot.online{ background:#16a34a; }
.mode-dot.local{ background:#64748b; }

/* Toasts (stacked) */
.toasts{ position:fixed; right:16px; bottom:16px; display:flex; flex-direction:column; gap:8px; align-items:flex-end; z-index:20; pointer-events:none; }
.toast{ position:relative; background:#111827; color:#fff; border-radius:10px; padding:10px 12px; box-shadow:0 10px 30px rgba(0,0,0,.2); opacity:0; transform:translateY(8px); transition:opacity .2s ease, transform .2s ease; font-size:14px; max-width: min(420px, 80vw); }
.toast.show{ opacity:1; transform:translateY(0); }
.toast.success{ background:#16a34a; }
.toast.info{ background:#2563eb; }
.toast.error{ background:#dc2626; }
/* Imagen en hover card */
.hc-image{ margin:8px 0 6px 0; text-align:center; }
.hc-image img{ display:inline-block; max-width:100%; height:auto; max-height:300px; border-radius:8px; box-shadow:0 6px 18px rgba(0,0,0,.15); object-fit:contain; }

/* Previsualización en editor */
.field.inline2.image-row{ grid-template-columns: 1fr auto; align-items: stretch; padding:10px 12px; min-height: 58px; }
.image-row .input-col{ display:flex; flex-direction:column; gap:6px; flex:1; }
.image-row input#fImage{ background:transparent; border:none; outline:none; font-size:14px; padding:0; }
.image-row .preview-col{ display:flex; align-items:stretch; justify-content:flex-end; margin-left:12px; }
.img-preview-inline{ border:none; background:transparent; padding:0; display:flex; align-items:center; justify-content:center; width: 120px; }
.img-preview-inline img{ display:block; max-height:100%; max-width:100%; width:auto; height:auto; object-fit: contain; border-radius:4px; }

/* Tooltip inmediato para ayuda (sin retardo del tooltip nativo) */
.help-tip{ position:relative; display:inline-flex; align-items:center; justify-content:center; line-height:1; }
.help-tip{ width:18px; height:18px; border-radius:999px; }
.help-tip[data-tip]::after{
  content: attr(data-tip);
  position:absolute; left:50%; bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(2px);
  background:#111827; color:#fff; padding:8px 10px; border-radius:6px;
  font-size:14px; max-width:min(320px, 90vw); white-space:normal; text-align:center; box-shadow:0 8px 24px rgba(0,0,0,.18);
  opacity:0; pointer-events:none; transition: opacity .12s ease, transform .12s ease;
  z-index: 20;
}
.help-tip[data-tip]::before{
  content:""; position:absolute; left:50%; bottom: calc(100% + 2px);
  transform: translateX(-50%);
  border:6px solid transparent; border-top-color:#111827; opacity:0; transition: opacity .12s ease; z-index: 20;
}
.help-tip:hover::after, .help-tip:focus-visible::after{ opacity:1; transform: translateX(-50%) translateY(0); }
.help-tip:hover::before, .help-tip:focus-visible::before{ opacity:1; }

/* En móvil, permitir más ancho para el tooltip */
@media (max-width: 899px){
  .help-tip[data-tip]::after{ max-width: 85vw !important; min-width: 280px; }
}

/* En escritorio, mostrar en una sola línea (más ancho) */
@media (min-width: 900px){
  .help-tip[data-tip]::after{ white-space: nowrap; max-width: none; }
}

/* Hover Card */
.hover-card{
  position: fixed;
  z-index: 10;
  min-width: 320px;
  max-width: min(600px, 92vw);
  max-height: 90vh;
  overflow: auto;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
  padding: 12px 14px;
  display: none;
  pointer-events: none;
}
.hover-card.show{ display: block; }
.hover-card.pinned, .hover-card a, .hover-card button{ pointer-events: auto; }
.hc-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; border-bottom:1px solid #e2e8f0; padding-bottom:8px; margin-bottom:8px; }
.hc-title{ font-weight:700; font-size:16px; color:#0f172a; }
.hc-sub{ font-size:14px; color:#475569; }
.hc-chip{ display:inline-flex; gap:6px; align-items:center; padding:4px 8px; border:1px solid #cbd5e1; border-radius:999px; background:#f8fafc; font-size:14px; color:#0f172a; }
.hc-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:8px; margin-top:6px; }
.hc-kv{ background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px; padding:8px; font-size:14px; color:#0f172a; }
.hc-kv b{ display:block; font-size:14px; color:#475569; margin-bottom:4px; font-weight:600; }
.hc-section{ margin-top:10px; }
.hc-section b{ display:block; font-size:14px; color:#475569; margin-bottom:4px; }
.hc-text{ font-size:14px; line-height:1.35; white-space:pre-wrap; color:#0f172a; }
.hc-empty{ font-size:14px; color:#64748b; }
.hc-edit-btn{ display:none; margin-top:12px; padding:10px 16px; background:#2563eb; color:#fff; border:none; border-radius:8px; font-size:14px; font-weight:600; cursor:pointer; width:100%; position:relative; z-index:15; pointer-events:auto; }
.hc-edit-btn:active{ background:#1d4ed8; }
@media (max-width: 900px){
  .hc-edit-btn{ display:block; }
}

/* Group (column) headers and Period (row) labels */
.group-row{ display:flex; justify-content:flex-start; align-items:flex-end; gap:var(--gap); margin-bottom:6px; width:max-content; }
.group-spacer{ width:var(--label); flex:0 0 var(--label); }
.group-headers{
  display:grid;
  grid-template-columns:repeat(18, var(--cell));
  gap:var(--gap);
  justify-content:flex-start;
  width:max-content;
}
.group-headers .g{ text-align:center; font-size:14px; color:#475569; }

.board{ display:flex; justify-content:flex-start; gap:var(--gap); width:max-content; position:relative; z-index: 1; }
.period-labels {
  display: grid;
  grid-template-rows: repeat(9, var(--cell));
  align-items: center;
  justify-items: end;
  width: var(--label);
  /* margin-right: var(--gap); */
  row-gap: var(--gap);
  position: relative;
  z-index: 1;
}
.period-labels .p {
  font-size: 14px;
  color: #475569;
  white-space: nowrap;
  justify-self: end;
  text-align: right;
  /*  padding-right: 2px;  */
  width: 100%;
  box-sizing: border-box;
}
.period-labels .p.series {
position: absolute;
left: calc(var(--label) + var(--gap));
width: calc(2 * var(--cell) + var(--gap));
padding: 0 0px 0 0;
font-size: 14px;
color: #475569;
background: transparent;
z-index: 2;
text-align: right;
display: flex;
align-items: center;
justify-content: flex-end;
}
.period-labels .p.series:nth-child(8) {
top: calc(7 * (var(--cell) + var(--gap)) + var(--cell) / 2);
transform: translateY(-50%);
}
.period-labels .p.series:nth-child(9) {
top: calc(8 * (var(--cell) + var(--gap)) + var(--cell) / 2);
transform: translateY(-50%);
}
/* Igualar el ancho visible de los bloques al ancho de la tabla periódica */
.wrap > .group-row,
.wrap > .board{ width: var(--table-w); margin-left:auto; margin-right:auto; }
@media (max-width: 900px){
  :root{ --cell:60px; --gap:5px; --label:18px; }
  header{ padding:8px 12px; }
  header .container{ width:100%; flex-direction:column; align-items:stretch; gap:8px; }
  header .mode-banner{ flex:none; min-width:0; }
  header .actions{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; margin-left:0; width:100%; }
  header .search-box{ grid-column:1 / -1; width:100%; }
  header .search-input{ width:100%; min-width:0; }
  header .actions button{ width:100%; min-width:0; }
  header #resetBtn{ grid-column:1 / -1; }
  .form-grid{ grid-template-columns:1fr; }
  .field.inline2{ grid-template-columns:1fr; }
  /* Alinear a la izquierda en móvil y permitir desplazamiento horizontal natural */
  .group-row{ justify-content:flex-start; }
  .group-headers{ justify-content:flex-start; }
  .board{ justify-content:flex-start; }
  .grid{ justify-content:start; }
}