/* =====================================================================
   SYNTAXIA AGENDA · estilos
   Concepto: un escritorio con una agenda de cuero abierta. Barra arriba,
   cinta de herramientas tipo Word, libro de dos páginas al centro y
   pestañas de meses que asoman por el canto derecho.
   ===================================================================== */

:root {
  /* Mesa y cuero */
  --mesa: #d4d9de;
  --mesa-2: #bfc6cd;
  --cuero: #5a1d22;
  --cuero-2: #3a1014;
  --cuero-luz: #7b2c33;
  --costura: rgba(214, 180, 108, 0.5);
  --oro: #c8a45d;
  --oro-claro: #ead39a;
  --oro-oscuro: #8b6d33;
  --cinta-roja: #9b1c2a;
  --elastico: #2b0d10;
  /* Medallón oscuro donde va incrustado el logo cian de Syntaxia (igual en ambos temas) */
  --medallon: #0a1017;
  --medallon-2: #16283a;
  --brillo-logo: rgba(56, 189, 248, 0.32);

  /* Papel y tinta (el papel es claro en ambos temas, como un libro real) */
  --papel: #f8f2e4;
  --papel-2: #eee4ce;
  --papel-borde: #d8caab;
  --pliegue: rgba(70, 45, 20, 0.22);
  --tinta: #2a2420;
  --tinta-suave: #685d52;
  --tinta-tenue: #9b8f81;
  --renglon: #cbd7e4;
  --margen: #e3a29f;
  --rojo: #b3261e;
  --rojo-suave: rgba(179, 38, 30, 0.08);
  --azul: #1f3a6b;
  --azul-suave: rgba(31, 58, 107, 0.1);
  --resaltar: rgba(255, 221, 120, 0.55);

  /* Interfaz (barra, cinta, panel) */
  --ui: #fbf9f4;
  --ui-2: #f2eee5;
  --ui-borde: #dbd3c4;
  --ui-texto: #29241f;
  --ui-suave: #6c6359;
  --ui-hover: #ebe5d8;
  --ui-activo: #e1d5bd;
  --marca: #5a1d22;
  --boton-ia: #1f3a6b;
  --sobre-oscuro: #f6f0e3;
  --chip: #e7edf6;
  --chip-texto: #1f3a6b;
  --error: #9c1f17;
  --error-fondo: #fbe6e3;
  --ok: #2f6b3a;
  --ok-fondo: #e3f1e5;
  --sombra: 0 34px 60px -24px rgba(30, 20, 15, 0.5), 0 14px 26px -14px rgba(30, 20, 15, 0.35);
  --sombra-ui: 0 10px 26px -14px rgba(30, 20, 15, 0.45);

  /* Tipografía */
  --f-display: 'Cormorant Garamond', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --f-texto: 'Lora', Georgia, 'Times New Roman', serif;
  --f-mano: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive;
  --f-ui: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --linea: 28px;
  --borde-libro: 14px;
  --ruido: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .28 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .32 0 0 0 0 .15 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --mesa: #161a1f; --mesa-2: #0c0f12;
    --cuero: #4c171c; --cuero-2: #2a0b0e; --cuero-luz: #682329;
    --costura: rgba(200, 165, 95, 0.4); --oro: #c4a05b; --oro-claro: #dfc58a; --oro-oscuro: #8d6e35;
    --cinta-roja: #861725; --elastico: #1d0709;
    --papel: #e9e0cb; --papel-2: #ddd1b8; --papel-borde: #c2b393; --pliegue: rgba(40, 25, 10, 0.3);
    --tinta: #241f1b; --tinta-suave: #5a5047; --tinta-tenue: #85796b;
    --renglon: #b8c6d4; --margen: #d18d8a; --rojo: #a5231a; --rojo-suave: rgba(165, 35, 26, 0.09);
    --azul: #1c3562; --azul-suave: rgba(28, 53, 98, 0.12); --resaltar: rgba(240, 205, 100, 0.55);
    --ui: #1d2228; --ui-2: #161a1f; --ui-borde: #313841; --ui-texto: #ebe6dc; --ui-suave: #a59d91;
    --ui-hover: #2a3139; --ui-activo: #38414c; --marca: #dfc58a; --boton-ia: #2b4c86; --sobre-oscuro: #f6f0e3;
    --chip: #263449; --chip-texto: #d5e1f4; --error: #ffb4a9; --error-fondo: #3d1a17; --ok: #9fd8a8; --ok-fondo: #183021;
    --sombra: 0 34px 60px -24px rgba(0, 0, 0, 0.75), 0 14px 26px -14px rgba(0, 0, 0, 0.6);
    --sombra-ui: 0 10px 26px -14px rgba(0, 0, 0, 0.7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --mesa: #161a1f; --mesa-2: #0c0f12;
  --cuero: #4c171c; --cuero-2: #2a0b0e; --cuero-luz: #682329;
  --costura: rgba(200, 165, 95, 0.4); --oro: #c4a05b; --oro-claro: #dfc58a; --oro-oscuro: #8d6e35;
  --cinta-roja: #861725; --elastico: #1d0709;
  --papel: #e9e0cb; --papel-2: #ddd1b8; --papel-borde: #c2b393; --pliegue: rgba(40, 25, 10, 0.3);
  --tinta: #241f1b; --tinta-suave: #5a5047; --tinta-tenue: #85796b;
  --renglon: #b8c6d4; --margen: #d18d8a; --rojo: #a5231a; --rojo-suave: rgba(165, 35, 26, 0.09);
  --azul: #1c3562; --azul-suave: rgba(28, 53, 98, 0.12); --resaltar: rgba(240, 205, 100, 0.55);
  --ui: #1d2228; --ui-2: #161a1f; --ui-borde: #313841; --ui-texto: #ebe6dc; --ui-suave: #a59d91;
  --ui-hover: #2a3139; --ui-activo: #38414c; --marca: #dfc58a; --boton-ia: #2b4c86; --sobre-oscuro: #f6f0e3;
  --chip: #263449; --chip-texto: #d5e1f4; --error: #ffb4a9; --error-fondo: #3d1a17; --ok: #9fd8a8; --ok-fondo: #183021;
  --sombra: 0 34px 60px -24px rgba(0, 0, 0, 0.75), 0 14px 26px -14px rgba(0, 0, 0, 0.6);
  --sombra-ui: 0 10px 26px -14px rgba(0, 0, 0, 0.7);
  color-scheme: dark;
}

/* ---------------- Base ---------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font: 15px/1.5 var(--f-ui);
  color: var(--ui-texto);
  background:
    radial-gradient(1200px 700px at 50% 35%, var(--mesa) 0%, var(--mesa-2) 100%) fixed,
    var(--mesa);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img { max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }
.solo-lector {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ico { width: 18px; height: 18px; flex: none; }
.logo-marca { display: block; width: 34px; height: 34px; flex: none; object-fit: contain; }
.eyebrow {
  margin: 0;
  font: 600 11px/1.2 var(--f-ui);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

/* =====================================================================
   PORTADA (tapa de cuero)
   ===================================================================== */
.portada-escena {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 32px 16px 72px;
}
.libro-cerrado { position: relative; width: min(470px, 100%); }
.tapa, .apertura-tapa {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 40px 54px 26px 46px;
  border-radius: 6px 16px 16px 6px;
  color: var(--oro);
  background:
    var(--ruido),
    radial-gradient(120% 80% at 30% 15%, var(--cuero-luz) 0%, transparent 60%),
    linear-gradient(140deg, var(--cuero) 0%, var(--cuero-2) 100%);
  box-shadow:
    var(--sombra),
    inset 10px 0 16px -8px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.tapa-costura {
  position: absolute;
  inset: 12px 14px 12px 22px;
  border: 1.5px dashed var(--costura);
  border-radius: 4px 10px 10px 4px;
  pointer-events: none;
}
.tapa-logo { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.tapa-logo .medallon { margin: 6px 0 10px; }
.medallon {
  display: grid;
  place-items: center;
  width: 122px; height: 122px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, var(--medallon-2) 0%, var(--medallon) 72%);
  box-shadow:
    0 0 0 2px var(--oro),
    0 0 0 7px rgba(0, 0, 0, 0.22),
    0 0 0 8px var(--costura),
    inset 0 3px 10px rgba(0, 0, 0, 0.75),
    0 0 30px var(--brillo-logo);
}
.medallon .logo-marca {
  width: 96px; height: 96px;
  filter: drop-shadow(0 0 7px var(--brillo-logo));
}
.tapa-marca {
  margin: 0;
  padding-left: 0.32em;
  font: 600 32px/1 var(--f-display);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  background: linear-gradient(180deg, var(--oro-claro) 0%, var(--oro) 55%, var(--oro-oscuro) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.45));
}
.tapa-sub {
  margin: 0;
  padding-left: 0.6em;
  font: 600 11px/1 var(--f-ui);
  letter-spacing: 0.6em;
  text-transform: uppercase;
  color: var(--oro);
}
.tapa-titulo {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font: italic 500 46px/1 var(--f-display);
  color: var(--oro-claro);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}
.tapa-anio { font-style: normal; font-weight: 700; letter-spacing: 0.06em; font-variant-numeric: lining-nums; }
.tapa-pie {
  margin: 4px 0 0;
  font: italic 500 14px/1 var(--f-display);
  letter-spacing: 0.08em;
  color: var(--oro);
  opacity: 0.85;
}
.etiqueta-acceso {
  position: relative;
  width: 100%;
  padding: 18px 22px 22px;
  border-radius: 6px;
  color: var(--tinta);
  background: var(--grano), var(--papel);
  outline: 1px solid var(--oro);
  outline-offset: 5px;
  box-shadow: 0 2px 0 var(--papel-borde), 0 16px 26px -14px rgba(0, 0, 0, 0.65);
}
.pestanas-acceso {
  display: flex;
  gap: 20px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--papel-borde);
}
.pestanas-acceso a {
  margin-bottom: -1px;
  padding: 0 0 6px;
  font: 600 19px/1.2 var(--f-display);
  color: var(--tinta-suave);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.pestanas-acceso a.activa { color: var(--cuero); border-bottom-color: var(--cuero); }
.form-acceso { display: flex; flex-direction: column; gap: 2px; }
.form-acceso label {
  margin-top: 8px;
  font: 600 11px/1.2 var(--f-ui);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.form-acceso input {
  width: 100%;
  height: 40px;
  padding: 0 2px;
  border: 0;
  border-bottom: 1.5px solid var(--renglon);
  background: transparent;
  font: 17px/1 var(--f-texto);
  color: var(--tinta);
}
.form-acceso input:focus { outline: none; border-bottom-color: var(--azul); box-shadow: 0 1px 0 var(--azul); }
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.dos-columnas > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.btn-dorado {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  margin-top: 16px;
  padding: 0 22px;
  border: 1px solid var(--oro-oscuro);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--oro-claro), var(--oro));
  color: #3a1014;
  font: 700 15px/1 var(--f-ui);
  letter-spacing: 0.02em;
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 6px 14px -8px rgba(0, 0, 0, 0.6);
  transition: transform 0.15s ease, filter 0.15s ease;
}
.btn-dorado:hover { filter: brightness(1.05); transform: translateY(-1px); }
.btn-dorado:active { transform: translateY(0); }
.btn-dorado:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-secundario {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; margin-top: 16px; padding: 0 20px;
  border: 1px solid var(--papel-borde); border-radius: 999px;
  background: transparent; color: var(--tinta); font: 600 14px/1 var(--f-ui); text-decoration: none;
}
.btn-secundario:disabled { opacity: 0.5; cursor: not-allowed; }
.aviso {
  margin: 4px 0 6px;
  padding: 8px 10px;
  border-radius: 6px;
  font: 14px/1.4 var(--f-ui);
  background: var(--azul-suave);
  color: var(--azul);
}
.aviso-error { background: rgba(179, 38, 30, 0.1); color: var(--rojo); }
.aviso-ok { background: rgba(47, 107, 58, 0.12); color: #2f6b3a; }
.nota-demo { margin: 10px 0 0; font: italic 13px/1.4 var(--f-texto); color: var(--tinta-suave); text-align: center; }
.elastico {
  position: absolute;
  top: -6px; bottom: -6px; right: 20px;
  width: 15px;
  border-radius: 3px;
  background: linear-gradient(to right, var(--elastico), #3d1418 45%, var(--elastico));
  box-shadow: 3px 0 6px rgba(0, 0, 0, 0.35), -1px 0 0 rgba(255, 255, 255, 0.05);
  pointer-events: none;
}
.cinta-marca {
  position: absolute;
  bottom: -44px; left: 36%;
  width: 22px; height: 70px;
  background: linear-gradient(to right, var(--cinta-roja), #b8293a 50%, var(--cinta-roja));
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
  z-index: -1;
}
.cantos {
  position: absolute;
  top: 9px; bottom: 9px; right: -7px;
  width: 14px;
  border-radius: 0 5px 5px 0;
  background: repeating-linear-gradient(to bottom, var(--papel) 0 2px, var(--papel-borde) 2px 3px);
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
  z-index: -1;
}

/* =====================================================================
   ESCRITORIO DE LA AGENDA
   ===================================================================== */
.escritorio { min-height: 100%; display: flex; flex-direction: column; }

/* Barra superior */
.barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  padding: 12px 20px 10px;
}
.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--marca);
  text-decoration: none;
}
.marca .logo-marca { width: 40px; height: 40px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25)); }
.marca-texto { font: 600 23px/1 var(--f-display); letter-spacing: 0.01em; }
.marca-texto b { font-weight: 700; font-style: italic; }
.nav-fecha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-inline: auto; }
.selector-anio {
  display: flex;
  align-items: center;
  padding: 2px;
  border: 1px solid var(--ui-borde);
  border-radius: 999px;
  background: var(--ui);
}
.selector-anio .hb { border-radius: 999px; }
.lbl-anio {
  min-width: 3.4ch;
  font: 700 21px/1 var(--f-display);
  text-align: center;
  font-variant-numeric: tabular-nums lining-nums;
}
.sel-mes, .btn-barra {
  height: 38px;
  border: 1px solid var(--ui-borde);
  border-radius: 999px;
  background: var(--ui);
  color: var(--ui-texto);
  font: 500 14px/1 var(--f-ui);
}
.sel-mes { padding: 0 12px; }
.btn-barra { display: inline-flex; align-items: center; gap: 7px; padding: 0 14px; }
.btn-barra:hover, .sel-mes:hover { background: var(--ui-hover); }
.btn-barra.activo { background: var(--ui-activo); border-color: var(--ui-activo); }
.barra-derecha { display: flex; align-items: center; gap: 12px; }
.btn-ia {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--boton-ia);
  color: var(--sobre-oscuro);
  font: 600 14px/1 var(--f-ui);
  box-shadow: var(--sombra-ui);
}
.btn-ia .ico { color: var(--oro-claro); }
.btn-ia[aria-expanded="true"] { outline: 2px solid var(--oro); outline-offset: 2px; }
.usuario { display: flex; align-items: center; gap: 8px; }
.usuario form { margin: 0; }
.avatar {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--cuero);
  color: var(--oro-claro);
  font: 700 17px/1 var(--f-display);
  box-shadow: inset 0 0 0 1.5px var(--oro-oscuro);
}
.usuario-nombre { font: 500 14px/1.2 var(--f-ui); max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Botones de herramienta */
.hb {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 32px; height: 32px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ui-texto);
}
.hb:hover { background: var(--ui-hover); }
.hb.activo { background: var(--ui-activo); color: var(--marca); }
.hb:disabled { opacity: 0.4; cursor: not-allowed; }

