/* ==========================================================================
   Panel de la boda de Cristian & Lilibeth
   Poppins para titulares, Inter para el resto. Paleta salvia y crema, la
   misma de las invitaciones, con oro suave y rosa palo como acentos.
   ========================================================================== */

@import url("/assets/tipografia/tipografia.css");

:root {
  /* color */
  --salvia: #6e7f5e;
  --salvia-600: #5c6b4e;
  --salvia-300: #a8b69b;
  --salvia-100: #e6ebe0;
  --salvia-50: #f2f5ee;

  --oro: #c9a227;
  --oro-100: #f6edd2;
  --rosa: #cfa898;
  --rosa-100: #f7ebe6;

  --crema: #faf8f3;
  --crema-2: #f4f1e9;
  --papel: #ffffff;

  --tinta: #23281f;
  --tinta-2: #4a5344;
  --tinta-3: #6f7a67;
  --tinta-4: #97a08f;

  --linea: #e6e3d9;
  --linea-2: #f0ede4;

  --exito: #4f7a3f;
  --aviso: #b07d16;
  --peligro: #a8453a;
  --info: #3f6b82;

  /* forma */
  --r-sm: 10px;
  --r: 14px;
  --r-lg: 20px;
  --r-full: 999px;

  /* sombras en capas, suaves */
  --s-1: 0 1px 2px rgba(35, 40, 31, .04), 0 1px 3px rgba(35, 40, 31, .04);
  --s-2: 0 2px 4px rgba(35, 40, 31, .04), 0 6px 16px rgba(35, 40, 31, .06);
  --s-3: 0 8px 16px rgba(35, 40, 31, .06), 0 18px 40px rgba(35, 40, 31, .10);
  --s-color: 0 6px 20px rgba(110, 127, 94, .22);

  /* movimiento */
  --curva: cubic-bezier(.22, 1, .36, 1);
  --curva-suave: cubic-bezier(.4, 0, .2, 1);
  --rapido: .18s;
  --medio: .32s;
  --lento: .6s;
}

* { box-sizing: border-box; }

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--tinta);
  background:
    radial-gradient(900px 500px at 8% -5%, var(--salvia-50), transparent 60%),
    radial-gradient(700px 420px at 100% 0%, var(--rosa-100), transparent 55%),
    var(--crema);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .tipo-titulo {
  font-family: "Poppins", "Inter", sans-serif;
  font-weight: 600;
  letter-spacing: -.015em;
  margin: 0;
}

button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--salvia-600); text-decoration-thickness: 1px; text-underline-offset: 3px; }

::selection { background: var(--salvia-100); }

/* iconos --------------------------------------------------------------- */
.ic {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  vertical-align: -.18em;
  transition: transform var(--medio) var(--curva);
}

/* ====================================================== estructura general */
.app { display: flex; min-height: 100vh; }

/* ------------------------------------------------------------- lateral */
.lateral {
  width: 250px;
  flex: 0 0 250px;
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(14px);
  border-right: 1px solid var(--linea);
  padding: 1.25rem 1rem 2rem;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  scrollbar-width: thin;
}

.marca {
  display: flex;
  gap: .7rem;
  align-items: center;
  padding: .2rem .3rem 1rem;
}

.marca .anillos {
  width: 38px;
  height: 38px;
  border-radius: var(--r-full);
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, var(--salvia), var(--salvia-300));
  color: #fff;
  box-shadow: var(--s-color);
  animation: respira 5s ease-in-out infinite;
}

@keyframes respira {
  0%, 100% { transform: scale(1); box-shadow: 0 6px 20px rgba(110, 127, 94, .22); }
  50% { transform: scale(1.05); box-shadow: 0 10px 28px rgba(110, 127, 94, .34); }
}

.marca b { font-family: "Poppins", sans-serif; font-weight: 600; font-size: .98rem; line-height: 1.2; display: block; }
.marca span { font-size: .78rem; color: var(--tinta-3); }

/* contador lateral */
.faltan {
  position: relative;
  margin: .25rem 0 1.25rem;
  padding: .85rem .95rem;
  border-radius: var(--r);
  background: linear-gradient(135deg, var(--salvia), var(--salvia-600));
  color: #fff;
  overflow: hidden;
  box-shadow: var(--s-color);
}

