/* ============================================================================
   ribbon.css — Cinta de opciones de Word 2024 (M365 Light), QAT, desplegables
   propios de la cinta (listas, paletas, galerías) y BARRA DE ESTADO.

   Portado de Odyssey (`public/css/ribbon.css`) CONSERVANDO LOS NOMBRES DE
   CLASE, porque `ui/ribbon.js` / `ui/statusbar.js` (A5) se adaptan de los de
   Odyssey y los mantienen. Solo cambian la paleta (var(--wd-*) de tokens.css)
   y las medidas: pestañas 33px + cuerpo 75px = 108px de cinta (plan §2.2,
   "~96-108 px"), píldora BLANCA en la pestaña activa, pestaña Archivo azul
   #2B579A, conmutadores activos en azul claro.

   Los desplegables/paletas mantienen el prefijo `xl-` de Odyssey y además
   aceptan el alias `wd-` (mismo estilo) por si A5 renombra el prefijo.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. Contenedor de la cinta y fila de pestañas
   ------------------------------------------------------------------------- */

#ribbon {
  background: var(--wd-ribbon-bg);
  border-bottom: 1px solid var(--wd-separator);
  -webkit-user-select: none;
  user-select: none;
  font-family: var(--wd-font-ui);
  font-size: var(--wd-fontsize-ui);
  min-width: 0;
  overflow: hidden;
}

.rb-tabs {
  height: var(--wd-ribbon-tabs-h);
  display: flex;
  align-items: flex-end;
  gap: 2px;
  padding: 0 8px;
  background: var(--wd-ribbon-bg);
  overflow: hidden;
}

.rb-tab {
  border: none;
  background: none;
  font: inherit;
  color: var(--wd-text-2);
  padding: 6px 11px 7px;
  border-radius: 4px 4px 0 0;
  cursor: pointer;
  white-space: nowrap;
}
.rb-tab:hover { background: var(--wd-hover-solid); }

/* Píldora blanca de la pestaña activa (se funde con el cuerpo blanco). */
.rb-tab.is-active {
  background: var(--wd-ribbon-tab-active-bg);
  color: var(--wd-text);
  font-weight: 600;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.06);
}

/* Pestaña Archivo: botón azul de marca Word. */
.rb-tab-file {
  background: var(--wd-blue);
  color: #FFFFFF;
  border-radius: 4px;
  margin: 3px 6px 4px 0;
  padding: 4px 16px 5px;
}
.rb-tab-file:hover { background: var(--wd-blue-dark); }
.rb-tab-file.is-active { background: var(--wd-blue-dark); color: #FFFFFF; box-shadow: none; }

/* ---------------------------------------------------------------------------
   2. Cuerpo de la cinta, paneles y grupos
   ------------------------------------------------------------------------- */

.rb-body {
  height: var(--wd-ribbon-body-h);
  background: var(--wd-ribbon-body-bg);
  overflow: hidden;
}
.rb-body.is-disabled { pointer-events: none; opacity: 0.45; }

.rb-panel {
  display: flex;
  align-items: stretch;
  height: 100%;
  padding: 3px 8px 0;
  overflow: hidden;
}

.ribbon-group {
  display: flex;
  flex-direction: column;
  padding: 0 6px;
  border-right: 1px solid var(--wd-group-sep);
  flex: none;
}
.ribbon-group:last-child { border-right: none; }

/* Grupos de las pestañas aún no funcionales (Insertar, Dibujar…). */
.ribbon-group.is-placeholder { opacity: 0.45; pointer-events: none; }
.rg-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  height: 100%;
  color: var(--wd-text-disabled);
  font-size: 11px;
  font-style: italic;
}

.rg-content {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  gap: 3px;
}

/* Etiqueta inferior del grupo (+ lanzador de diálogo opcional). */
.rg-label {
  height: 17px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 10.5px;
  color: var(--wd-text-secondary);
  white-space: nowrap;
}
.rg-launcher {
  border: none;
  background: none;
  font-size: 9px;
  line-height: 1;
  color: var(--wd-text-secondary);
  cursor: pointer;
  padding: 1px 3px;
  border-radius: 2px;
}
.rg-launcher:hover { background: var(--wd-hover-solid); color: var(--wd-text); }

/* Maquetación interna de los grupos. */
.rg-row { display: flex; align-items: center; gap: 2px; }
.rg-col { display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.rg-vsep { width: 1px; height: 18px; background: var(--wd-group-sep); margin: 0 3px; }

/* ---------------------------------------------------------------------------
   3. Botones de la cinta
   ------------------------------------------------------------------------- */

.rb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: none;
  background: none;
  border-radius: 4px;
  color: var(--wd-text-2);
  font: inherit;
  cursor: pointer;
  padding: 0;
}
.rb-btn:hover { background: var(--wd-hover-solid); }
.rb-btn:active { background: var(--wd-pressed); }
.rb-btn:disabled { color: var(--wd-text-disabled); cursor: default; }
.rb-btn:disabled:hover { background: none; }
.rb-btn svg { flex: none; }