/* Cinta tipo Word */
.cinta {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 0;
  width: min(1400px, calc(100% - 32px));
  margin: 0 auto;
  padding: 5px 4px;
  border: 1px solid var(--ui-borde);
  border-radius: 12px;
  background: var(--ui);
  box-shadow: var(--sombra-ui);
}
.grupo {
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 0 6px;
  border-right: 1px solid var(--ui-borde);
}
.grupo:last-child { border-right: 0; margin-left: auto; }
.sep { width: 1px; height: 20px; margin: 0 4px; background: var(--ui-borde); }
.sel-cinta {
  height: 32px;
  padding: 0 6px;
  border: 1px solid var(--ui-borde);
  border-radius: 6px;
  background: var(--ui);
  color: var(--ui-texto);
  font: 13px/1 var(--f-ui);
}
.sel-fuente { width: 118px; }
.sel-tamano { width: 56px; font-variant-numeric: tabular-nums; }
.sel-estilo { width: 92px; margin-right: 4px; }
.cinta .hb { width: 30px; }
.hb-color input {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; cursor: pointer; border: 0; padding: 0;
}
.barra-color {
  position: absolute;
  left: 8px; right: 8px; bottom: 4px;
  height: 3px;
  border-radius: 2px;
  background: var(--azul);
  pointer-events: none;
}
.hb-color .ico { margin-top: -3px; }
.btn-dictar {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 16px;
  border: 1px solid var(--cuero);
  border-radius: 999px;
  background: var(--cuero);
  color: var(--oro-claro);
  font: 600 13px/1 var(--f-ui);
}
.btn-dictar.grabando, .hb.grabando {
  border-color: var(--rojo);
  background: var(--rojo);
  color: #fff;
  animation: latido 1.3s ease-in-out infinite;
}
@keyframes latido {
  0%, 100% { box-shadow: 0 0 0 0 rgba(179, 38, 30, 0.45); }
  50% { box-shadow: 0 0 0 7px rgba(179, 38, 30, 0); }
}