.faltan::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .28) 45%, transparent 60%);
  transform: translateX(-100%);
  animation: brillo 5.5s var(--curva-suave) infinite;
}

@keyframes brillo {
  0% { transform: translateX(-100%); }
  55%, 100% { transform: translateX(120%); }
}

.faltan b { font-family: "Poppins", sans-serif; font-size: 1.9rem; line-height: 1; display: block; font-variant-numeric: tabular-nums; }
.faltan span { font-size: .76rem; opacity: .9; letter-spacing: .04em; }

/* navegación */
.nav { display: flex; flex-direction: column; gap: 3px; }

.nav .titulo-grupo {
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-4);
  margin: 1.15rem 0 .35rem .75rem;
  font-weight: 500;
}

.nav button {
  position: relative;
  display: flex;
  align-items: center;
  gap: .65rem;
  width: 100%;
  padding: .58rem .75rem;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--tinta-2);
  text-align: left;
  cursor: pointer;
  transition: color var(--rapido) var(--curva-suave),
              background var(--rapido) var(--curva-suave),
              transform var(--rapido) var(--curva);
}

.nav button::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 3px; height: 0;
  border-radius: var(--r-full);
  background: var(--salvia);
  transform: translateY(-50%);
  transition: height var(--medio) var(--curva);
}

.nav button:hover { background: var(--salvia-50); color: var(--tinta); transform: translateX(2px); }
.nav button:hover .ic { transform: scale(1.12) rotate(-4deg); }
.nav button:active { transform: translateX(2px) scale(.985); }
.nav button:focus-visible { outline: 2px solid var(--salvia); outline-offset: 2px; }

.nav button[aria-current="true"] {
  background: var(--salvia-100);
  color: var(--salvia-600);
  font-weight: 500;
}
.nav button[aria-current="true"]::before { height: 60%; }

.nav .marca-ok { margin-left: auto; color: var(--exito); display: inline-flex; }

/* ---------------------------------------------------------------- cuerpo */
.principal { flex: 1; min-width: 0; padding: 1.75rem clamp(1rem, 3vw, 2.5rem) 5rem; }

.encabezado {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
}
.encabezado h1 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.9rem); display: flex; align-items: center; gap: .6rem; }
.encabezado p { margin: .25rem 0 0; color: var(--tinta-3); }
.encabezado .acciones { margin-left: auto; display: flex; gap: .55rem; flex-wrap: wrap; }

/* ================================================================ piezas */
.btn {
  --bg: var(--papel);
  --fg: var(--tinta);
  --bd: var(--linea);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--bd);
  background: var(--bg);
  color: var(--fg);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  box-shadow: var(--s-1);
  transition: transform var(--rapido) var(--curva),
              box-shadow var(--medio) var(--curva),
              border-color var(--rapido) var(--curva-suave),
              background var(--rapido) var(--curva-suave);
}

.btn:hover { transform: translateY(-2px); box-shadow: var(--s-2); border-color: var(--salvia-300); }
.btn:active { transform: translateY(0) scale(.97); box-shadow: var(--s-1); }
.btn:focus-visible { outline: 2px solid var(--salvia); outline-offset: 2px; }
.btn:hover .ic { transform: scale(1.12); }

.btn.primario {
  --bg: linear-gradient(135deg, var(--salvia), var(--salvia-600));
  --fg: #fff;
  --bd: transparent;
  box-shadow: var(--s-color);
}
.btn.primario:hover { box-shadow: 0 10px 26px rgba(110, 127, 94, .34); }

.btn.fantasma { --bg: transparent; --bd: transparent; box-shadow: none; }
.btn.fantasma:hover { --bg: var(--salvia-50); box-shadow: none; }

