/* okcalc — tema CLARO, lenguaje de Apple.
 *
 * La referencia es Ajustes de iOS: fondo gris agrupado, bloques blancos de
 * esquinas suaves, separadores finísimos con sangría y jerarquía por tamaño y
 * peso de letra en vez de por cajas y bordes. Nada compite con el contenido.
 *
 * Tipografía: el stack del sistema. No es pereza — en el iPhone donde se abre
 * esta Mini App, `-apple-system` ES San Francisco, la tipografía real de Apple,
 * con su óptica y su interletraje. Cargar una imitación desde Google Fonts sería
 * peor y encima costaría red en un sótano sin cobertura.
 *
 * Las tres reglas del uso siguen mandando: se lee de reojo, se toca con guantes
 * (44 pt, el mínimo de Apple; 56 en modo obra) y funciona sin conexión. Y el
 * color sigue siendo señal: ámbar mide, verde cumple, rojo no cumple, azul dice
 * con qué medirlo.
 */

:root {
  /* Grises del sistema, tema claro. */
  --bg:        #f2f2f7;   /* systemGroupedBackground */
  --bg2:       #ffffff;   /* bloque agrupado */
  --bg3:       #f7f7fa;   /* relleno sutil dentro del bloque */
  --chapa:     #ffffff;
  --text:      #1c1c1e;   /* label */
  --hint:      #6c6c70;   /* secondaryLabel, con contraste AA sobre blanco */
  --tenue:     #8e8e93;   /* tertiaryLabel */
  --linea:     rgba(60, 60, 67, 0.18);
  --separador: rgba(60, 60, 67, 0.12);
  --grabado:   rgba(60, 60, 67, 0.06);

  /* Marca y semántica. El ámbar de okservice se oscurece para texto: sobre
     blanco, el #f5a623 no llega a contraste legible. */
  --ambar:      #b26a00;
  --ambar-vivo: #f5a623;
  --ambar-soft: rgba(245, 166, 35, 0.14);
  --ambar-halo: rgba(245, 166, 35, 0.30);
  --verde: #248a3d;
  --rojo:  #d70015;
  --azul:  #0071e3;

  --r:   12px;   /* radio de bloque agrupado */
  --r-s: 10px;
  --tap: 44px;   /* el mínimo de Apple */

  --f-base: 17px;   /* body del HIG */
  --f-s:    15px;   /* subhead */
  --f-xs:   13px;   /* footnote */
  --f-kpi:  34px;   /* large title */

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  --display: var(--sans);
  --curva: cubic-bezier(0.32, 0.72, 0, 1);   /* la de las transiciones de iOS */
}

/* MODO OBRA — en claro, alta visibilidad es contraste máximo y letra grande:
   blanco puro, negro puro y el ámbar a plena saturación. */
body.obra {
  --bg:        #ffffff;
  --bg2:       #ffffff;
  --bg3:       #f0f0f2;
  --text:      #000000;
  --hint:      #3a3a3c;
  --tenue:     #5a5a5e;
  --linea:     rgba(0, 0, 0, 0.42);
  --separador: rgba(0, 0, 0, 0.22);
  --ambar:     #8a4f00;
  --f-base: 19px;
  --f-s:    17px;
  --f-xs:   15px;
  --f-kpi:  38px;
  --tap: 56px;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { overscroll-behavior-y: contain; }   /* sin encadenar con Telegram */

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  font-size: var(--f-base);
  line-height: 1.4;
  letter-spacing: -0.01em;          /* SF se aprieta ligeramente en cuerpo */
  padding: 0 16px calc(34px + env(safe-area-inset-bottom));
  -webkit-font-smoothing: antialiased;
}
.hide { display: none !important; }

/* ------------------------------------------------------------- cabecera --
   Barra de navegación translúcida, como la de iOS al hacer scroll. */