/* ---------------- Mesa y libro ---------------- */
.mesa {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 64px 30px 16px;
}
.libro {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  width: min(1180px, 100%);
  height: clamp(540px, calc(100vh - 150px), 880px);
  height: clamp(540px, calc(100dvh - 150px), 880px);
  padding: var(--borde-libro);
  border-radius: 10px 16px 16px 10px;
  background:
    var(--ruido),
    radial-gradient(90% 60% at 25% 10%, var(--cuero-luz) 0%, transparent 60%),
    linear-gradient(140deg, var(--cuero) 0%, var(--cuero-2) 100%);
  box-shadow: var(--sombra), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  perspective: 2600px;
}
.en-dia .libro {
  height: clamp(520px, calc(100vh - 205px), 860px);
  height: clamp(520px, calc(100dvh - 205px), 860px);
}
.libro::after { /* pliegue central (lomo) */
  content: '';
  position: absolute;
  top: var(--borde-libro); bottom: var(--borde-libro); left: 50%;
  width: 70px;
  transform: translateX(-50%);
  background: linear-gradient(to right, transparent 0%, var(--pliegue) 46%, var(--pliegue) 50%, var(--pliegue) 54%, transparent 100%);
  opacity: 0.8;
  pointer-events: none;
  z-index: 6;
}
.pagina {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  color: var(--tinta);
  background-color: var(--papel);
}
.libro > .pagina.izq, .cara.izq {
  grid-column: 1;
  border-radius: 4px 0 0 4px;
  background-image: var(--grano), linear-gradient(to right, var(--papel-2) 0%, var(--papel) 5%, var(--papel) 86%, var(--papel-2) 100%);
}
.libro > .pagina.der, .cara.der {
  grid-column: 2;
  border-radius: 0 4px 4px 0;
  background-image: var(--grano), linear-gradient(to left, var(--papel-2) 0%, var(--papel) 5%, var(--papel) 86%, var(--papel-2) 100%);
}
.libro > .pagina.izq { box-shadow: -1px 1px 0 var(--papel-borde), -2px 2px 0 var(--papel), -3px 3px 0 var(--papel-borde), -4px 4px 0 var(--papel); }
.libro > .pagina.der { box-shadow: 1px 1px 0 var(--papel-borde), 2px 2px 0 var(--papel), 3px 3px 0 var(--papel-borde), 4px 4px 0 var(--papel); }

