/*
 * Chrome de la aplicacion: barras, listas, botones, el escritorio gris.
 *
 * Lo que afecta a como se ve el CV va en paper.css, no aca. Esa separacion es
 * lo que permite que preview e impresion compartan una unica hoja de estilos.
 *
 * Estetica: escala de grises, sin sombras, sin gradientes, sin bordes
 * redondeados. Bordes de 1px y tipografia como jerarquia principal.
 */

/*
 * Geist self-hosted (licencia OFL). Fuente VARIABLE: un archivo cubre todo el
 * rango de pesos que ofrecen los ajustes de plantilla.
 *
 * Solo Sans. Geist Mono y el italico quedan afuera del presupuesto de pagina
 * (ver scripts/vendor.mjs): el editor usa la monoespaciada del sistema y el
 * navegador sintetiza el italico.
 *
 * `font-display: block` y no `swap`: un cambio de fuente a mitad de camino
 * remediria el documento y haria saltar los cortes de pagina ya dibujados.
 */
@font-face {
  font-family: 'Geist';
  src: url('/fonts/Geist-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}

:root {
  --app-bg: #e8e8e8;
  --surface: #fff;
  --ink: #111;
  --ink-muted: #6b6b6b;
  --ink-faint: #9a9a9a;
  --rule: #d4d4d4;
  --rule-strong: #111;
  --accent: #1a6b6b;

  --font-sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'Cascadia Mono', 'Consolas', monospace;

  --bar-height: 44px;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--app-bg);
  color: var(--ink);
  font: 400 14px/1.5 var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

[hidden] {
  display: none !important;
}

/* --- Barra superior --------------------------------------------------------- */

.app-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--bar-height);
  padding: 0 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
}

.app-bar h1 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.app-bar .spacer {
  flex: 1;
}

.doc-title-input {
  min-width: 0;
  flex: 0 1 320px;
  padding: 4px 6px;
  border: 1px solid transparent;
  background: transparent;
  font: inherit;
  font-weight: 600;
  color: inherit;
}

.doc-title-input:hover {
  border-color: var(--rule);
}

.doc-title-input:focus {
  outline: none;
  border-color: var(--rule-strong);
}

/* Estado de guardado: texto, no iconografia decorativa. */
.save-state {
  font-size: 12px;
  color: var(--ink-faint);
  white-space: nowrap;
}

.save-state[data-state='error'],
.save-state[data-state='offline'] {
  color: #a33;
}

/* --- Botones ----------------------------------------------------------------- */

button,
.button {
  padding: 5px 10px;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

button:hover,
.button:hover {
  border-color: var(--rule-strong);
}

button:focus-visible,
.button:focus-visible {
  outline: 2px solid var(--rule-strong);
  outline-offset: 1px;
}

button:disabled {
  color: var(--ink-faint);
  cursor: default;
}

button:disabled:hover {
  border-color: var(--rule);
}

button.primary {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

button.danger:hover {
  border-color: #a33;
  color: #a33;
}

a {
  color: var(--accent);
}

/* --- Vista de lista ----------------------------------------------------------- */

.doc-list-view {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 16px;
}

.doc-list-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.doc-list-head h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.doc-search {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid var(--rule);
  background: var(--surface);
  font: inherit;
}

.doc-search:focus {
  outline: none;
  border-color: var(--rule-strong);
}

.doc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.doc-item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 8px;
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
}

.doc-item-main {
  flex: 1;
  min-width: 0;
}

.doc-item-title {
  display: block;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}

.doc-item-title:hover {
  text-decoration: underline;
}

.doc-item-meta {
  font-size: 12px;
  color: var(--ink-faint);
}

.doc-item-note {
  font-size: 12px;
  color: var(--ink-muted);
  font-style: italic;
}

.doc-item-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.empty-state {
  padding: 48px 8px;
  text-align: center;
  color: var(--ink-muted);
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
}

/* --- Editor ------------------------------------------------------------------- */

.workspace {
  display: grid;
  grid-template-columns: minmax(320px, 40%) 1fr;
  height: calc(100% - var(--bar-height));
}

.editor-pane {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--rule);
  background: var(--surface);
}

.editor-textarea {
  flex: 1;
  width: 100%;
  padding: 24px;
  border: 0;
  resize: none;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  tab-size: 2;
}

.editor-textarea:focus {
  outline: none;
}

.preview-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--app-bg);
}

.preview-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  font-size: 12px;
}

/* Indicador de espacio: la señal que hace resumir sin pedirlo. */
.space-indicator {
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.space-indicator[data-tone='tight'] {
  color: #9a6b00;
}

.space-indicator[data-tone='over'],
.space-indicator[data-tone='full'] {
  color: #a33;
}

.preview-scroll {
  flex: 1;
  overflow: auto;
  padding: 24px 16px 64px;
}

/*
 * El corte entre paginas se dibuja sobre el propio bloque empujado: una banda
 * del color del escritorio que ocupa el espacio sobrante de la pagina anterior,
 * mas la linea del borde de la hoja siguiente.
 */
.page-break-before {
  position: relative;
}

.page-break-before::before {
  content: '';
  position: absolute;
  left: calc(var(--paper-margin-x) * -1);
  right: calc(var(--paper-margin-x) * -1);
  bottom: 100%;
  height: calc(var(--page-gap-height, 0px));
  background: var(--app-bg);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  pointer-events: none;
}

/* --- Movil: tabs en vez de split view ------------------------------------------ */

.view-tabs {
  display: none;
  gap: 0;
}

.view-tabs button[aria-selected='true'] {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

@media (max-width: 860px) {
  .workspace {
    grid-template-columns: 1fr;
  }

  .view-tabs {
    display: flex;
  }

  .workspace[data-mobile-view='edit'] .preview-pane,
  .workspace[data-mobile-view='preview'] .editor-pane {
    display: none;
  }

  .editor-pane {
    border-right: 0;
  }

  .preview-scroll {
    padding: 16px 8px 48px;
  }

  /* La hoja se escala para entrar en pantalla sin cambiar sus medidas reales:
     lo que se imprime sigue siendo una A4 de verdad. */
  .paper {
    transform: scale(var(--paper-scale, 1));
    transform-origin: top left;
  }
}