header.app {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  margin: 0 -16px 8px; padding: 10px 16px;
  /* Sin backdrop-filter: un blur en un elemento sticky se recalcula en cada
     fotograma del scroll y en un móvil modesto se nota. El fondo va opaco, que
     además deja el texto más legible al sol. */
  background: var(--bg);
  border-bottom: 0.5px solid var(--separador);
}
header.app h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
header.app h1 .bolt { color: var(--ambar-vivo); }
header.app p { color: var(--tenue); font-size: 12px; margin-top: 1px; letter-spacing: -0.005em; }
header.app .obra-btn {
  margin-left: auto; flex: 0 0 auto;
  min-width: var(--tap); min-height: 36px; padding: 0 14px;
  border: 0; border-radius: 999px;
  background: rgba(120, 120, 128, 0.12); color: var(--text);
  font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background 180ms var(--curva);
}
body.obra header.app .obra-btn { background: var(--ambar-vivo); color: #1c1c1e; }

/* ----------------------------------------------------------------- menú --
   Campo de búsqueda de iOS: pastilla gris, sin borde. */
.buscador { position: relative; margin: 8px 0 18px; }
.buscador input {
  width: 100%; min-height: var(--tap); padding: 10px 14px 10px 38px;
  border: 0; border-radius: 10px;
  background: rgba(118, 118, 128, 0.12); color: var(--text);
  font-family: inherit; font-size: var(--f-base); outline: none;
  transition: background 180ms var(--curva);
}
.buscador input::placeholder { color: var(--tenue); }
.buscador input:focus { background: rgba(118, 118, 128, 0.18); }
.buscador::before {
  content: "⌕"; position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--tenue); font-size: 20px; line-height: 1;
}

/* --------------------------------------------------- familias plegables --
   Cabecera de sección agrupada + bloque blanco, como Ajustes. Se pliega con
   <details>, así que funciona con teclado y lo lee VoiceOver sin ayuda. */