.hoja-contenido {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  padding: 30px 40px 54px 42px;
  scrollbar-width: thin;
  scrollbar-color: var(--papel-borde) transparent;
}
.folio {
  position: absolute;
  bottom: 14px;
  font: italic 500 14px/1 var(--f-display);
  color: var(--tinta-tenue);
  font-variant-numeric: oldstyle-nums;
  pointer-events: none;
}
.izq .folio { left: 30px; }
.der .folio { right: 30px; }

/* Esquinas para pasar la página (oreja de perro) */
.esquina {
  position: absolute;
  bottom: 0;
  width: 54px; height: 54px;
  padding: 0;
  border: 0;
  background: transparent;
  z-index: 5;
}
.esquina::before {
  content: '';
  position: absolute;
  bottom: 0;
  width: 20px; height: 20px;
  transition: width 0.22s ease, height 0.22s ease;
  box-shadow: -3px -3px 6px -2px rgba(0, 0, 0, 0.25);
}
.esquina-der { right: 0; }
.esquina-der::before {
  right: 0;
  background: linear-gradient(315deg, var(--cuero-2) 0 50%, var(--papel-2) 50% 100%);
  border-top-left-radius: 4px;
}
.esquina-izq { left: 0; }
.esquina-izq::before {
  left: 0;
  background: linear-gradient(45deg, var(--cuero-2) 0 50%, var(--papel-2) 50% 100%);
  border-top-right-radius: 4px;
  box-shadow: 3px -3px 6px -2px rgba(0, 0, 0, 0.25);
}
.esquina:hover::before, .esquina:focus-visible::before { width: 42px; height: 42px; }
.esquina:focus-visible { outline: none; }

/* Hoja que se voltea */
.hoja-volteo {
  position: absolute;
  top: var(--borde-libro);
  bottom: var(--borde-libro);
  transform-style: preserve-3d;
  transition: transform 0.85s cubic-bezier(0.42, 0.06, 0.26, 1);
  z-index: 8;
  pointer-events: none;
}
.hoja-volteo.desde-der { left: 50%; right: var(--borde-libro); transform-origin: left center; }
.hoja-volteo.desde-der.girando { transform: rotateY(-180deg); }
.hoja-volteo.desde-izq { left: var(--borde-libro); right: 50%; transform-origin: right center; }
.hoja-volteo.desde-izq.girando { transform: rotateY(180deg); }
.cara {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background-color: var(--papel);
}
.cara.dorso { transform: rotateY(180deg); }
.cara::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.desde-der .cara.frente::after { background: linear-gradient(to left, rgba(0, 0, 0, 0.28), transparent 70%); }
.desde-der .cara.dorso::after { background: linear-gradient(to right, rgba(0, 0, 0, 0.28), transparent 70%); }
.desde-izq .cara.frente::after { background: linear-gradient(to right, rgba(0, 0, 0, 0.28), transparent 70%); }
.desde-izq .cara.dorso::after { background: linear-gradient(to left, rgba(0, 0, 0, 0.28), transparent 70%); }
.girando .cara::after { animation: sombraHoja 0.85s ease both; }
@keyframes sombraHoja { 0% { opacity: 0; } 45% { opacity: 1; } 100% { opacity: 0; } }
.hoja-volteo.girando { filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.25)); }

/* Volteo simple en pantallas pequeñas */
.libro.salida-sig { animation: salidaSig 0.26s ease-in forwards; }
.libro.entrada-sig { animation: entradaSig 0.28s ease-out; }
.libro.salida-ant { animation: salidaAnt 0.26s ease-in forwards; }
.libro.entrada-ant { animation: entradaAnt 0.28s ease-out; }
@keyframes salidaSig { to { transform: perspective(1400px) rotateY(-70deg); opacity: 0.2; transform-origin: left; } }
@keyframes entradaSig { from { transform: perspective(1400px) rotateY(70deg); opacity: 0.2; transform-origin: right; } }
@keyframes salidaAnt { to { transform: perspective(1400px) rotateY(70deg); opacity: 0.2; transform-origin: right; } }
@keyframes entradaAnt { from { transform: perspective(1400px) rotateY(-70deg); opacity: 0.2; transform-origin: left; } }