.btn.peligro { --fg: var(--peligro); }
.btn.peligro:hover { --bg: #fdf1ef; --bd: #ecc9c3; }

.btn.mini { padding: .32rem .6rem; font-size: .82rem; border-radius: 8px; }

/* onda al pulsar */
.onda {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: currentColor;
  opacity: .16;
  pointer-events: none;
  animation: onda .6s var(--curva-suave) forwards;
}

@keyframes onda { to { transform: scale(2.6); opacity: 0; } }

/* tarjetas */
.tarjeta {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  box-shadow: var(--s-1);
  transition: transform var(--medio) var(--curva), box-shadow var(--medio) var(--curva), border-color var(--medio) var(--curva);
}
.tarjeta.viva:hover { transform: translateY(-3px); box-shadow: var(--s-3); border-color: var(--salvia-300); }
.pad { padding: 1.15rem 1.25rem; }

.rejilla { display: grid; gap: 1rem; }
@media (min-width: 700px) { .rejilla.dos { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .rejilla.tres { grid-template-columns: repeat(3, 1fr); } }

/* dato destacado */
.dato .k {
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinta-4); display: flex; align-items: center; gap: .4rem;
}
.dato .v {
  font-family: "Poppins", sans-serif; font-weight: 600;
  font-size: 1.85rem; line-height: 1.15; margin-top: .3rem;
  font-variant-numeric: tabular-nums;
}
.dato .n { font-size: .85rem; color: var(--tinta-3); }

.progreso { height: 7px; background: var(--linea-2); border-radius: var(--r-full); overflow: hidden; margin-top: .7rem; }
.progreso i {
  display: block; height: 100%; width: 0;
  border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--salvia-300), var(--salvia));
  transition: width 1.1s var(--curva);
}