.grupo { margin: 0 0 18px; }
.grupo summary {
  display: flex; align-items: center;
  min-height: 34px; padding: 4px 16px 6px;
  cursor: pointer; list-style: none;
}
.grupo summary::-webkit-details-marker { display: none; }
.grupo summary h2 {
  display: flex; align-items: center; gap: 8px; width: 100%;
  font-size: var(--f-xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em;
  /* El gris terciario de iOS (#8e8e93) se queda en 2,9:1 sobre el fondo
     agrupado: bonito y por debajo del mínimo legible. Se usa el secundario. */
  color: var(--hint);
}
.grupo summary h2 .cuenta {
  margin-left: auto; margin-right: 6px;
  font-variant-numeric: tabular-nums; font-weight: 500; color: var(--hint);
}
/* Chevron que gira: el gesto que ya conoce cualquiera que use un iPhone. */
.grupo summary h2::after {
  content: ""; flex: 0 0 auto;
  width: 7px; height: 7px;
  border-right: 2px solid var(--tenue); border-bottom: 2px solid var(--tenue);
  border-radius: 1px;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 260ms var(--curva);
}
.grupo[open] summary h2::after { transform: rotate(-135deg) translateY(-2px); }
.grupo summary:active h2 { opacity: 0.5; }

/* La altura se anima con grid-template-rows: permite ir de 0 a «lo que ocupe»
   sin medir nada por JS y sin animar `height`. */
.plegable { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 280ms var(--curva); }
.grupo:not([open]) .plegable { grid-template-rows: 0fr; }
.plegable > .rejilla { overflow: hidden; }

/* Bloque blanco agrupado. */
.rejilla { background: var(--bg2); border-radius: var(--r); }

/* Fila de lista de iOS: 44 pt, separador con sangría y chevron a la derecha. */
.tarjeta {
  position: relative;
  display: grid; grid-template-columns: 28px 1fr auto; align-items: center;
  gap: 2px 12px;
  width: 100%; min-height: var(--tap); padding: 11px 14px 11px 16px;
  border: 0; background: transparent; color: var(--text);
  font-family: inherit; text-align: left; cursor: pointer;
  transition: background 120ms var(--curva);
}
.tarjeta + .tarjeta::before {
  content: ""; position: absolute; left: 56px; right: 0; top: 0;
  height: 0.5px; background: var(--separador);
}
.tarjeta:active { background: rgba(120, 120, 128, 0.14); }
.tarjeta .ico { grid-row: 1 / span 2; font-size: 20px; line-height: 1; }
.tarjeta strong { font-size: var(--f-base); font-weight: 400; letter-spacing: -0.015em; }
.tarjeta small {
  grid-column: 2; font-size: var(--f-xs); color: var(--hint);
  line-height: 1.35; letter-spacing: -0.005em;
}
.tarjeta::after {
  content: ""; grid-column: 3; grid-row: 1 / span 2;
  width: 7px; height: 7px;
  border-right: 2px solid var(--tenue); border-bottom: 2px solid var(--tenue);
  border-radius: 1px; opacity: 0.55; transform: rotate(-45deg);
}
/* Las dos entradas de trabajo llevan el icono en pastilla de color: es como
   Ajustes distingue lo importante sin sacarlo de la lista. */
.tarjeta.destacada .ico {
  display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 7px;
  background: var(--ambar-vivo); font-size: 15px;
}
.tarjeta.destacada strong { font-weight: 600; }

/* -------------------------------------------------------- herramienta --- */
.herr-cab { display: flex; gap: 12px; align-items: center; margin: 4px 0 18px; }
.herr-cab .volver {
  flex: 0 0 auto; width: var(--tap); height: var(--tap);
  border: 0; border-radius: 999px;
  background: rgba(120, 120, 128, 0.12); color: var(--azul);
  font-size: 20px; cursor: pointer;
}
.herr-cab .volver:active { background: rgba(120, 120, 128, 0.2); }
.herr-cab h2 { font-size: 26px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; }
.herr-cab p { color: var(--hint); font-size: var(--f-s); margin-top: 3px; letter-spacing: -0.01em; }

.card { background: var(--bg2); border-radius: var(--r); padding: 16px; margin-bottom: 18px; }
.card h3 {
  font-size: var(--f-xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--hint); margin-bottom: 14px;
}
h3.pregunta {
  font-size: 20px; font-weight: 600; line-height: 1.3;
  margin-bottom: 8px; text-transform: none; letter-spacing: -0.02em; color: var(--text);
}

/* --------------------------------------------------------------- campos - */
.campo { margin-bottom: 18px; }
.campo:last-child { margin-bottom: 0; }
label {
  display: flex; align-items: baseline; gap: 8px;
  font-size: var(--f-s); color: var(--text); margin-bottom: 7px; font-weight: 400;
  letter-spacing: -0.01em;
}
label .unidad { margin-left: auto; font-size: var(--f-xs); color: var(--tenue); font-weight: 400; }
input, select, textarea {
  width: 100%; min-height: var(--tap); padding: 11px 13px;
  border: 0; border-radius: var(--r-s);
  background: rgba(118, 118, 128, 0.12); color: var(--text);
  font-size: var(--f-base); font-family: inherit; outline: none;
  transition: box-shadow 160ms var(--curva), background 160ms var(--curva);
}
input[type=number] { font-variant-numeric: tabular-nums; font-weight: 500; }
select {
  appearance: none; padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 49%, var(--tenue) 50%), linear-gradient(-45deg, transparent 49%, var(--tenue) 50%);
  background-size: 6px 6px; background-position: right 16px center, right 10px center; background-repeat: no-repeat;
}
textarea { min-height: 112px; resize: vertical; font-size: var(--f-s); line-height: 1.5; }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.18); }
p.ayuda { font-size: var(--f-xs); color: var(--hint); margin-top: 7px; line-height: 1.45; }