/* Pestañas de meses en el canto */
.pestanas-mes {
  position: absolute;
  top: 34px; bottom: 34px; left: 100%;
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 44px;
  margin-left: -4px;
  z-index: 0;
}
.pestanas-mes button {
  flex: 1;
  min-height: 0;
  padding: 0 0 0 6px;
  border: 0;
  border-radius: 0 7px 7px 0;
  background: linear-gradient(to right, var(--papel-2), var(--papel));
  color: var(--tinta-suave);
  font: 600 11px/1 var(--f-ui);
  letter-spacing: 0.04em;
  text-align: left;
  box-shadow: 2px 1px 3px rgba(0, 0, 0, 0.22);
  transition: transform 0.15s ease, background 0.15s ease;
}
.pestanas-mes button:nth-child(3n + 2) { background: linear-gradient(to right, var(--papel-2), #f1e6cd); }
.pestanas-mes button:hover { transform: translateX(3px); color: var(--tinta); }
.pestanas-mes button.activa {
  transform: translateX(5px);
  background: linear-gradient(to right, var(--oro), var(--oro-claro));
  color: #3a1014;
}

/* Botones de página en móvil */
.nav-movil { display: none; }

/* ---------------- Página del mes ---------------- */
.mes-izq { display: flex; flex-direction: column; gap: 18px; }
.mes-cabecera { display: flex; flex-direction: column; gap: 2px; }
.mes-titulo {
  margin: 0;
  font: italic 600 clamp(52px, 6vw, 84px)/0.9 var(--f-display);
  color: var(--cuero);
  text-wrap: balance;
}
.mes-anio {
  font: 700 22px/1 var(--f-display);
  letter-spacing: 0.3em;
  color: var(--tinta-suave);
  font-variant-numeric: lining-nums;
}
.ornamento {
  height: 12px;
  background:
    radial-gradient(circle, var(--oro-oscuro) 2.5px, transparent 3px) center / 12px 12px no-repeat,
    linear-gradient(var(--oro-oscuro), var(--oro-oscuro)) left center / calc(50% - 12px) 1px no-repeat,
    linear-gradient(var(--oro-oscuro), var(--oro-oscuro)) right center / calc(50% - 12px) 1px no-repeat;
  opacity: 0.7;
}
.seccion-hoja h3 {
  margin: 0 0 8px;
  font: 600 11px/1.2 var(--f-ui);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.lista-fechas { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.lista-fechas li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  font: 15px/1.4 var(--f-texto);
}
.lista-fechas .dd {
  font: 700 22px/1 var(--f-display);
  color: var(--tinta);
  text-align: right;
  font-variant-numeric: lining-nums;
}
.lista-fechas .feriado .dd, .lista-fechas .feriado .texto { color: var(--rojo); }
.lista-fechas button.texto {
  padding: 0; border: 0; background: none; text-align: left; font: inherit; color: inherit;
}
.lista-fechas button.texto:hover { text-decoration: underline; text-decoration-color: var(--oro); }
.mensuales { display: flex; flex-wrap: wrap; gap: 6px; }
.sello {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  color: var(--cuero);
  font: italic 600 15px/1.2 var(--f-display);
}
.vacio-nota { margin: 0; font: italic 14px/1.5 var(--f-texto); color: var(--tinta-tenue); }
.resumen-notas { margin: 0; font: 15px/1.5 var(--f-texto); }
.resumen-notas b { font: 700 20px/1 var(--f-display); color: var(--azul); }

/* Calendario del mes */
.mes-der { display: flex; flex-direction: column; padding-bottom: 46px; }
.cal-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}
.cal-cabecera h2 { margin: 0; font: 600 26px/1 var(--f-display); color: var(--tinta); }
.cal-cabecera h2 span { color: var(--tinta-tenue); font-weight: 500; }
.leyenda { display: flex; flex-wrap: wrap; gap: 12px; font: 12px/1 var(--f-ui); color: var(--tinta-suave); }
.leyenda span { display: inline-flex; align-items: center; gap: 5px; }
.leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.leyenda .l-fer { background: var(--rojo); }
.leyenda .l-nota { background: var(--azul); }
.leyenda .l-hoy { border: 1.5px solid var(--rojo); }
.cal {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: auto;
  grid-auto-rows: minmax(0, 1fr);
  border-top: 2px solid var(--tinta);
  border-left: 1px solid var(--renglon);
}
.cal-sem {
  padding: 8px 6px 6px;
  border-right: 1px solid var(--renglon);
  border-bottom: 1px solid var(--tinta);
  font: 600 11px/1 var(--f-ui);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.cal-sem.dom { color: var(--rojo); }
.dia {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 0;
  overflow: hidden;
  padding: 6px 7px;
  border: 0;
  border-right: 1px solid var(--renglon);
  border-bottom: 1px solid var(--renglon);
  background: transparent;
  color: var(--tinta);
  text-align: left;
  transition: background 0.15s ease;
}
.dia:hover { background: var(--azul-suave); }
.dia .num {
  position: relative;
  align-self: flex-start;
  font: 600 25px/1 var(--f-display);
  font-variant-numeric: lining-nums;
}
.dia.domingo .num { color: var(--rojo); }
.dia.feriado { background: var(--rojo-suave); }
.dia.feriado .num { color: var(--rojo); }
.dia.otro-mes { opacity: 0.38; }
.dia.hoy .num { margin-bottom: 4px; }
.dia.hoy .num::before {
  content: '';
  position: absolute;
  inset: -7px -10px -8px -9px;
  border: 2px solid var(--rojo);
  border-radius: 52% 48% 55% 45% / 48% 55% 45% 52%;
  transform: rotate(-8deg);
}
.dia .etq {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font: 11px/1.25 var(--f-texto);
  color: var(--tinta-suave);
}
.dia .etq-fer { color: var(--rojo); font-weight: 600; }
.dia .apunte {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font: 600 16px/1.05 var(--f-mano);
  color: var(--azul);
}
.dia .tinta {
  position: absolute;
  top: 9px; right: 8px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--azul);
  box-shadow: 0 0 0 3px var(--azul-suave);
}

/* ---------------- Página del día (izquierda) ---------------- */
.dia-izq { display: flex; flex-direction: column; gap: 15px; }
.dia-cabecera { display: flex; align-items: flex-end; gap: 16px; }
.dia-num {
  font: 600 clamp(90px, 10vw, 132px)/0.78 var(--f-display);
  color: var(--cuero);
  font-variant-numeric: lining-nums;
  letter-spacing: -0.02em;
}
.dia-num.rojo { color: var(--rojo); }
.dia-nombres { display: flex; flex-direction: column; gap: 4px; padding-bottom: 4px; }
.dia-nombre { font: italic 600 32px/1 var(--f-display); color: var(--tinta); }
.dia-mes { font: 500 18px/1.1 var(--f-display); color: var(--tinta-suave); letter-spacing: 0.04em; }
.sello-feriado {
  align-self: flex-start;
  padding: 8px 14px 9px;
  border: 2px solid var(--rojo);
  border-radius: 6px;
  color: var(--rojo);
  transform: rotate(-2deg);
  background: var(--rojo-suave);
}
.sello-feriado small { display: block; font: 700 10px/1.2 var(--f-ui); letter-spacing: 0.2em; text-transform: uppercase; }
.sello-feriado b { font: 700 19px/1.2 var(--f-display); }
.lista-celebra { margin: 0; padding: 0 0 0 18px; font: 15px/1.5 var(--f-texto); }
.lista-celebra li::marker { color: var(--oro-oscuro); }
.sucesos { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.sucesos li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; align-items: baseline; font: 14.5px/1.45 var(--f-texto); }
.sucesos .anio {
  font: 700 18px/1 var(--f-display);
  color: var(--azul);
  text-align: right;
  font-variant-numeric: lining-nums tabular-nums;
}
.sucesos .peru .anio { color: var(--rojo); }
.etiqueta-ambito { display: inline-block; margin-left: 6px; font: 600 10px/1 var(--f-ui); letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta-tenue); }
.btn-tinta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  padding: 7px 12px;
  border: 1.5px dashed var(--azul);
  border-radius: 999px;
  background: transparent;
  color: var(--azul);
  font: 600 13px/1 var(--f-ui);
}
.btn-tinta:hover { background: var(--azul-suave); }
.btn-tinta:disabled { opacity: 0.6; cursor: progress; }
.fuente-ia { margin: 4px 0 0; font: italic 12px/1.4 var(--f-texto); color: var(--tinta-tenue); }
.contador {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding-top: 10px;
  border-top: 1px solid var(--papel-borde);
  font: italic 14px/1.4 var(--f-display);
  color: var(--tinta-suave);
}
.contador b { font-style: normal; color: var(--tinta); font-variant-numeric: lining-nums; }
.mini-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; max-width: 224px; }
.mini-cal span, .mini-cal button {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  max-width: 100%;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font: 13px/1 var(--f-texto);
  color: var(--tinta);
  font-variant-numeric: lining-nums;
}
.mini-cal span { font: 600 10px/1 var(--f-ui); color: var(--tinta-tenue); }
.mini-cal button:hover { background: var(--azul-suave); }
.mini-cal .m-fer { color: var(--rojo); font-weight: 600; }
.mini-cal .m-nota { box-shadow: inset 0 -2px 0 var(--azul); border-radius: 4px; }
.mini-cal .m-actual { background: var(--cuero); color: var(--oro-claro); }

