/* ============================================================================
   word.css — Layout general de la ventana de Word 2024 (plan §2.4).
   Grid vertical: titlebar 48px / ribbon auto / regla 24px / lienzo 1fr /
   barra de estado 28px. 100vh sin scroll del body.
   Colores y medidas: css/tokens.css (var(--wd-*)).
   ========================================================================== */

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;               /* el único scroll vive en #canvas */
}

body {
  font-family: var(--wd-font-ui);
  font-size: var(--wd-fontsize-ui);
  color: var(--wd-text);
  -webkit-user-select: none;
  user-select: none;              /* la selección de texto del documento es propia */
}

/* …pero los campos de formulario (diálogos, combos de la cinta, renombrar
   documento y el textarea proxy de IME) SÍ deben poder seleccionar texto. */
input,
textarea {
  -webkit-user-select: text;
  user-select: text;
}

#app {
  display: grid;
  grid-template-rows:
    var(--wd-titlebar-h)          /* barra de título + QAT */
    auto                          /* cinta (altura propia: pestañas + cuerpo) */
    var(--wd-ruler-h)             /* regla horizontal */
    minmax(0, 1fr)                /* lienzo (scroll) */
    var(--wd-statusbar-h);        /* barra de estado */
  height: 100vh;
  overflow: hidden;
}

/* Cada zona va ANCLADA a su fila. Sin esto, ocultar la regla (o la cinta en
   modo lectura) con display:none la saca del flujo del grid y los demás hijos
   se corren una fila: el lienzo cae en la fila de 0 px y desaparece. */
#titlebar  { grid-row: 1; }
#ribbon    { grid-row: 2; }
#ruler-h   { grid-row: 3; }
#workspace { grid-row: 4; }
#statusbar { grid-row: 5; }

/* ---------------------------------------------------------------------------
   Barra de título (icono Word + Autoguardado + QAT | nombre doc | Compartir)
   ------------------------------------------------------------------------- */

#titlebar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  background: var(--wd-titlebar-bg);
  border-bottom: 1px solid var(--wd-separator);
  padding: 0 10px;
  min-width: 0;
}

.tb-left  { display: flex; align-items: center; gap: 8px; justify-self: start; min-width: 0; }
.tb-center{ display: flex; align-items: center; gap: 8px; justify-self: center; min-width: 0; }
.tb-right { display: flex; align-items: center; gap: 6px; justify-self: end; }

.word-logo {
  width: 24px;
  height: 24px;
  display: inline-flex;
  flex: none;
}
.word-logo svg { display: block; }

/* Conmutador "Autoguardado" (decorativo en v0.1) */
.autosave { display: flex; align-items: center; gap: 6px; cursor: default; }
.autosave-label { color: var(--wd-text-2); font-size: 12px; white-space: nowrap; }
.toggle {
  width: 28px;
  height: 14px;
  border-radius: 7px;
  background: var(--wd-border-strong);
  position: relative;
  display: inline-block;
  flex: none;
}
.toggle.on { background: var(--wd-accent); }
.toggle .knob {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #FFFFFF;
  position: absolute;
  top: 2px;
  left: 2px;
}
.toggle.on .knob { left: auto; right: 2px; }

/* QAT: contenedor; los botones (.qat-btn) los pinta ui/ribbon.js */
.qat {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 8px;
  background: var(--wd-qat-bg);
}