/* Segmented control de iOS. */
.chips { display: flex; gap: 2px; padding: 2px; background: rgba(118, 118, 128, 0.12); border-radius: 9px; flex-wrap: wrap; }
.chip {
  flex: 1 1 auto; min-height: 36px; padding: 7px 12px;
  border: 0; border-radius: 7px; background: transparent; color: var(--text);
  font-family: inherit; font-size: var(--f-s); font-weight: 500; cursor: pointer;
  transition: background 180ms var(--curva), box-shadow 180ms var(--curva);
}
.chip.sel {
  background: var(--bg2); font-weight: 600;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.09), 0 1px 1px rgba(0, 0, 0, 0.04);
}

/* Switch de iOS. */
.toggle {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: var(--tap); padding: 8px 0;
  border: 0; background: transparent; color: var(--text);
  font-family: inherit; font-size: var(--f-base); font-weight: 400; cursor: pointer;
  text-align: left;
}
.toggle .pill {
  order: 2; margin-left: auto; flex: 0 0 auto;
  width: 51px; height: 31px; border-radius: 999px;
  background: rgba(120, 120, 128, 0.24); position: relative;
  transition: background 220ms var(--curva);
}
.toggle .pill::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 27px; height: 27px; border-radius: 50%; background: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), 0 1px 1px rgba(0, 0, 0, 0.06);
  transition: transform 220ms var(--curva);
}
.toggle.on .pill { background: var(--verde); }
.toggle.on .pill::after { transform: translateX(20px); }

/* -------------------------------------------------------------- botones - */
.btn {
  width: 100%; min-height: var(--tap); padding: 13px;
  border: 0; border-radius: var(--r-s);
  background: var(--azul); color: #fff;
  font-family: inherit; font-size: var(--f-base); font-weight: 600;
  letter-spacing: -0.01em; cursor: pointer; margin-top: 14px;
  transition: opacity 140ms var(--curva), transform 140ms var(--curva);
}
.btn:active { opacity: 0.75; transform: scale(0.985); }
.btn.ghost { background: rgba(120, 120, 128, 0.12); color: var(--azul); }
.btn:disabled { opacity: 0.35; cursor: default; }
.acciones { display: flex; gap: 10px; margin-top: 14px; }
.acciones .btn { margin-top: 0; }