/* ---------------- Página del día (derecha, editor) ---------------- */
.dia-der {
  display: flex;
  flex-direction: column;
  padding: 24px 0 44px;
}
.encabezado-hoja {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 0 30px 8px 76px;
  border-bottom: 2px solid var(--margen);
}
.encabezado-hoja .fecha-larga { font: italic 600 22px/1.1 var(--f-display); color: var(--azul); }
.estado-guardado {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 12px/1 var(--f-ui);
  color: var(--tinta-tenue);
  white-space: nowrap;
}
.estado-guardado::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #5b8f63; }
.estado-guardado.pendiente::before { background: var(--oro); }
.estado-guardado.error { color: var(--rojo); }
.estado-guardado.error::before { background: var(--rojo); }
.editor {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 30px 60px 76px;
  outline: none;
  font: 16px/var(--linea) var(--f-texto);
  color: var(--tinta);
  caret-color: var(--azul);
  word-wrap: break-word;
  background-image:
    linear-gradient(to right, transparent 54px, var(--margen) 54px, var(--margen) 55px, transparent 55px, transparent 58px, var(--margen) 58px, var(--margen) 59px, transparent 59px),
    repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--linea) - 1px), var(--renglon) calc(var(--linea) - 1px), var(--renglon) var(--linea));
  background-attachment: local, local;
  background-position: 0 0, 0 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--papel-borde) transparent;
}
.editor.vacio::before {
  content: attr(data-placeholder);
  position: absolute;
  top: 4px; left: 76px; right: 30px;
  font-style: italic;
  color: var(--tinta-tenue);
  pointer-events: none;
}
.editor p, .editor div { margin: 0; }
.editor h1 { margin: 0; font: 600 30px/calc(var(--linea) * 2) var(--f-display); color: var(--cuero); }
.editor h2 { margin: 0; font: 600 23px/var(--linea) var(--f-display); color: var(--cuero); }
.editor h3 { margin: 0; font: 600 18px/var(--linea) var(--f-texto); color: var(--tinta); }
.editor blockquote {
  margin: 0 0 0 4px;
  padding-left: 14px;
  border-left: 3px solid var(--oro);
  font-style: italic;
  color: var(--tinta-suave);
}
.editor ul, .editor ol { margin: 0; padding-left: 26px; }
.editor a { color: var(--azul); text-decoration-color: var(--oro); }
.editor hr { margin: 13px 0 14px; border: 0; border-top: 1px dashed var(--tinta-tenue); }
.editor img { max-width: 100%; height: auto; border-radius: 3px; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.5); cursor: pointer; }
.editor img.img-izq { float: left; margin: 4px 14px 6px 0; }
.editor img.img-der { float: right; margin: 4px 0 6px 14px; }
.editor img.img-centro { display: block; margin: 6px auto; }
.editor img.seleccionada { outline: 2px solid var(--oro); outline-offset: 3px; }
.editor table { border-collapse: collapse; margin: 0 0 var(--linea); background: rgba(255, 255, 255, 0.35); }
.editor td, .editor th { min-width: 60px; padding: 0 8px; border: 1px solid var(--tinta-tenue); line-height: calc(var(--linea) - 1px); vertical-align: top; }
.editor ul.tareas { list-style: none; padding-left: 4px; }
.editor ul.tareas li { position: relative; padding-left: 30px; }
.editor ul.tareas li::before {
  content: '';
  position: absolute;
  left: 4px; top: 6px;
  width: 15px; height: 15px;
  border: 1.6px solid var(--azul);
  border-radius: 3px;
  background: var(--papel);
  cursor: pointer;
}
.editor ul.tareas li.hecho { color: var(--tinta-tenue); text-decoration: line-through; text-decoration-color: var(--rojo); }
.editor ul.tareas li.hecho::after {
  content: '';
  position: absolute;
  left: 9px; top: 4px;
  width: 6px; height: 12px;
  border: solid var(--rojo);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(40deg);
  pointer-events: none;
}
.editor .nota-ia { position: relative; }
.editor .nota-ia::before {
  content: '✦';
  position: absolute;
  left: -20px;
  font-size: 11px;
  color: var(--oro-oscuro);
}
.editor div.nota-ia { padding-left: 10px; border-left: 2px dotted var(--oro); }

/* ---------------- Burbuja de dictado ---------------- */
.burbuja-voz {
  position: absolute;
  left: 50%; bottom: 8px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(640px, calc(100% - 32px));
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--ui);
  color: var(--ui-texto);
  border: 1px solid var(--ui-borde);
  box-shadow: var(--sombra-ui);
  font: 14px/1.3 var(--f-ui);
  z-index: 20;
}
.burbuja-voz #textoVoz { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.punto-grabando { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--rojo); animation: latido 1.3s ease-in-out infinite; }