/* Estado de conmutador activo (N/K/S, alineaciones…) — azul claro de Word. */
.rb-btn.is-active {
  background: var(--wd-toggle-active-bg);
  box-shadow: inset 0 0 0 1px var(--wd-toggle-active-ring);
}
.rb-btn.is-active:hover { background: var(--wd-toggle-active-hover); }

/* Botón pequeño 24×24 (icono 16). */
.rb-small { width: 24px; height: 24px; }
.rb-has-arrow { width: 34px; }
.rb-has-arrow svg:last-child { width: 10px; height: 10px; margin-left: -2px; }

/* Botón dividido pequeño: zona principal + flecha (subrayado, resaltado…). */
.rb-split { display: inline-flex; }
.rb-split-main { width: 24px; height: 24px; border-radius: 4px 0 0 4px; }
.rb-split-arrow { width: 13px; height: 24px; border-radius: 0 4px 4px 0; }
.rb-split-arrow svg { width: 9px; height: 9px; }
.rb-split-arrow.is-open,
.rb-btn.is-open,
.is-open { background: var(--wd-pressed); }

/* Barra de color bajo el icono (color de fuente / resaltado). */
.rb-colorbar {
  display: block;
  width: 14px;
  height: 3px;
  border-radius: 1px;
  margin-top: -3px;
  background: currentColor;
}

/* Botón grande (icono arriba, etiqueta abajo). Ajustado a un cuerpo de 75px:
   75 − 3 (padding) − 17 (rg-label) = 55px útiles. */
.rb-big {
  flex-direction: column;
  justify-content: flex-start;
  width: 58px;
  min-height: 54px;
  padding: 4px 2px 2px;
  font-size: 10.5px;
  line-height: 1.1;
  text-align: center;
  gap: 2px;
}
.rb-big > svg { width: 20px; height: 20px; }
.rb-big-label {
  display: inline-block;
  white-space: normal;
  color: var(--wd-text-2);
}
.rb-big-label svg { width: 9px; height: 9px; vertical-align: -1px; }

/* Botón grande dividido (Pegar): zona superior + inferior con etiqueta. */
.rb-bigsplit {
  display: flex;
  flex-direction: column;
  width: 50px;
  height: 54px;
}
.rb-big-top { flex: 1; border-radius: 4px 4px 0 0; }
.rb-big-top svg { width: 20px; height: 20px; }
.rb-big-bottom {
  height: 22px;
  flex: none;
  border-radius: 0 0 4px 4px;
  flex-direction: column;
  gap: 0;
  font-size: 10.5px;
}
.rb-big-bottom svg { width: 9px; height: 9px; }

/* Botón mediano (icono + texto + flecha), filas de 22px. */
.rb-med {
  height: 22px;
  padding: 0 6px;
  font-size: 11.5px;
  justify-content: flex-start;
  white-space: nowrap;
}
.rb-med svg:last-child:not(:first-child) { width: 9px; height: 9px; }

/* Checkbox de la cinta (Vista → Mostrar: regla, líneas de cuadrícula…). */
.rb-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--wd-text-2);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
}
.rb-check:hover { background: var(--wd-hover-solid); }
.rb-check input { accent-color: var(--wd-accent); margin: 0; }

/* ---------------------------------------------------------------------------
   4. Cuadros combinados (fuente, tamaño)
   ------------------------------------------------------------------------- */

.rb-combo {
  display: inline-flex;
  align-items: center;
  height: 22px;
  border: 1px solid var(--wd-border-soft);
  border-radius: 2px;
  background: #FFFFFF;
  overflow: hidden;
}
.rb-combo:hover { border-color: #A19F9D; }
.rb-combo:focus-within { border-color: var(--wd-accent); }
.rb-combo input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  font: inherit;
  font-size: 11.5px;
  padding: 0 5px;
  color: var(--wd-text);
  background: none;
}
.rb-combo-value {
  flex: 1;
  min-width: 0;
  font-size: 11.5px;
  padding: 0 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rb-combo-arrow {
  width: 15px;
  height: 100%;
  border: none;
  background: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--wd-text-secondary);
  flex: none;
}
.rb-combo-arrow:hover { background: var(--wd-hover-solid); }
.rb-combo-arrow svg { width: 9px; height: 9px; }

/* Anchos típicos de Word: nombre de fuente 118px, tamaño 48px. */
.rb-combo-font { width: 118px; }
.rb-combo-size { width: 48px; }