.opcion {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: var(--tap); padding: 13px 14px; margin-top: 8px;
  border: 0; border-radius: var(--r-s);
  background: var(--bg3); color: var(--text);
  font-family: inherit; font-size: var(--f-base); font-weight: 400;
  text-align: left; cursor: pointer;
  transition: background 140ms var(--curva), box-shadow 140ms var(--curva);
}
.opcion:active { background: rgba(120, 120, 128, 0.16); }
.opcion.sel { background: var(--bg2); font-weight: 500; box-shadow: inset 0 0 0 2px var(--azul); }
.opcion .op-precio { margin-left: auto; font-size: var(--f-s); color: var(--hint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.opcion.sel .op-precio { color: var(--azul); font-weight: 600; }
.opcion.grande { align-items: flex-start; padding: 15px; }
.opcion.grande .ico { font-size: 22px; line-height: 1; }
.opcion.grande strong { display: block; font-size: var(--f-base); font-weight: 600; }
.opcion.grande small { display: block; color: var(--hint); font-size: var(--f-xs); font-weight: 400; margin-top: 3px; line-height: 1.4; }

/* ------------------------------------------------------------ resultado - */
.resultado {
  background: var(--bg2); border-radius: var(--r);
  padding: 16px; margin-bottom: 18px;
  animation: aparecer 320ms var(--curva) backwards;
}
@keyframes aparecer { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.veredicto {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px; border-radius: var(--r-s); margin-bottom: 16px;
  background: var(--bg3);
}
.veredicto strong { font-size: 20px; font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; }
.veredicto span { font-size: var(--f-s); color: var(--hint); line-height: 1.4; }
.veredicto.ok  { background: rgba(36, 138, 61, 0.10); }
.veredicto.ok strong { color: var(--verde); }
.veredicto.err { background: rgba(215, 0, 21, 0.09); }
.veredicto.err strong { color: var(--rojo); }
.veredicto.info { background: var(--ambar-soft); }
.veredicto.info strong { color: var(--ambar); }

/* Las cifras, con la escala de un Large Title y números tabulares. */
.kpis { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.kpi { flex: 1 1 96px; min-width: 96px; padding: 12px 14px; background: var(--bg3); border-radius: var(--r-s); }
.kpi.destacado { flex: 1 1 100%; padding: 16px; }
.kpi .v {
  font-size: 22px; font-weight: 600; color: var(--text);
  font-variant-numeric: tabular-nums; letter-spacing: -0.03em; line-height: 1.1;
}
.kpi.destacado .v { font-size: var(--f-kpi); color: var(--ambar); }
.kpi .k { font-size: var(--f-xs); color: var(--hint); margin-top: 4px; line-height: 1.3; }

table { width: 100%; border-collapse: collapse; font-size: var(--f-s); }
td { padding: 11px 0; border-bottom: 0.5px solid var(--separador); vertical-align: top; letter-spacing: -0.01em; }
td:last-child { text-align: right; padding-left: 12px; font-variant-numeric: tabular-nums; color: var(--hint); }
tr.sep td {
  border-bottom: 0; padding: 20px 0 6px;
  font-size: var(--f-xs); text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--hint); font-weight: 600; text-align: left;
}
tr.ok  td:last-child { color: var(--verde); font-weight: 500; }
tr.err td:last-child { color: var(--rojo); font-weight: 500; }
tr.sub td { color: var(--tenue); }
tr.tot td { border-bottom: 0; font-weight: 600; font-size: var(--f-base); padding-top: 12px; }
tr.tot td:last-child { color: var(--text); }

h4.bloque {
  font-size: var(--f-xs); text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--hint); font-weight: 600; margin: 20px 0 10px;
}
p.causa { font-size: var(--f-base); line-height: 1.45; color: var(--text); margin-bottom: 6px; }

.medida { background: var(--bg3); border-radius: var(--r-s); padding: 13px 14px; margin-bottom: 10px; }
.medida .q { font-size: var(--f-base); font-weight: 500; line-height: 1.35; }
.medida .con { font-size: var(--f-s); color: var(--azul); margin-top: 6px; }
.medida .ref { font-size: var(--f-s); color: var(--verde); margin-top: 4px; line-height: 1.4; }

ul.hacer { list-style: none; }
ul.hacer li {
  font-size: var(--f-base); line-height: 1.45; padding: 10px 0 10px 22px;
  border-bottom: 0.5px solid var(--separador); position: relative;
}
ul.hacer li::before { content: "•"; position: absolute; left: 4px; color: var(--ambar-vivo); font-size: 18px; line-height: 1.3; }
ul.hacer li:last-child { border-bottom: 0; }

.nota {
  font-size: var(--f-s); line-height: 1.45; margin-top: 12px;
  padding: 12px 14px; border-radius: var(--r-s); background: var(--bg3);
}
.nota.info { color: var(--hint); }
.nota.ok   { color: var(--verde); background: rgba(36, 138, 61, 0.10); }
.nota.warn { color: var(--ambar); background: var(--ambar-soft); }
.nota.err  { color: var(--rojo);  background: rgba(215, 0, 21, 0.09); }
.nota.destacada { color: var(--hint); background: var(--bg3); font-size: var(--f-xs); }

p.pie { font-size: var(--f-xs); color: var(--tenue); margin-top: 16px; line-height: 1.45; }

/* ------------------------------------------------------------- gráfico -- */
.grafico { display: flex; align-items: flex-end; gap: 3px; height: 120px; margin: 10px 0 4px; }
.barra { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.barra span {
  width: 100%; min-height: 3px; border-radius: 4px 4px 2px 2px;
  animation: subir 480ms var(--curva) backwards; transform-origin: bottom;
}
@keyframes subir { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.barra em { font-size: 10px; color: var(--tenue); font-style: normal; margin-top: 4px; }

/* ----------------------------------------------------------- asistente -- */
.wiz-progreso { height: 4px; background: rgba(120, 120, 128, 0.16); border-radius: 999px; overflow: hidden; margin: 0 0 18px; }
.wiz-progreso span {
  display: block; height: 100%; width: 100%; background: var(--azul); border-radius: 999px;
  transform: scaleX(0); transform-origin: left;
  transition: transform 320ms var(--curva);
}
.wiz-paso { font-size: var(--f-xs); color: var(--tenue); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; }
.wiz-nav { display: flex; gap: 10px; }
.wiz-nav .btn { margin-top: 18px; }
.wiz-nav .btn.ghost { flex: 0 0 34%; }
.wiz-num {
  width: 100%; min-height: 60px; padding: 14px; border: 0; border-radius: var(--r-s);
  background: rgba(118, 118, 128, 0.12); color: var(--text);
  font-family: inherit; font-size: 30px; font-weight: 600;
  text-align: center; outline: none; font-variant-numeric: tabular-nums; letter-spacing: -0.03em;
}
.wiz-num:focus { box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.18); }

/* --------------------------------------------------------------- toast -- */
#toast {
  position: fixed; top: 14px; left: 50%;
  transform: translateX(-50%) translateY(-120px);
  background: rgba(28, 28, 30, 0.92); color: #fff;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  padding: 12px 20px; border-radius: 999px;
  font-size: var(--f-s); font-weight: 500;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
  transition: transform 380ms var(--curva);
  z-index: 40; white-space: nowrap; max-width: 92vw; overflow: hidden; text-overflow: ellipsis;
}
#toast.show { transform: translateX(-50%) translateY(0); }

#offline {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  background: var(--ambar-vivo); color: #1c1c1e;
  font-size: var(--f-xs); font-weight: 600; text-align: center;
  padding: 9px calc(9px + env(safe-area-inset-bottom));
}

/* ------------------------------------------------- agenda, partes, tareas --- */
/* Dos campos que se leen juntos (fecha y hora, cliente y dirección). Bajo 340 px
   se apilan: en un móvil pequeño, dos campos por fila dejan cajas impulsables. */
.trab-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 340px) { .trab-fila { grid-template-columns: 1fr; } }