/* ---------------- Panel del asistente ---------------- */
.panel-ia {
  position: fixed;
  top: 12px; right: 12px; bottom: 12px;
  display: flex;
  flex-direction: column;
  width: min(410px, calc(100vw - 24px));
  border: 1px solid var(--ui-borde);
  border-radius: 16px;
  background: var(--ui);
  color: var(--ui-texto);
  box-shadow: var(--sombra);
  z-index: 50;
  animation: entrarPanel 0.24s ease;
}
@keyframes entrarPanel { from { opacity: 0; transform: translateX(16px); } }
.ia-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 14px 12px 18px;
  border-bottom: 1px solid var(--ui-borde);
}
.ia-cabecera h2 { margin: 0; font: 600 28px/1 var(--f-display); }
.ia-eyebrow {
  display: flex; align-items: center; gap: 6px;
  margin: 0 0 2px;
  font: 600 11px/1 var(--f-ui);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ui-suave);
}
.ia-eyebrow .ico { width: 13px; height: 13px; color: var(--oro); }
.ia-mensajes {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}
.ia-bienvenida p { margin: 0 0 10px; font: 14px/1.5 var(--f-ui); color: var(--ui-suave); }
.ia-sugerencias { display: flex; flex-wrap: wrap; gap: 6px; }
.ia-sugerencias button {
  padding: 7px 11px;
  border: 1px solid var(--ui-borde);
  border-radius: 999px;
  background: var(--ui-2);
  font: 13px/1.2 var(--f-ui);
  text-align: left;
}
.ia-sugerencias button:hover { background: var(--ui-hover); }
.msg { max-width: 92%; padding: 10px 13px; border-radius: 14px; font: 14px/1.5 var(--f-ui); overflow-wrap: anywhere; }
.msg-usuario {
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  background: var(--boton-ia);
  color: var(--sobre-oscuro);
  white-space: pre-wrap;
}
.msg-ia { align-self: flex-start; border: 1px solid var(--ui-borde); border-bottom-left-radius: 4px; background: var(--ui-2); }
.msg-ia p { margin: 0 0 8px; }
.msg-ia p:last-child { margin-bottom: 0; }
.msg-ia ul, .msg-ia ol { margin: 4px 0 8px; padding-left: 20px; }
.msg-ia h4 { margin: 6px 0 4px; font: 700 14px/1.3 var(--f-ui); }
.msg-ia code { padding: 1px 4px; border-radius: 4px; background: var(--ui-hover); font-size: 13px; }
.msg-error { align-self: flex-start; background: var(--error-fondo); color: var(--error); border: 0; }
.msg-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.chip-anotado {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 0;
  border-radius: 999px;
  background: var(--chip);
  color: var(--chip-texto);
  font: 600 12px/1.2 var(--f-ui);
}
.chip-anotado .ico { width: 14px; height: 14px; }
.btn-mini {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border: 1px solid var(--ui-borde);
  border-radius: 999px;
  background: var(--ui);
  font: 600 12px/1.2 var(--f-ui);
}
.btn-mini:hover { background: var(--ui-hover); }
.btn-mini .ico { width: 14px; height: 14px; }
.modelo-ia { font: 11px/1 var(--f-ui); color: var(--ui-suave); }
.pensando { display: inline-flex; gap: 4px; padding: 4px 0; }
.pensando i { width: 7px; height: 7px; border-radius: 50%; background: var(--ui-suave); animation: puntos 1s infinite ease-in-out; }
.pensando i:nth-child(2) { animation-delay: 0.15s; }
.pensando i:nth-child(3) { animation-delay: 0.3s; }
@keyframes puntos { 0%, 100% { opacity: 0.25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.ia-form { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid var(--ui-borde); }
.ia-form textarea {
  width: 100%;
  min-height: 62px;
  max-height: 160px;
  padding: 10px 12px;
  border: 1px solid var(--ui-borde);
  border-radius: 12px;
  background: var(--ui-2);
  color: var(--ui-texto);
  font: 14px/1.45 var(--f-ui);
  resize: vertical;
}
.ia-botones { display: flex; justify-content: space-between; align-items: center; }
.btn-enviar {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--cuero);
  color: var(--oro-claro);
  font: 600 14px/1 var(--f-ui);
}
.btn-enviar:disabled { opacity: 0.6; cursor: progress; }

/* ---------------- Flotantes ---------------- */
.herr-img {
  position: fixed;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--ui-borde);
  border-radius: 10px;
  background: var(--ui);
  color: var(--ui-texto);
  box-shadow: var(--sombra-ui);
  z-index: 40;
}
.herr-img button {
  min-width: 32px; height: 30px;
  padding: 0 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font: 600 12px/1 var(--f-ui);
  display: inline-grid; place-items: center;
}
.herr-img button:hover { background: var(--ui-hover); }
.popover {
  position: fixed;
  width: min(300px, calc(100vw - 24px));
  padding: 14px;
  border: 1px solid var(--ui-borde);
  border-radius: 12px;
  background: var(--ui);
  color: var(--ui-texto);
  box-shadow: var(--sombra-ui);
  z-index: 60;
}
.popover h4 { margin: 0 0 10px; font: 600 14px/1.2 var(--f-ui); }
.popover input[type="text"], .popover input[type="url"] {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--ui-borde);
  border-radius: 8px;
  background: var(--ui-2);
}
.popover .acciones-pop { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.popover .acciones-pop button {
  height: 32px; padding: 0 14px;
  border: 1px solid var(--ui-borde); border-radius: 999px;
  background: var(--ui); font: 600 13px/1 var(--f-ui);
}
.popover .acciones-pop .principal { border-color: var(--cuero); background: var(--cuero); color: var(--oro-claro); }
.rejilla-tabla { display: grid; grid-template-columns: repeat(8, 22px); gap: 3px; }
.rejilla-tabla button { width: 22px; height: 22px; padding: 0; border: 1px solid var(--ui-borde); border-radius: 3px; background: var(--ui-2); }
.rejilla-tabla button.on { background: var(--chip); border-color: var(--chip-texto); }
.tam-tabla { margin-top: 8px; font: 12px/1 var(--f-ui); color: var(--ui-suave); }
.toasts {
  position: fixed;
  left: 50%; bottom: 20px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: min(460px, calc(100vw - 32px));
  z-index: 90;
  pointer-events: none;
}
.toast {
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--ui-texto);
  color: var(--ui);
  font: 14px/1.4 var(--f-ui);
  box-shadow: var(--sombra-ui);
  animation: entrarToast 0.2s ease;
}
.toast.error { background: var(--error-fondo); color: var(--error); border: 1px solid var(--error); }
@keyframes entrarToast { from { opacity: 0; transform: translateY(8px); } }

