/* =========================================================================
   Hippo · sistema visual «Aire»
   Fuente: docs/diseno/laminas.html (lámina 1a y pantallas 1b–2m).
   Solo modo claro. Un valor nuevo entra aquí como token, nunca en línea:
   lo único que va en un atributo style son los colores de proyecto
   (--color, --tinte, --tinte-texto), que son dato.
   ========================================================================= */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  --fondo: #F8FAFC;
  --superficie: #FFFFFF;
  --tinta: #0F172A;
  --tinta-2: #334155;
  --secundaria: #475569;
  --muted: #64748B;
  --placeholder: #94A3B8;
  --divisor: #F1F5F9;
  --borde: #E2E8F0;
  --borde-fuerte: #CBD5E1;
  --linea: #EEF2F6;
  --esqueleto: #E9EDF2;
  --fila-hover: #FBFCFE;

  --azul: #3B82F6;
  --azul-hover: #2563EB;
  --azul-enlace: #1D4ED8;
  --azul-suave: #EFF6FF;
  --azul-apagado: #93C5FD;

  --rojo: #DC2626;
  --rojo-texto: #B91C1C;
  --rojo-suave: #FEF2F2;
  --rojo-borde: #FECACA;
  --ambar: #F59E0B;
  --ambar-cifra: #D97706;
  --ambar-texto: #92400E;
  --ambar-suave: #FFFBEB;
  --ambar-borde: #FDE68A;
  --verde: #22C55E;
  --verde-texto: #15803D;
  --verde-suave: #F0FDF4;

  --sombra-tarjeta: 0 1px 3px rgba(15, 23, 42, .07), 0 8px 24px rgba(15, 23, 42, .05);
  --sombra-tarjeta-movil: 0 1px 3px rgba(15, 23, 42, .07), 0 6px 18px rgba(15, 23, 42, .05);
  --sombra-control: 0 1px 3px rgba(15, 23, 42, .1);
  --sombra-boton-claro: 0 1px 3px rgba(15, 23, 42, .12);
  --sombra-accion: 0 6px 16px rgba(59, 130, 246, .35);
  --sombra-fab: 0 10px 28px rgba(59, 130, 246, .45);
  --sombra-panel: -24px 0 64px rgba(15, 23, 42, .25);
  --sombra-aviso: 0 1px 3px rgba(15, 23, 42, .1), 0 12px 32px rgba(15, 23, 42, .14);
  --sombra-caja: 0 1px 3px rgba(15, 23, 42, .07), 0 12px 32px rgba(15, 23, 42, .08);

  --r-pastilla: 999px;
  --r-tarjeta: 16px;
  --r-caja: 14px;
  --r-control: 10px;
  --r-mini: 9px;
  --r-casilla: 6px;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* 2. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: 400 13.5px/1.45 var(--sans);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, dl, dd, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: var(--azul-enlace); text-decoration: none; }
a:hover { color: var(--azul-hover); }
::selection { background: var(--azul-suave); }
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(--azul); outline-offset: 2px; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.saltar:focus { position: fixed !important; top: 8px; left: 8px; width: auto; height: auto; clip: auto; z-index: 90; background: var(--superficie); padding: 8px 12px; border-radius: var(--r-control); box-shadow: var(--sombra-control); }
.hueco { flex: 1; }
.mono { font-family: var(--mono); }
.apagado { color: var(--placeholder); font-weight: 400; }
.texto-apagado { font: 400 12.5px/1.55 var(--sans); color: var(--muted); }
.texto-rojo { color: var(--rojo-texto); }
.texto-ambar { color: var(--ambar-texto); }
@media (min-width: 761px) { .solo-movil { display: none !important; } }
@media (max-width: 760px) { .solo-escritorio { display: none !important; } }

/* 3. Estructura: barra lateral, principal, barra inferior, FAB ------------- */
.app { display: flex; min-height: 100vh; min-height: 100dvh; }
/* 233 = los 208 px de la lámina 1b más su relleno (12 + 12) y su borde: las
   láminas miden sin relleno (content-box) y aquí todo es border-box. */
.lateral {
  width: 233px; flex: none;
  background: var(--superficie);
  border-right: 1px solid var(--linea);
  padding: 20px 12px 16px;
  display: flex; flex-direction: column; gap: 3px;
  position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto;
}
.lateral__marca { display: flex; align-items: center; gap: 9px; padding: 0 10px 18px; color: var(--tinta); }
.lateral__marca:hover { color: var(--tinta); }
/* La marca (identidad 3b): el logotipo mide su alto y el ancho sale de su viewBox. */
.logotipo, .isotipo { display: block; flex: none; overflow: visible; }
.logotipo { width: auto; aspect-ratio: 211 / 99; color: var(--tinta); }
.lateral__logo { height: 30px; }
.nav { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.nav__enlace { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--r-control); font: 500 13.5px var(--sans); color: var(--secundaria); }
.nav__enlace:hover { background: var(--fondo); color: var(--tinta); }
.nav__enlace--activo, .nav__enlace--activo:hover { background: var(--azul-suave); color: var(--azul-enlace); font-weight: 700; }
.nav__texto { flex: 1; }
.nav__hueco { flex: 1; min-height: 12px; }
.nav__cuenta { font: 500 11px var(--mono); color: var(--placeholder); }
.nav__enlace--activo .nav__cuenta { color: var(--azul-enlace); }
.nav__cuenta--alarma, .nav__enlace--activo .nav__cuenta--alarma { font-weight: 800; color: var(--rojo-texto); }
/* El punto rojo de Ajustes (la noche falló o no se sabe, o el respaldo es viejo) es el único
   aviso que da Hippo, que no manda nada fuera: el punto de la casa (.punto), de 8 px y
   relleno, y no un «•» de 11 px que casi no se ve. El «•» se queda dentro, sin pintar. */
.nav__cuenta--punto { display: inline-block; width: 8px; height: 8px; flex: none; border-radius: var(--r-pastilla); background: var(--rojo); font-size: 0; }
.lateral__pista { margin: 12px 6px 0; background: var(--fondo); border-radius: var(--r-control); padding: 9px 11px; font: 500 11.5px var(--mono); color: var(--muted); }
.lateral__salir { margin: 10px 6px 0; }
.principal { flex: 1; min-width: 0; max-width: 1120px; padding: 26px 32px 32px; display: flex; flex-direction: column; gap: 18px; }
.barra-inferior, .fab { display: none; }

/* 4. Cabeceras y textos de página ----------------------------------------- */
.cabecera { display: flex; align-items: flex-end; gap: 14px; }
.cabecera--centro { align-items: center; }
.cabecera__textos { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.titulo-pagina { font: 800 27px/1.15 var(--sans); letter-spacing: -0.02em; color: var(--tinta); }
.subtitulo { font: 400 12.5px var(--sans); color: var(--muted); overflow-wrap: anywhere; }   /* el sector de un cliente puede ser una sola palabra larga */
/* Un nombre de una sola palabra, largo, se parte donde haga falta, como en el <h1>:
   si no, las migas se salían de su caja en el móvil. */
.migas { font: 400 12px var(--sans); color: var(--placeholder); overflow-wrap: anywhere; }
.migas a { color: var(--placeholder); }
.migas a:hover { color: var(--azul-enlace); }
.migas__actual { color: var(--tinta); font-weight: 700; }
.rotulo { font: 800 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--secundaria); }
.rotulo--rojo { color: var(--rojo-texto); }
.rotulo--azul { color: var(--azul-enlace); }
.rotulo--ambar { color: var(--ambar-texto); }
.rotulo--gris { color: var(--placeholder); font-size: 10.5px; }