.doc-name {
  font-size: 13px;
  color: var(--wd-text);
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.doc-name:hover { background: var(--wd-hover); }

.doc-saved {
  color: var(--wd-text-secondary);
  font-size: 11px;
  white-space: nowrap;
}

/* Botón Compartir (decorativo en v0.1) */
.tb-btn {
  font-family: inherit;
  font-size: 12px;
  border: none;
  border-radius: 4px;
  padding: 6px 14px;
  cursor: pointer;
  background: var(--wd-accent);
  color: #FFFFFF;
}
.tb-btn:hover { background: var(--wd-accent-dark); }

/* Sesión iniciada: correo del usuario + «Cerrar sesión» (#account-area) */
#account-area { display: inline-flex; align-items: center; gap: 6px; }
.account-chip {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  color: var(--wd-text-secondary);
}
.tb-btn.account-logout { background: transparent; color: var(--wd-text-secondary); }
.tb-btn.account-logout:hover { background: rgba(0, 0, 0, 0.06); color: var(--wd-text); }

/* ---------------------------------------------------------------------------
   Regla horizontal (#ruler-h) — las marcas las pinta ui/ruler.js
   ------------------------------------------------------------------------- */

#ruler-h {
  position: relative;
  background: var(--wd-ruler-bg);
  border-bottom: 1px solid var(--wd-separator);
  overflow: hidden;
  font-family: var(--wd-font-ui);
  min-width: 0;
}

/* Marca menor (cada 0,25/0,5 cm) y mayor (cada cm sin número). */
.ruler-tick {
  position: absolute;
  bottom: 5px;
  width: 1px;
  height: 4px;
  background: var(--wd-ruler-mark);
}
.ruler-tick.major { height: 7px; }

/* Número de cm, centrado sobre su posición. */
.ruler-num {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 9px;
  line-height: 1;
  color: var(--wd-ruler-mark);
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}

/* Zona gris de margen (izquierda/derecha de la zona de escritura). */
.ruler-margin {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--wd-ruler-margin-bg);
}

/* Marcadores de sangría (v0.1 decorativos si ruler.js los pinta). */
.ruler-indent {
  position: absolute;
  color: var(--wd-ruler-indent);
}

/* ---------------------------------------------------------------------------
   Área de trabajo: paneles laterales + lienzo (fila 1fr del grid)
   ------------------------------------------------------------------------- */

#workspace {
  display: flex;
  align-items: stretch;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
   Lienzo: ocupa el resto del área de trabajo; visuales en canvas.css
   ------------------------------------------------------------------------- */

#canvas {
  flex: 1 1 auto;
  overflow: auto;
  min-height: 0;
  min-width: 0;
}

/* ---------------------------------------------------------------------------
   Panel lateral (Buscar y reemplazar; en el futuro Estilos y Navegación).
   Ancho fijo a la izquierda del lienzo, como en Word 2024.
   ------------------------------------------------------------------------- */

.side-pane {
  display: flex;
  flex-direction: column;
  flex: 0 0 var(--wd-pane-w);
  width: var(--wd-pane-w);
  min-height: 0;
  overflow-y: auto;
  gap: 8px;
  padding: 10px 14px 14px;
  background: #FFFFFF;
  border-right: 1px solid var(--wd-separator);
  box-shadow: 1px 0 3px rgba(0, 0, 0, 0.06);
}
.side-pane[hidden] { display: none; }

/* El panel de comentarios vive a la DERECHA del lienzo (como en Word). */
#comments-pane {
  border-right: none;
  border-left: 1px solid var(--wd-separator);
  box-shadow: -1px 0 3px rgba(0, 0, 0, 0.06);
}

/* Cabecera: título + cierre */
.pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.pane-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--wd-text);
}
.pane-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--wd-text-2);
  cursor: pointer;
}
.pane-close:hover { background: var(--wd-hover); }

/* Campo de texto con icono (búsqueda) */
.pane-field {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  border: 1px solid var(--wd-border-soft);
  border-radius: 4px;
  background: #FFFFFF;
}
.pane-field:focus-within { border-color: var(--wd-accent); }
.pane-field-ico {
  display: inline-flex;
  color: var(--wd-text-secondary);
  flex: none;
}

.pane-input {
  font-family: inherit;
  font-size: 13px;
  color: var(--wd-text);
  width: 100%;
  min-width: 0;
  padding: 6px 0;
  border: none;
  outline: none;
  background: transparent;
}
/* Fuera del campo con icono, el input lleva su propio borde. */
.pane-replace .pane-input {
  padding: 6px 8px;
  border: 1px solid var(--wd-border-soft);
  border-radius: 4px;
}
.pane-replace .pane-input:focus { border-color: var(--wd-accent); }
.pane-input.is-error { color: var(--wd-error); }