/* Apertura del libro al entrar */
.apertura {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 100;
  pointer-events: none;
  perspective: 2400px;
  animation: fondoApertura 1.25s ease forwards;
  background: radial-gradient(1200px 700px at 50% 35%, var(--mesa) 0%, var(--mesa-2) 100%);
}
.apertura-tapa {
  width: min(470px, calc(100vw - 32px));
  min-height: 560px;
  justify-content: center;
  gap: 26px;
  transform-origin: left center;
  animation: abrirTapa 1.15s cubic-bezier(0.5, 0.05, 0.3, 1) 0.15s forwards;
}
@keyframes abrirTapa {
  to { transform: rotateY(-165deg); opacity: 0.1; }
}
@keyframes fondoApertura { 60% { background-color: transparent; opacity: 1; } 100% { opacity: 0; } }

/* ---------------- Instalador ---------------- */
.instalador { min-height: 100%; display: grid; place-items: center; padding: 32px 16px; }
.hoja-instalador {
  width: min(680px, 100%);
  padding: 30px 34px;
  border-radius: 8px;
  background: var(--grano), var(--papel);
  color: var(--tinta);
  box-shadow: var(--sombra);
}
.hoja-instalador header { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; color: var(--cuero); }
.hoja-instalador .logo-marca { width: 64px; height: 64px; padding: 6px; border-radius: 50%; background: var(--medallon); box-shadow: 0 0 0 2px var(--oro); }
.hoja-instalador h1 { margin: 2px 0 0; font: 600 34px/1 var(--f-display); color: var(--tinta); }
.revisiones { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.revisiones li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; }
.revisiones b { display: block; font: 600 15px/1.3 var(--f-ui); }
.revisiones small { font: 13px/1.4 var(--f-ui); color: var(--tinta-suave); overflow-wrap: anywhere; }
.marca-estado { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font: 700 13px/1 var(--f-ui); color: #fff; }
.revisiones .ok .marca-estado { background: #2f6b3a; }
.revisiones .falla .marca-estado { background: var(--rojo); }
.botones-instalador { display: flex; flex-wrap: wrap; gap: 10px; }
.botones-instalador form { margin: 0; }
.nota-final { margin: 18px 0 0; font: 14px/1.5 var(--f-ui); color: var(--tinta-suave); }
.nota-final code { padding: 1px 5px; border-radius: 4px; background: var(--papel-2); }

/* =====================================================================
   PANTALLAS MEDIANAS Y PEQUEÑAS
   ===================================================================== */
@media (min-width: 1320px) {
  .con-panel .mesa { padding-right: 480px; }
  .con-panel .cinta { width: min(1400px, calc(100% - 470px)); margin-left: 16px; }
}

@media (max-width: 1040px) {
  .barra { padding: 10px 16px; }
  .nav-fecha { order: 3; width: 100%; margin-inline: 0; justify-content: center; }
  .cinta { flex-wrap: nowrap; overflow-x: auto; width: calc(100% - 32px); scrollbar-width: thin; }
  .grupo:last-child { margin-left: 0; }
  .mesa { padding: 10px 16px 28px; overflow-x: hidden; overflow-x: clip; }
  .libro > .pagina.der { order: -1; }
  .libro {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    gap: 10px;
    padding: 10px;
    border-radius: 12px;
  }
  .en-dia .libro { height: auto; }
  .libro::after, .pestanas-mes, .esquina { display: none; }
  .libro > .pagina.der { grid-column: 1; border-radius: 4px; }
  .libro > .pagina.izq { border-radius: 4px; }
  .pagina { overflow: visible; }
  .hoja-contenido { position: relative; inset: auto; overflow: visible; padding: 22px 20px 46px; }
  .mes-der { min-height: 0; }
  .cal { grid-auto-rows: minmax(72px, auto); }
  .dia-der { padding: 20px 0 46px; }
  .encabezado-hoja { padding: 0 16px 8px 52px; }
  .editor {
    min-height: 62vh;
    overflow: visible;
    padding: 4px 16px 50px 52px;
    background-image:
      linear-gradient(to right, transparent 36px, var(--margen) 36px, var(--margen) 37px, transparent 37px, transparent 40px, var(--margen) 40px, var(--margen) 41px, transparent 41px),
      repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--linea) - 1px), var(--renglon) calc(var(--linea) - 1px), var(--renglon) var(--linea));
  }
  .editor.vacio::before { left: 52px; right: 16px; }
  .nav-movil {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
  }
  .nav-movil button {
    display: inline-flex; align-items: center; gap: 4px;
    height: 34px; padding: 0 12px;
    border: 1px solid var(--papel-borde); border-radius: 999px;
    background: var(--papel); color: var(--tinta); font: 600 13px/1 var(--f-ui);
  }
  .dia-der .nav-movil { padding: 0 16px 8px; }
  .panel-ia { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; height: min(78vh, 640px); }
}

@media (max-width: 640px) {
  .marca-texto { font-size: 20px; }
  .usuario-nombre, .btn-barra span, .btn-ia span { display: none; }
  .btn-barra, .btn-ia { padding: 0 11px; }
  .tapa { padding: 34px 36px 22px 32px; }
  .tapa-marca { font-size: 26px; }
  .tapa-titulo { font-size: 38px; }
  .medallon { width: 104px; height: 104px; }
  .medallon .logo-marca { width: 82px; height: 82px; }
  .etiqueta-acceso { padding: 16px 16px 18px; }
  .dos-columnas { grid-template-columns: 1fr; }
  .mes-titulo { font-size: 56px; }
  .cal-sem { padding: 6px 3px; font-size: 10px; letter-spacing: 0.04em; }
  .dia { padding: 4px; }
  .dia .num { font-size: 19px; }
  .dia .etq { display: none; }
  .dia .apunte { font-size: 13px; -webkit-line-clamp: 2; }
  .dia.hoy .num { margin-bottom: 4px; }
.dia.hoy .num::before { inset: -5px -7px -6px -6px; }
  .dia-num { font-size: 92px; }
  .apertura-tapa { min-height: 460px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* Imprimir solo la hoja del día */
@media print {
  body { background: #fff; }
  .barra, .cinta, .pestanas-mes, .panel-ia, .toasts, .burbuja-voz, .pagina.izq, .esquina, .folio, .nav-movil, .estado-guardado { display: none !important; }
  .mesa { padding: 0; }
  .libro { display: block; height: auto; padding: 0; background: none; box-shadow: none; }
  .libro::after { display: none; }
  .pagina, .hoja-contenido, .editor { position: static; overflow: visible; box-shadow: none; background: #fff; }
  .editor { background-image: none; padding-left: 0; }
}