/* etiquetas de estado */
.pill {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .74rem; font-weight: 500;
  padding: .2rem .6rem; border-radius: var(--r-full);
  border: 1px solid var(--linea); background: var(--crema-2); color: var(--tinta-2);
  white-space: nowrap;
  transition: transform var(--rapido) var(--curva);
}
.pill:hover { transform: translateY(-1px); }
.pill.elegido { background: var(--salvia-100); border-color: var(--salvia-300); color: var(--salvia-600); }
.pill.cotizado { background: var(--oro-100); border-color: #e8d49a; color: var(--aviso); }
.pill.contactado { background: #e9f0f4; border-color: #c8dae4; color: var(--info); }
.pill.descartado { background: #fbeeec; border-color: #ecc9c3; color: var(--peligro); }

/* =============================================================== tablas */
.tabla-caja {
  overflow-x: auto;
  border: 1px solid var(--linea);
  border-radius: var(--r);
  background: var(--papel);
  box-shadow: var(--s-1);
}
table { border-collapse: collapse; width: 100%; min-width: 940px; }
th, td { text-align: left; padding: .8rem .9rem; border-bottom: 1px solid var(--linea-2); vertical-align: top; }
th {
  font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinta-4); background: var(--crema-2); font-weight: 600;
  position: sticky; top: 0; z-index: 1;
}
tbody tr { transition: background var(--rapido) var(--curva-suave); }
tbody td { background: var(--papel); transition: background var(--rapido) var(--curva-suave); }
tbody tr:hover td { background: var(--salvia-50); }
tr:last-child td { border-bottom: 0; }

/* la fila elegida se marca con un fondo plano y una guía a la izquierda,
   no con un degradado por celda, que partía la fila en bloques */
tr.elegida td { background: var(--salvia-50); }
tr.elegida:hover td { background: var(--salvia-100); }
tr.elegida td:first-child { border-left: 3px solid var(--salvia); padding-left: calc(.9rem - 3px); }
tr.nota td { background: var(--crema-2); font-size: .88rem; color: var(--tinta-2); }
tr.nota:hover td { background: var(--crema-2); }

td.precio { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 500; }

.enlaces { display: flex; gap: .35rem; flex-wrap: wrap; }
.enlaces a {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px;
  border: 1px solid var(--linea); border-radius: 9px;
  color: var(--tinta-2); text-decoration: none;
  transition: transform var(--rapido) var(--curva), background var(--rapido) var(--curva-suave),
              color var(--rapido) var(--curva-suave), border-color var(--rapido) var(--curva-suave);
}
.enlaces a:hover {
  transform: translateY(-2px) scale(1.06);
  background: var(--salvia); color: #fff; border-color: var(--salvia);
}

.incluye { margin: 0; padding-left: 1.05rem; font-size: .88rem; color: var(--tinta-2); }
.incluye li { margin: .12rem 0; }

/* ============================================================== vacíos */
.vacio { text-align: center; padding: 3.5rem 1.5rem; }
.vacio .simbolo {
  width: 64px; height: 64px; margin: 0 auto 1rem;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  background: var(--salvia-50); color: var(--salvia);
  animation: flota 3.4s ease-in-out infinite;
}
@keyframes flota {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
.vacio h3 { font-size: 1.05rem; }
.vacio p { color: var(--tinta-3); margin: .35rem 0 1.25rem; }

/* =============================================================== modal */
dialog.modal {
  border: 0; padding: 0;
  width: min(700px, 94vw);
  border-radius: var(--r-lg);
  box-shadow: 0 30px 80px rgba(35, 40, 31, .3);
  background: var(--papel);
}

dialog.modal::backdrop {
  background: rgba(35, 40, 31, .5);
  backdrop-filter: blur(3px);
  animation: fundido var(--medio) var(--curva-suave);
}

dialog.modal[open] { animation: entraModal var(--medio) var(--curva); }
dialog.modal.cerrando { animation: saleModal .2s var(--curva-suave) forwards; }
dialog.modal.cerrando::backdrop { animation: fundidoSale .2s var(--curva-suave) forwards; }

@keyframes fundido { from { opacity: 0; } }
@keyframes fundidoSale { to { opacity: 0; } }
@keyframes entraModal {
  from { opacity: 0; transform: translateY(22px) scale(.96); }
  to { opacity: 1; transform: none; }
}
@keyframes saleModal {
  to { opacity: 0; transform: translateY(10px) scale(.98); }
}

.modal .cab {
  display: flex; align-items: center; gap: .7rem;
  padding: 1.15rem 1.35rem;
  border-bottom: 1px solid var(--linea);
}
.modal .cab h2 { font-size: 1.1rem; }
.modal .cab .cerrar { margin-left: auto; }
.modal .cuerpo { padding: 1.25rem 1.35rem; max-height: 65vh; overflow-y: auto; }
.modal .pie {
  display: flex; gap: .55rem; justify-content: flex-end;
  padding: .95rem 1.35rem; border-top: 1px solid var(--linea); background: var(--crema-2);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}

/* =========================================================== formulario */
.campo { margin-bottom: 1rem; position: relative; }
.campo label {
  display: block; font-size: .78rem; font-weight: 500;
  color: var(--tinta-3); margin-bottom: .3rem;
  transition: color var(--rapido) var(--curva-suave);
}
.campo input, .campo select, .campo textarea {
  width: 100%;
  padding: .62rem .8rem;
  border: 1px solid var(--linea);
  border-radius: var(--r-sm);
  background: var(--papel);
  transition: border-color var(--rapido) var(--curva-suave),
              box-shadow var(--medio) var(--curva),
              transform var(--rapido) var(--curva);
}
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--salvia-300); }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: 0;
  border-color: var(--salvia);
  box-shadow: 0 0 0 4px var(--salvia-100);
}
.campo:focus-within label { color: var(--salvia-600); }
.campo textarea { min-height: 92px; resize: vertical; }

.fila { display: grid; gap: 1rem; }
@media (min-width: 560px) {
  .fila.dos { grid-template-columns: 1fr 1fr; }
  .fila.tres { grid-template-columns: repeat(3, 1fr); }
}

/* =========================================================== pendientes */
.pend {
  display: flex; gap: .8rem; align-items: flex-start;
  padding: .65rem .5rem; border-radius: var(--r-sm);
  transition: background var(--rapido) var(--curva-suave);
}
.pend:hover { background: var(--salvia-50); }