/* Contador de resultados + flechas de navegación */
.pane-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 24px;
}
.pane-count {
  flex: 1 1 auto;
  font-size: 12px;
  color: var(--wd-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pane-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--wd-text-2);
  cursor: pointer;
  flex: none;
}
.pane-nav-btn:hover:not(:disabled) { background: var(--wd-hover); }
.pane-nav-btn:disabled { color: var(--wd-text-disabled); cursor: default; }

/* Opciones de coincidencia */
.pane-options {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--wd-separator);
}
.pane-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--wd-text-2);
  cursor: pointer;
}
.pane-check input { margin: 0; accent-color: var(--wd-accent); }

/* Enlace para desplegar/ocultar la sección de reemplazo */
.pane-link {
  font-family: inherit;
  font-size: 12px;
  align-self: flex-start;
  padding: 2px 0;
  border: none;
  background: none;
  color: var(--wd-link);
  cursor: pointer;
}
.pane-link:hover { text-decoration: underline; }

/* Sección Reemplazar */
.pane-replace {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--wd-separator);
}
.pane-replace[hidden] { display: none; }
.pane-label { font-size: 12px; color: var(--wd-text-2); }
.pane-actions { display: flex; gap: 8px; }
.pane-actions .xl-btn { flex: 1 1 auto; }

/* Mensajes de estado (resultados truncados, errores de patrón) */
.pane-status {
  font-size: 11px;
  color: var(--wd-text-secondary);
  min-height: 14px;
}
.pane-status.is-error { color: var(--wd-error); }

/* ---------------------------------------------------------------------------
   Barra de estado (base; el contenido lo pinta ui/statusbar.js)
   ------------------------------------------------------------------------- */

#statusbar {
  background: var(--wd-statusbar-bg);
  border-top: 1px solid var(--wd-separator);
  color: var(--wd-text-2);
  display: flex;
  align-items: center;
  padding: 0 10px;
  gap: 12px;
  font-size: 12px;
  min-width: 0;
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
   Raíces de overlays (diálogos, menú contextual, backstage)
   ------------------------------------------------------------------------- */

#dialog-root,
#contextmenu-root,
#backstage-root {
  position: fixed;
  inset: 0;
  pointer-events: none;
}
#backstage-root   { z-index: 900; }   /* pantalla completa, bajo los diálogos */
#dialog-root      { z-index: 1000; }
#contextmenu-root { z-index: 1100; }  /* los menús flotan sobre los diálogos */

#dialog-root > *,
#contextmenu-root > *,
#backstage-root > * { pointer-events: auto; }

/* ---------------------------------------------------------------------------
   Modos de vista (pestaña Vista)

   Solo «Diseño web» cambia el layout de verdad (lo hace el paginador midiendo
   la página al ancho de la ventana). «Regla» y «Modo de lectura» son puramente
   visuales: ocultan filas del grid sin tocar el documento.
   ------------------------------------------------------------------------- */

/* Regla oculta: la fila del grid se colapsa. */
body.no-ruler #ruler-h { display: none; }
body.no-ruler #app { grid-template-rows: var(--wd-titlebar-h) auto 0 minmax(0, 1fr) var(--wd-statusbar-h); }

/* Modo de lectura: sin cinta, sin regla y con la barra de título reducida. */
body.view-read #ribbon,
body.view-read #ruler-h { display: none; }
body.view-read #app {
  grid-template-rows: var(--wd-titlebar-h) 0 0 minmax(0, 1fr) var(--wd-statusbar-h);
}
body.view-read #canvas { background: var(--wd-canvas-bg); }

/* Diseño web: las páginas se leen como un flujo continuo. */
body.view-web #page-holder .page {
  box-shadow: none;
  border-bottom: 1px solid transparent;
}