/* ===============================
   ParamSherpa — styles.css (final fix)
   =============================== */

/* ---------- Variables ---------- */
:root{
  --bg:#0b0f14;
  --ink:#0e1520;
  --card:#121923;
  --border:#1e2935;
  --text:#e9f1f8;
  --muted:#7b8a9a;
  --brand:#17b26b;
  --accent:#4ea1ff;
}

/* ---------- Reset base ---------- */
*{ box-sizing: border-box; }
html,body{
  margin:0; padding:0;
  background:var(--bg); color:var(--text);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
}
img{ max-width:100%; height:auto; display:block; }
.hidden{ display:none !important; }

/* ---------- Layout general ---------- */
.container{ width:min(980px,92%); margin:16px auto; }
/* Importante: deja espacio para que el dock no tape la última fila */
main.container{ padding-bottom: 120px; }

/* Header */
.app-header{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 16px; border-bottom:1px solid var(--border);
}
.brand{ display:flex; align-items:center; gap:8px; }
.brand h1{ margin:0; font-size:20px; }
.divider{ opacity:.5; }
.header-actions{ display:flex; align-items:center; gap:8px; }
.badge{ font-size:11px; padding:3px 6px; border:1px solid var(--border); border-radius:999px; color:var(--muted); }

/* ---------- Tarjetas / secciones ---------- */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
  margin:12px 0;
}
.card.small{ padding:10px; }

/* Filas utilitarias */
.row{ display:flex; align-items:center; }
.wrap{ flex-wrap:wrap; }
.space-between{ justify-content:space-between; }
.row > *{ min-width:0; }    /* CLAVE anti-desbordes para hijos flex */
/* --- Utilidad de separación para filas flex --- */
.row.gap{
  column-gap: 14px;   /* espacio horizontal entre hijos */
  row-gap: 10px;      /* si hay wrap, también se separan verticalmente */
}

/* Ajuste leve en pantallas pequeñas */
@media (max-width: 520px){
  .row.gap{ column-gap: 10px; row-gap: 8px; }
}


/* ---------- Campos / inputs ---------- */
.field{
  display:flex; flex-direction:column;
  margin:6px 8px 6px 0; min-width:200px;
}
.label,.k{ display:block; margin:6px 0 8px; color:var(--muted); font-size:13px; letter-spacing:.2px; }
.field input,.field select,.textarea{
  background:var(--ink); color:var(--text);
  border:1px solid var(--border); border-radius:10px; padding:10px;
}
.textarea{ width:100%; resize:vertical; }