.check {
  position: relative; flex: none;
  width: 21px; height: 21px; margin-top: .15rem;
  border: 1.5px solid var(--salvia-300); border-radius: 7px;
  background: var(--papel); cursor: pointer; display: grid; place-items: center;
  transition: background var(--rapido) var(--curva-suave), border-color var(--rapido) var(--curva-suave),
              transform var(--rapido) var(--curva);
}
.check:hover { border-color: var(--salvia); transform: scale(1.08); }
.check:active { transform: scale(.92); }
.check svg { width: 13px; height: 13px; color: #fff; stroke-width: 3; }
.check svg path { stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset var(--medio) var(--curva); }
.check[aria-checked="true"] { background: var(--salvia); border-color: var(--salvia); }
.check[aria-checked="true"] svg path { stroke-dashoffset: 0; }

.pend.listo .texto { color: var(--tinta-4); text-decoration: line-through; }
.pend .meta { font-size: .78rem; color: var(--tinta-4); display: flex; gap: .4rem; align-items: center; }

/* ============================================================ categorías */
.cat-grid { display: grid; gap: .55rem; }
.cat-fila {
  display: flex; align-items: center; gap: .7rem;
  padding: .6rem .7rem; border-radius: var(--r-sm);
  transition: background var(--rapido) var(--curva-suave), transform var(--rapido) var(--curva);
  cursor: pointer;
  border: 0; background: transparent; width: 100%; text-align: left;
}
.cat-fila:hover { background: var(--salvia-50); transform: translateX(3px); }
.cat-fila .simb {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--salvia-50); color: var(--salvia); flex: none;
  transition: transform var(--medio) var(--curva), background var(--medio) var(--curva-suave);
}
.cat-fila:hover .simb { transform: rotate(-6deg) scale(1.08); background: var(--salvia-100); }
.cat-fila b { font-weight: 500; }

/* ============================================================ documentos */
.doc { overflow: hidden; }

.doc-vista {
  position: relative; display: block; width: 100%;
  height: 260px; padding: 0; border: 0; border-bottom: 1px solid var(--linea);
  background: var(--crema-2); cursor: pointer; overflow: hidden;
}
.doc-vista iframe { width: 100%; height: 420px; border: 0; pointer-events: none; transform: scale(1); transform-origin: top center; }

.doc-vista::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(35,40,31,0) 55%, rgba(35,40,31,.35));
  opacity: 0; transition: opacity var(--medio) var(--curva-suave);
}
.doc-vista:hover::after, .doc-vista:focus-visible::after { opacity: 1; }

.doc-lupa {
  position: absolute; z-index: 2; left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(.9);
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .6rem 1.1rem; border-radius: var(--r-full);
  background: rgba(255, 255, 255, .95); color: var(--salvia-600);
  font-size: .82rem; font-weight: 500; box-shadow: var(--s-2);
  opacity: 0; transition: opacity var(--medio) var(--curva), transform var(--medio) var(--curva);
}
.doc-vista:hover .doc-lupa, .doc-vista:focus-visible .doc-lupa {
  opacity: 1; transform: translate(-50%, -50%) scale(1);
}

dialog.visor { width: min(1000px, 96vw); }
dialog.visor .visor-marco { height: min(78vh, 900px); background: var(--crema-2); }
dialog.visor .visor-marco iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ================================================================ alerta */
.alerta {
  display: flex; gap: .85rem; align-items: flex-start;
  padding: 1rem 1.15rem; margin-bottom: 1.25rem;
  border: 1px solid #e9cfa6; border-left: 4px solid var(--aviso);
  border-radius: var(--r); background: #fdf6e7;
  box-shadow: var(--s-1);
}
.alerta .alerta-ic { width: 1.4em; height: 1.4em; color: var(--aviso); margin-top: .12rem; animation: pulsoAviso 2.6s ease-in-out infinite; }
.alerta b { font-family: "Poppins", sans-serif; }
.alerta ul { margin: .4rem 0 0; padding-left: 1.1rem; }
.alerta li { margin: .2rem 0; }

@keyframes pulsoAviso {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.12); opacity: .78; }
}

/* ========================================================= línea de tiempo */
.linea-tiempo { position: relative; padding-top: 1.9rem; }

.regla { position: relative; height: 22px; border-bottom: 1px dashed var(--linea); }

.marca-hora { position: absolute; top: 0; transform: translateX(-50%); text-align: center; }
.marca-hora span { font-size: .68rem; color: var(--tinta-4); font-variant-numeric: tabular-nums; white-space: nowrap; }
.marca-hora::after {
  content: ""; display: block; width: 1px; height: 7px;
  background: var(--linea); margin: 2px auto 0;
}

.pista-programa { position: relative; height: 84px; margin-top: .7rem; }

