/* ─────────────────────────────────────────────────────────────────────────────
   estilo.css — Panel de Andasolu

   La marca de la web v2 en su versión clara (arena, noche, verde pino y la
   estrella del azulejo) bajada a herramienta de trabajo: se mira varias veces
   al día, muchas en el móvil, y manda la legibilidad de las cifras.

   Las tipografías son las de la web (Plus Jakarta Sans y Urbanist), servidas
   desde fuentes/ y no desde Google: la CSP no deja cargar nada de fuera.

   La maquetación viene del panel de Andriu Chef (barra de abajo en el móvil,
   tarjetas de decisión, tablas que se vuelven fichas), así que las dos
   herramientas se manejan igual.
   ───────────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fuentes/PlusJakartaSans.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Urbanist";
  src: url("../fuentes/Urbanist.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --fondo:       #ece5d5;
  --fondo-hondo: #e2d9c4;
  --papel:       #faf7f0;
  --blanco:      #ffffff;
  --tinta:       #11100d;
  --tinta-suave: #5c5546;
  --linea:       #d6ccb5;

  --verde:       #245a45;   /* pino de los montes de Málaga: acción principal */
  --verde-2:     #1b4938;
  --verde-claro: #dde8df;
  --oro:         #9c7628;
  --oro-claro:   #c99a3f;
  --rojo:        #9a3b22;
  --ambar:       #8a6414;

  --sombra: 0 1px 2px rgba(17, 16, 13, .06), 0 8px 24px rgba(17, 16, 13, .06);
  --radio:  10px;

  --f-texto: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-suave: "Urbanist", "Plus Jakarta Sans", system-ui, sans-serif;
  /* Cifras tabulares: en una columna de importes, los dígitos tienen que
     alinearse o comparar de un vistazo se vuelve imposible. */
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
}

/* Siempre en claro: es lo mismo que sale impreso en un presupuesto o una
   factura, y así no hay sorpresas al pasarlo a PDF. */
:root { color-scheme: light; }

* { box-sizing: border-box; }

/* Cualquier regla con display pisaría el atributo hidden. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--f-texto);
  font-size: 15px;
  line-height: 1.5;
  color: var(--tinta);
  background: var(--fondo);
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
h1 { font-size: 1.55rem; margin: 0 0 .75rem; }
h2 { font-size: 1.2rem; margin: 0 0 .5rem; }
h3 { font-size: 1rem; margin: 0 0 .35rem; }

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

/* [ ETIQUETA ] como en la web. */
.rotulo-marca {
  font-family: var(--f-suave);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--verde);
}
.rotulo-marca::before { content: "[ "; }
.rotulo-marca::after  { content: " ]"; }

/* El logotipo: ANDAS✦LU, con la estrella haciendo de «O». */
.marca {
  display: inline-flex;
  align-items: center;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: .02em;
  color: var(--tinta);
  text-decoration: none;
  line-height: 1;
}
.marca img { width: .9em; height: .9em; margin: 0 .03em; }
.marca small {
  margin-left: .6em;
  font-family: var(--f-suave);
  font-weight: 600;
  font-size: .72em;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.marca--grande { font-size: 2rem; }


/* ── Acceso ───────────────────────────────────────────────────────────────── */

.acceso {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  background: radial-gradient(circle at 30% 0%, var(--papel) 0, var(--fondo) 55%, var(--fondo-hondo) 100%);
}
.acceso__caja {
  width: 100%;
  max-width: 390px;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 16px;
  box-shadow: var(--sombra);
  padding: 34px 28px;
}
.acceso__caja > .marca { display: flex; justify-content: center; margin-bottom: 6px; }
.acceso__caja > .rotulo-marca { display: block; text-align: center; margin-bottom: 22px; }
.acceso__form { display: grid; gap: 14px; }
.acceso__form h1 { text-align: center; font-size: 1.3rem; }

label { display: grid; gap: 5px; font-size: .82rem; color: var(--tinta-suave); }
label.check { display: flex; align-items: center; gap: .5rem; color: var(--tinta); }

input, select, textarea {
  font: inherit;
  color: var(--tinta);
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 8px;
  padding: 9px 11px;
  width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid rgba(36, 90, 69, .35);
  outline-offset: 1px;
  border-color: var(--verde);
}
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--verde); }
textarea { min-height: 70px; resize: vertical; }