/* 5. Botones y acciones ----------------------------------------------------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 700 12.5px var(--sans); color: #fff; background: var(--azul);
  border: 0; border-radius: var(--r-control); padding: 9px 16px; min-height: 36px;
  box-shadow: var(--sombra-accion); white-space: nowrap;
}
.boton:hover { background: var(--azul-hover); color: #fff; }
.boton--grande { font-size: 13px; padding: 9px 18px; }
.boton--ancho { width: 100%; font-size: 14px; padding: 12px; min-height: 44px; }
.boton--claro { color: var(--tinta-2); background: var(--superficie); box-shadow: var(--sombra-boton-claro); }
.boton--claro:hover { color: var(--tinta); background: var(--fondo); }
.boton__tecla { font: 500 11px var(--mono); color: rgba(255, 255, 255, .8); }
.boton__giro { display: none; width: 14px; height: 14px; border: 2.5px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: var(--r-pastilla); animation: girar .8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.accion { font: 700 12.5px var(--sans); color: var(--azul-enlace); background: none; border: 0; padding: 0; white-space: nowrap; cursor: pointer; }
.accion:hover { color: var(--azul-hover); text-decoration: underline; }
.accion--verde { color: var(--verde-texto); }
.accion--roja { color: var(--rojo-texto); }
.accion--gris { color: var(--muted); }
.accion--verde:hover, .accion--roja:hover, .accion--gris:hover { color: inherit; filter: brightness(.85); }
.accion--pequena { font-size: 12px; }
/* Un botón desactivado (el de un formulario que ya se ha enviado, data-una-vez): se ve apagado y no invita a pulsar. */
.boton:disabled, .accion:disabled { opacity: .55; cursor: default; box-shadow: none; }
.acciones { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.acciones form { display: contents; }

/* 6. Tarjetas, secciones, plegables ---------------------------------------- */
.tarjeta { background: var(--superficie); border-radius: var(--r-tarjeta); box-shadow: var(--sombra-tarjeta); min-width: 0; }
.tarjeta--lista { overflow: hidden; }
.tarjeta--bloque { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.tarjeta__cabeza { display: flex; align-items: center; gap: 8px; }
.tarjeta__cabeza > :first-child { flex: 1; }
.seccion { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.seccion__cabeza { display: flex; align-items: baseline; gap: 8px; padding: 0 4px; }
.seccion__nota { margin-left: auto; font: 400 11px var(--mono); color: var(--placeholder); text-align: right; }
.seccion__nota--ambar { font-weight: 600; font-size: 10.5px; color: var(--ambar-texto); }   /* los días de Esperando, en el móvil (1c) */
.dos-columnas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.dos-columnas--ancha { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.columna { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.separador { height: 1px; background: var(--divisor); border: 0; margin: 0; }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
.plegable__flecha { display: inline-block; font: 600 11px var(--sans); color: var(--placeholder); transition: transform .15s ease; }
details[open] > summary .plegable__flecha { transform: rotate(90deg); }
.plegable { background: var(--superficie); border-radius: var(--r-tarjeta); box-shadow: var(--sombra-tarjeta); overflow: hidden; }
.plegable > summary { display: flex; align-items: center; gap: 8px; padding: 13px 16px; min-height: 44px; }
.plegable[open] > summary { border-bottom: 1px solid var(--divisor); }
.seccion-plegable > summary { display: flex; align-items: baseline; gap: 8px; padding: 0 4px; margin-bottom: 8px; }
.seccion-plegable > summary .plegable__flecha { display: none; }

/* 7. Chips, puntos y avatares ----------------------------------------------- */
.chip { display: inline-flex; align-items: center; gap: 6px; flex: none; max-width: 220px; min-width: 0; background: var(--fondo); border-radius: var(--r-pastilla); padding: 4px 10px; font: 500 11.5px var(--sans); color: var(--secundaria); white-space: nowrap; }
.chip__texto { overflow: hidden; text-overflow: ellipsis; }
.chip--vacio { background: none; border: 1.5px dashed var(--borde-fuerte); padding: 2.5px 8.5px; color: var(--placeholder); font-weight: 600; }
.chip--fuerte { font-weight: 700; color: var(--tinta); font-size: 13px; background: none; padding: 0; }
.punto { width: 8px; height: 8px; flex: none; border-radius: var(--r-pastilla); background: var(--color, var(--placeholder)); display: inline-block; }
.punto--grande { width: 9px; height: 9px; }
.avatar { width: 32px; height: 32px; flex: none; border-radius: 10px; background: var(--color, var(--muted)); display: inline-flex; align-items: center; justify-content: center; font: 800 14px var(--sans); color: #fff; }
.avatar--tarjeta { width: 34px; height: 34px; border-radius: 11px; font-size: 15px; }
.avatar--proyecto { width: 44px; height: 44px; border-radius: 13px; font-size: 20px; }
.avatar--ficha { width: 46px; height: 46px; border-radius: 14px; font-size: 21px; }

/* 8. Pastillas: estado, prioridad, verificación ---------------------------- */
.pastilla { display: inline-flex; align-items: center; gap: 6px; flex: none; font: 700 11.5px/1.3 var(--sans); padding: 4px 11px; border: 0; border-radius: var(--r-pastilla); white-space: nowrap; color: var(--secundaria); background: var(--divisor); }
.pastilla__punto { width: 7px; height: 7px; flex: none; border-radius: var(--r-pastilla); background: currentColor; }
.pastilla__dias { font: 600 11px var(--mono); }
.pastilla__flecha { font-size: 10px; opacity: .7; }
.pastilla--pendiente { color: var(--secundaria); background: var(--divisor); }
.pastilla--en_curso { color: var(--azul-enlace); background: var(--azul-suave); }
.pastilla--esperando { color: var(--ambar-texto); background: var(--ambar-suave); }
.pastilla--hecha { color: var(--verde-texto); background: var(--verde-suave); }
.pastilla--prioridad { font-size: 11px; padding: 4px 10px; }
.pastilla--urgente { color: var(--rojo-texto); background: var(--rojo-suave); }
.pastilla--alta { color: var(--ambar-texto); background: var(--ambar-suave); }
.pastilla--normal { color: var(--secundaria); background: var(--divisor); }
.pastilla--baja { color: var(--placeholder); background: var(--fondo); }
.pastilla--coincide { color: var(--verde-texto); background: var(--verde-suave); }
.pastilla--coincide .pastilla__punto { background: var(--verde); }
.pastilla--discrepa { color: var(--ambar-texto); background: var(--ambar-suave); }
.pastilla--discrepa .pastilla__punto { background: var(--ambar); }
.pastilla--sin-comprobar { color: var(--muted); background: var(--divisor); border: 1.5px dashed var(--borde-fuerte); padding: 2.5px 9.5px; }
.pastilla--vacia { color: var(--placeholder); background: transparent; border: 1.5px dashed var(--borde-fuerte); padding: 2.5px 9.5px; font-weight: 600; }
.pastilla--azul { color: var(--azul-enlace); background: var(--azul-suave); }
.pastilla--roja { color: var(--rojo-texto); background: var(--rojo-suave); }
.pastilla--mini { font-size: 10.5px; padding: 2px 8px; gap: 5px; }
.pastilla--mini .pastilla__punto { width: 6px; height: 6px; }
.pastilla--mini.pastilla--sin-comprobar, .pastilla--mini.pastilla--vacia { padding: .5px 6.5px; }
.pastilla--editable { position: relative; cursor: pointer; }
.pastilla--editable:hover { filter: brightness(.97); }
.pastilla--editable:focus-within { outline: 2px solid var(--azul); outline-offset: 1px; }
/* Un <select> nativo, invisible, encima de la pastilla: se toca la pastilla y
   se abre el desplegable del sistema (en iOS, la hoja que sube desde abajo). */
.selector-oculto { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; appearance: none; -webkit-appearance: none; border: 0; font-size: 16px; }

/* 9. Fecha en pastilla ------------------------------------------------------ */
.fecha { position: relative; display: inline-flex; align-items: center; justify-content: flex-end; flex: none; cursor: pointer; font: 600 11.5px var(--mono); color: var(--secundaria); white-space: nowrap; }
.fecha:hover .fecha__texto { text-decoration: underline dashed var(--borde-fuerte); text-underline-offset: 3px; }
.fecha:focus-within { outline: 2px solid var(--azul); outline-offset: 2px; border-radius: 4px; }
.fecha--roja { color: var(--rojo-texto); }
.fecha--apagada { color: var(--placeholder); font-weight: 500; }
.fecha--vacia { color: var(--placeholder); font-weight: 500; }
.fecha--grande { font-size: 12.5px; justify-content: flex-start; }

/* 10. Casilla --------------------------------------------------------------- */
.casilla { position: relative; z-index: 1; width: 18px; height: 18px; flex: none; padding: 0; border: 2px solid var(--borde-fuerte); border-radius: var(--r-casilla); background: var(--superficie); display: inline-flex; align-items: center; justify-content: center; font: 800 10px/1 var(--sans); color: transparent; }
.casilla::before { content: ""; position: absolute; inset: -9px; }
.casilla:hover { border-color: var(--azul); }
.casilla--hecha { background: var(--azul); border-color: var(--azul); color: #fff; }
.casilla--hueca { border-style: dashed; background: none; }
.seleccion { position: relative; z-index: 1; width: 18px; height: 18px; flex: none; margin: 0; accent-color: var(--azul); }
.seleccion-zona { position: relative; display: inline-flex; flex: none; }
/* El sitio de la casilla de una subtarea mientras se selecciona (R17): no se dibuja ni es un control (un toque ahí es un toque en la fila). */
.hueco-casilla { width: 18px; height: 18px; flex: none; }

/* 11. Filas de tarea -------------------------------------------------------- */
.lista-filas { display: flex; flex-direction: column; }
.fila { position: relative; display: flex; align-items: center; gap: 11px; min-width: 0; padding: 11px 16px; border-bottom: 1px solid var(--divisor); }
.lista-filas > .fila:last-child,
.lista-filas > .familia:last-child > .fila:last-child { border-bottom: 0; }
.fila:hover { background: var(--fila-hover); }
.fila--compacta { gap: 10px; padding: 9px 14px; }
.fila--hija { padding-left: 32px; background: var(--fondo); }
.fila--hija:hover { background: #F3F6FA; }
.fila--seleccionada, .fila--seleccionada:hover { background: var(--azul-suave); box-shadow: inset 3px 0 0 var(--azul); }
.fila--suelta { padding: 7px 0; gap: 10px; }
.fila--suelta .fila__titulo { flex: 1 1 auto; }
a.fila--enlace { color: inherit; }
a.fila--enlace:hover { background: var(--fondo); }
.fila--enlace .fila__titulo { flex: 1 1 auto; }
.fila--suelta:hover { background: none; }
.fila__cuerpo { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0; }
.fila__linea { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; }
.fila__titulo { flex: 0 1 auto; font: 600 13.5px var(--sans); color: var(--tinta); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.fila__titulo:hover { color: var(--tinta); }
.fila__madre { color: var(--placeholder); font-weight: 500; }
/* Toda la fila abre el detalle: el enlace del título se estira por encima de
   la fila, y lo que se toca dentro (casilla, pastillas, fecha) queda encima. */
.fila__enlace::after { content: ""; position: absolute; inset: 0; }
/* (el <select> invisible de una pastilla NO entra: va en absoluto sobre su etiqueta) */
.fila :where(button, select:not(.selector-oculto), input:not(.selector-oculto), label, .asa) { position: relative; z-index: 1; }
.fila__meta { display: none; }
/* El estado en la línea de debajo del título (móvil), con el color de su pastilla. */
.fila__estado--en_curso { font-weight: 700; color: var(--azul-enlace); }
.fila__estado--esperando { font-weight: 700; color: var(--ambar-texto); }
/* Ancho mínimo, no fijo: las fechas se alinean a la derecha y una larga («vie 18 ·
   hace 3 días») empuja un poco el chip en vez de salirse de la tarjeta. */
.fila__fecha { flex: none; min-width: 130px; text-align: right; white-space: nowrap; font: 600 11.5px var(--mono); color: var(--secundaria); }
.fila__fecha--corta { min-width: 104px; }
.fila__fecha--ancha { min-width: 150px; }
.fila__fecha--roja { color: var(--rojo-texto); }
.fila__fecha--ambar { color: var(--ambar-texto); }
.fila__fecha--apagada { color: var(--placeholder); font-weight: 500; }
/* La fecha que se cambia desde la fila (Tareas) es .fecha y .fila__fecha a la vez:
   su tono manda sobre el gris de la columna, que va después en la cascada. */
.fila__fecha.fecha--roja { color: var(--rojo-texto); }
.fila__fecha.fecha--apagada, .fila__fecha.fecha--vacia { color: var(--placeholder); font-weight: 500; }
.fila--hecha .fila__titulo { font-weight: 500; color: var(--placeholder); text-decoration: line-through; }
.contador { flex: none; font: 800 10.5px var(--mono); color: var(--azul-enlace); background: var(--azul-suave); padding: 2px 7px; border-radius: var(--r-pastilla); }
/* La recurrencia cede sitio diez veces antes que el título: si falta espacio, se recorta ella. */
.recurrente { flex: 0 10 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font: 500 11px var(--mono); color: var(--placeholder); white-space: nowrap; }
.asa { flex: none; font: 400 13px/0.6 var(--sans); letter-spacing: -1px; color: var(--borde-fuerte); cursor: grab; user-select: none; padding: 8px 2px; }
.codo { flex: none; width: 11px; height: 11px; margin-top: -7px; border-left: 2px solid var(--borde-fuerte); border-bottom: 2px solid var(--borde-fuerte); border-radius: 0 0 0 5px; }
.fila--nueva { padding: 10px 14px; background: var(--superficie); border-radius: var(--r-tarjeta); box-shadow: var(--sombra-tarjeta); border-bottom: 0; }
.fila--nueva input { flex: 1; min-width: 0; border: 0; background: transparent; font: 400 13.5px var(--sans); color: var(--tinta); outline: none; }
.fila--nueva input::placeholder { color: var(--placeholder); }
.fila__pista { font: 500 11px var(--mono); color: var(--borde-fuerte); }
.nueva-en-tarjeta { display: flex; align-items: center; gap: 10px; padding-top: 4px; }
.nueva-en-tarjeta input { flex: 1; min-width: 0; border: 0; background: transparent; font: 400 13px var(--sans); color: var(--tinta); outline: none; padding: 6px 0; }
.nueva-en-tarjeta input::placeholder { color: var(--placeholder); }

/* 12. Grupos de la lista de Tareas ----------------------------------------- */
.grupos { display: flex; flex-direction: column; gap: 12px; }
.grupo__cabeza { display: flex; align-items: center; gap: 8px; padding: 9px 16px; background: var(--fondo); border-bottom: 1px solid var(--divisor); }
.grupo__nombre { font: 800 12.5px var(--sans); color: var(--tinta); }
.grupo__cuenta { font: 600 11px var(--mono); color: var(--placeholder); }
.familia { background: var(--superficie); }
.sortable-ghost { opacity: .4; }

/* 13. Cifras (franja de contexto y cabecera de la ficha) -------------------- */
.cifras { display: flex; gap: 14px; }
.cifra { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; background: var(--superficie); border-radius: var(--r-tarjeta); padding: 14px 18px; box-shadow: var(--sombra-tarjeta); color: inherit; }
a.cifra:hover { color: inherit; box-shadow: 0 1px 3px rgba(15, 23, 42, .1), 0 10px 28px rgba(15, 23, 42, .08); }
.cifra__numero { font: 800 31px/1.15 var(--sans); letter-spacing: -0.02em; color: var(--tinta); }
.cifra__numero--rojo { color: var(--rojo); }
.cifra__numero--ambar { color: var(--ambar-cifra); }
.cifra__numero--azul { color: var(--azul-hover); }
.cifra__numero--gris { color: var(--placeholder); }
.cifra__etiqueta { font: 700 12.5px var(--sans); color: var(--tinta); }
.cifra__detalle { font: 400 11.5px var(--sans); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cifra__unidad { font: 600 13px var(--sans); color: var(--muted); letter-spacing: 0; }
.cifra__pie { font: 500 11px var(--mono); color: var(--placeholder); }
/* «1 vencida» no se parte: en el móvil la cifra es estrecha y el 1 se quedaba solo. */
.cifra__pie .texto-rojo { white-space: nowrap; }
.cifras--ficha .cifra { padding: 13px 16px; }
.cifras--ficha .cifra__numero { font-size: 24px; }
.cifra--azul { background: var(--azul); box-shadow: 0 6px 16px rgba(59, 130, 246, .3); }
.cifra--azul .cifra__numero { color: #fff; }
.cifra--azul .cifra__pie { color: rgba(255, 255, 255, .85); }
/* Sin dato, o con expedientes que no se leen: el detalle entero, sin cortarlo con «…». */
.cifra--sin-dato .cifra__detalle, .cifra--ilegibles .cifra__detalle { white-space: normal; }

/* 14. Barra de fases -------------------------------------------------------- */
.fases { display: flex; gap: 3px; }
.fases__tramo { flex: 1; height: 8px; border-radius: var(--r-pastilla); background: var(--borde); }
.fases__tramo--hecha { background: var(--verde); }
.fases__tramo--discrepa { background: var(--ambar); }
.fases__tramo--sin-comprobar { background: var(--divisor); border: 1.5px dashed var(--borde-fuerte); }
.fases--fina { gap: 2px; }
.fases--fina .fases__tramo { height: 6px; }
.fases__leyenda { font: 600 11px var(--mono); color: var(--muted); }

/* 15. Proyectos: rejilla y tarjeta ------------------------------------------ */
.rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.proyecto { background: var(--superficie); border-radius: var(--r-tarjeta); padding: 15px; display: flex; flex-direction: column; gap: 9px; box-shadow: var(--sombra-tarjeta); color: inherit; min-width: 0; }
.proyecto:hover { color: inherit; box-shadow: 0 1px 3px rgba(15, 23, 42, .1), 0 10px 28px rgba(15, 23, 42, .08); }
.proyecto__cabeza { display: flex; align-items: center; gap: 9px; min-width: 0; }
.proyecto__textos { display: flex; flex-direction: column; flex: 1; min-width: 0; }
/* Un nombre largo pasa a una segunda línea antes que cortarse (lámina 2f: «Asador La
   / Chimenea»); de dos en adelante, «…». */
.proyecto__nombre { font: 700 13px/1.3 var(--sans); color: var(--tinta); overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.proyecto__meta { font: 400 10.5px var(--mono); color: var(--placeholder); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proyecto__cuentas { font: 600 11px var(--mono); color: var(--muted); }
.proyecto__leyenda { font: 500 10.5px var(--mono); color: var(--placeholder); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Toda la tarjeta lleva a la ficha: el enlace del nombre se estira por encima
   (su ::after cuelga de .proyecto, así que el overflow del nombre no lo recorta).
   En el escritorio se arrastra la tarjeta entera; el enlace no se deja arrastrar
   solo (draggable="false"), o el navegador se llevaría la URL en vez de la tarjeta. */
.proyecto { position: relative; }
.proyecto__enlace { -webkit-user-drag: none; }
.proyecto__enlace::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-tarjeta); }
.proyecto__enlace:focus-visible { outline: none; }
.proyecto__enlace:focus-visible::after { outline: 2px solid var(--azul); outline-offset: 2px; }
.proyecto__cuentas > span { white-space: nowrap; }
.rejilla .sortable-ghost { opacity: .4; }

/* 16. Aviso de sonda y pasos de fase --------------------------------------- */
.sonda { border: 1.5px dashed var(--borde-fuerte); background: var(--fondo); border-radius: var(--r-caja); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.sonda--mini { padding: 10px 12px; background: var(--divisor); }
.sonda__titulo { font: 700 13px var(--sans); color: var(--tinta-2); }
.sonda__texto { font: 400 12.5px/1.5 var(--sans); color: var(--muted); overflow-wrap: anywhere; }
.paso { display: flex; flex-direction: column; gap: 6px; padding: 10px 16px; border-bottom: 1px solid var(--divisor); }
.lista-filas > .paso:last-child { border-bottom: 0; }
.paso__linea { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
.paso__titulo { font: 600 13px var(--sans); color: var(--tinta); flex: 1; min-width: 0; }
.paso--hecho .paso__titulo { color: var(--muted); }
.paso--pendiente .paso__titulo { color: var(--placeholder); font-weight: 500; }
.paso--actual .paso__titulo { color: var(--tinta); font-weight: 700; }
.paso__estado { font: 500 11.5px var(--mono); color: var(--placeholder); }
.paso__mensaje { font: 400 11.5px/1.5 var(--sans); color: var(--muted); overflow-wrap: anywhere; }
.pasos-resumen .paso { padding: 6px 0; }
.pasos-resumen .paso:last-child { border-bottom: 0; }   /* el último, sin raya (1k) */

/* 17. Recurrencia ------------------------------------------------------------ */
.pliegue { background: var(--fondo); border-radius: var(--r-caja); }
/* Plegado o quieto (la recurrencia de una tarea hecha, que ya no se toca), la misma fila. */
.pliegue > summary, .pliegue--quieto { display: flex; align-items: center; gap: 10px; padding: 15px 16px; min-height: 48px; }
.pliegue__icono { font: 600 14px var(--mono); color: var(--azul-enlace); }
.pliegue__titulo { font: 800 15px var(--sans); letter-spacing: -0.01em; }
/* En el panel el resumen no cabe en una línea («cada mes, el día 20 · próxima: mar
   20 oct»): en dos iguales, como en 1i, y no con la fecha partida y «oct» suelto. */
.pliegue__resumen { margin-left: auto; font: 500 12px var(--mono); color: var(--muted); text-align: right; text-wrap: balance; }
.pliegue__cuerpo { padding: 0 16px 16px; }
.pliegue .entrada { background: var(--superficie); }
.recurrencia { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.recurrencia__frase, .recurrencia__fila { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font: 500 14px var(--sans); color: var(--tinta); }
.control { position: relative; display: inline-flex; align-items: center; gap: 4px; font: 700 13px var(--mono); color: var(--azul-enlace); background: var(--azul-suave); padding: 4px 10px; border: 0; border-radius: var(--r-mini); min-height: 30px; }
input.control { -moz-appearance: textfield; }
.control--numero { width: 58px; text-align: center; }
input[type="date"].control { width: auto; }
.dias { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.dia { display: inline-flex; }
.dia span { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-mini); background: var(--superficie); box-shadow: var(--sombra-control); font: 700 12px var(--mono); color: var(--muted); cursor: pointer; }
.dia input:checked + span { background: var(--azul); color: #fff; box-shadow: none; }
.dia input:focus-visible + span { outline: 2px solid var(--azul); outline-offset: 2px; }
.opcion { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.opcion input[type="radio"] { accent-color: var(--azul); margin: 0; }
.recurrencia__separador { height: 1px; background: var(--linea); }
.recurrencia__cristiano { font: 400 12.5px/1.5 var(--sans); color: var(--muted); }
.recurrencia__proxima { font: 700 12px var(--mono); color: var(--tinta); }
.recurrencia__aviso { font: 500 12px/1.5 var(--sans); color: var(--ambar-texto); }
.recurrencia__error { font: 600 12.5px/1.5 var(--sans); color: var(--rojo-texto); }

/* 18. Archivos y subida ------------------------------------------------------ */
.archivos { display: flex; flex-direction: column; gap: 8px; }
/* En una columna estrecha las acciones bajan a su propia línea, a la derecha. */
.archivo { background: var(--fondo); border-radius: var(--r-caja); padding: 10px 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-width: 0; }
.archivo__tipo { width: 32px; height: 38px; flex: none; background: var(--tinta); border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font: 800 9px var(--mono); color: #fff; }
.archivo__datos { flex: 1 1 150px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.archivo__acciones { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.archivo__nombre { font: 600 12.5px var(--sans); color: var(--tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.archivo__nombre:hover { color: var(--azul-enlace); }
.archivo__meta { font: 400 11px var(--mono); color: var(--placeholder); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.archivo--factura .archivo__tipo { background: var(--muted); }
/* Una factura dice entera de dónde viene (en Documentos, «de facturación, solo lectura»):
   en una columna estrecha, o junto a un estado largo («Anulada (prueba)»), se parte en
   dos líneas parejas en vez de cortarse con «…». */
.archivo--factura .archivo__meta { white-space: normal; text-wrap: balance; }
.subida { border: 1.5px dashed var(--borde-fuerte); border-radius: var(--r-caja); padding: 12px 14px; text-align: center; font: 500 12.5px var(--sans); color: var(--muted); cursor: pointer; display: block; }
.subida:hover, .subida--encima { border-color: var(--azul); background: var(--azul-suave); color: var(--azul-enlace); }
.subida u { color: var(--azul-enlace); }
/* En dos líneas, parejas: en una columna estrecha «ZIP» se quedaba sola en la segunda. */
.subida__limite, .subida__progreso { display: block; font: 400 11px var(--mono); color: var(--placeholder); margin-top: 3px; text-wrap: balance; }

/* 19. Notas ------------------------------------------------------------------ */
.nota { border-left: 3px solid var(--borde); padding-left: 12px; display: flex; flex-direction: column; gap: 3px; }
.nota__fecha { font: 800 10.5px var(--mono); letter-spacing: .08em; color: var(--placeholder); }
.nota__texto { font: 400 13px/1.55 var(--sans); color: var(--tinta); white-space: pre-wrap; overflow-wrap: anywhere; }
.nota__borrar { align-self: flex-start; font-size: 11px; opacity: 0; }
.nota:hover .nota__borrar, .nota__borrar:focus { opacity: 1; }
/* Sin «encima» (una pantalla táctil), invisible sería un botón que se toca sin verlo: su
   zona de toque de 44 px sigue ahí. Se ve siempre. */
@media (hover: none) { .nota__borrar { opacity: 1; } }
.caja-nota { display: block; }
.caja-nota__texto { display: block; width: 100%; background: var(--fondo); border: 0; border-radius: var(--r-control); padding: 10px 12px; font: 400 13px/1.5 var(--sans); color: var(--tinta); resize: none; min-height: 40px; }
.caja-nota__texto::placeholder { color: var(--placeholder); }
.caja-nota__texto:focus { outline: 2px solid var(--azul); outline-offset: 0; background: var(--superficie); }
.notas { display: flex; flex-direction: column; gap: 12px; }

/* 20. Texto que se edita en el sitio --------------------------------------- */
.editable__vista { font: 400 13.5px/1.65 var(--sans); color: var(--tinta); white-space: pre-wrap; overflow-wrap: anywhere; cursor: text; border-bottom: 2px dashed transparent; padding-bottom: 6px; border-radius: 2px; }
.editable__vista:hover { border-bottom-color: var(--borde-fuerte); }
.editable--vacio .editable__vista { color: var(--placeholder); border-bottom-color: var(--borde-fuerte); }
.editable__formulario { display: flex; flex-direction: column; gap: 8px; }
.editable__texto { width: 100%; min-height: 90px; border: 0; border-radius: var(--r-control); background: var(--fondo); padding: 10px 12px; font: 400 13.5px/1.6 var(--sans); color: var(--tinta); resize: vertical; }
.editable__texto:focus { outline: 2px solid var(--azul); outline-offset: 0; background: var(--superficie); }
.editable__acciones { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.editable__pista { font: 400 11px var(--mono); color: var(--placeholder); }
.titulo-editable { display: block; width: 100%; font: 800 20px/1.25 var(--sans); letter-spacing: -0.01em; color: var(--tinta); border: 0; border-bottom: 2px dashed var(--borde-fuerte); background: transparent; padding: 0 0 8px; border-radius: 0; resize: none; overflow: hidden; }
.titulo-editable:focus { outline: none; border-bottom-color: var(--azul); }
.titulo-editable::placeholder { color: var(--placeholder); }
.en-linea { font: 600 13px var(--mono); color: var(--tinta); border: 0; border-bottom: 1.5px dashed transparent; background: transparent; padding: 2px 0; width: 100%; min-width: 0; }
.en-linea:hover { border-bottom-color: var(--borde-fuerte); }
.en-linea:focus { outline: none; border-bottom-color: var(--azul); }
.en-linea::placeholder { color: var(--placeholder); font-weight: 400; }
.en-linea--texto { font-family: var(--sans); }

/* 21. Formularios ------------------------------------------------------------ */
.formulario { display: flex; flex-direction: column; gap: 14px; }
.formulario__fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.campo__etiqueta { font: 600 12px var(--sans); color: var(--secundaria); }
.campo__ayuda { font: 400 11.5px/1.45 var(--sans); color: var(--placeholder); }
.entrada { display: block; width: 100%; background: var(--fondo); border: 0; border-radius: var(--r-control); padding: 11px 12px; font: 500 13.5px var(--sans); color: var(--tinta); min-height: 44px; }
textarea.entrada { min-height: 90px; resize: vertical; line-height: 1.55; }
.entrada:focus { outline: 2px solid var(--azul); outline-offset: 0; background: var(--superficie); }
.entrada--error { box-shadow: inset 0 0 0 1.5px var(--rojo-borde); }
.entrada::placeholder { color: var(--placeholder); font-weight: 400; }
.marca { display: flex; align-items: center; gap: 9px; font: 400 12.5px var(--sans); color: var(--secundaria); cursor: pointer; }
.marca input { width: 18px; height: 18px; margin: 0; accent-color: var(--azul); flex: none; }
.marca__nota { color: var(--placeholder); }
.opciones { display: flex; gap: 8px; flex-wrap: wrap; }
.opciones label { position: relative; }
.opciones input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opciones > label > span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--r-pastilla); background: var(--superficie); box-shadow: var(--sombra-control); font: 600 12.5px var(--sans); color: var(--secundaria); min-height: 36px; }
.opciones input:checked + span { background: var(--azul-suave); color: var(--azul-enlace); box-shadow: inset 0 0 0 1.5px var(--azul); font-weight: 700; }
.opciones input:focus-visible + span { outline: 2px solid var(--azul); outline-offset: 2px; }
.muestra { width: 22px; height: 22px; border-radius: 7px; background: var(--color); display: inline-block; }
fieldset.campo { border: 0; padding: 0; margin: 0; min-width: 0; }
legend.campo__etiqueta { padding: 0; margin-bottom: 5px; }
.opciones--colores > label > span { padding: 7px; }
.formulario--proyecto { max-width: 720px; }
.zona-peligro { max-width: 720px; flex-direction: row; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
/* «Mandar «…» a la papelera» lleva el nombre dentro: se parte como un texto (una .accion
   no parte la línea), o con un nombre largo el formulario se salía del móvil. */
.zona-peligro .accion { white-space: normal; overflow-wrap: anywhere; text-align: left; }
.error-formulario { background: var(--rojo-suave); border-radius: 12px; padding: 12px 14px; font: 400 12.5px/1.5 var(--sans); color: var(--tinta); display: flex; gap: 10px; align-items: flex-start; }
.error-formulario::before { content: ""; width: 8px; height: 8px; border-radius: var(--r-pastilla); background: var(--rojo); flex: none; margin-top: 5px; }
/* «Pausa ya tiene ficha en Hippo: …» (el alta de «Darle ficha» con una pestaña de antes):
   como el error, en ámbar, que no es un error. Su enlace es una caja entera que baja de
   línea si no cabe y se parte por dentro (una .accion no parte la línea, y con un nombre
   largo se salía del móvil): partido entre dos líneas como un texto, su zona de toque
   agrandada (::after) se quedaba en nada. */
.nota-formulario { background: var(--ambar-suave); border-radius: 12px; padding: 12px 14px; font: 400 12.5px/1.5 var(--sans); color: var(--tinta); display: flex; gap: 10px; align-items: flex-start; overflow-wrap: anywhere; }
.nota-formulario::before { content: ""; width: 8px; height: 8px; border-radius: var(--r-pastilla); background: var(--ambar); flex: none; margin-top: 5px; }
.nota-formulario .accion { display: inline-block; max-width: 100%; white-space: normal; text-align: left; }

/* 22. Entrar y páginas sin barra -------------------------------------------- */
.desnuda { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 32px 16px; }
/* 424 = los 360 px de la lámina 2a más 32 + 32 de relleno (ver .lateral). */
.entrar { width: 100%; max-width: 424px; background: var(--superficie); border-radius: 18px; padding: 32px; display: flex; flex-direction: column; gap: 16px; box-shadow: var(--sombra-caja); }
.entrar__marca { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-bottom: 4px; }
.entrar__nombre { line-height: 0; }
.entrar__logo { height: 52px; }
.entrar__lema { font: 400 12px var(--sans); color: var(--placeholder); }
.entrar__error { background: var(--rojo-suave); border-radius: 12px; padding: 12px 14px; display: flex; gap: 10px; align-items: flex-start; font: 400 12.5px/1.5 var(--sans); color: var(--tinta); }
.entrar__error::before { content: ""; width: 8px; height: 8px; border-radius: var(--r-pastilla); background: var(--rojo); flex: none; margin-top: 5px; }
.entrar__version { font: 400 10.5px var(--mono); color: var(--borde-fuerte); text-align: center; }
.entrar.comprobando .entrada { background: var(--divisor); color: var(--placeholder); }
.entrar.comprobando .boton { background: var(--azul-apagado); box-shadow: none; pointer-events: none; }
.entrar.comprobando .boton__giro { display: inline-block; }

/* 23. Estados: vacío, error, duda, cargando ---------------------------------- */
.estado { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 48px 36px; min-height: 300px; }
.estado--compacto { padding: 28px 16px; min-height: 0; }
.estado__icono { width: 40px; height: 40px; border-radius: var(--r-caja); display: inline-flex; align-items: center; justify-content: center; font: 800 16px var(--sans); }
.estado__icono--ok { background: var(--azul-suave); color: var(--azul-enlace); }
.estado__icono .isotipo { width: 26px; height: 26px; }
.estado__icono--error { background: var(--rojo-suave); color: var(--rojo); font-size: 17px; }
.estado__icono--duda { background: var(--divisor); border: 1.5px dashed var(--borde-fuerte); color: var(--muted); font-size: 17px; }
.estado__titulo { font: 800 20px var(--sans); letter-spacing: -0.01em; color: var(--tinta); }
.estado__texto { font: 400 13px/1.6 var(--sans); color: var(--muted); max-width: 290px; }
.estado__acciones { display: flex; gap: 12px; align-items: center; margin-top: 4px; flex-wrap: wrap; justify-content: center; }
.estado__pie { font: 500 11px var(--mono); color: var(--placeholder); }
.tecla { font: 500 12px var(--mono); color: var(--muted); background: var(--superficie); padding: 7px 11px; border-radius: var(--r-mini); box-shadow: var(--sombra-boton-claro); }
.zona { position: relative; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.zona.htmx-request::after { content: "un momento…"; position: absolute; inset: 0; display: flex; justify-content: center; padding-top: 48px; background: rgba(248, 250, 252, .65); font: 500 11px var(--mono); color: var(--placeholder); animation: aparecer 0s .3s both; z-index: 5; pointer-events: none; }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }

/* 24. Avisos (la esquina) ---------------------------------------------------- */
.avisos { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: flex; flex-direction: column; gap: 8px; width: min(420px, calc(100vw - 32px)); pointer-events: none; }
.aviso { pointer-events: auto; display: flex; align-items: center; gap: 10px; background: var(--superficie); border-radius: 12px; padding: 11px 14px; box-shadow: var(--sombra-aviso); font: 500 13px/1.45 var(--sans); color: var(--tinta); }
.aviso::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: var(--r-pastilla); background: var(--azul); }
.aviso--ok::before { background: var(--verde); }
.aviso--atencion::before { background: var(--ambar); }
.aviso--error::before { background: var(--rojo); }
.aviso--usado { display: none; }
.aviso__texto { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.aviso__accion { font: 700 12.5px var(--sans); color: var(--azul-enlace); background: none; border: 0; padding: 6px 4px; }
.aviso__cerrar { font: 700 13px var(--sans); color: var(--placeholder); background: none; border: 0; padding: 6px; }

/* 25. Panel lateral del detalle --------------------------------------------- */
.velo { display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, .32); z-index: 40; }
.panel { display: none; position: fixed; top: 0; right: 0; bottom: 0; width: min(500px, 100vw); background: var(--superficie); box-shadow: var(--sombra-panel); border-radius: 18px 0 0 18px; z-index: 50; overflow: hidden; }
body.con-panel { overflow: hidden; }
body.con-panel .velo { display: block; }
body.con-panel .panel { display: flex; flex-direction: column; }
.panel__contenido { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.panel__barra { display: flex; align-items: center; gap: 12px; padding: 16px 24px; border-bottom: 1px solid var(--divisor); flex: none; }
.panel__rotulo { font: 800 15px var(--sans); }
.panel__separador { width: 1px; height: 16px; background: var(--borde); }
.panel__cuerpo { flex: 1; overflow-y: auto; padding: 26px 28px; display: flex; flex-direction: column; gap: 24px; }
.panel__pista { font: 400 12.5px/1.6 var(--sans); color: var(--muted); }
.panel__pie { font: 400 11.5px var(--mono); color: var(--placeholder); padding-top: 6px; }
.propiedades { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 14px 16px; align-items: center; }
.propiedades__etiqueta { font: 500 12px var(--sans); color: var(--placeholder); }
.propiedades__valor { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
.bloque { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.bloque__titulo { display: flex; align-items: center; gap: 8px; font: 800 15px var(--sans); letter-spacing: -0.01em; }
/* Lo que está sin rellenar va en pastilla a trazos, como en la recién creada (1j). */
.propiedades .fecha--vacia { border: 1.5px dashed var(--borde-fuerte); border-radius: var(--r-pastilla); padding: 2.5px 9.5px; }
/* En el escritorio las subtareas del panel van juntas y sin raya (lámina 1h); en el
   móvil siguen con sus 44 px y su raya (1i), como cualquier fila. */
@media (min-width: 761px) { .panel__cuerpo .fila--suelta { padding: 4px 0; border-bottom: 0; } }
.nueva-subtarea input { width: 100%; border: 0; background: transparent; padding: 6px 0 6px 28px; font: 700 12.5px var(--sans); color: var(--tinta); outline: none; }
.nueva-subtarea input::placeholder { color: var(--azul-enlace); }
.nueva-subtarea input:focus::placeholder { color: var(--placeholder); font-weight: 400; }

/* 26. Pestañas y ficha ------------------------------------------------------- */
.pestanas { display: flex; gap: 2px; border-bottom: 2px solid var(--linea); overflow-x: auto; scrollbar-width: none; }
.pestanas::-webkit-scrollbar { display: none; }
.pestana { font: 600 13px var(--sans); color: var(--muted); padding: 8px 14px; white-space: nowrap; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.pestana:hover { color: var(--tinta); }
.pestana--activa, .pestana--activa:hover { font-weight: 800; color: var(--tinta); border-bottom-color: var(--azul); }
.pestana__cuenta { font: 600 11px var(--mono); color: var(--placeholder); }
.ficha__cabeza { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ficha__textos { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.ficha__titulo-linea { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.ficha__nombre { font: 800 23px/1.2 var(--sans); letter-spacing: -0.02em; overflow-wrap: anywhere; }
/* La descripción de la ficha lleva siempre su raya a trazos (lámina 2h): su tarjeta dice
   «se edita en el sitio». En el panel de una tarea solo sale al pasar por encima (1h). */
.ficha__descripcion .editable__vista { border-bottom-color: var(--borde-fuerte); }
.resumen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.resumen__columna { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.resumen__proximas { gap: 6px; }          /* las filas, pegadas a su rótulo (1k) */

/* 27. Contrato, LTV y facturación ------------------------------------------ */
.cajas { display: flex; gap: 10px; }
.caja-dato { flex: 1; min-width: 0; background: var(--fondo); border-radius: var(--r-caja); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.caja-dato--azul { background: var(--azul-suave); }
.caja-dato__rotulo { font: 800 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--placeholder); }
.caja-dato--azul .caja-dato__rotulo { color: var(--azul-enlace); }
.caja-dato__valor { font: 800 20px var(--sans); letter-spacing: -0.02em; color: var(--tinta); }
.caja-dato--azul .caja-dato__valor { color: var(--azul-enlace); }
.caja-dato__unidad { font: 600 12px var(--sans); color: var(--muted); letter-spacing: 0; }
.caja-dato--azul .caja-dato__unidad { color: var(--azul-enlace); }
.caja-dato--grande { padding: 14px; gap: 3px; }
.caja-dato--grande .caja-dato__valor { font-size: 22px; }
.lineas { display: flex; flex-direction: column; gap: 10px; }
.linea { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.linea dt { width: 70px; flex: none; font: 500 12px var(--sans); color: var(--placeholder); }
.linea dd { flex: 1; min-width: 0; font: 400 12.5px/1.55 var(--sans); color: var(--tinta); overflow-wrap: anywhere; }
.linea dd.mono { font: 600 12.5px var(--mono); }
.linea__con-nota { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.linea__con-nota .en-linea { width: auto; flex: none; }
.recorte { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; }
.ltv { background: var(--azul); border-radius: var(--r-tarjeta); padding: 20px; display: flex; flex-direction: column; gap: 5px; color: #fff; box-shadow: 0 8px 22px rgba(59, 130, 246, .32); }
.ltv__rotulo { font: 800 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.ltv__cifra { font: 800 34px var(--sans); letter-spacing: -0.02em; }
.ltv__cuenta { font: 600 12px var(--mono); color: rgba(255, 255, 255, .9); overflow-wrap: anywhere; }
.ltv__rango { white-space: nowrap; }
.ltv__nota { font: 400 11.5px/1.5 var(--sans); color: rgba(255, 255, 255, .8); }
.solo-lectura { background: var(--divisor); border: 1.5px dashed var(--borde-fuerte); border-radius: var(--r-tarjeta); padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.solo-lectura > summary, .solo-lectura__cabeza { display: flex; align-items: center; gap: 8px; }
.solo-lectura .rotulo { color: var(--tinta-2); flex: 1; }
/* Plegada (en el móvil empieza así), una fila: sin el hueco de su contenido escondido. */
.solo-lectura:not([open]) { gap: 0; padding-top: 10px; padding-bottom: 10px; }
.solo-lectura__pie { font: 400 11.5px/1.5 var(--sans); color: var(--muted); }
/* El contenido va en su propia caja: un <details> no reparte bien el hueco entre sus hijos en todos los navegadores. */
.solo-lectura__cuerpo { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.datos { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px 12px; align-items: baseline; }
.datos dt { font: 500 12.5px var(--sans); color: var(--placeholder); }
.datos dd { font: 600 13px var(--mono); color: var(--tinta); overflow-wrap: anywhere; }
.facturas { display: flex; flex-direction: column; gap: 6px; }
/* En la columna estrecha del bloque, cada factura en su fila: el estado y «Ver PDF» a la
   derecha, uno encima del otro (debajo de los datos, cada una ocupaba tres líneas). */
.solo-lectura .archivo__datos { flex-basis: 110px; }
.solo-lectura .archivo__acciones { flex-direction: column; align-items: flex-end; gap: 4px; }
.factura { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font: 600 12px var(--mono); color: var(--tinta); }
.historial { display: flex; flex-direction: column; gap: 6px; }
.historial__linea { font: 400 12px/1.5 var(--sans); color: var(--muted); overflow-wrap: anywhere; }   /* un «Por qué» que es una dirección larga */
/* La línea del último precio es el <summary> de su «Corregir» (como la fila de un
   contacto); abierto, el formulario va debajo, sobre gris. */
.historial__ultimo > summary { display: flex; align-items: baseline; gap: 10px; }
.historial__ultimo > summary .historial__linea { flex: 1; min-width: 0; }
.historial__ultimo[open] { background: var(--fondo); border-radius: var(--r-caja); padding: 10px 12px 12px; margin: 0 -12px; }
.historial__ultimo[open] > summary { margin-bottom: 10px; }
.historial__ultimo[open] .entrada { background: var(--superficie); }
.contrato { display: grid; grid-template-columns: minmax(0, 1fr) 356px; gap: 14px; align-items: start; }
/* «Cambiar el precio»: el pliegue de la recurrencia, a la medida de la tarjeta (su título
   de 15 px se partía en dos líneas junto al resumen). */
.contrato .pliegue > summary { padding: 12px 14px; min-height: 44px; }
.contrato .pliegue__titulo { font: 700 13px var(--sans); letter-spacing: 0; }
.contrato .pliegue__resumen { font-size: 11.5px; }

/* 28. Contactos -------------------------------------------------------------- */
/* Cada contacto es un <details>: su fila es el <summary> y, al tocarla (o su
   «Editar»), se abre debajo el formulario. «Llamar» y «Escribir» son enlaces
   dentro del summary: un enlace ahí se sigue y no abre ni cierra nada. */
.contactos { display: flex; flex-direction: column; gap: 12px; }
.contacto > summary { display: flex; align-items: center; gap: 12px; min-width: 0; flex-wrap: wrap; }
.contacto[open] { background: var(--fondo); border-radius: var(--r-caja); padding: 12px; margin: 0 -12px; }
.contacto[open] > summary { margin-bottom: 12px; }
.contacto__inicial { width: 34px; height: 34px; flex: none; border-radius: var(--r-pastilla); background: var(--tinte, var(--divisor)); color: var(--tinte-texto, var(--muted)); display: inline-flex; align-items: center; justify-content: center; font: 800 13px var(--sans); }
.contacto__datos { flex: 1 1 160px; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
/* El nombre y el cargo se parten donde haga falta: un correo pegado en «Nombre» es una
   sola palabra, y sin partirse deslizaba la página de lado en el móvil. */
.contacto__nombre { font: 700 13px var(--sans); color: var(--tinta); overflow-wrap: anywhere; }
.contacto__medios { font: 400 11.5px var(--mono); color: var(--muted); overflow-wrap: anywhere; }
.contacto__principal { color: var(--ambar); }
.contacto__acciones { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.contacto__nuevo > summary { display: inline-block; }
.contacto__nuevo[open] { background: var(--fondo); border-radius: var(--r-caja); padding: 12px; }
.contacto__nuevo[open] > summary { margin-bottom: 10px; }
/* Sobre el fondo gris del formulario abierto, las cajas vuelven a blanco. */
.contacto[open] .entrada, .contacto__nuevo[open] .entrada { background: var(--superficie); }

/* 29. Filtros, buscador y selección múltiple ------------------------------- */
.filtros { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filtro { position: relative; display: inline-flex; align-items: center; gap: 4px; font: 600 12.5px var(--sans); color: var(--secundaria); background: var(--superficie); border-radius: var(--r-pastilla); padding: 6px 13px; box-shadow: var(--sombra-control); white-space: nowrap; min-height: 32px; cursor: pointer; }
.filtro--activo { font-weight: 700; color: var(--azul-enlace); background: var(--azul-suave); box-shadow: none; }
/* El ✕ cierra la pastilla del filtro activo, dentro de su azul (láminas 1e y 1f):
   la pastilla le cede su borde derecho y el hueco que las separaba. */
.filtro--activo:has(+ .filtro__quitar) { border-radius: var(--r-pastilla) 0 0 var(--r-pastilla); padding-right: 5px; }
.filtro__quitar { display: inline-flex; align-items: center; align-self: stretch; margin-left: -8px; padding: 0 12px 0 3px; font: 700 12.5px var(--sans); color: var(--azul-enlace); background: var(--azul-suave); border-radius: 0 var(--r-pastilla) var(--r-pastilla) 0; }
.buscador { display: flex; align-items: center; gap: 8px; background: var(--superficie); border-radius: var(--r-control); padding: 9px 12px; width: 240px; box-shadow: var(--sombra-control); }
.buscador input { border: 0; outline: none; background: transparent; font: 400 13px var(--sans); width: 100%; min-width: 0; color: var(--tinta); }
.buscador input::placeholder { color: var(--placeholder); }
.buscador svg { flex: none; }
.totales { margin-left: auto; font: 600 11.5px var(--mono); color: var(--muted); }
.filtros__separador { width: 1px; height: 20px; margin: 0 4px; background: var(--borde); flex: none; }
.cabecera__buscar { margin: 0; }
.barra-lote { position: sticky; bottom: 16px; z-index: 20; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--tinta); color: #fff; border-radius: var(--r-caja); padding: 10px 14px; box-shadow: var(--sombra-aviso); font: 600 12.5px var(--sans); }
.barra-lote .filtro { box-shadow: none; }
/* El desplegable de «Mover a…» va dentro de su pastilla, sin caja propia. */
.barra-lote select { align-self: stretch; border: 0; background: transparent; cursor: pointer; }

/* 30. Móvil (390 px) ---------------------------------------------------------- */
@media (max-width: 1000px) { .rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } .contrato { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .lateral { display: none; }
  /* Abajo cabe entero el botón flotante (86 + 56 px): la última fila no queda debajo. */
  .principal { max-width: none; padding: 14px 16px calc(160px + env(safe-area-inset-bottom)); gap: 12px; }
  .zona { gap: 12px; }     /* el ritmo del móvil, también dentro de una zona (láminas 1c y 1f) */
  .titulo-pagina { font-size: 24px; }
  .subtitulo { font-size: 11.5px; }
  .cabecera { flex-wrap: wrap; align-items: center; }
  .cabecera > .boton { display: none; }
  .cabecera > .boton--movil { display: inline-flex; }
  .cabecera__buscar { order: 3; flex-basis: 100%; }
  .barra-inferior { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--superficie); border-top: 1px solid var(--linea); padding: 8px 6px calc(10px + env(safe-area-inset-bottom)); }
  .barra-inferior__enlace { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 44px; font: 600 10px var(--sans); color: var(--placeholder); }
  .barra-inferior__enlace:hover { color: var(--secundaria); }
  .barra-inferior__enlace--activo, .barra-inferior__enlace--activo:hover { color: var(--azul-enlace); font-weight: 800; }
  .barra-inferior__enlace--activo svg { stroke-width: 2; }
  /* El punto rojo de Ajustes, también en la pestaña «Más»: en la esquina de su icono, con un
     filo del color de la barra para que no se pegue al dibujo, y sin mover nada. */
  .barra-inferior__enlace .nav__cuenta--punto { position: absolute; top: 3px; left: calc(50% + 5px); box-shadow: 0 0 0 2px var(--superficie); }
  .fab { display: flex; position: fixed; right: 16px; bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 30; width: 56px; height: 56px; border-radius: var(--r-pastilla); border: 0; background: var(--azul); color: #fff; box-shadow: var(--sombra-fab); align-items: center; justify-content: center; font: 300 30px/1 var(--sans); }
  .tarjeta, .plegable, .cifra, .proyecto { box-shadow: var(--sombra-tarjeta-movil); }
  .cifras { gap: 8px; }
  .cifra { border-radius: var(--r-caja); padding: 10px 12px; }
  .cifra__numero { font-size: 22px; }
  .cifras--ficha .cifra__numero { font-size: 16px; }
  .cifras--ficha .cifra--azul { flex-grow: 1.2; }         /* el LTV, un poco más ancho (1m) */
  .cifra__etiqueta { font-size: 10.5px; }
  .cifra__detalle { display: none; }
  .cifra__pie { font-size: 10px; }
  .cifra__unidad { font-size: 11px; }
  .rotulo { font-size: 10.5px; }
  .fila { gap: 12px; padding: 11px 14px; min-height: 44px; }
  .fila--compacta { gap: 12px; padding: 11px 14px; }
  .fila--hija { padding-left: 30px; }
  .fila--suelta { padding: 0; min-height: 44px; }
  .casilla, .seleccion, .hueco-casilla { width: 22px; height: 22px; }
  .casilla { border-radius: 7px; font-size: 11px; }
  .casilla::before { inset: -13px; }   /* 18 px de caja interior + 26 = 44 */
  .seleccion-zona::before { content: ""; position: absolute; inset: -11px; }   /* 22 + 22 = 44 */
  .fila__cuerpo { flex-direction: column; align-items: stretch; gap: 2px; }
  /* En el móvil el contador va detrás del título, en la misma línea (lámina 1c). */
  .fila__linea { display: block; }
  .fila__linea .contador { display: inline-block; margin-left: 6px; vertical-align: 1px; }
  .fila__linea .recurrente { display: none; }
  .fila__titulo { font-size: 14px; white-space: normal; overflow-wrap: anywhere; }
  .fila__meta { display: flex; align-items: center; gap: 5px; min-width: 0; font: 400 11.5px var(--sans); color: var(--muted); }
  .fila__meta .punto { width: 7px; height: 7px; }
  /* La fecha bajo el título (Tareas, lámina 1f): gris oscuro; vencida en rojo, hecha apagada. */
  .fila__meta--fecha { display: block; font: 600 11px var(--mono); color: var(--secundaria); }   /* solo texto: sin el hueco del flex, los « · » quedan iguales */
  .fila__meta--fecha.fila__fecha--roja { color: var(--rojo-texto); }
  .fila__meta--fecha.fila__fecha--apagada { color: var(--placeholder); font-weight: 500; }
  .fila__fecha { min-width: 0; font-size: 11px; }
  .dos-columnas, .resumen { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
  .resumen__columna { display: contents; }
  .resumen__fases { order: 1; } .resumen__proximas { order: 2; } .resumen__contactos { order: 3; }
  .resumen__descripcion { order: 4; } .resumen__nota { order: 5; } .resumen__contrato { order: 6; }
  .seccion-plegable:not([open]) > summary { background: var(--superficie); border-radius: var(--r-tarjeta); box-shadow: var(--sombra-tarjeta-movil); padding: 13px 14px; min-height: 44px; align-items: center; margin-bottom: 0; }
  /* Abierta a mano, la cabecera es por donde se vuelve a plegar: 44 px, como plegada. */
  .seccion-plegable[open] > summary { min-height: 44px; align-items: center; margin-bottom: 0; }
  .seccion-plegable > summary .plegable__flecha { display: inline-block; }
  .entrada, .caja-nota__texto, .buscador input, .editable__texto, .en-linea, .fila--nueva input, .nueva-subtarea input, .nueva-en-tarjeta input, .control, .entrar .entrada { font-size: 16px; }
  /* Zonas de toque de 44 px sin engordar el dibujo (§9.0): el <select> invisible
     de una pastilla sobresale por arriba y por abajo, y las acciones de texto
     llevan un ::after que agranda su zona. */
  .selector-oculto { top: -11px; bottom: -11px; height: auto; }
  .propiedades .selector-oculto { top: -6px; bottom: -6px; }
  /* z-index 1: la zona agrandada de una acción de texto gana a la fila de al lado. */
  .accion, .aviso__accion, .aviso__cerrar, .migas a, a.migas, .filtro__quitar { position: relative; z-index: 1; }
  .contacto__acciones { flex-basis: 100%; padding-left: 46px; }
  .contacto__nuevo { margin-top: 16px; }   /* que su zona de toque no pise la del último «Llamar» */
  .accion::after, .aviso__accion::after, .aviso__cerrar::after, .filtro__quitar::after { content: ""; position: absolute; inset: -15px -6px; }
  /* Las dos «✕» (cerrar un aviso, quitar un filtro), con 44 px de ancho de verdad: su dibujo
     mide unos 25 y su zona agrandada, 37. No se agrandan hacia los lados: la de quitar un
     filtro pisaba su pastilla, y tocar el borde derecho del filtro lo quitaba. */
  .aviso__cerrar, .filtro__quitar { min-width: 44px; justify-content: center; flex: none; }
  .aviso__cerrar::after, .filtro__quitar::after { inset: -15px 0; }
  /* Una acción de texto corta («Abrir», en Ajustes, medía 42 de ancho): su zona agrandada mide
     al menos 44, centrada; las más largas, como siempre, 6 px más por cada lado. */
  .accion::after, .aviso__accion::after { inset: -15px min(-6px, calc(50% - 22px)); }
  /* Las migas son texto de 12 px (caja de 12): 16 + 12 + 16. Arriba del todo de
     la página cabe menos por encima y se compensa por debajo. */
  .migas a::after, a.migas::after { content: ""; position: absolute; inset: -16px -6px; }
  /* El nombre de un archivo recorta con elipsis (overflow: hidden), que se
     comería un ::after: se agranda con relleno y margen negativo. */
  .archivo__nombre { padding: 15px 0; margin: -15px 0; }
  .fecha { min-height: 24px; }
  .caja-nota__texto { min-height: 44px; }
  .boton { min-height: 44px; }
  .en-linea { padding: 12px 0; }
  .solo-lectura > summary { min-height: 44px; }
  .contrato .pliegue > summary .plegable__flecha { margin-left: auto; }   /* sin el resumen, al otro lado */
  .historial__ultimo > summary { min-height: 44px; align-items: center; }
  .nueva-subtarea input { padding: 12px 0 12px 28px; }
  .nueva-en-tarjeta input { padding: 12px 0; }
  .titulo-editable { padding-top: 11px; }
  .buscador { padding: 0 12px; }
  .buscador input { height: 44px; }
  .marca { min-height: 44px; }
  .pestana { padding: 13px 4px; }
  .avisos { left: 16px; right: 16px; width: auto; bottom: calc(152px + env(safe-area-inset-bottom)); }
  .panel { width: 100vw; border-radius: 0; }
  .panel__barra { padding: 10px 16px; min-height: 52px; background: var(--fondo); border-bottom-color: var(--linea); }
  /* La barra del detalle (1i): «‹ Volver» a la izquierda, en el azul de volver, y las
     acciones al otro lado del hueco; la casilla sobra junto a «Marcar hecha». */
  .panel__barra > .casilla { display: none; }
  .panel__barra > .accion:not([data-cerrar-panel]) { order: 1; }
  .panel__barra > [data-cerrar-panel] { color: var(--azul-enlace); font-size: 15px; }
  .panel__cuerpo { padding: 20px 16px calc(24px + env(safe-area-inset-bottom)); gap: 22px; }
  .propiedades { display: flex; flex-wrap: wrap; gap: 8px; }
  .propiedades__etiqueta { display: none; }
  .propiedades .pastilla, .propiedades .chip, .propiedades .fecha { font-size: 12.5px; padding: 8px 12px; min-height: 36px; border-radius: var(--r-pastilla); }
  .propiedades .chip { background: var(--fondo); }        /* el proyecto, en su pastilla gris (1i) */
  .propiedades .fecha { background: var(--fondo); }
  .propiedades .fecha--roja { background: var(--rojo-suave); }
  .propiedades .fecha--vacia { background: none; }
  .rejilla { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .proyecto { padding: 13px 14px; gap: 8px; }
  .proyecto__nombre { font-size: 13.5px; }                  /* lámina 2g */
  .proyecto .fases--fina .fases__tramo { height: 5px; }
  /* El carrusel recorta lo que sobresale: 4 px arriba y abajo dejan la zona de toque en 44. */
  .filtros { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 4px 16px; }
  a.filtro::after { content: ""; position: absolute; inset: -4px 0; }
  .filtros::-webkit-scrollbar { display: none; }
  .filtro { padding: 8px 14px; min-height: 36px; }
  .buscador { width: 100%; border-radius: 12px; min-height: 44px; }
  .totales { display: none; }
  .pestanas { gap: 8px; }
  .control, .opcion { min-height: 44px; }
  .opciones > label > span { min-height: 44px; }
  .opciones--colores > label > span { padding: 11px; }
  .cabecera .migas a::after { inset: -13px -6px -19px; }
  .dias { gap: 2px; }
  .dia span { width: 44px; height: 44px; }
  .ficha__cabeza { align-items: flex-start; flex-wrap: wrap; }
  /* «Editar» y «A la papelera», en su línea bajo el nombre (44 del avatar + 14 de hueco):
     al lado, un nombre largo se partía en una columna estrecha. */
  .ficha__cabeza > .acciones { flex-basis: 100%; padding-left: 58px; }
  .ficha__nombre { font-size: 19px; }
  .avatar--ficha, .avatar--proyecto { width: 44px; height: 44px; font-size: 20px; }
  .cajas { flex-wrap: wrap; }
  .datos { grid-template-columns: 96px minmax(0, 1fr); }
  .estado { padding: 36px 20px; min-height: 240px; }
  .entrar { box-shadow: none; background: transparent; padding: 0; }
  .entrar__logo { height: 56px; }
  .entrar .entrada { background: var(--superficie); box-shadow: 0 1px 3px rgba(15, 23, 42, .08); border-radius: 12px; padding: 13px; }
  .acciones { gap: 16px; }
  .barra-lote { bottom: calc(80px + env(safe-area-inset-bottom)); }
  /* «Mover a…»: 44 px de alto y 16 px de letra (con menos, iOS hace zoom al tocarlo). */
  .barra-lote .filtro { min-height: 44px; padding-top: 0; padding-bottom: 0; }
  .barra-lote select { font-size: 16px; max-width: 9em; }
  /* Con algo seleccionado, la barra del lote ocupa el sitio del botón flotante: se aparta. */
  body:has(.barra-lote:not([hidden])) .fab { display: none; }
}

/* ---- Calendario (fase 2, láminas 2c, 2d y 2e) ---------------------------- */
.filtros--cabecera { margin: 0; }
.calendario__barra { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.segmentado { display: inline-flex; padding: 3px; gap: 2px; background: var(--superficie); border-radius: var(--r-pastilla); box-shadow: var(--sombra-control); }
.segmentado__opcion { font: 700 13px var(--sans); color: var(--secundaria); padding: 7px 16px; border-radius: var(--r-pastilla); text-decoration: none; }
.segmentado__opcion--activa { color: #fff; background: var(--azul); }
.periodo { display: inline-flex; align-items: center; gap: 4px; }
.periodo__titulo { font: 800 14px var(--mono); color: var(--tinta); min-width: 12ch; text-align: center; }
.periodo__flecha { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-pastilla); color: var(--muted); font: 700 18px var(--sans); text-decoration: none; }
.periodo__flecha:hover { background: var(--divisor); color: var(--tinta); }

.franja-vencidas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; background: var(--rojo-suave); border-radius: var(--r-caja); padding: 12px 14px; margin-bottom: 16px; }
.franja-vencidas__lista { display: flex; flex-wrap: wrap; gap: 8px; min-height: 30px; }
.franja-vencidas__pie { width: 100%; margin: 0; font: 500 12px var(--mono); color: var(--rojo-texto); opacity: .8; }
.franja-vencidas .chip-tarea { background: var(--superficie); box-shadow: var(--sombra-control); color: var(--tinta); }

.rejilla-calendario { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.rejilla-calendario__dia-semana { font: 800 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--placeholder); text-align: center; padding-bottom: 2px; }
.celda { display: flex; flex-direction: column; gap: 6px; min-height: 94px; min-width: 0; padding: 8px; background: var(--superficie); border-radius: 12px; box-shadow: var(--sombra-control); }
.rejilla-calendario--semana .celda { min-height: 340px; }
.celda--finde { background: transparent; box-shadow: none; }
.celda--fuera { background: #FBFCFD; box-shadow: none; }
.celda--fuera .celda__numero { color: var(--borde-fuerte); }
.celda--hoy { box-shadow: 0 0 0 2px var(--azul); }
.celda__numero { font: 700 12px var(--mono); color: var(--secundaria); }
.celda__numero--rojo { color: var(--rojo-texto); }
.celda--hoy .celda__numero { color: var(--azul-enlace); }
.celda__hoy { font: 800 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--azul-enlace); }
.celda__tareas { display: flex; flex-direction: column; gap: 4px; flex: 1; min-height: 24px; }
.chip-tarea { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 4px 8px; border-radius: 7px; background: var(--divisor); color: var(--tinta-2); font: 500 12px var(--sans); text-decoration: none; cursor: pointer; }
.chip-tarea:hover { background: var(--borde); }
.chip-tarea--vencida { background: var(--rojo-suave); color: var(--rojo-texto); }
.chip-tarea__titulo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-tarea__madre, .chip-tarea__repite { color: var(--muted); flex: none; }
.chip-tarea__dias { flex: none; font: 600 11px var(--mono); color: var(--rojo-texto); }
.chip-tarea.sortable-ghost { opacity: .4; }

.selector-dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; padding: 10px 8px; background: var(--superficie); border-radius: var(--r-tarjeta); box-shadow: var(--sombra-tarjeta-movil); }
.selector-dias__letra { text-align: center; font: 800 10.5px var(--mono); color: var(--placeholder); padding-bottom: 4px; }
.dia-boton { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 44px; border-radius: 12px; text-decoration: none; }
.dia-boton__numero { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r-pastilla); font: 600 14px var(--sans); color: var(--tinta-2); }
.dia-boton--fuera .dia-boton__numero { color: var(--borde-fuerte); }
.dia-boton--rojo .dia-boton__numero { color: var(--rojo-texto); }
.dia-boton--hoy .dia-boton__numero { color: var(--azul-enlace); font-weight: 800; }
.dia-boton--elegido .dia-boton__numero { background: var(--azul); color: #fff; }
.puntos { display: flex; gap: 3px; height: 5px; }
.puntos .punto { width: 5px; height: 5px; }
.dia-lista { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.dia-lista__vacia { margin: 0; font: 500 14px var(--sans); color: var(--muted); }
.recurrente-marca { color: var(--muted); }
@media (max-width: 760px) {
  .calendario__barra--movil { justify-content: space-between; gap: 8px; }
  .calendario__barra--movil .segmentado__opcion { padding: 11px 14px; }
  .calendario__barra--movil .periodo__flecha { width: 44px; height: 44px; }
  .calendario__barra--movil .periodo__titulo { min-width: 0; font-size: 13px; }
  .franja-vencidas { display: block; padding: 12px; }
  .franja-vencidas .rotulo { margin-bottom: 8px; }
}
.franja-vencidas--plegable { display: block; padding: 0; margin: 12px 0 0; }
.franja-vencidas--plegable > summary { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 14px; list-style: none; cursor: pointer; }
.franja-vencidas--plegable > summary::-webkit-details-marker { display: none; }
.franja-vencidas--plegable > summary .rotulo { margin-bottom: 0; }   /* en la línea de los atrasos */
.franja-vencidas__atrasos { margin-left: auto; font: 600 12px var(--mono); color: var(--rojo-texto); }
.franja-vencidas--plegable[open] .plegable__flecha { transform: rotate(90deg); }
.franja-vencidas--plegable > .lista-filas { margin: 0 8px 8px; }
@media (max-width: 760px) {
  .calendario__barra--movil .segmentado__opcion { display: inline-flex; align-items: center; min-height: 44px; }
  .selector-dias { margin-top: 12px; }
}

/* ---- Papelera (fase 2, lámina 2l) ---------------------------------------- */
.papelera__cabeza, .papelera__fila { display: grid; grid-template-columns: 80px minmax(0, 2fr) minmax(0, 1fr) minmax(150px, .8fr) 80px; align-items: center; gap: 12px; padding: 12px 16px; }
/* La cabecera de la tabla, más baja y sobre el fondo (lámina 2l). */
.papelera__cabeza { padding-top: 9px; padding-bottom: 9px; background: var(--fondo); font: 800 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--placeholder); border-bottom: 1px solid var(--divisor); }
.papelera__fila + .papelera__fila { border-top: 1px solid var(--divisor); }
.papelera__fila--pronto { background: var(--ambar-suave); }
.papelera__nombre { font: 600 13.5px var(--sans); color: var(--tinta); min-width: 0; overflow-wrap: anywhere; }
.papelera__peso { font: 500 12px var(--mono); color: var(--placeholder); }
.papelera__origen { display: flex; align-items: center; gap: 7px; font: 500 13px var(--sans); color: var(--secundaria); min-width: 0; }
.papelera__origen > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.papelera__cuando { display: flex; flex-direction: column; gap: 2px; font: 500 12.5px var(--mono); color: var(--muted); }
/* «Restaurar» contra el borde derecho: el botón va dentro de su celda, que es lo que la rejilla coloca. */
.papelera__accion { justify-self: end; }
.papelera__pie { margin: 0 2px; font: 500 12px var(--mono); color: var(--placeholder); }
.tipo-borrado { display: inline-block; font: 700 11.5px var(--sans); padding: 3px 9px; border-radius: var(--r-pastilla); background: var(--divisor); color: var(--secundaria); }
.tipo-borrado--tarea { background: var(--azul-suave); color: var(--azul-enlace); }
.tipo-borrado--archivo { background: var(--ambar-suave); color: var(--ambar-texto); }
.plazo { font: 600 11.5px var(--mono); }
.plazo--pronto { color: var(--ambar-texto); }
/* El motivo es una frase, no un dato: en la letra de texto, que en una columna estrecha parte en menos líneas. */
.plazo--retenido { font: 500 12px/1.4 var(--sans); color: var(--muted); white-space: normal; }
@media (max-width: 760px) {
  .papelera__fila { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tipo boton" "nombre boton" "origen boton" "cuando boton"; gap: 4px 12px; padding: 12px 14px; }
  .papelera__fila > :nth-child(1) { grid-area: tipo; }
  .papelera__fila > :nth-child(2) { grid-area: nombre; }
  .papelera__fila > :nth-child(3) { grid-area: origen; }
  .papelera__fila > :nth-child(4) { grid-area: cuando; }
  .papelera__fila > :nth-child(5) { grid-area: boton; align-self: center; }
  .papelera__origen--nada { display: none; }      /* sin «de dónde», la raya sobra en su propia línea */
  .papelera__restaurar { min-height: 44px; padding: 0 12px; }
}

/* ---- Ajustes (fase 2, lámina 2k) ----------------------------------------- */
.ajustes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.ajustes__columna { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ajustes .tarjeta--bloque { padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
/* Una fila cuyo valor no cabe junto a su etiqueta (una pastilla larga) lo pasa debajo, a la
   derecha, y la pastilla se parte: ni se parte la etiqueta ni hay scroll de lado a 390 px. */
.ajuste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; }
.ajuste + .ajuste { border-top: 1px solid var(--divisor); }
.ajuste__etiqueta { font: 700 14px var(--sans); color: var(--tinta); }
.ajuste__valor { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; margin-left: auto; text-align: right; }
.ajuste--plegable > summary { display: flex; align-items: center; justify-content: space-between; min-height: 40px; list-style: none; cursor: pointer; }
.ajuste--plegable > summary::-webkit-details-marker { display: none; }
.ajuste--plegable { display: block; }
.clave { display: flex; flex-direction: column; gap: 10px; padding: 8px 0 4px; }
.clave__nota { margin: 0; font-size: 12.5px; }
.clave .boton { align-self: flex-start; }
@media (max-width: 760px) {
  .ajustes { grid-template-columns: minmax(0, 1fr); }
  .ajuste--plegable > summary { min-height: 44px; }
  .ajustes .accion { display: inline-flex; align-items: center; min-height: 44px; }
  /* Menos el enlace que va dentro de una frase («3 se quedan», a la Papelera): como caja de 44
     abría un hueco en su línea. Es texto de la frase, de 12 de alto, y su zona de toque la da
     el ::after, como el de las notas del Motor: 16 + 12 + 16. */
  .ajustes .ajuste__nota .accion { display: inline; min-height: 0; }
  .ajustes .ajuste__nota .accion::after { inset: -16px min(-6px, calc(50% - 22px)); }
}

/* Ajustes (Task 7): las conexiones, lo que ocupan los archivos y los respaldos. Las notas
   dicen tal cual lo que viene de fuera (rutas enteras, sin espacios donde partir): se
   parten donde haga falta, como .sonda__texto y .aviso__texto. */
.ajuste__dato { font: 500 11.5px var(--mono); color: var(--muted); }
.ajuste__nota { margin: 6px 0 0; font: 400 12px/1.5 var(--sans); color: var(--muted); overflow-wrap: anywhere; }
.ajuste__nota--fila { flex-basis: 100%; margin: -6px 0 8px; }     /* el porqué de su fila, debajo */
/* Con su nota, la fila ya no cabe en sus 40 px y dejaría de centrarse: arriba, el aire que
   una fila de una línea tiene por centrarse en ellos. */
.ajuste--con-nota { padding-top: 9px; }
.ajuste__nota code { font: 500 11.5px var(--mono); color: var(--tinta-2); overflow-wrap: anywhere; }
.ajuste__nota--aviso { color: var(--ambar-texto); }
.ajuste__nota--error { color: var(--rojo-texto); font-weight: 500; }
.conexion { display: inline-flex; align-items: center; gap: 5px; font: 700 11.5px/1.3 var(--sans); padding: 3px 10px; border-radius: var(--r-caja); text-align: left; }
.conexion .punto { width: 6px; height: 6px; }
.conexion--bien { background: var(--verde-suave); color: var(--verde-texto); }
.conexion--sin-dato { background: var(--divisor); color: var(--muted); border: 1.5px dashed var(--borde-fuerte); padding: 1.5px 8.5px; }
.espacio { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; }
.espacio__cifra { font: 800 22px var(--sans); letter-spacing: -.02em; color: var(--tinta); }
.espacio__de { font: 500 12px var(--mono); color: var(--placeholder); }
.espacio__barra { height: 8px; margin: 6px 0 2px; border-radius: var(--r-pastilla); background: var(--borde); overflow: hidden; }
.espacio__barra > span { display: block; width: var(--lleno, 0%); height: 100%; background: var(--azul); border-radius: var(--r-pastilla); }
.espacio__barra--aviso > span { background: var(--ambar); }
.respaldo { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; font: 600 12.5px var(--mono); color: var(--tinta); }
.respaldo .punto { width: 7px; height: 7px; }
.respaldo__tipo { font: 500 11px var(--mono); color: var(--placeholder); }
.restaurar { padding: 0 0 8px; }
.comando { display: block; margin-top: 6px; padding: 8px 10px; border-radius: var(--r-mini); background: var(--divisor); font: 500 12px/1.5 var(--mono); color: var(--tinta-2); overflow-wrap: anywhere; }

/* ---- Motor (fase 2, lámina 2j) -------------------------------------------- */
/* Entre el título, las secciones, la franja y las tarjetas, el ritmo de .principal (18 px;
   12 en el móvil): con márgenes propios encima, la franja quedaba suelta. */
.motor__aviso { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: var(--r-caja); background: var(--azul-suave); font: 500 12.5px/1.5 var(--sans); color: var(--tinta); }
.motor { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.motor__tarjeta { gap: 10px; }                  /* el relleno de 18 px es el de .tarjeta--bloque */
.motor__titulo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font: 800 15px var(--sans); letter-spacing: -0.01em; color: var(--tinta); }
.motor__titulo a { color: inherit; }
.motor__titulo a:hover { color: var(--azul-enlace); }
.motor__dato { flex: none; font: 500 11px var(--mono); color: var(--placeholder); }
.motor__dato--aviso { font-weight: 700; color: var(--ambar-texto); }
.motor__texto { font: 400 12.5px/1.5 var(--sans); color: var(--muted); }
.motor__clientes { display: flex; flex-wrap: wrap; gap: 7px; }
/* Los chips de la lámina (los de SEO): en tinta y un poco más grandes que los de las
   filas de tareas; un nombre largo se corta con «…» dentro de su tarjeta. */
.motor__cliente { max-width: 100%; gap: 7px; padding: 5px 12px; font: 600 12px var(--sans); color: var(--tinta); }
a.motor__cliente:hover { color: var(--azul-enlace); background: var(--azul-suave); }
/* Fuera de una tarjeta (los «Clientes» de Optimización y SEO) el chip está sobre el fondo de
   la página, que es su mismo gris, y se leía como un nombre suelto: ahí va en blanco y con
   sombra, como las pastillas de filtro que están sobre el fondo. */
.seccion > .motor__clientes > .motor__cliente { background: var(--superficie); box-shadow: var(--sombra-control); }
.seccion > .motor__clientes > a.motor__cliente:hover { background: var(--azul-suave); box-shadow: none; }
/* Los datos de una fila (la fecha del CSV, el sector y el dominio): a su lado en el
   escritorio y debajo en el móvil. La .fila__meta de la casa solo sale en el móvil. */
.motor__meta { font: 500 11.5px var(--mono); color: var(--placeholder); overflow-wrap: anywhere; }
/* Una fila con su botón (Campañas): si el nombre no cabe al lado del botón, el botón baja,
   a la derecha, como el valor de una fila de Ajustes; el nombre no se corta. */
.motor__fila { flex-wrap: wrap; }
.motor__fila > .fila__cuerpo { flex: 1 1 240px; }
.motor__fila > .boton { margin-left: auto; }
.motor__encargo { font: 500 13px/1.5 var(--mono); }
.motor__formulario .formulario__fila { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
@media (max-width: 760px) {
  .motor { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  a.motor__cliente { min-height: 44px; }
  .motor__fila .motor__cliente { align-self: flex-start; }    /* la columna del móvil no lo estira */
  .motor__secciones .filtro { min-height: 44px; }
  /* El título de una tarjeta de la portada lleva a su pantalla: 44 de alto y, «SEO», que medía
     32 de ancho, también 44 (m27). Sin encogerse: con un mínimo puesto, un flex item encoge por
     debajo de su texto. */
  .motor__titulo a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; flex: none; }
  /* Un enlace de texto suelto mide 42 px con el ::after de la casa: 44, como los botones. */
  .motor__volver .accion, .motor__formulario .accion { display: inline-flex; align-items: center; min-height: 44px; }
  /* Como toda .entrada del móvil (con menos, iOS hace zoom al tocarla): la regla del
     encargo va detrás de la de la casa y la pisaba con sus 13 px. */
  .motor__encargo { font-size: 16px; }
}

/* ---- Motor: Conocimiento (lámina 2j: su tarjeta; la pantalla, el sistema) ------------ */
/* El formulario en una fila —qué es, el aprendizaje, que se estira, y «Apuntar»— con la
   ayuda debajo; en el móvil, apilado. Sin márgenes propios: entre él, las pastillas y los
   ficheros va el ritmo de .principal, como en el resto del Motor. */
.motor__apunte { display: grid; grid-template-columns: 180px minmax(0, 1fr) auto; align-items: end; gap: 12px; padding: 16px 18px; }
.motor__apunte > .boton { min-height: 44px; }        /* a la altura de las cajas de su fila */
.motor__apunte-ayuda { grid-column: 1 / -1; margin: 0; }
/* Cada fichero, el plegable blanco de la casa (.plegable) a 48 px: su nombre en mono y su
   tamaño a la derecha; abierto, su texto tal cual, con sus saltos de línea. El nombre y el
   texto se parten donde haga falta: el plegable recorta lo que se sale, y un nombre sin
   guiones o una línea sin espacios se perdían a 390 px. */
.motor__ficheros { gap: 10px; }
.motor__fichero > summary { gap: 10px; min-height: 48px; padding: 12px 18px; }
.motor__fichero-nombre { flex: 1; min-width: 0; font: 700 14px var(--mono); color: var(--tinta); overflow-wrap: anywhere; }
.motor__fichero .motor__meta { flex: none; }
.motor__fichero-texto { padding: 14px 18px 16px; font: 400 13.5px/1.6 var(--sans); color: var(--tinta-2); white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .motor__apunte { grid-template-columns: minmax(0, 1fr); }
  .motor__ambitos .filtro { min-height: 44px; }      /* como las secciones del Motor */
}

/* ---- Motor: Optimización (lámina 2j: su tarjeta; la pantalla, el sistema) ------------ */
/* Cada sección (las revisiones, el último análisis) lleva su rótulo pegado a lo suyo, como
   .seccion; entre ellas, el ritmo de .principal. Sin márgenes propios, como el resto del
   Motor. */
.motor__seccion { gap: 8px; }
/* Los cuatro informes en una rejilla de dos que se reparte el ancho (a cuatro no cabe el
   nombre del fichero elegido), y debajo «Analizar» con su ayuda; en el móvil, uno debajo
   de otro. */
.motor__subida { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 12px; padding: 16px 18px; }
.motor__subida > .error-formulario, .motor__subida > .acciones { grid-column: 1 / -1; }
.motor__subida > .acciones { gap: 12px; }
.motor__subida > .acciones .campo__ayuda { flex: 1 1 240px; }
.motor__subida .entrada { padding: 7px 8px; cursor: pointer; }
.motor__subida .entrada::file-selector-button { margin-right: 10px; padding: 6px 12px; border: 0; border-radius: var(--r-mini); background: var(--superficie); box-shadow: var(--sombra-boton-claro); font: 700 12px var(--sans); color: var(--tinta-2); cursor: pointer; }
.motor__informe { gap: 10px; }
/* Cada hallazgo con su punto, del color de lo que dice (verde lo que va bien, ámbar lo que
   avisa, rojo lo que falla), como los valores de la tarjeta de la lámina; y el texto de lo
   que avisa o falla, de su color. */
.motor__hallazgos { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font: 500 13.5px/1.5 var(--sans); color: var(--tinta-2); overflow-wrap: anywhere; }
.hallazgo { position: relative; padding-left: 16px; }
.hallazgo::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: var(--r-pastilla); background: var(--placeholder); }
.hallazgo--ok::before { background: var(--verde); }
.hallazgo--warn { color: var(--ambar-texto); }
.hallazgo--warn::before { background: var(--ambar); }
.hallazgo--fail { color: var(--rojo-texto); }
.hallazgo--fail::before { background: var(--rojo); }
.motor__propuesta p { margin: 0 0 6px; font: 500 13.5px/1.5 var(--sans); color: var(--tinta-2); overflow-wrap: anywhere; }
.motor__terminos { display: flex; flex-wrap: wrap; gap: 6px; }
/* Una negativa se lee entera (es lo que irá a la KB): el chip se parte en vez de cortarla. */
.motor__termino { max-width: 100%; white-space: normal; overflow-wrap: anywhere; font: 600 12px var(--sans); color: var(--tinta); }
.motor__acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.motor__acciones > .boton { white-space: normal; text-align: center; }
.motor__revision > form { flex: none; }
@media (max-width: 760px) {
  .motor__subida { grid-template-columns: minmax(0, 1fr); }
  .motor__acciones > .boton { flex: 1 1 100%; }
  /* El enlace de una nota (el perfil sin lanzamiento) es texto de 12 px: con el ::after de
     la casa medía 42; como las migas, 16 + 12 + 16. */
  .motor__seccion .ajuste__nota .accion::after { inset: -16px -6px; }
}

/* ---- Motor: SEO (lámina 2j: su tarjeta; la pantalla, el sistema de Optimización) -------- */
/* Las dos fuentes lado a lado: el export, que lleva dos ficheros, más ancho, y Search Console
   por la API al lado; en el móvil, una debajo de otra. Sin márgenes propios: entre ellas y el
   análisis, el ritmo de .principal, como en el resto del Motor. */
.motor__fuentes { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; align-items: stretch; }
.motor__gsc { padding: 16px 18px; gap: 8px; align-items: flex-start; }
.motor__gsc > .ajuste__nota { margin: 0; }
.motor__gsc > .error-formulario { align-self: stretch; }
@media (max-width: 760px) {
  .motor__fuentes { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  /* El enlace de su nota («su perfil») es texto de 12 px: como el de Optimización, 16 + 12 + 16. */
  .motor__gsc .ajuste__nota .accion::after { inset: -16px -6px; }
}
/* Ajustes: una fila cuyo valor baja debajo de su etiqueta (la de Search Console, con las
   credenciales puestas) no cabe en sus 40 px y dejaba de centrarse: arriba y abajo, el aire que
   una de una línea tiene por centrarse en ellos. Con su nota, abajo ya lo da la nota. */
.ajuste--larga { padding-block: 9px; }
.ajuste--larga.ajuste--con-nota { padding-bottom: 0; }

/* ---- Oportunidades (fase 2, lámina 2i) -------------------------------------- */
.proyecto--sin-ficha { box-shadow: none; border: 1.5px dashed var(--borde-fuerte); background: transparent; }
/* No es un enlace (lo es su botón): al pasar por encima no se levanta como las que se abren. */
.proyecto--sin-ficha:hover { box-shadow: none; }
.avatar--sin-ficha { background: var(--divisor); color: var(--muted); }
.oportunidad__ficha { align-self: flex-start; }
/* Por qué una carpeta de agency-os no vale como expediente en Hippo, donde iría el botón. */
.oportunidad__no-vale { margin: 0; font: 500 12px/1.5 var(--sans); color: var(--ambar-texto); overflow-wrap: anywhere; }
/* Las cerradas, plegadas al pie: la flecha también en el escritorio (una
   .seccion-plegable la esconde ahí, porque las de Hoy empiezan abiertas), o no se sabría
   que se abre. */
.oportunidades__cerradas > summary .plegable__flecha { display: inline-block; }
/* Bajo su cabecera, adónde va la que firma: gris, como el pie, y alineada con el rótulo. */
.oportunidades__nota { margin: 0 4px 10px; font: 500 12px/1.5 var(--mono); color: var(--placeholder); overflow-wrap: anywhere; }
/* Debajo de las rejillas, con el ritmo de la zona (18 px; 14 en la lámina): con un margen
   propio, además, quedaba a 30. */
.oportunidades__pie { margin: 0 2px; font: 500 12px var(--mono); color: var(--placeholder); }
/* En Proyectos y Clientes, debajo de la rejilla: lo buscado que es una oportunidad está en su
   pantalla. Como el pie de Oportunidades. */
.proyectos__pista { margin: 0 2px; font: 500 12px var(--mono); color: var(--placeholder); overflow-wrap: anywhere; }
/* Los expedientes que no se leen (pueden ser oportunidades): en ámbar, sobre el pie. */
.oportunidades__aviso { margin: 0 2px; font: 500 12.5px/1.5 var(--sans); color: var(--ambar-texto); overflow-wrap: anywhere; }
@media (max-width: 760px) { .oportunidad__ficha { align-self: stretch; justify-content: center; min-height: 44px; } }