/* ---------------------------------------------------------------------------
   5. Galería de estilos (Inicio → Estilos)
   ------------------------------------------------------------------------- */

.rb-styles {
  display: flex;
  align-items: center;
  gap: 3px;
  max-width: 340px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}
.rb-style {
  flex: none;
  width: 64px;
  height: 50px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border: 1px solid var(--wd-separator);
  border-radius: 2px;
  background: #FFFFFF;
  font: inherit;
  cursor: pointer;
  padding: 0;
  overflow: hidden;
}
.rb-style:hover { border-color: var(--wd-accent); }
.rb-style.is-active {
  border-color: var(--wd-accent);
  box-shadow: inset 0 0 0 1px var(--wd-accent);
}
.rb-style-prev {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--wd-font-doc);
  color: var(--wd-text);
  overflow: hidden;
  white-space: nowrap;
}
.rb-style-name {
  height: 14px;
  flex: none;
  font-size: 9px;
  line-height: 14px;
  color: var(--wd-text-secondary);
  background: var(--wd-gallery-bg);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 2px;
}

/* ---------------------------------------------------------------------------
   6. Desplegables propios de la cinta (listas, paletas, galerías)
   Prefijo `xl-` de Odyssey + alias `wd-`.
   ------------------------------------------------------------------------- */

.xl-dropdown,
.wd-dropdown {
  position: fixed;
  z-index: 3000;
  background: #FFFFFF;
  border: 1px solid var(--wd-border-soft);
  border-radius: 4px;
  box-shadow: var(--wd-menu-shadow);
  padding: 4px;
  max-height: 70vh;
  overflow: auto;
  font-family: var(--wd-font-ui);
  font-size: 12px;
  color: var(--wd-text-2);
}

/* Lista simple (fuentes, tamaños, interlineado). */
.xl-list,
.wd-list { display: flex; flex-direction: column; min-width: 150px; }
.xl-list-narrow,
.wd-list-narrow { min-width: 56px; }

.xl-list-item,
.wd-list-item {
  border: none;
  background: none;
  font: inherit;
  text-align: left;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 2px;
  color: var(--wd-text-2);
  white-space: nowrap;
}
.xl-list-item:hover,
.wd-list-item:hover { background: var(--wd-hover-solid); }
.xl-list-item.is-active,
.wd-list-item.is-active { background: var(--wd-toggle-active-bg); }
.xl-list-item:disabled,
.wd-list-item:disabled { color: var(--wd-text-disabled); cursor: default; background: none; }

/* Separador y pie de una lista ("Opciones de interlineado…"). */
.xl-list-sep,
.wd-list-sep { height: 1px; background: var(--wd-group-sep); margin: 4px 6px; }
.xl-list-more,
.wd-list-more { border-top: 1px solid var(--wd-group-sep); margin-top: 4px; color: var(--wd-accent); }

/* Paleta de colores (tema 10 columnas + estándar). */
.xl-palette,
.wd-palette { width: 216px; padding: 4px; }
.xl-pal-title,
.wd-pal-title {
  font-size: 11px;
  color: var(--wd-text-secondary);
  margin: 6px 2px 3px;
}
.xl-pal-grid,
.wd-pal-grid {
  display: grid;
  grid-template-columns: repeat(10, 18px);
  gap: 2px;
}
/* Paleta de resaltado de Word: 15 colores en 5 columnas. */
.xl-pal-grid.is-highlight,
.wd-pal-grid.is-highlight { grid-template-columns: repeat(5, 20px); gap: 3px; }

.xl-swatch,
.wd-swatch {
  width: 18px;
  height: 18px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 2px;
  padding: 0;
  cursor: pointer;
  display: inline-block;
}
.xl-pal-grid.is-highlight .xl-swatch,
.wd-pal-grid.is-highlight .wd-swatch { width: 20px; height: 20px; }
.xl-swatch:hover,
.wd-swatch:hover { outline: 2px solid var(--wd-accent); outline-offset: 0; }
.xl-swatch.is-active,
.wd-swatch.is-active { outline: 2px solid var(--wd-accent); outline-offset: 0; }

/* Entrada especial de la paleta ("Automático", "Sin color", "Más colores…"). */
.xl-pal-special,
.wd-pal-special {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: none;
  background: none;
  font: inherit;
  font-size: 12px;
  padding: 5px 6px;
  cursor: pointer;
  border-radius: 2px;
  color: var(--wd-text-2);
}
.xl-pal-special:hover,
.wd-pal-special:hover { background: var(--wd-hover-solid); }