.codigo { font-family: var(--mono); font-size: 1.5rem; letter-spacing: .5em; text-align: center; }

.apunte { font-size: .8rem; color: var(--tinta-suave); margin: 0; }
.error  { color: var(--rojo); font-size: .84rem; margin: 0; min-height: 1em; }
.error:empty { min-height: 0; }


/* ── Botones ──────────────────────────────────────────────────────────────── */

.btn {
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 8px;
  border: 1px solid var(--linea);
  background: var(--papel);
  color: var(--tinta);
  cursor: pointer;
}
.btn:hover { border-color: var(--verde); }
.btn:disabled { opacity: .5; cursor: default; }
.btn--principal { background: var(--verde); border-color: var(--verde); color: #fff; }
.btn--principal:hover { background: var(--verde-2); border-color: var(--verde-2); }
.btn--plano { background: none; border-color: transparent; color: var(--tinta-suave); }
.btn--plano:hover { color: var(--tinta); border-color: var(--linea); }
.btn--peligro { color: var(--rojo); }
.btn--peligro:hover { border-color: var(--rojo); }
.btn--pequeno { padding: 5px 10px; font-size: .78rem; }
.btn--wa { color: #1f7a4d; border-color: currentColor; }
.btn--wa:hover { background: #1f7a4d; color: #fff; }
a.btn { text-decoration: none; display: inline-block; }

.btn--grande {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 11px 20px;
  font-size: .95rem;
  border-radius: 12px;
}
.btn--si { background: var(--verde); border-color: var(--verde); color: #fff; }
.btn--si:hover { background: var(--verde-2); }
.btn--no { background: var(--papel); color: var(--rojo); border-color: #e3c6bc; }
.btn--no:hover { border-color: var(--rojo); }

.botones-grandes { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-top: 14px; }
.botones-grandes .btn--grande { width: 100%; }

.icono {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ── Cabecera y menú ──────────────────────────────────────────────────────── */

.cabecera {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 18px;
  background: rgba(250, 247, 240, .96);
  border-bottom: 1px solid var(--linea);
  position: sticky;
  top: 0;
  z-index: 10;
  flex-wrap: wrap;
}
.menu { display: flex; gap: 2px; flex: 1; flex-wrap: wrap; }
.menu__item {
  font: inherit;
  font-size: .86rem;
  font-weight: 600;
  padding: 7px 11px;
  border: 0;
  background: none;
  color: var(--tinta-suave);
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  position: relative;
}
.menu__item .icono { width: 18px; height: 18px; }
.menu__item:hover { background: var(--fondo); color: var(--tinta); }
.menu__item[aria-current="true"] { background: var(--verde-claro); color: var(--verde); }
.menu__item--mas { display: none; }
.menu__aviso {
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--rojo);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  line-height: 19px;
  text-align: center;
}
.cabecera__fin { display: flex; align-items: center; gap: 10px; }
.quien { font-size: .8rem; color: var(--tinta-suave); }

.contenido { padding: 22px 18px 110px; max-width: 1180px; margin: 0 auto; }

/* Nuevo presupuesto, siempre a mano. */
.boton-nuevo {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px 14px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--verde);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(36, 90, 69, .32);
}
.boton-nuevo:hover { background: var(--verde-2); }
.boton-nuevo .icono { width: 22px; height: 22px; stroke-width: 2.2; }


/* ── Bloques comunes ──────────────────────────────────────────────────────── */

.tarjeta {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 16px;
}
.tarjeta > h2 { font-size: 1.02rem; }
.rejilla { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.rejilla--form { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
#modal-cuerpo form > label { margin-top: 14px; }

.titulo-vista { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.titulo-vista h1 { margin: 0; }
.titulo-vista .acciones { margin-top: 0; }
.volver { font: inherit; font-size: .82rem; color: var(--tinta-suave); cursor: pointer; background: none; border: 0; padding: 0; margin-bottom: 6px; }
.volver:hover { color: var(--verde); }

.acciones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.barra { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.barra select, .barra input { width: auto; }
.barra label { display: flex; align-items: center; gap: 6px; }

.dos-col { display: grid; gap: 18px; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
.dos-col > * { min-width: 0; }

.datos { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; font-size: .88rem; }
.datos dt { color: var(--tinta-suave); font-size: .78rem; padding-top: 2px; }
.datos dd { margin: 0; word-break: break-word; white-space: pre-wrap; }

.suave { color: var(--tinta-suave); font-size: .83rem; }
.fuerte { font-weight: 700; }
.verde { color: var(--verde); }
.rojo  { color: var(--rojo); }
.ambar { color: var(--ambar); }
.centrado { text-align: center; }
.pre { white-space: pre-wrap; }

.bloque { margin-bottom: 28px; }
.bloque__cabeza { margin-bottom: 10px; }
.bloque__cabeza h2 { margin: 0; font-size: 1.15rem; }
.bloque__cabeza p { margin: 2px 0 0; color: var(--tinta-suave); font-size: .87rem; }

.vacio { text-align: center; color: var(--tinta-suave); padding: 30px 16px; font-size: .9rem; }
.vacio-caja {
  text-align: center;
  padding: 22px 16px;
  background: var(--papel);
  border: 1px dashed var(--linea);
  border-radius: 14px;
}
.vacio-caja img { width: 42px; height: 42px; opacity: .55; margin-bottom: 6px; }
.vacio-caja p { margin: 2px 0; }

.nota {
  border-left: 3px solid var(--verde);
  background: var(--papel);
  padding: 10px 14px;
  border-radius: 0 8px 8px 0;
  font-size: .85rem;
  margin: 0 0 14px;
}
.nota--aviso { border-left-color: var(--ambar); background: #f6eedb; }
.nota--mal   { border-left-color: var(--rojo); background: #f6e5df; }


/* ── Cifras ───────────────────────────────────────────────────────────────── */

.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; margin-bottom: 18px; }
.cifra { display: grid; gap: 2px; background: var(--papel); border: 1px solid var(--linea); border-radius: 14px; padding: 12px 14px; }
.cifra__valor { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15; letter-spacing: -.01em; }
.cifra__rotulo { font-family: var(--f-suave); font-size: .74rem; font-weight: 600; color: var(--tinta-suave); text-transform: uppercase; letter-spacing: .07em; }
.cifra__detalle { font-size: .75rem; color: var(--tinta-suave); }
.cifra--verde .cifra__valor { color: var(--verde); }
.cifra--rojo  .cifra__valor { color: var(--rojo); }
.cifra--ambar .cifra__valor { color: var(--ambar); }


/* ── Tablas ───────────────────────────────────────────────────────────────── */

.tabla-caja { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .87rem; }
th, td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--linea); vertical-align: top; }
th { font-family: var(--f-suave); font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--tinta-suave); font-weight: 700; white-space: nowrap; }
tbody tr:hover { background: rgba(36, 90, 69, .04); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.pulsable { cursor: pointer; }


/* ── Etiquetas ────────────────────────────────────────────────────────────── */

.etiqueta {
  display: inline-block;
  font-size: .72rem;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 20px;
  border: 1px solid var(--linea);
  background: var(--fondo);
  color: var(--tinta-suave);
  white-space: nowrap;
}
.etiqueta--verde { color: var(--verde); border-color: currentColor; background: var(--verde-claro); }
.etiqueta--rojo  { color: var(--rojo);  border-color: currentColor; background: none; }
.etiqueta--ambar { color: var(--ambar); border-color: currentColor; background: #f6eedb; }
.etiqueta--azul  { color: #2d5a87; border-color: currentColor; background: #e3ecf4; }


/* ── Avisos y modal ───────────────────────────────────────────────────────── */

.aviso {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  background: var(--tinta);
  color: var(--papel);
  padding: 11px 18px;
  border-radius: 10px;
  box-shadow: var(--sombra);
  font-size: .87rem;
  z-index: 50;
  max-width: calc(100vw - 32px);
}
.aviso--mal { background: var(--rojo); color: #fff; }

.modal {
  border: 1px solid var(--linea);
  border-radius: 16px;
  padding: 0;
  max-width: 680px;
  width: calc(100vw - 32px);
  background: var(--papel);
  color: var(--tinta);
  box-shadow: var(--sombra);
}
.modal--ancho { max-width: 900px; }
.modal::backdrop { background: rgba(17, 16, 13, .45); }
#modal-cuerpo { padding: 22px; }
#modal-cuerpo h2 { margin-bottom: 12px; }
textarea.mensaje { min-height: 200px; font-size: .9rem; }


/* ── Pestañas ─────────────────────────────────────────────────────────────── */

.pestanas { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--linea); flex-wrap: wrap; }
.pestanas button {
  font: inherit; font-size: .87rem; font-weight: 600; padding: 8px 13px; border: 0; background: none;
  color: var(--tinta-suave); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.pestanas button[aria-current="true"] { color: var(--tinta); border-bottom-color: var(--verde); }
.pestanas .cuenta { font-weight: 500; color: var(--tinta-suave); margin-left: 4px; }


/* ── Listas en tarjeta ────────────────────────────────────────────────────── */

.lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fila {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px 10px 10px;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 14px;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.fila:hover { border-color: var(--verde); }
.fila--quieta { cursor: default; }
.fila--quieta:hover { border-color: var(--linea); }
.fila__texto { flex: 1; min-width: 0; display: grid; }
.fila__texto strong { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila__texto span { font-size: .84rem; color: var(--tinta-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila__fin { display: grid; justify-items: end; gap: 3px; }
.fila__importe { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

.inicial {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--verde-claro);
  color: var(--verde);
  font-weight: 800;
  font-size: 1.1rem;
}
.inicial .icono { width: 22px; height: 22px; }
.inicial--grande { width: 60px; height: 60px; font-size: 1.5rem; border-radius: 16px; }
.inicial--ambar { background: #f3e7c9; color: var(--ambar); }
.inicial--rojo { background: #f3dcd4; color: var(--rojo); }

.lista-op { list-style: none; margin: 0; padding: 0; display: grid; }
.lista-op li { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--linea); flex-wrap: wrap; }
.lista-op li:last-child { border-bottom: 0; }
.lista-op .crece { flex: 1; min-width: 170px; }
.lista-op .enlace { cursor: pointer; }
.lista-op .enlace:hover { color: var(--verde); }


/* ── Hoy ──────────────────────────────────────────────────────────────────── */

.saludo {
  margin-bottom: 22px;
  padding: 24px 26px;
  background: var(--tinta);
  color: var(--papel);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
}
.saludo::after {
  content: "";
  position: absolute;
  left: -70px;
  bottom: -90px;
  width: 220px;
  height: 220px;
  background: url("../img/estrella.svg") center / contain no-repeat;
  opacity: .22;
}
.saludo h1 { font-size: 1.8rem; margin: 2px 0 6px; }
.saludo p { margin: 0; color: #d0c5ab; position: relative; }
.saludo__fecha { font-family: var(--f-suave); font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: #8fbf9f !important; }
.saludo .acciones { margin-top: 18px; position: relative; }
.saludo .btn { background: transparent; color: var(--papel); border-color: rgba(250, 247, 240, .35); }
.saludo .btn:hover { border-color: var(--papel); }
.saludo .btn--principal { background: #8fbf9f; color: var(--tinta); border-color: #8fbf9f; }
.saludo .btn--principal:hover { background: #a7cfb3; }

.decision {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-left: 5px solid var(--oro-claro);
  border-radius: 16px;
  padding: 15px 16px;
  margin-bottom: 10px;
}
.decision--verde { border-left-color: var(--verde); }
.decision--rojo  { border-left-color: var(--rojo); }
.decision--gris  { border-left-color: var(--linea); }
.decision__cabeza { display: flex; gap: 12px; align-items: flex-start; }
.decision__quien { flex: 1; min-width: 0; }
.decision__quien h3 { margin: 0; font-size: 1.05rem; }
.decision__quien h3 a { color: var(--tinta); text-decoration: none; }
.decision__quien h3 a:hover { color: var(--verde); }
.decision__quien p { margin: 1px 0 0; font-size: .88rem; }
.decision__cuando { font-size: .78rem; color: var(--tinta-suave); white-space: nowrap; }
.decision__importe { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.decision__texto { margin: 10px 0 0; padding: 9px 12px; background: var(--fondo); border-radius: 10px; font-size: .86rem; white-space: pre-wrap; }
.decision .botones-grandes { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.decision .btn--grande { min-height: 44px; font-size: .9rem; }
.decision__mas { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

.fecha-bloque {
  flex: none;
  width: 52px;
  padding: 6px 0 5px;
  border-radius: 12px;
  background: var(--fondo);
  border: 1px solid var(--linea);
  text-align: center;
  line-height: 1.05;
}
.fecha-bloque__dia { display: block; font-size: 1.4rem; font-weight: 800; }
.fecha-bloque__mes { display: block; font-family: var(--f-suave); font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; color: var(--verde); font-weight: 800; }
.fecha-bloque--rojo .fecha-bloque__mes { color: var(--rojo); }


/* ── Fichas ───────────────────────────────────────────────────────────────── */

.resumen-ficha { display: flex; gap: 14px; align-items: flex-start; margin: 6px 0 14px; }
.resumen-ficha__texto { flex: 1; min-width: 0; }
.resumen-ficha h1 { margin: 0 0 2px; font-size: 1.55rem; }
.resumen-ficha p { margin: 0; }

.acciones-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; margin: 14px 0 18px; }
.accion {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 80px;
  padding: 10px 6px;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 14px;
  color: var(--tinta);
  font: inherit;
  font-size: .79rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.accion:hover { border-color: var(--verde); }
.accion .icono { width: 24px; height: 24px; color: var(--verde); }

.paso {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-left: 5px solid var(--verde);
  border-radius: 16px;
  padding: 15px 18px;
  margin-bottom: 14px;
}
.paso h2 { margin: 0 0 4px; font-size: 1.05rem; }
.paso p { margin: 0; color: var(--tinta-suave); }

.editar { margin-top: 8px; }
.editar summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 16px;
  margin-bottom: 12px;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 14px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.editar summary::-webkit-details-marker { display: none; }
.editar summary .icono { color: var(--verde); }

.buscar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-bottom: 8px; }
.buscador { font-size: 1rem; padding: 12px 14px; border-radius: 12px; }

.embudo { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-bottom: 16px; }
.embudo__paso { background: var(--papel); border: 1px solid var(--linea); border-radius: 12px; padding: 9px 10px; cursor: pointer; font: inherit; text-align: left; color: inherit; }
.embudo__paso:hover, .embudo__paso[aria-current="true"] { border-color: var(--verde); }
.embudo__paso strong { display: block; font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.embudo__paso span { font-family: var(--f-suave); font-size: .72rem; font-weight: 700; color: var(--tinta-suave); text-transform: uppercase; letter-spacing: .06em; }

.medidor { height: 6px; background: var(--fondo-hondo); border-radius: 3px; overflow: hidden; min-width: 60px; }
.medidor__barra { height: 100%; background: var(--verde); border-radius: 3px; width: 0; }


/* ── Editor de presupuestos y facturas ────────────────────────────────────── */

fieldset { border: 1px solid var(--linea); border-radius: 14px; padding: 14px; margin: 0 0 14px; min-width: 0; background: var(--papel); }
legend { font-weight: 700; padding: 0 6px; }
fieldset > label { margin-top: 12px; }

.chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 4px 0 12px; }
.chip {
  min-height: 36px;
  padding: 6px 13px;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: var(--blanco);
  color: var(--tinta);
  font: inherit;
  font-size: .84rem;
  cursor: pointer;
}
.chip:hover { border-color: var(--verde); color: var(--verde); }
.chip small { color: var(--tinta-suave); margin-left: 4px; }

.lineas { display: grid; gap: 10px; }
.linea {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px 110px 120px auto;
  gap: 8px;
  align-items: end;
  padding: 10px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 12px;
}
.linea__desc { grid-column: 1 / -1; }
.linea__desc textarea { min-height: 44px; font-size: .86rem; }
.linea__botones { display: flex; gap: 4px; }
.linea--factura { grid-template-columns: minmax(0, 1fr) 72px 120px auto; }

.totales { display: grid; grid-template-columns: 1fr auto; gap: 4px 18px; font-size: .9rem; max-width: 360px; margin: 10px 0 0 auto; }
.totales dt { color: var(--tinta-suave); }
.totales dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.totales .total { font-weight: 800; font-size: 1.04rem; border-top: 1px solid var(--linea); padding-top: 5px; color: var(--tinta); }
.totales .aparte { margin-top: 8px; }


/* ── Documentos: presupuesto y factura ────────────────────────────────────
   Lo mismo en el panel, en la carpeta del cliente y en papel. */

.documento {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 14px;
  padding: 36px 38px;
  margin-bottom: 18px;
  font-size: .92rem;
}
.documento__cabeza { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 26px; }
.documento__cabeza .marca { font-size: 1.5rem; margin-bottom: 10px; }
.documento__cabeza p { margin: 0 0 2px; }
.documento__titulo { text-align: right; }
.documento__titulo h1 { font-size: 1.35rem; margin: 0 0 4px; }
.documento__titulo .rotulo-marca { display: block; margin-bottom: 6px; }
.documento__partes { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 22px; }
.documento__partes h3, .documento h3.seccion {
  font-family: var(--f-suave);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--verde);
  margin: 0 0 4px;
}
.documento__partes p { margin: 0; }
.documento h3.seccion { margin-top: 22px; }
.documento td:first-child { width: 60%; }
.documento .desc { display: block; font-size: .82rem; color: var(--tinta-suave); white-space: pre-wrap; margin-top: 2px; }
.documento__texto { white-space: pre-wrap; margin: 0; }
.documento__pie p { margin: 0; }
.documento__pie { margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--linea); font-size: .78rem; color: var(--tinta-suave); display: grid; gap: 6px; }
.documento__firma { margin-top: 18px; padding: 12px 14px; border: 1px solid var(--verde); border-radius: 10px; background: var(--verde-claro); font-size: .86rem; }
.documento .totales { margin-top: 12px; }
.sello { display: inline-block; padding: 4px 12px; border: 2px solid currentColor; border-radius: 6px; font-weight: 800; letter-spacing: .1em; }
.sello--rojo { color: var(--rojo); }
.sello--verde { color: var(--verde); }

.huella { font-family: var(--mono); font-size: .66rem; color: var(--tinta-suave); word-break: break-all; }
.factura__qr { display: flex; gap: 14px; align-items: flex-end; margin-top: 8px; }
.factura__qr .qr { width: 35mm; height: 35mm; border-radius: 0; }
.factura__qr p { margin: 0 0 4px; }

.qr { display: block; width: 100%; height: auto; border-radius: 6px; }
.qr-bloque { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; align-items: center; margin: 4px 0 14px; }
.qr-bloque .qr { width: 150px; border: 1px solid var(--linea); }

.codigos { font-family: var(--mono); font-size: 1rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 12px 0; }
.codigos span { background: var(--fondo); padding: 6px 10px; border-radius: 6px; text-align: center; }
.secreto { font-family: var(--mono); font-size: 1.05rem; letter-spacing: .12em; word-break: break-all; background: var(--fondo); padding: 10px 12px; border-radius: 8px; }


/* ── Carpeta del cliente (página pública) ─────────────────────────────────── */

.publico { background: var(--fondo); }
.publico__caja { max-width: 820px; margin: 0 auto; padding: 30px 16px 60px; }
.publico__cabeza { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.publico__cabeza .marca { font-size: 1.4rem; }
.publico h1 { font-size: 1.7rem; margin-bottom: 4px; }
.entradilla { color: var(--tinta-suave); margin: 0 0 20px; }
.aceptar { background: var(--papel); border: 2px solid var(--verde); border-radius: 16px; padding: 18px; margin: 0 0 18px; }
.aceptar h2 { margin-bottom: 6px; }
.aceptar label.check { align-items: flex-start; font-size: .9rem; }
.aceptar label.check input { margin-top: 4px; }
.acciones--pdf { justify-content: flex-end; margin: 0 0 10px; }


/* ── Móvil ─────────────────────────────────────────────────────────────────
   Solo en pantalla: en papel mandan las reglas de impresión. */
@media screen and (max-width: 760px) {
  body { font-size: 16px; }
  /* 16 px en los campos: con menos, el iPhone hace zoom al tocarlos. */
  input, select, textarea { font-size: 16px; padding: 11px 12px; }
  .btn { min-height: 44px; }
  .btn--pequeno { min-height: 36px; }

  .cabecera { padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top)); }
  .cabecera__fin { display: none; }

  .menu {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    flex-wrap: nowrap;
    gap: 0;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    background: rgba(250, 247, 240, .97);
    border-top: 1px solid var(--linea);
    box-shadow: 0 -4px 18px rgba(17, 16, 13, .06);
  }
  .menu__item { flex: 1; flex-direction: column; gap: 3px; padding: 6px 2px; font-size: .68rem; border-radius: 10px; justify-content: center; }
  .menu__item .icono { width: 23px; height: 23px; }
  .menu__item--sec { display: none; }
  .menu__item--mas { display: inline-flex; }
  .menu__aviso { position: absolute; top: 2px; left: calc(50% + 5px); }

  .contenido { padding: 16px 14px calc(150px + env(safe-area-inset-bottom)); }

  .boton-nuevo { right: 16px; bottom: calc(78px + env(safe-area-inset-bottom)); width: 58px; height: 58px; padding: 0; justify-content: center; border-radius: 50%; }
  .boton-nuevo span { display: none; }
  .boton-nuevo .icono { width: 26px; height: 26px; }

  .saludo { padding: 20px 18px; }
  .saludo h1 { font-size: 1.45rem; }
  .botones-grandes { grid-template-columns: 1fr; }
  .decision .botones-grandes { grid-template-columns: 1fr 1fr; }
  .acciones-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .cifra__valor { font-size: 1.12rem; }
  .decision__cabeza { flex-wrap: wrap; }
  .decision__cuando { order: -1; flex-basis: 100%; margin-bottom: -4px; }
  .titulo-vista h1, .resumen-ficha h1 { font-size: 1.3rem; }
  .embudo { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Las ventanas suben desde abajo, como en cualquier app del móvil. */
  .modal { width: 100%; max-width: 100%; margin: auto 0 0; max-height: 92dvh; border: 0; border-radius: 18px 18px 0 0; }
  #modal-cuerpo { padding: 20px 16px calc(24px + env(safe-area-inset-bottom)); }

  /* Las tablas, como fichas con "Rótulo: valor". */
  .tabla-caja:not(.tabla-caja--fija) table, .tabla-caja:not(.tabla-caja--fija) tbody,
  .tabla-caja:not(.tabla-caja--fija) tr, .tabla-caja:not(.tabla-caja--fija) td { display: block; width: 100%; }
  .tabla-caja:not(.tabla-caja--fija) thead { display: none; }
  .tabla-caja:not(.tabla-caja--fija) tr { margin-bottom: 8px; padding: 6px 12px; background: var(--papel); border: 1px solid var(--linea); border-radius: 12px; }
  .tabla-caja:not(.tabla-caja--fija) td { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border: 0; text-align: right; }
  .tabla-caja:not(.tabla-caja--fija) td::before { content: attr(data-titulo); color: var(--tinta-suave); font-size: .78rem; text-align: left; }
}

@media (max-width: 680px) {
  .dos-col { grid-template-columns: 1fr; }
  .linea, .linea--factura { grid-template-columns: 1fr 1fr; }
  .linea > label:first-child { grid-column: 1 / -1; }
  .documento { padding: 20px 16px; }
  .documento__partes { grid-template-columns: 1fr; }
  .documento__titulo { text-align: left; }
  .qr-bloque { grid-template-columns: 1fr; justify-items: center; }
  .buscar { grid-template-columns: 1fr; }
}

@media print {
  @page { margin: 14mm; }
  body, .publico { background: #fff; font-size: 11pt; }
  .cabecera, .aviso, .acciones, .barra, .pestanas, .boton-nuevo, .paso, .acciones-rejilla,
  .editar, .botones-grandes, .volver, .no-imprimir, .aceptar, .modal { display: none !important; }
  .contenido, .publico__caja { padding: 0; max-width: none; }
  .tarjeta { border: 0; padding: 0; background: none; }
  .documento { border: 0; padding: 0; margin: 0; break-inside: auto; }
  /* En la carpeta del cliente hay varios documentos: se imprime el elegido. */
  body.imprime-uno .documento:not(.imprimiendo), body.imprime-uno .publico__cabeza,
  body.imprime-uno .entradilla, body.imprime-uno h1:not(.documento h1) { display: none !important; }
  .documento__firma, .etiqueta, .sello { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .tabla-caja table, .tabla-caja tbody, .tabla-caja tr, .tabla-caja td { display: revert !important; }
  .tabla-caja thead { display: table-header-group !important; }
  .tabla-caja td::before { content: none !important; }
}

/* Un botón que es solo el texto de una fila (la fila tiene otro botón al lado). */
.fila__boton { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.fila__boton:hover strong { color: var(--verde); }
.chip[aria-pressed="true"] { border-color: var(--verde); background: var(--verde-claro); color: var(--verde); font-weight: 700; }

/* Formación: un color que no se confunda con los estados (verde, ámbar, rojo). */
.etiqueta--formacion { color: #5b4a8a; border-color: currentColor; background: #ebe6f4; text-decoration: none; }
.etiquetas { display: inline-flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.interruptor { font-size: 1rem; font-weight: 600; margin-top: 10px; }
.interruptor input { width: 20px; height: 20px; }
.buscar__filtros { display: flex; gap: 8px; }
.buscar__filtros select { width: auto; }

/* Saludo de Hoy con lo conseguido a la derecha. */
.saludo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 28px; align-items: center; }
.saludo__texto { min-width: 0; }
.saludo__logros { position: relative; display: grid; gap: 12px; justify-items: end; text-align: right; }
.logro { display: grid; }
.logro__valor { font-size: 2rem; font-weight: 800; line-height: 1.05; color: #8fbf9f; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.logro__rotulo { font-family: var(--f-suave); font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #d0c5ab; }
.logro__nota { font-size: .74rem; color: #a79f8a; }
details.descuento { margin-top: 12px; }
details.descuento summary { cursor: pointer; font-weight: 700; color: var(--verde); }
@media (max-width: 680px) {
  .saludo { grid-template-columns: 1fr; }
  .saludo__logros { grid-template-columns: 1fr 1fr; justify-items: start; text-align: left; }
  .logro__valor { font-size: 1.5rem; }
  .buscar__filtros { display: grid; grid-template-columns: 1fr 1fr; }
}

/* Con la etiqueta de formación, el menú tiene que caber en una línea a 1280 px. */
@media screen and (min-width: 761px) {
  .cabecera { gap: 12px; }
  .menu__item { padding: 7px 9px; }
}
@media screen and (min-width: 761px) and (max-width: 1360px) {
  .quien { display: none; }
}

/* Vigilancia de webs: lo que vio la revisión (cabeceras y principio de la página). */
.detalle-tecnico {
  font-family: ui-monospace, Consolas, "Courier New", monospace; font-size: .76rem; line-height: 1.45;
  max-height: 50vh; overflow: auto; padding: 10px 12px; margin-top: 8px;
  background: var(--fondo-hondo); border: 1px solid var(--linea); border-radius: 8px; word-break: break-all;
}

/* «Mis datos» en la carpeta del cliente: los apartados del formulario, separados. */
.publico form.tarjeta h3 { margin: 22px 0 8px; font-size: 1rem; }
.publico form.tarjeta details { margin: 8px 0 14px; }
.publico form.tarjeta details summary { cursor: pointer; font-weight: 700; color: var(--verde); }