.bloque {
  position: absolute; top: 0; height: 76px;
  display: flex; flex-direction: column; justify-content: center;
  gap: .1rem; padding: .5rem .7rem;
  border: 1px solid var(--bd, var(--salvia-300));
  border-radius: var(--r-sm);
  background: var(--bg, var(--salvia-50));
  color: var(--fg, var(--salvia-600));
  cursor: pointer; overflow: hidden; text-align: left;
  box-shadow: var(--s-1);
  animation: creceBloque .7s var(--curva) backwards;
  transition: transform var(--rapido) var(--curva), box-shadow var(--medio) var(--curva), filter var(--rapido) var(--curva-suave);
}
.bloque:hover { transform: translateY(-3px); box-shadow: var(--s-2); filter: saturate(1.15); z-index: 2; }
.bloque:active { transform: translateY(-1px) scale(.99); }
.bloque .ic { width: 15px; height: 15px; }
.bloque .bt { font-size: .78rem; font-weight: 600; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bloque .bh { font-size: .68rem; opacity: .75; font-variant-numeric: tabular-nums; }

@keyframes creceBloque { from { opacity: 0; transform: scaleX(.4); transform-origin: left; } }

.bloque.tono-0 { --bg: var(--salvia-50); --bd: var(--salvia-300); --fg: var(--salvia-600); }
.bloque.tono-1 { --bg: var(--rosa-100); --bd: #e3c4b9; --fg: #8d5a49; }
.bloque.tono-2 { --bg: var(--oro-100); --bd: #e8d49a; --fg: #8a6410; }
.bloque.tono-3 { --bg: #e9f0f4; --bd: #c8dae4; --fg: #345b70; }

.pista-prov { margin-top: 1.1rem; border-top: 1px solid var(--linea-2); padding-top: .9rem; display: grid; gap: .45rem; }

.franja-fila { display: flex; align-items: center; gap: .7rem; }
.franja-nombre {
  width: 190px; flex: none; font-size: .82rem; color: var(--tinta-2);
  display: flex; align-items: center; gap: .4rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.franja-pista { position: relative; flex: 1; height: 12px; background: var(--linea-2); border-radius: var(--r-full); }
.franja {
  position: absolute; top: 0; height: 100%;
  border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--salvia-300), var(--salvia));
  animation: creceFranja .9s var(--curva) backwards;
}
@keyframes creceFranja { from { transform: scaleX(0); transform-origin: left; } }

.nota-suave { font-size: .84rem; color: var(--tinta-4); margin: .9rem 0 0; }

@media (max-width: 700px) {
  .linea-tiempo { overflow-x: auto; }
  .marca-hora span { font-size: .6rem; }
  .franja-nombre { width: 120px; }
}

/* =============================================================== avisos */
#avisos {
  position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 90;
  display: flex; flex-direction: column; gap: .6rem; align-items: flex-end;
}
.aviso {
  display: flex; align-items: center; gap: .6rem;
  background: var(--tinta); color: var(--crema);
  padding: .75rem 1.1rem; border-radius: var(--r-full);
  box-shadow: var(--s-3); font-size: .88rem;
  animation: entraAviso .45s var(--curva);
}
.aviso.saliendo { animation: saleAviso .3s var(--curva-suave) forwards; }
.aviso .ic { color: var(--salvia-300); }
@keyframes entraAviso { from { opacity: 0; transform: translateY(14px) scale(.94); } }
@keyframes saleAviso { to { opacity: 0; transform: translateY(8px) scale(.96); } }

/* =========================================================== respuesta */
@media (max-width: 900px) {
  .app { flex-direction: column; }
  .lateral {
    width: auto; flex: none; height: auto; position: sticky; top: 0; z-index: 20;
    border-right: 0; border-bottom: 1px solid var(--linea); padding: .9rem 1rem;
  }
  .faltan { display: none; }
  .nav { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: .4rem; padding-bottom: .2rem; }
  .nav .titulo-grupo { display: none; }
  .nav button { white-space: nowrap; padding: .5rem .8rem; }
  .nav button::before { display: none; }
}

@media print {
  .lateral, .acciones, .btn { display: none !important; }
  body { background: #fff; }
  .tabla-caja { border: 0; box-shadow: none; }
}