/* =====================================================================
   WhatsApp Cloud API Mockup — css/base.css (Módulo A · shell)
   Reset, variables --wam-*, layout grid de #app y barra superior (.toolbar).
   El tema del shell se conmuta con body[data-tema] (lo fija WAM.setTema).
   Sin dependencias externas.
   ===================================================================== */

/* --- Reset ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body { overflow: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; }
h1, h2, p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
[hidden] { display: none !important; } /* respeta #importar-archivo y stubs estáticos (#sheet) */

/* --- Variables del shell (--wam-*) ------------------------------------ */
:root {
  color-scheme: light;
  --wam-fondo: #e7ebee;
  --wam-panel: #ffffff;
  --wam-panel-alt: #f3f6f8;
  --wam-texto: #1c2b33;
  --wam-texto-suave: #5d6f7a;
  --wam-borde: rgba(11, 20, 26, .14);
  --wam-acento: #00a884;
  --wam-acento-hover: #008069;
  --wam-acento-contraste: #ffffff;
  --wam-peligro: #c94a3d;
  --wam-sombra: 0 10px 30px rgba(11, 20, 26, .14);
  --wam-radio: 12px;
}

body[data-tema="oscuro"] {
  color-scheme: dark;
  --wam-fondo: #0a1116;
  --wam-panel: #111b21;
  --wam-panel-alt: #1c272f;
  --wam-texto: #e9edef;
  --wam-texto-suave: #8696a0;
  --wam-borde: rgba(233, 237, 239, .15);
  --wam-acento: #00a884;
  --wam-acento-hover: #008069;
  --wam-acento-contraste: #ffffff;
  --wam-peligro: #e57164;
  --wam-sombra: 0 10px 30px rgba(0, 0, 0, .5);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
               "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: var(--wam-fondo);
  color: var(--wam-texto);
  -webkit-font-smoothing: antialiased;
}

:focus-visible { outline: 2px solid var(--wam-acento); outline-offset: 2px; }

/* --- Layout: grid de dos columnas de #app ----------------------------- */
#app {
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-columns: clamp(320px, 34vw, 470px) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "toolbar toolbar"
    "editor  movil";
}
#toolbar      { grid-area: toolbar; }
#panel-editor { grid-area: editor; }
#panel-movil  { grid-area: movil; }

/* --- Barra superior de la app (.toolbar) ------------------------------- */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 18px;
  background: var(--wam-panel);
  border-bottom: 1px solid var(--wam-borde);
}
.toolbar-marca { display: flex; align-items: center; gap: 11px; min-width: 0; }
.toolbar-logo {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #00a884, #008069);
  color: #fff;
}
.toolbar-titulos { display: flex; flex-direction: column; gap: 1px; line-height: 1.15; min-width: 0; }
.toolbar h1 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.toolbar-subtitulo { font-size: 11.5px; color: var(--wam-texto-suave); white-space: nowrap; }

.toolbar-acciones { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.tb-separador { width: 1px; height: 22px; background: var(--wam-borde); margin: 0 2px; }
.tb-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid var(--wam-borde);
  border-radius: 10px;
  background: var(--wam-panel);
  color: var(--wam-texto);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .05s ease;
}
.tb-btn svg { flex: none; }
.tb-btn:hover { background: var(--wam-panel-alt); border-color: var(--wam-texto-suave); }
.tb-btn:active { transform: translateY(1px); }
#btn-reset:hover { color: var(--wam-peligro); border-color: var(--wam-peligro); }

/* --- Editor (columna izquierda · solo el cascarón; contenido: módulo C) */
#panel-editor {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--wam-panel);
  border-right: 1px solid var(--wam-borde);
}
.wam-bloque { padding: 16px 18px 20px; border-bottom: 1px solid var(--wam-borde); }
.wam-bloque:last-child { border-bottom: 0; }
.wam-bloque-titulo {
  margin-bottom: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wam-texto-suave);
}
.wam-alta { display: flex; gap: 8px; margin-bottom: 14px; }
.wam-alta select {
  flex: 1;
  min-width: 0;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--wam-borde);
  border-radius: 10px;
  background: var(--wam-panel-alt);
  color: var(--wam-texto);
  cursor: pointer;
}
.wam-btn-anadir {
  flex: none;
  height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: var(--wam-acento);
  color: var(--wam-acento-contraste);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .15s ease;
}
.wam-btn-anadir:hover { background: var(--wam-acento-hover); }

/* --- Modo presentación (lo activa D con body.presentacion) ------------- */
body.presentacion #panel-editor { display: none; }
body.presentacion #app {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "toolbar"
    "movil";
}

/* --- Noscript ----------------------------------------------------------- */
.wam-noscript {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 99;
  padding: 12px 16px;
  border-radius: 10px;
  background: #b3261e;
  color: #fff;
  font-size: 14px;
  text-align: center;
}

/* --- Ajustes de ventana estrecha --------------------------------------- */
@media (max-width: 860px) {
  .toolbar { flex-wrap: wrap; }
  .tb-btn { padding: 7px 9px; }
  .tb-btn span { display: none; } /* solo iconos cuando escasea el ancho */
}

/* --- Accesibilidad: menos movimiento ------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  #chat-cuerpo { scroll-behavior: auto; }
  .tb-btn, .wam-btn-anadir { transition: none; }
}