/* ---------- Botones ---------- */
.btn{
  padding:10px 12px; border:1px solid var(--border);
  background:var(--ink); color:var(--text);
  border-radius:10px; font-size:14px;
}
.btn:hover{ border-color:#2a394d; }
.btn.primary{ background:var(--brand); border-color:transparent; color:#072b17; font-weight:600; }
.btn.toggle.active{ background:var(--accent); color:#00162e; border-color:transparent; }

/* ---------- Output de parámetros (#output) ---------- */
#output{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap:12px;
  align-items:stretch;
  /* escudo: todo lo dentro del output puede encoger para no empujar el ancho */
}
#output *{ min-width:0; }

/* Tarjetas de parámetro */
.tile, .param-card{
  background:#0f1722;
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
  max-width:100%;
  overflow:hidden;            /* corta cualquier cosa que insista en crecer */
  contain: layout paint;      /* evita que efectos de hijos afecten fuera */
}

/* Textos internos: envolver SIEMPRE (override fuerte contra otros CSS) */
.tile .k, .tile .v, .tile .help,
.param-card .k, .param-card .v, .param-card .help{
  display:block;
  max-width:100%;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
  hyphens:auto;
  line-height:1.25;
  color:inherit;
}

/* Asegura que valores largos no rompan layout */
.param-card .v, .tile .v{
  font-weight:700; font-size:18px;
  text-overflow:ellipsis;
}

/* Estética claves/ayuda */
.k{ font-size:12px; color:var(--muted); letter-spacing:.3px; }
.help{ font-size:12px; color:var(--muted); }

/* Efecto pulso (guía) */
.param-card.pulse{ outline:2px dashed #ffd166; outline-offset:4px; background:rgba(255,209,102,.05); }

/* ---------- Preview hatch ---------- */
.preview-wrap{
  display:flex; justify-content:center; align-items:center;
  border:1px dashed var(--border); border-radius:12px; padding:10px;
  background:#0f1722; margin-top:10px;
}

/* ---------- Pie de página ---------- */
.app-footer{
  border-top:1px solid var(--border);
  padding:12px; text-align:center; color:var(--muted); font-size:12px;
}

/* ---------- Tool Dock (barra inferior) ---------- */
.tool-dock{
  position: sticky; bottom: 0; left: 0; right: 0;
  display:flex; justify-content:center; align-items:center; gap:.75rem;
  padding:.6rem .8rem; z-index: 40;
  background: rgba(10,12,16,.85);
  backdrop-filter: blur(6px);
  border-top:1px solid rgba(255,255,255,.06);
}
/* (clave) el contenido tiene padding-bottom arriba; el dock no tapa nada */
.tool-dock .tool-btn{
  font:600 .95rem/1 system-ui,-apple-system,Segoe UI,Roboto,Arial;
  padding:.45rem .8rem; border-radius:.8rem;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color:#e8eef7; cursor:pointer;
}
.tool-dock .tool-btn:hover{ background: rgba(255,255,255,.08); }
.tool-dock .tool-sep{ opacity:.35 }

/* ---------- Sheets (focus/frame/power) ---------- */
.sheet-backdrop{
  position: fixed; inset: 0; background: rgba(0,0,0,.35);
  opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 49;
}
/* ========== EzCAD Visual Overlay dentro del panel gris ========== */
.ezcad-frame{ position: relative; }

.ezmap-overlay{
  position: absolute; inset: 0;
  pointer-events: none;
}

/* Imagen alineada a la IZQUIERDA y ocupando el 75% del ancho del frame */
.ezmap-overlay > img{
  position: absolute;
  left: 0; top: 0;
  width: 75%;
  height: auto;
  opacity: .9;
  border-radius: 8px;
  pointer-events: none;
}

/* Contenedor de pines con MISMA caja que la imagen (75% izquierda) */
.ezmap-pins{
  position: absolute;
  left: 0; top: 0;
  width: 75%;
  height: 100%;
  pointer-events: none;   /* el fondo no captura clicks */
}

/* Los pines ahora son hijos de .ezmap-pins */
.ezmap-pins .pin{
  position: absolute;
  left: var(--x); top: var(--y);
  transform: translate(-50%, -50%);
  padding: 6px 10px;
  font-size: 13px; line-height: 1.1;
  color: #eaf2ff; background: rgba(40,60,95,.35);
  border: 2px solid #68a6ff; border-radius: 8px;
  box-shadow: 0 2px 0 rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.07);
  pointer-events: auto;   /* clicables */
  white-space: nowrap;
}
.ezmap-pins .pin.two-lines{ font-size: 12px; padding: 6px 8px; }

@media (max-width: 640px){
  /* En móvil, puedes dar un poco más de ancho si lo ves pequeño */
  .ezmap-overlay > img,
  .ezmap-pins{ width: 80%; }
}

.ezmap-overlay .pin.two-lines{ font-size: 12px; padding: 6px 8px; }

@media (max-width: 640px){
  .ezmap-overlay > img{ width: 30%; } /* un poco más ancha para legibilidad */
}

/* Backdrop */
.sheet-backdrop{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 49;
}
.sheet-backdrop[hidden]{ display: none; }
/* Sheets centradas cross-browser (un solo modelo de posicionamiento) */
.sheet{
  position: fixed;
  top: 5vh;
  left: 50%;
  width: min(900px, 92vw);
  max-height: 90vh;
  background: #0f141b;
  color: #e0e7f0;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  border-top: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 -12px 40px rgba(0,0,0,.45);
  z-index: 50;
  /* cerrado por defecto */
  transform: translate(-50%, 100%);
  opacity: 0;
  pointer-events: none;

  transition: transform .28s ease, opacity .22s ease;
  /* SIEMPRE centrada: x = -50% y animamos solo eje Y */
  transform: translate(-50%, 100%);
  transition: transform .28s ease;
}
.sheet.open{
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}

.sheet-handle{
  width: 44px; height: 5px; background: rgba(255,255,255,.18);
  border-radius: 3px; margin: 10px auto 6px; user-select: none;
}
.sheet-header{
  display:flex; justify-content:space-between; align-items:center;
  padding:.5rem 1rem .3rem;
}
.sheet-header h3{ margin:0; font-size:1.05rem; font-weight:700; }
.sheet-close{
  border:1px solid rgba(255,255,255,.12); border-radius:.6rem;
  background:rgba(255,255,255,.06); color:#e8eef7; cursor:pointer;
  padding:.25rem .55rem; font-size:.95rem;
}
.sheet-body{
  overflow: auto;
  max-height: calc(90vh - 120px);
  padding: .25rem 1rem 1.2rem;
}

/* ---------- Toolbar específica (NO tocar otras .card) ---------- */
.card.toolbar{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px;
  padding:10px; background:#1e1e1e; border-radius:8px;
  box-shadow:0 2px 4px rgba(0,0,0,.3);
}
.card.toolbar button{
  flex:1 1 auto; max-width:48%; padding:10px 5px;
  color:#e0e0e0; background:#2d2d2d; border:1px solid #5ab4ff; border-radius:6px;
  font-size:14px; font-weight:500; text-align:center;
  white-space:normal; overflow-wrap:anywhere; word-break:break-word; line-height:1.2;
  transition:all .2s ease;
}
.card.toolbar button:hover{ background:#3c3c3c; border-color:#77c8ff; cursor:pointer; }
@media (max-width: 400px){ .card.toolbar button{ max-width:100%; } }

/* ---------- Responsivo fino ---------- */
@media (max-width: 540px){
  /* Haz las celdas un poco más estrechas para evitar tensiones */
  #output{ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .v{ font-size:16px; }
  .field{ min-width: 160px; }
}
.ezmap-pins .pin {
  transform: translate(-50%, -50%) scale(0.96);
}