/* Galerías genéricas (estilos, viñetas…). */
.xl-gallery,
.wd-gallery { padding: 4px 6px; max-width: 340px; }
.xl-gallery-row,
.wd-gallery-row { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------------------------------------------------------------------------
   7. QAT (barra de acceso rápido, dentro de #titlebar → #qat)
   ------------------------------------------------------------------------- */

.qat-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  background: none;
  border-radius: 4px;
  color: var(--wd-text-2);
  font: inherit;
  cursor: pointer;
  padding: 0;
}
.qat-btn:hover { background: var(--wd-hover-solid); }
.qat-btn:active { background: var(--wd-pressed); }
.qat-btn:disabled { color: var(--wd-text-disabled); cursor: default; }
.qat-btn:disabled:hover { background: none; }
.qat-btn svg { flex: none; }

/* ---------------------------------------------------------------------------
   8. BARRA DE ESTADO (ui/statusbar.js) — el contenedor #statusbar se dimensiona
   en word.css; aquí van sus piezas internas.
   ------------------------------------------------------------------------- */

.st { justify-content: flex-start; }

.st-spacer { flex: 1; }

/* Bloques informativos: "Página 1 de 3", "12 palabras", "Español (España)". */
.st-item,
.st-mode,
.st-page,
.st-words,
.st-lang {
  color: var(--wd-text-2);
  white-space: nowrap;
  border: none;
  background: none;
  font: inherit;
  padding: 2px 6px;
  border-radius: 3px;
}
.st-item.is-clickable,
.st-page,
.st-words { cursor: pointer; }
.st-item.is-clickable:hover,
.st-page:hover,
.st-words:hover { background: var(--wd-hover-solid); }
.st-mode { min-width: 72px; cursor: default; }
.st-aggs { display: flex; gap: 18px; color: var(--wd-text-2); }

/* Botones de vista (Diseño de impresión / Web / Lectura) — v0.1 decorativos. */
.st-views { display: flex; align-items: center; gap: 2px; flex: none; }
.st-view-btn {
  width: 22px;
  height: 20px;
  border: none;
  background: none;
  color: var(--wd-text-2);
  cursor: pointer;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.st-view-btn:hover { background: var(--wd-hover-solid); }
.st-view-btn.is-active { background: var(--wd-toggle-active-bg); }

/* Zoom: − [slider] + y porcentaje clicable. */
.st-zoom { display: flex; align-items: center; gap: 6px; flex: none; }
.st-zoom-btn {
  width: 18px;
  height: 18px;
  border: none;
  background: none;
  font-size: 13px;
  line-height: 1;
  color: var(--wd-text-2);
  cursor: pointer;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.st-zoom-btn:hover { background: var(--wd-hover-solid); }

.st-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100px;
  height: 2px;
  background: var(--wd-border-strong);
  border-radius: 1px;
  outline: none;
  cursor: pointer;
}
.st-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 8px;
  height: 14px;
  border-radius: 2px;
  background: #605E5C;
  border: 1px solid #FFFFFF;
}
.st-slider::-webkit-slider-thumb:hover { background: var(--wd-accent); }
.st-slider::-moz-range-thumb {
  width: 8px;
  height: 14px;
  border-radius: 2px;
  background: #605E5C;
  border: 1px solid #FFFFFF;
}

.st-zoom-pct {
  min-width: 46px;
  border: none;
  background: none;
  font: inherit;
  font-size: 12px;
  text-align: right;
  color: var(--wd-text-2);
  cursor: pointer;
  border-radius: 3px;
  padding: 2px 4px;
}
.st-zoom-pct:hover { background: var(--wd-hover-solid); }

/* ---------------------------------------------------------------------------
   Cuadrícula de «Insertar tabla» (pestaña Insertar) — la pinta ui/ribbon.js
   ------------------------------------------------------------------------- */

.rb-tablegrid {
  padding: 8px;
  background: #FFFFFF;
  border: 1px solid var(--wd-border-soft);
  box-shadow: var(--wd-menu-shadow);
  border-radius: 3px;
}

.rb-tablegrid-title {
  font-size: 12px;
  color: var(--wd-text-2);
  text-align: center;
  margin-bottom: 6px;
}

.rb-tablegrid-cell {
  width: 18px;
  height: 18px;
  border: 1px solid var(--wd-border-soft);
  background: #FFFFFF;
  cursor: pointer;
}
.rb-tablegrid-cell.is-on {
  background: var(--wd-toggle-active-bg);
  border-color: var(--wd-accent);
}

.rb-tablegrid-more {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 5px 8px;
  font: inherit;
  font-size: 12px;
  text-align: left;
  color: var(--wd-text-2);
  background: none;
  border: none;
  border-top: 1px solid var(--wd-separator);
  cursor: pointer;
}
.rb-tablegrid-more:hover { background: var(--wd-hover-solid); }