.mat-linea { display: grid; grid-template-columns: 1fr 88px auto; gap: 8px; margin-bottom: 8px; }
.mat-linea .mat-quitar { margin: 0; width: var(--tap); padding: 0; }

.agenda-dia {
  font-size: var(--f-s); font-weight: 600; color: var(--hint);
  text-transform: uppercase; letter-spacing: 0.04em; margin: 2px 0 10px;
}
.agenda-cita {
  display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 12px;
  padding: 10px 0; border-top: 0.5px solid var(--separador);
}
.agenda-cita:first-of-type { border-top: 0; }
.agenda-hora {
  display: flex; flex-direction: column; font-variant-numeric: tabular-nums;
  font-weight: 600; font-size: var(--f-s);
}
.agenda-hora small { color: var(--tenue); font-weight: 400; }
.agenda-que { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.agenda-que strong { font-weight: 500; overflow-wrap: anywhere; }
.agenda-que small { color: var(--hint); font-size: var(--f-xs); overflow-wrap: anywhere; }
.agenda-parte { margin: 0; white-space: nowrap; }

.tarea-nueva { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-bottom: 16px; }
.tarea-nueva .btn { margin: 0; }
.tarea-grupo {
  font-size: var(--f-xs); font-weight: 600; color: var(--tenue);
  text-transform: uppercase; letter-spacing: 0.04em; margin: 14px 0 6px;
}
.tarea {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
  padding: 9px 0; border-top: 0.5px solid var(--separador);
}
.tarea-check, .tarea-quitar {
  border: 0; background: transparent; color: var(--azul);
  font-size: 20px; line-height: 1; cursor: pointer;
  min-width: 34px; min-height: 34px; padding: 0;
}
.tarea-quitar { color: var(--tenue); font-size: 15px; }
.tarea-txt { overflow-wrap: anywhere; }
.tarea.hecha .tarea-txt { color: var(--tenue); text-decoration: line-through; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}