:root {
  --azul: #0F1B2D;
  --amarillo: #F5B517;
  --fondo: #F7F7F4;
  --borde: #D8D8D2;
}

* { box-sizing: border-box; }

/* Que el atributo hidden mande siempre, aunque el elemento tenga display propio */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--fondo);
  color: var(--azul);
}

header {
  background: var(--azul);
  color: #fff;
  padding: 18px 24px;
  position: relative;
}

.botones-header {
  position: absolute;
  top: 18px;
  right: 16px;
  display: flex;
  gap: 8px;
}

.btn-header {
  min-height: 40px;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  border-radius: 6px;
  padding: 8px 14px;
  cursor: pointer;
  font-family: inherit;
}

.btn-header:hover { border-color: var(--amarillo); color: var(--amarillo); }

#mis-datos, #zona-logo, #zona-colores, #zona-icono, #mi-sesion, #mi-suscripcion, .plegable {
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 24px;
}

#mis-datos h3, #zona-logo h3, #zona-colores h3, #zona-icono h3, #mi-sesion h3, #mi-suscripcion h3 { margin-top: 0; }
#btn-icono-ajustes { min-height: 48px; }

.btn-nuevo-grande {
  width: 100%;
  padding: 18px;
  font-size: 1.15rem;
  margin: 6px 0 10px;
}

#logo-actual {
  margin-bottom: 12px;
  padding: 14px;
  border: 1px solid var(--borde);
  border-radius: 6px;
  background: var(--fondo);
  max-width: 280px;
}

#logo-actual img, #logo-svg-cont svg { max-width: 100%; max-height: 90px; }

header h1 {
  margin: 0;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  gap: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Logotipo oficial (PNG del kit de marca): nunca se deforma, solo se escala */
.marca-logo { height: 30px; width: auto; display: block; }

.lema {
  margin: 4px 0 0;
  font-size: 0.9rem;
  opacity: 0.8;
}

main {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 16px 60px;
}

.rotulo {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
}

textarea {
  width: 100%;
  padding: 12px;
  font-size: 1rem;
  font-family: inherit;
  border: 1px solid var(--borde);
  border-radius: 6px;
  resize: vertical;
}

textarea:focus {
  outline: 2px solid var(--amarillo);
  border-color: var(--amarillo);
}

.foto-zona {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0;
  padding: 12px;
  border: 1px dashed var(--borde);
  border-radius: 6px;
  color: #888;
  background: #fff;
}

.foto-zona input { display: none; }

.foto-zona.activa {
  color: var(--azul);
  cursor: pointer;
}

.foto-zona.activa:hover { border-color: var(--amarillo); }

#lista-adjuntos {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
}

.adjunto {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 6px;
  padding: 6px 10px;
  margin-bottom: 6px;
}

.adjunto img {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--borde);
}

.adjunto-icono { font-size: 1.6rem; width: 54px; text-align: center; }

.adjunto-nombre {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9rem;
}

.btn-principal {
  background: var(--amarillo);
  color: var(--azul);
  border: none;
  padding: 12px 28px;
  font-size: 1.05rem;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
}

.btn-principal:hover { filter: brightness(1.05); }
.btn-principal:disabled { opacity: 0.6; cursor: wait; }

.estado { color: var(--azul); font-style: italic; }
.estado.error { color: #B3261E; font-style: normal; font-weight: 600; }

#resultados h2 { margin-top: 36px; }

#mis-presupuestos { margin-top: 30px; }

#lista-presupuestos {
  list-style: none;
  margin: 0;
  padding: 0;
}

.presupuesto-guardado {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 6px;
  margin-bottom: 8px;
  padding: 4px 8px;
}

.presupuesto-guardado.abierto { border-color: var(--amarillo); border-width: 2px; }

.abrir-presupuesto {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  padding: 10px 4px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--azul);
}

.abrir-presupuesto span { color: #777; font-size: 0.9rem; white-space: nowrap; }

.capitulo { margin-bottom: 28px; }

.capitulo h3 {
  background: var(--azul);
  color: #fff;
  padding: 8px 12px;
  margin: 0 0 0;
  border-radius: 6px 6px 0 0;
  font-size: 1rem;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--borde);
}

th, td {
  border: 1px solid var(--borde);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
  font-size: 0.95rem;
}

th { background: #EDEDE8; font-weight: 600; }

td.num { width: 90px; text-align: right; }
td.unidad { width: 50px; text-align: center; }

td.num input {
  width: 100%;
  border: none;
  background: transparent;
  font: inherit;
  text-align: right;
  padding: 2px;
}

td.num input:focus { outline: 2px solid var(--amarillo); background: #fff; }

td.importe { font-variant-numeric: tabular-nums; background: #FAFAF6; }

td.vacio { color: #999; font-style: italic; text-align: center; }

tr.subtotal td { background: #EDEDE8; font-weight: 600; }

td.acciones { width: 150px; white-space: nowrap; }

.btn-icono {
  border: 1px solid var(--borde);
  background: #fff;
  border-radius: 4px;
  padding: 2px 7px;
  margin: 0 1px;
  cursor: pointer;
  font-family: inherit;
}

.btn-icono:hover { border-color: var(--azul); }

td.acciones select {
  max-width: 46px;
  border: 1px solid var(--borde);
  border-radius: 4px;
  background: #fff;
  padding: 2px;
  margin: 0 1px;
  cursor: pointer;
}

.cabecera-capitulo {
  display: flex;
  align-items: center;
  background: var(--azul);
  border-radius: 6px 6px 0 0;
}

.cabecera-capitulo h3 {
  flex: 1;
  background: none;
  border-radius: 0;
  margin: 0;
}

.btn-borrar-capitulo {
  background: none;
  border: none;
  color: #fff;
  opacity: 0.6;
  margin-right: 8px;
}

.btn-borrar-capitulo:hover { opacity: 1; color: #ffb4ac; }

.btn-secundario {
  border: 1px dashed var(--borde);
  background: #fff;
  border-radius: 6px;
  padding: 6px 14px;
  margin-top: 6px;
  cursor: pointer;
  font-family: inherit;
  color: var(--azul);
}

.btn-secundario:hover { border-color: var(--amarillo); }

.pie-presupuesto {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.total-general {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--azul);
  color: #fff;
  padding: 10px 18px;
  border-radius: 6px;
  font-size: 1.05rem;
}

.total-general strong { font-size: 1.2rem; }

#datos-presupuesto {
  margin-top: 26px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 6px;
}

#datos-presupuesto h3 { margin: 0 0 10px; font-size: 1rem; }

.rejilla-datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

.rejilla-datos label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85rem;
  font-weight: 600;
}

.rejilla-datos input, .rejilla-datos select {
  border: 1px solid var(--borde);
  border-radius: 4px;
  padding: 8px;
  font: inherit;
  font-weight: 400;
}

.rejilla-datos input:focus, .rejilla-datos select:focus {
  outline: 2px solid var(--amarillo);
}

/* IVA distinto en algunas partidas: casilla junto al IVA general y selector en cada partida */
.rejilla-datos label.opcion-iva-mixto {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  font-weight: 400;
  min-height: 44px;
}
.rejilla-datos label.opcion-iva-mixto[hidden] { display: none; }
.opcion-iva-mixto input { width: 22px; height: 22px; margin: 0; }
.iva-partida {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 0.85rem;
}
.iva-partida select {
  border: 1px solid var(--borde);
  border-radius: 4px;
  padding: 6px 8px;
  font: inherit;
  min-height: 36px;
  max-width: 100%;
}

.zona-descargas {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.zona-descargas .btn-principal { flex: 1; }

#btn-pdf { background: var(--azul); color: #fff; }

/* ---------- Móvil: cada partida pasa de fila a ficha ---------- */
@media (max-width: 700px) {
  main { padding: 16px 10px 50px; }

  /* En el móvil no hay ratón: la nota del precio sugerido se ve siempre */
  tr.sugerido .nota-sugerido { display: block; }
  .fila-precios-botones .btn-secundario { width: 100%; text-align: center; box-sizing: border-box; }
  #tabla-precios td.acciones { width: 100%; }

  .btn-principal { width: 100%; padding: 14px; }

  thead { display: none; }
  table, tbody, tr, td { display: block; width: 100%; }

  tbody tr:not(.subtotal) {
    padding: 10px 12px;
    border: none;
    border-bottom: 2px solid var(--borde);
    background: #fff;
  }

  table { border: 1px solid var(--borde); border-radius: 0 0 6px 6px; }

  td { border: none; padding: 4px 0; }

  /* Etiquetas pequeñas encima de cada casilla numérica */
  td.unidad::before, td.num::before {
    content: attr(data-etiqueta);
    display: block;
    font-size: 0.72rem;
    color: #777;
    margin-bottom: 2px;
  }

  td.unidad {
    display: inline-block;
    width: 18%;
    text-align: left;
    vertical-align: top;
  }

  td.num {
    display: inline-block;
    width: 26%;
    text-align: left;
    vertical-align: top;
  }

  td.num input {
    text-align: left;
    border: 1px solid var(--borde);
    border-radius: 4px;
    padding: 6px;
    background: #fff;
  }

  td.importe { background: none; padding-top: 4px; }

  td.acciones {
    width: 100%;
    padding-top: 8px;
    white-space: normal;
  }

  .btn-icono { padding: 6px 14px; margin-right: 6px; }

  td.acciones select { max-width: 130px; padding: 6px; }

  tr.subtotal {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    background: #EDEDE8;
  }

  tr.subtotal td { width: auto; padding: 0; }
  tr.subtotal td:last-child { display: none; }

  .pie-presupuesto {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .total-general { justify-content: space-between; }

  #foto-previa { max-width: 140px; max-height: 140px; }

  .zona-descargas { flex-direction: column; }
}

.modo {
  margin: 14px 0;
  padding: 10px 14px;
  border: 1px solid var(--borde);
  border-radius: 6px;
  background: #fff;
}

.modo legend { font-weight: 600; padding: 0 6px; }

.modo label {
  display: block;
  margin: 6px 0;
  cursor: pointer;
}

mark {
  background: #FDE68A;
  padding: 0 2px;
  border-radius: 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone; /* en varias líneas, cada trozo con sus bordes redondeados */
}

.titulo-partida { font-weight: 700; }

/* ---------- Precios sugeridos (de "Mis precios") ---------- */
tr.sugerido td.col-precio input { background: #FDE68A; border-radius: 4px; }
tr.sugerido td.col-precio input:focus { background: #fff; }
.nota-sugerido {
  display: none;
  margin-top: 4px;
  font-size: 0.8rem;
  color: #6B5A00;
}
tr.sugerido:hover .nota-sugerido, tr.sugerido:focus-within .nota-sugerido { display: block; }
.aviso-sugeridos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding: 10px 12px;
  background: #FFF6D6;
  border: 1px solid #F5B517;
  border-radius: 8px;
}
.aviso-sugeridos .btn-secundario { margin: 0; }
/* Generación sin ninguna partida: por qué y qué hacer */
.aviso-vacio {
  margin: 0 0 14px;
  padding: 12px 14px;
  background: #FDECEA;
  border: 1px solid #B3261E;
  border-radius: 8px;
}
.aviso-vacio p { margin: 0 0 8px; }
.aviso-vacio ul { margin: 0 0 12px; padding-left: 20px; }
.aviso-vacio li + li { margin-top: 4px; }
.aviso-vacio .btn-principal { width: 100%; }

/* ---------- Mis precios (Ajustes) ---------- */
.plegable { padding: 0; } /* la caja la pone la regla común de Ajustes; aquí el relleno va en el título y el contenido */
.plegable > summary { cursor: pointer; padding: 12px 14px; list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 48px; box-sizing: border-box; }
.plegable > summary::-webkit-details-marker { display: none; }
.plegable > summary::after { content: "▾"; font-size: 1.2rem; color: var(--azul); transition: transform 0.2s; }
.plegable[open] > summary::after { transform: rotate(180deg); }
.plegable > summary h3 { margin: 0; font-size: 1.05rem; }
.plegable > div { padding: 0 14px 14px; }
.fila-precios-botones { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.fila-precios-botones .btn-secundario { margin: 0; text-decoration: none; display: inline-block; }
.btn-archivo { cursor: pointer; }
.buscar-precios {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--borde);
  border-radius: 6px;
  padding: 10px;
  font: inherit;
  margin: 8px 0;
}
.buscar-precios:focus { outline: 2px solid var(--amarillo); }
/* Buscador y «Ordenar» (FALLOS nº 26): en el móvil uno debajo del otro, en el ordenador en la misma fila */
.fila-buscar-precios { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
.fila-buscar-precios .buscar-precios { flex: 1 1 260px; width: auto; min-width: 0; margin: 0; min-height: 44px; }
.orden-precios { display: flex; align-items: center; gap: 8px; flex: 1 1 260px; min-width: 0; font-size: 0.9rem; font-weight: 600; }
.orden-precios select { flex: 1; min-width: 0; min-height: 44px; border: 1px solid var(--borde); border-radius: 6px; padding: 0 10px; font: inherit; font-weight: 400; background: #fff; }
@media (min-width: 701px) { .orden-precios { flex: 0 0 auto; } }
.detalle-precio { display: block; color: #777; font-size: 0.8rem; margin-top: 2px; }
#tabla-precios td.acciones { width: 50px; }

.descripcion-partida { margin-top: 3px; }
/* Descripción vacía: se ve dónde escribir (solo en pantalla, no es texto de la partida ni va al PDF) */
.descripcion-partida:empty::before { content: "Escribe aquí la descripción"; color: #8A8A8A; }

[contenteditable]:hover { outline: 1px dashed var(--borde); }
[contenteditable]:focus { outline: 2px solid var(--amarillo); background: #fff; }

.aviso {
  display: block;
  margin-top: 4px;
  font-size: 0.85rem;
  color: #8a6d00;
  background: #FDF3D7;
  border-left: 3px solid var(--amarillo);
  padding: 3px 8px;
}

#no-entendido-zona, #pendientes-zona {
  margin-top: 30px;
  padding: 14px;
  background: #FDF3D7;
  border: 1px solid var(--amarillo);
  border-radius: 6px;
}

#no-entendido-zona h3, #pendientes-zona h3 { margin: 0 0 6px; }

.explicacion { margin: 0 0 8px; font-size: 0.9rem; }

/* ---------- Ajustes: colores corporativos ---------- */
.fila-colores { display: flex; gap: 16px; flex-wrap: wrap; }

.fila-colores label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
}

.fila-colores input[type="color"] {
  width: 120px;
  height: 52px;
  padding: 2px;
  border: 1px solid var(--borde);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}

#muestra-colores {
  border: 1px solid var(--borde);
  border-radius: 6px;
  overflow: hidden;
  font-size: 0.85rem;
  max-width: 420px;
}

#muestra-colores div { padding: 8px 10px; }
#muestra-cabecera, #muestra-capitulo { font-weight: 700; }
#muestra-partida { background: #fff; }

/* ---------- Precio cerrado: un solo total, sin precios por partida ---------- */
.opcion-cerrado {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 18px;
  cursor: pointer;
}

.opcion-cerrado input { width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; }

.precio-cerrado th.col-precio, .precio-cerrado th.col-importe,
.precio-cerrado td.col-precio, .precio-cerrado td.col-importe,
.precio-cerrado tr.subtotal { display: none; }

.input-total-cerrado {
  width: 130px;
  font: inherit;
  font-size: 1.2rem;
  font-weight: 700;
  text-align: right;
  padding: 6px 8px;
  border: none;
  border-radius: 4px;
}

/* Cuentas de prueba: cuántos presupuestos gratis quedan */
.aviso-prueba {
  background: #FFF6D9;
  border: 1px solid var(--amarillo, #F5B517);
  border-radius: 8px;
  padding: 10px 14px;
  margin: 0 0 14px;
  font-weight: 600;
  text-align: center;
}

/* Ventana «Tus datos en el presupuesto» (al empezar y al descargar sin ellos) */
.logo-rapido { margin: 0; min-height: 56px; }
.logo-rapido img { max-width: 120px; max-height: 44px; }
#rapido-estado-logo, #rapido-estado { margin: 0; }
#capa-empresa { scroll-padding-bottom: 150px; } /* la casilla en la que se escribe no queda bajo los botones */
.botones-ventana { position: sticky; bottom: 0; display: flex; flex-direction: column; gap: 10px; margin: 0 -18px -22px; padding: 12px 18px 22px; background: #fff; border-top: 1px solid var(--borde); border-radius: 0 0 10px 10px; }

/* Tarjeta para poner Aparejo como icono en el móvil (lista de presupuestos) */
.aviso-icono {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  gap: 10px 12px;
  align-items: center;
  margin: 4px 0 18px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 10px;
}
.aviso-icono img { width: 44px; height: 44px; border-radius: 10px; }
.aviso-icono p { margin: 0; font-size: 0.9rem; line-height: 1.35; color: #444; }
.aviso-icono p strong { display: block; font-size: 1rem; color: var(--azul); }
.aviso-icono .btn-icono { align-self: start; min-width: 44px; min-height: 44px; margin: 0; padding: 0; color: #777; }
.btn-anadir-icono {
  grid-column: 1 / -1;
  min-height: 48px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  background: var(--azul);
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
/* Quitada con la ✕: solo la frase de que queda en Ajustes, unos segundos (FALLOS nº 41) */
.aviso-icono.quitado > :not(#aviso-icono-ajustes) { display: none; }
.aviso-icono.quitado #aviso-icono-ajustes { grid-column: 1 / -1; font-size: 0.95rem; color: var(--azul); }
.aviso-icono #aviso-icono-ajustes strong { display: inline; font-size: inherit; }
/* Aviso del cambio de privacidad: una franja fina y discreta, con el botón al lado (06/11/2026) */
.aviso-privacidad {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 18px;
  padding: 6px 6px 6px 14px;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 10px;
}
.aviso-privacidad[hidden] { display: none; }
.aviso-privacidad p { flex: 1; margin: 0; font-size: 0.9rem; line-height: 1.35; color: #555; }
.aviso-privacidad a { color: var(--azul); white-space: nowrap; }
.btn-privacidad {
  flex: none;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0 14px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--azul);
  background: transparent;
  border: 1px solid var(--borde);
  border-radius: 8px;
  cursor: pointer;
}
.pasos-icono { margin: 0; padding-left: 22px; line-height: 1.45; }
.pasos-icono li + li { margin-top: 8px; }
.simbolo-compartir { vertical-align: -5px; color: #007AFF; }
.tecla { display: inline-block; min-width: 1.7em; padding: 0 4px; font-size: 1.15em; line-height: 1.25; text-align: center; background: var(--fondo); border: 1px solid var(--borde); border-radius: 6px; }
#pasos-iphone .explicacion { margin: 12px 0 0; }

/* ---------- Revisión general (sept 2026) ---------- */

/* Aviso de guardado: siempre a la vista mientras se edita */
.estado-guardado {
  position: fixed;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  z-index: 20;
  margin: 0;
  max-width: calc(100vw - 24px);
  padding: 6px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--borde);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  font-size: 0.85rem;
  color: #555;
  text-align: center;
}
/* «Guardado ✓» discreto, como estaba (FALLOS nº 32: Miquel prefirió este a la pastilla verde del nº 16) */
.estado-guardado.ok { color: #1E6B34; border-color: #9CCBA8; }
.estado-guardado.error { color: #B3261E; border-color: #B3261E; background: #FDECEA; font-weight: 600; border-radius: 10px; }

.total-general { flex-wrap: wrap; }
.eco-total { flex-basis: 100%; text-align: right; color: #fff; opacity: 0.85; font-size: 0.9rem; }

@media (max-width: 700px) {
  /* Por debajo de 16 px el iPhone hace zoom al tocar una casilla y descoloca la pantalla */
  input, select, textarea, [contenteditable] { font-size: 16px !important; }
  /* Botones que se puedan pulsar con el dedo */
  .btn-icono { min-width: 44px; min-height: 44px; }
  .presupuesto-guardado .btn-icono { margin-left: 8px; }
  #pantalla-editor { padding-bottom: 56px; } /* sitio para el aviso de guardado */
}

/* ---------- Suscripción y textos legales ---------- */
.oferta-suscripcion { background: #FFF4D6; border: 1px solid var(--amarillo); border-radius: 6px; padding: 10px 12px; font-weight: 600; color: var(--azul); }
.botones-suscripcion { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0; }
.botones-suscripcion button { flex: 1; min-width: 220px; padding: 14px; font-size: 1rem; }
.btn-enlace { background: none; border: none; padding: 0; color: var(--azul); text-decoration: underline; font: inherit; font-weight: 700; cursor: pointer; }
/* «O empieza en blanco» (FALLOS nº 33): secundario, debajo de «Generar partidas», para el dedo */
.btn-en-blanco { display: block; margin: 14px auto 0; min-height: 44px; padding: 0 8px; font-weight: 600; }
.en-blanco-premium { text-align: center; margin: 6px 0 0; }
.en-blanco-premium .btn-enlace { min-height: 44px; padding: 0 6px; }
/* En el ordenador, alineado a la izquierda con «Generar partidas» */
@media (min-width: 701px) {
  .btn-en-blanco { margin-left: 0; padding-left: 0; }
  .en-blanco-premium { text-align: left; }
}
.pie-legal { text-align: center; padding: 18px 16px 70px; font-size: 0.85rem; color: #777; }
.pie-legal a { color: #555; }

/* El logotipo es el botón de "inicio" */
header h1 a { display: inline-block; line-height: 0; }

/* ---------- Barra de progreso al generar ---------- */
.progreso { margin: 18px 0; padding: 16px; background: #fff; border: 1px solid var(--borde); border-radius: 8px; }
.progreso-texto { margin: 0 0 10px; font-weight: 700; color: var(--azul); }
.progreso-barra { height: 12px; background: #E9E9E3; border-radius: 999px; overflow: hidden; }
.progreso-relleno { height: 100%; width: 3%; background: var(--amarillo); border-radius: 999px; transition: width 0.5s linear; }
.progreso-nota { margin: 10px 0 0; font-size: 0.85rem; color: #777; }

/* «¿Quién eres?»: pregunta única a las cuentas nuevas, por encima de todo */
.capa-perfil {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(15, 27, 45, 0.6);
  display: flex;
  padding: 16px;
  overflow-y: auto;
}
/* margin: auto la centra y, si no cabe (móvil en horizontal), deja subir hasta el título */
.caja-perfil {
  margin: auto;
  background: #fff;
  border-radius: 10px;
  padding: 22px 18px;
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.caja-perfil h2 { margin: 0; }
.caja-perfil .explicacion { margin: 0 0 4px; }
.btn-perfil {
  min-height: 52px;
  padding: 10px 14px;
  text-align: left;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: var(--azul);
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 8px;
  cursor: pointer;
}
.btn-perfil:hover, .btn-perfil:focus-visible { border-color: var(--amarillo); outline: 2px solid var(--amarillo); }
.btn-perfil span { display: block; font-weight: 400; font-size: 0.85rem; opacity: 0.75; }

/* ---------- Botón «Ayuda» ---------- */
/* En el móvil: logo y botones en una fila, el lema debajo (sin taparse) */
@media (max-width: 520px) {
  header { padding: 12px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 6px; }
  .botones-header { position: static; gap: 6px; }
  .btn-header { padding: 8px 10px; }
  .marca-logo { height: 24px; }
  .lema { flex-basis: 100%; margin: 0; order: 2; }
}
#ayuda-texto {
  width: 100%;
  border: 1px solid var(--borde);
  border-radius: 6px;
  padding: 10px;
  font: inherit;
  resize: vertical;
}
#ayuda-estado { margin: 0; }
#ayuda-estado:empty { display: none; }
.caja-perfil .btn-principal, .caja-perfil .btn-secundario { width: 100%; min-height: 48px; }
/* Cuestionario de opinión (FALLOS nº 36): respuestas para tocar, sin escribir */
.caja-opinion { max-width: 520px; }
.caja-opinion > div { display: flex; flex-direction: column; gap: 10px; }
#opinion-preguntas { display: flex; flex-direction: column; gap: 14px; }
.pregunta-opinion { border: 0; margin: 0; padding: 0; min-width: 0; }
.pregunta-opinion legend { font-weight: 600; margin-bottom: 6px; padding: 0; color: var(--azul); }
.pregunta-opinion.falta legend { color: #B3261E; }
.opciones-opinion { display: flex; flex-wrap: wrap; gap: 6px; }
.opcion-opinion { min-height: 44px; padding: 8px 12px; border: 1px solid var(--borde); border-radius: 8px; background: #fff; font: inherit; color: var(--azul); cursor: pointer; text-align: left; }
.opcion-opinion[aria-pressed="true"] { border: 2px solid var(--azul); background: #FFF4D6; font-weight: 600; }
.abierta-opinion { display: flex; flex-direction: column; gap: 6px; font-weight: 600; color: var(--azul); }
/* «Tu primer mes, gratis» (FALLOS nº 38): recuadro marino con el botón grande amarillo, como el
   de «29 € al mes», para que dé ganas de pulsar. En el móvil, el botón a todo lo ancho */
.invitacion-opinion { background: var(--azul); border-radius: 10px; padding: 16px; margin: 12px 0 4px; }
.invitacion-opinion p { margin: 0 0 14px; color: #fff; font-size: 0.95rem; line-height: 1.45; }
.invitacion-opinion .invitacion-titulo { margin-bottom: 4px; color: var(--amarillo); font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; }
.invitacion-opinion .btn-principal { width: 100%; min-height: 52px; padding: 14px 20px; }
@media (min-width: 701px) { .invitacion-opinion .btn-principal { width: auto; min-width: 280px; } }
.abierta-opinion textarea { border: 1px solid var(--borde); border-radius: 6px; padding: 10px; font: inherit; font-weight: 400; resize: vertical; }

/* ---------- Diseño B (propuesta elegida por Miquel, 22/10/2026) ----------
   Letra (FALLOS nº 31: Miquel la quiso limpia, tipo Apple): la del propio aparato, sin
   descargar nada. En iPhone y Mac es la de Apple (San Francisco), en Android Roboto y en
   Windows Segoe UI. Las cifras, con números del mismo ancho para que los importes queden
   alineados (y sin el punto dentro del cero que tenía la letra de antes). */
:root {
  --letra: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --letra-titulo: var(--letra);
  --letra-cifras: var(--letra);
}
body { font-family: var(--letra); }
h1, h2, h3 { font-family: var(--letra-titulo); font-weight: 700; letter-spacing: -0.02em; }
.btn-principal, .btn-header { font-family: var(--letra); font-weight: 600; letter-spacing: 0; }
.btn-principal { font-size: 1.05rem; }

/* «Mis presupuestos»: bloque marino de arriba, a todo lo ancho, seguido de la cabecera */
/* A lo ancho de la ventana sin trucos de sombra (dejaban un filo en el ordenador): sale
   del contenedor con márgenes negativos y vuelve a centrar el contenido con el relleno */
html { overflow-x: hidden; } /* la barra de desplazamiento de Windows no crea un scroll lateral (solo en html: así el robot sigue viendo si algo se sale) */
.portada-lista {
  background: var(--azul);
  color: #fff;
  margin: -24px calc(50% - 50vw) 20px;
  padding: 16px calc(50vw - 50%) 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.portada-lista h1 { margin: 0; font-size: 2rem; line-height: 1.1; color: #fff; }
.portada-lista .btn-nuevo-grande { margin: 0; min-height: 56px; font-size: 1.15rem; color: #4A3600; }
.portada-lista .aviso-prueba { margin: 0; padding: 0; background: none; border: 0; text-align: left; font-weight: 400; color: #C7CEDB; font-size: 0.95rem; }
.portada-lista .aviso-prueba .btn-enlace { color: #fff; }
/* Prueba gastada: es el momento de suscribirse, que no pase desapercibido (con borde
   amarillo, no relleno: así no parece un segundo botón amarillo bajo el grande) */
.portada-lista .aviso-prueba.agotada { border: 2px solid var(--amarillo); color: #fff; font-weight: 700; border-radius: 6px; padding: 10px 12px; }
.portada-lista .aviso-prueba.agotada .btn-enlace { color: var(--amarillo); }
.titulo-recientes { display: flex; align-items: center; gap: 8px; margin: 6px 0 12px; font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: #2E3D57; }
.titulo-recientes::before { content: ""; width: 18px; height: 3px; background: var(--amarillo); flex: none; }

/* Lápiz para cambiar el nombre (nº 42): dibujado, porque la letra ✎ no está en todos los móviles */
.btn-lapiz { display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.btn-lapiz::before {
  content: ""; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M15.5 4.5l4 4L8 20H4v-4z'/%3E%3Cpath d='M13 7l4 4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M15.5 4.5l4 4L8 20H4v-4z'/%3E%3Cpath d='M13 7l4 4'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* En la tarjeta del móvil, el lápiz pegado al nombre y la ✕ con su margen: así queda algo
   apartada del lápiz y no se borra sin querer (pregunta antes, de todos modos) */
.presupuesto-guardado .btn-lapiz { margin-left: 0; color: var(--azul); }
/* Escribiendo el nombre: solo la casilla y «Guardar» (debajo, si al lado la casilla quedaría estrecha) */
.editando-nombre > :not(.editar-nombre) { display: none !important; }
.editar-nombre { flex: 1 1 100%; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; padding: 6px 0; }
.editar-nombre input { flex: 1 1 180px; min-width: 0; min-height: 44px; padding: 8px 10px; font: inherit; font-size: 1.05rem; color: var(--azul); background: #fff; border: 2px solid var(--amarillo); border-radius: 6px; }
.editar-nombre .btn-principal { flex: none; width: auto; min-height: 44px; padding: 8px 16px; margin-left: auto; }
.titulo-presupuesto .editar-nombre { padding: 0; }
/* En el ordenador las tarjetas van en columnas y son más estrechas: el lápiz y la ✕ uno encima
   del otro, para que el nombre siga cabiendo entero */
@media (min-width: 701px) {
  .presupuesto-guardado { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; row-gap: 4px; align-items: center; }
  .presupuesto-guardado .abrir-presupuesto { grid-row: 1 / span 2; }
  .presupuesto-guardado .btn-icono { min-width: 36px; min-height: 36px; margin: 0; }
  .presupuesto-guardado .editar-nombre { grid-column: 1 / -1; grid-row: 1 / span 2; }
}

/* Tarjetas de la lista: cliente y total arriba, fecha debajo */
.presupuesto-guardado { padding: 4px 6px 4px 12px; border-color: #D2CFC2; }
.abrir-presupuesto { flex-direction: column; align-items: stretch; gap: 4px; padding: 10px 2px; min-width: 0; }
.abrir-presupuesto .fila-presupuesto { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 10px; min-width: 0; white-space: normal; color: var(--azul); }
.abrir-presupuesto strong { font-weight: 600; font-size: 1rem; color: var(--azul); line-height: 1.3; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.abrir-presupuesto .importe { font-family: var(--letra-cifras); font-variant-numeric: tabular-nums; font-weight: 500; color: var(--azul); font-size: 1rem; }
.abrir-presupuesto .fecha { font-family: var(--letra-cifras); font-size: 0.8rem; color: #6E6A5C; }
@media (max-width: 700px) {
  .portada-lista { margin-top: -16px; }
}
/* Ordenador (se usa 50-50 con el móvil): título a la izquierda y botón a la derecha con su
   tamaño, y los presupuestos en columnas de tarjetas */
@media (min-width: 701px) {
  .portada-lista { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px 24px; padding-top: 28px; padding-bottom: 28px; }
  .portada-lista h1 { font-size: 2.4rem; }
  .portada-lista .btn-nuevo-grande { width: auto; min-width: 300px; padding: 0 32px; }
  .portada-lista .aviso-prueba { grid-column: 1 / -1; }
  #lista-presupuestos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
  #lista-presupuestos .presupuesto-guardado { margin-bottom: 0; }
}

/* ---------- Diseño B, fase 2: el presupuesto abierto ---------- */
.portada-editor {
  background: var(--azul);
  color: #fff;
  margin: -24px calc(50% - 50vw) 18px;
  padding: 8px calc(50vw - 50%) 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.portada-editor #btn-volver, .portada-ajustes #btn-volver-ajustes { margin: 0; min-height: 44px; background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.4); font-weight: 600; } /* el mismo borde que Ayuda y Ajustes */
.portada-editor #btn-volver:hover, .portada-ajustes #btn-volver-ajustes:hover { border-color: var(--amarillo); color: var(--amarillo); }
.portada-editor h1 { margin: 0; font-size: 1.7rem; line-height: 1.12; color: #fff; overflow-wrap: anywhere; }
/* Nº 42: el nombre de arriba con su lápiz pegado a la derecha (y al escribir, la casilla a todo lo ancho) */
.titulo-presupuesto { align-self: stretch; display: flex; align-items: flex-start; gap: 8px; }
.titulo-presupuesto h1 { flex: 0 1 auto; min-width: 0; }
.titulo-presupuesto .btn-lapiz { flex: none; width: 44px; height: 44px; margin-top: -4px; background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 6px; cursor: pointer; } /* el mismo borde que «← Mis presupuestos» */
.titulo-presupuesto .btn-lapiz:hover { border-color: var(--amarillo); color: var(--amarillo); }
.meta-presupuesto { margin: 4px 0 0; font-family: var(--letra-cifras); font-size: 0.8rem; color: #C7CEDB; overflow-wrap: anywhere; }
@media (max-width: 700px) { .portada-editor { margin-top: -16px; } }

/* Capítulos con la letra de títulos en versales; cifras alineadas en medidas, precios, importes y totales */
.capitulo h3 { text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.95rem; }
#capitulos input[aria-label="Precio en euros"], #capitulos input[aria-label="Medida"], #capitulos .num, #capitulos .importe,
.total-general strong, .input-total-cerrado {
  font-family: var(--letra-cifras);
  font-variant-numeric: tabular-nums;
}

/* Descargas: el PDF es lo que se manda al cliente (amarillo); el Excel, secundario */
#btn-pdf { background: var(--amarillo); color: #4A3600; }
#btn-excel { background: #fff; color: var(--azul); border: 2px solid var(--azul); }
.zona-descargas .btn-principal { min-height: 52px; }
/* Casillas y desplegables con la letra de la app (por defecto el navegador pone la suya) */
input, select, textarea { font-family: inherit; }
/* En el móvil, las etiquetas pequeñas de cada dato (Medida, Precio €…) van en la letra normal, no en la de cifras */
#capitulos td::before { font-family: var(--letra); font-variant-numeric: normal; }
/* Portátil y ordenador: el desplegable para mover la partida de capítulo se lee (desde 900 px:
   por debajo, ese ancho se lo quitaría al texto de las partidas, que es lo que más se lee) */
@media (min-width: 900px) {
  td.acciones { width: 210px; }
  td.acciones select { max-width: 110px; }
}
/* Ordenador grande: la app aprovecha más el ancho (1.120 px, como el sistema de diseño de Aparejo) */
@media (min-width: 1100px) {
  main { max-width: 1120px; }
  td.acciones { width: 240px; }
  td.acciones select { max-width: 130px; }
}

/* ---------- Nombre propio y color de cada presupuesto (FALLOS nº 18) ---------- */
.etiqueta-punto { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 7px; vertical-align: 0; flex: none; }
.etiqueta-punto.gris { background: #6E6A5C; }
.etiqueta-punto.azul { background: #2563A8; }
.etiqueta-punto.verde { background: #1B6B45; }
.etiqueta-punto.naranja { background: #B36200; }
.etiqueta-punto.rojo { background: #C0332A; }
.etiqueta-punto.morado { background: #6B4FA0; }
/* Elegir color: botones para el dedo; el círculo de radio queda oculto pero sigue funcionando con el teclado */
.etiquetas { grid-column: 1 / -1; position: relative; border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.etiquetas legend { font-size: 0.85rem; font-weight: 600; margin-bottom: 6px; padding: 0; }
.etiquetas input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.etiquetas label { display: inline-flex; flex-direction: row; gap: 0; align-items: center; min-height: 44px; padding: 0 12px; border: 1px solid var(--borde); border-radius: 6px; background: #fff; font-size: 0.95rem; font-weight: 400; cursor: pointer; }
.etiquetas input:checked + label { border: 2px solid var(--azul); background: #FFF4D6; font-weight: 600; }
.etiquetas input:focus-visible + label { outline: 3px solid var(--amarillo); outline-offset: 2px; }
/* Filtro por color encima de la lista */
.filtro-etiquetas { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.filtro-etiquetas button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border: 1px solid var(--borde); border-radius: 6px; background: #fff; color: var(--azul); font: inherit; font-size: 0.95rem; cursor: pointer; }
.filtro-etiquetas button[aria-pressed="true"] { border: 2px solid var(--azul); background: #FFF4D6; font-weight: 600; }
/* «En tu lista»: solo los colores (el nombre se cambia con el lápiz, nº 42), a todo lo ancho */

/* ---------- Rediseño (Miquel, 28/10/2026): estilo Raycast, el marino con protagonismo ----------
   Capa 1, la base: franja marina con un brillo azul suave, logo sin fondo, esquinas poco
   redondeadas, y botones y tarjetas que suben un poco al pasar y hacen «pop» al pulsar.
   El movimiento es corto (menos de medio segundo) y solo de posición y sombra, así no pesa
   en móviles viejos. Con «reducir movimiento» en el aparato, todo se queda quieto. */
:root {
  --fondo: #F3F4F6;
  --borde: #DDE1E7;
  --borde-suave: #E4E7EC;
  --brillo: rgba(66, 120, 220, 0.42);
  --rebote: cubic-bezier(0.34, 1.56, 0.64, 1);
  --sombra-tarjeta: 0 1px 2px rgba(15, 27, 45, 0.05), 0 12px 28px -20px rgba(15, 27, 45, 0.22);
  --anillo: 0 0 0 3px rgba(245, 181, 23, 0.35);
}

/* Brillo de la franja marina: media elipse al pie de la cabecera y la otra media en lo alto del
   bloque de debajo, para que se vean como una sola franja sin costura */
header {
  background-color: var(--azul);
  background-image: radial-gradient(ellipse 70% 240px at 50% 100%, var(--brillo), rgba(66, 120, 220, 0));
}
.portada-lista, .portada-editor, .portada-ajustes {
  background-color: var(--azul);
  background-image: radial-gradient(ellipse 70% 240px at 50% 0, var(--brillo), rgba(66, 120, 220, 0));
}
.marca-logo { height: 26px; } /* unos 155 px de ancho: el mínimo de la marca es 150 (LEEME de aparejo-logos) */
.botones-header { top: 50%; transform: translateY(-50%); }

/* Botones de la franja marina: Ayuda, Ajustes, «← Mis presupuestos» y el lápiz, todos iguales */
.btn-header, .portada-editor #btn-volver, .portada-ajustes #btn-volver-ajustes, .titulo-presupuesto .btn-lapiz {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: #D5DBE6;
  font-weight: 500;
  font-size: 0.92rem;
  transition: transform 0.3s var(--rebote), background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.titulo-presupuesto .btn-lapiz { padding: 0; }
.btn-header:hover, .portada-editor #btn-volver:hover, .portada-ajustes #btn-volver-ajustes:hover, .titulo-presupuesto .btn-lapiz:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  transform: translateY(-1px);
}
.btn-header:active, .portada-editor #btn-volver:active, .portada-ajustes #btn-volver-ajustes:active, .titulo-presupuesto .btn-lapiz:active { transform: scale(0.94); transition-duration: 0.08s; }
.btn-header svg { flex: none; }

/* Botón amarillo: un brillo arriba, al pasar sube y le cruza un reflejo, al pulsar se hunde y rebota */
.btn-principal {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background-color: var(--amarillo);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 0 0 1px rgba(245, 181, 23, 0.6), 0 10px 26px -12px rgba(245, 181, 23, 0.6);
  transition: transform 0.35s var(--rebote), box-shadow 0.25s ease, filter 0.25s ease;
}
.btn-principal::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.5) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  pointer-events: none;
}
.btn-principal:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.04);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 0 1px rgba(245, 181, 23, 0.85), 0 16px 34px -12px rgba(245, 181, 23, 0.7);
}
.btn-principal:hover:not(:disabled)::before { transform: translateX(120%); }
.btn-principal:active:not(:disabled) { transform: scale(0.95); transition-duration: 0.08s; }
#btn-pdf { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0)); }
/* Excel, secundario: blanco con el borde marino, sin el brillo amarillo */
#btn-excel { border: 1.5px solid var(--azul); box-shadow: 0 1px 2px rgba(15, 27, 45, 0.06); }
#btn-excel:hover:not(:disabled) { box-shadow: 0 10px 22px -12px rgba(15, 27, 45, 0.35); filter: none; }

/* Botones blancos: borde fino continuo (antes punteado), para el dedo */
.btn-secundario {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 27, 45, 0.05);
  transition: transform 0.3s var(--rebote), border-color 0.18s ease, box-shadow 0.2s ease;
}
.btn-secundario:hover { border-color: #C5CBD6; transform: translateY(-1px); box-shadow: 0 6px 14px -8px rgba(15, 27, 45, 0.25); }
.btn-secundario:active { transform: scale(0.96); transition-duration: 0.08s; }
.fila-precios-botones .btn-secundario { display: inline-flex; }
.btn-icono, .btn-perfil, .filtro-etiquetas button, .etiquetas label, .opcion-opinion {
  transition: transform 0.3s var(--rebote), border-color 0.18s ease, background-color 0.18s ease;
}
.btn-icono { border-radius: 6px; }
.btn-icono:active, .filtro-etiquetas button:active, .etiquetas label:active, .opcion-opinion:active { transform: scale(0.94); transition-duration: 0.08s; }
.btn-perfil { background: #fff; border-color: var(--borde); border-radius: 10px; }
.btn-perfil:hover { border-color: var(--azul); outline: none; transform: translateY(-1px); }
.btn-perfil:active { transform: scale(0.98); transition-duration: 0.08s; }
.filtro-etiquetas button, .etiquetas label { border-radius: 8px; }

/* Tarjetas de «Mis presupuestos»: blancas, con sombra suave, suben al pasar y se hunden al abrirlas */
.presupuesto-guardado {
  border-color: var(--borde-suave);
  border-radius: 10px;
  box-shadow: var(--sombra-tarjeta);
  transition: transform 0.35s var(--rebote), box-shadow 0.25s ease, border-color 0.2s ease;
}
.presupuesto-guardado:hover { transform: translateY(-1px); border-color: #D3D8E0; box-shadow: 0 1px 2px rgba(15, 27, 45, 0.06), 0 18px 32px -18px rgba(15, 27, 45, 0.3); }
.presupuesto-guardado:has(.abrir-presupuesto:active) { transform: scale(0.98); transition-duration: 0.08s; }
.presupuesto-guardado.abierto { border-color: var(--amarillo); }

/* Cajas blancas: esquina algo mayor y sombra suave en vez de solo el borde */
#mis-datos, #zona-logo, #zona-colores, #zona-icono, #mi-sesion, #mi-suscripcion, .plegable,
#datos-presupuesto, .progreso, .aviso-icono {
  border-color: var(--borde-suave);
  border-radius: 12px;
  box-shadow: var(--sombra-tarjeta);
}
.modo, .aviso-sugeridos, .aviso-vacio, #no-entendido-zona, #pendientes-zona { border-radius: 12px; }
.caja-perfil { border-radius: 14px; }

/* Casillas: esquina de 8 px y, al escribir, borde marino con un anillo amarillo suave */
textarea, .rejilla-datos input, .rejilla-datos select, .buscar-precios, #ayuda-texto, .abierta-opinion textarea, .editar-nombre input { border-radius: 8px; }
textarea:focus, .rejilla-datos input:focus, .rejilla-datos select:focus, .buscar-precios:focus, #ayuda-texto:focus, .abierta-opinion textarea:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: var(--anillo);
}
/* Foco con el teclado: marino sobre lo claro y amarillo sobre la franja marina, siempre bien visible */
button:focus-visible, a:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
header :focus-visible, .portada-lista :focus-visible, .portada-editor :focus-visible, .portada-ajustes :focus-visible { outline-color: var(--amarillo); }

@media (max-width: 520px) {
  .botones-header { transform: none; }
  .btn-header { padding: 0 10px; gap: 6px; }
  .marca-logo { height: 22px; }
}

/* Móvil (sin ratón): el dedo cuenta como «pasar por encima» y el botón se quedaría levantado;
   ahí solo queda el pop al pulsar */
@media (hover: none) {
  .btn-principal:hover:not(:disabled), .btn-secundario:hover, .btn-header:hover, .portada-editor #btn-volver:hover, .portada-ajustes #btn-volver-ajustes:hover,
  .titulo-presupuesto .btn-lapiz:hover, .btn-perfil:hover, .presupuesto-guardado:hover { transform: none; }
  .btn-principal:active:not(:disabled) { transform: scale(0.95); }
  .btn-secundario:active { transform: scale(0.96); }
  .btn-header:active, .portada-editor #btn-volver:active, .portada-ajustes #btn-volver-ajustes:active, .titulo-presupuesto .btn-lapiz:active { transform: scale(0.94); }
  .btn-perfil:active, .presupuesto-guardado:has(.abrir-presupuesto:active) { transform: scale(0.98); }
}
/* Foco con el teclado también marino en «¿Quién eres?» y en los colores de la lista */
.btn-perfil:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; border-color: var(--azul); }
.etiquetas input:focus-visible + label { outline: 3px solid var(--azul); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .btn-principal, .btn-secundario, .btn-header, .portada-editor #btn-volver, .portada-ajustes #btn-volver-ajustes, .titulo-presupuesto .btn-lapiz,
  .btn-icono, .btn-perfil, .filtro-etiquetas button, .etiquetas label, .opcion-opinion, .presupuesto-guardado {
    transition: none !important;
    transform: none !important;
  }
  /* El reflejo vive escondido a un lado: quieto en medio taparía el texto */
  .btn-principal::before { display: none; }
}

/* ---------- Rediseño, capa 2: «Mis presupuestos» y el presupuesto abierto ---------- */
/* Lista: las tarjetas aparecen con un fundido corto (solo opacidad: nada cambia de sitio) */
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
#lista-presupuestos .presupuesto-guardado { animation: aparecer 0.35s ease backwards; }
#lista-presupuestos .presupuesto-guardado:nth-child(2) { animation-delay: 0.04s; }
#lista-presupuestos .presupuesto-guardado:nth-child(3) { animation-delay: 0.08s; }
#lista-presupuestos .presupuesto-guardado:nth-child(4) { animation-delay: 0.12s; }
#lista-presupuestos .presupuesto-guardado:nth-child(n+5) { animation-delay: 0.16s; }
.abrir-presupuesto strong { font-weight: 600; letter-spacing: -0.01em; }
.abrir-presupuesto .importe { font-weight: 600; }
.abrir-presupuesto .fecha { color: #646C7D; }
/* Con cambios que este aparato aún no ha subido (sin cobertura): lo dice en vez de la fecha */
.abrir-presupuesto .fecha.sin-subir { font-family: inherit; color: #B3261E; font-weight: 600; }
/* Prueba gratis: con su puntito amarillo encendido */
.portada-lista .aviso-prueba:not(.agotada)::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  vertical-align: 2px;
  border-radius: 50%;
  background: var(--amarillo);
  box-shadow: 0 0 10px var(--amarillo);
}

/* Presupuesto abierto: cada capítulo es una tarjeta blanca con su número (01, 02…) como en el PDF */
#capitulos { counter-reset: capitulo; }
.capitulo {
  counter-increment: capitulo;
  background: #fff;
  border: 1px solid var(--borde-suave);
  border-radius: 12px;
  box-shadow: var(--sombra-tarjeta);
  padding-bottom: 12px;
}
.cabecera-capitulo { background: #fff; border-radius: 12px 12px 0 0; padding: 6px 6px 6px 4px; border-bottom: 1px solid #ECEEF2; }
.capitulo h3, .cabecera-capitulo h3 { color: var(--azul); background: none; padding: 10px 10px; font-size: 0.92rem; letter-spacing: 0.06em; }
.capitulo h3::before { content: counter(capitulo, decimal-leading-zero); margin-right: 12px; color: #B07A00; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.btn-borrar-capitulo { color: #646C7D; opacity: 1; min-width: 40px; min-height: 40px; margin: 0; border-radius: 8px; }
.btn-borrar-capitulo:hover { color: #B3261E; background: #FDECEA; }
/* Tabla sin rejilla: solo una raya fina entre partidas */
.capitulo table { border: 0; background: transparent; }
.capitulo th, .capitulo td { border: 0; border-bottom: 1px solid #EEF0F3; }
.capitulo th { background: #F7F8FA; color: #646C7D; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 10px; }
.capitulo td { padding: 14px 10px; }
.capitulo td.unidad { font-weight: 600; color: #3A4456; font-size: 0.88rem; }
.capitulo td.importe { background: none; font-weight: 600; }
.capitulo .descripcion-partida { color: #5B6475; line-height: 1.5; font-size: 0.93rem; }
.capitulo .titulo-partida { font-weight: 600; letter-spacing: -0.005em; }
.capitulo tr.subtotal td { background: #F7F8FA; border-bottom: 0; font-weight: 600; }
/* Medida y precio en casillas recuadradas, a la derecha y fáciles de tocar */
#capitulos td.num input {
  height: 36px;
  padding: 0 8px;
  border: 1px solid #D9DDE4;
  border-radius: 6px;
  background: #F8F9FB;
}
#capitulos td.num input:focus { outline: none; border-color: var(--azul); background: #fff; box-shadow: var(--anillo); }
/* Precio sugerido (de los presupuestos del propio usuario): celda amarilla hasta que se revise */
#capitulos tr.sugerido td.col-precio input { background: #FFEFB8; border-color: var(--amarillo); color: #4A3600; }
.btn-anadir-partida { margin: 12px 0 0 12px; }
/* Lo añadido por intuición: amarillo con un subrayado discontinuo */
mark { background: #FDE68A; border-bottom: 1px dashed #C98F00; }
/* Avisos de cada partida: naranja suave, sin franja lateral */
.aviso { border-left: 0; border-radius: 6px; padding: 5px 9px; margin-top: 8px; background: #FFF4E5; color: #8A4A00; }
.nota-sugerido { color: #6B4A00; }
.opcion-cerrado { border-color: var(--borde-suave); border-radius: 10px; box-shadow: 0 1px 2px rgba(15, 27, 45, 0.05); }
/* Total: tarjeta marina con brillo, la cifra grande y alineada */
.total-general {
  background-color: var(--azul);
  background-image: radial-gradient(ellipse 80% 160% at 100% 0, rgba(76, 141, 255, 0.35), rgba(76, 141, 255, 0));
  border-radius: 12px;
  padding: 14px 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 16px 32px -18px rgba(15, 27, 45, 0.7);
}
.total-general span { color: #B9C3D4; font-size: 0.92rem; }
.total-general strong { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; }
.input-total-cerrado { border-radius: 8px; }
.aviso-sugeridos { background: #FFF8E5; border-color: #F5D27A; }
#no-entendido-zona, #pendientes-zona { background: #FFF8E5; border-color: #F5D27A; }
#datos-presupuesto h3 { font-size: 1.05rem; }

/* En el ordenador, el importe a la altura del centro de las casillas */
@media (min-width: 701px) { .capitulo td.importe { padding-top: 22px; } }
@media (max-width: 700px) {
  /* Móvil: cada partida es una ficha dentro de la tarjeta del capítulo */
  .capitulo table { border: 0; border-radius: 0; }
  .capitulo tbody tr:not(.subtotal) { border-bottom: 1px solid #EEF0F3; padding: 14px 14px 12px; background: transparent; }
  .capitulo td { border: 0; padding: 4px 0; }
  #capitulos td.num input { height: 44px; }
  .capitulo tr.subtotal { background: #F7F8FA; padding: 12px 14px; }
  .btn-anadir-partida { margin-left: 14px; }
  .total-general strong { font-size: 1.35rem; }
}
@media (prefers-reduced-motion: reduce) {
  #lista-presupuestos .presupuesto-guardado { animation: none; }
}

/* ==================== Rediseño, capa 3: «Redactando partidas» ====================
   Caja marina con el brillo azul, el isotipo en el centro de un aro de rayitas que
   se van encendiendo en amarillo, y la barra amarilla con un reflejo que pasa.
   Solo cambia el aspecto: la barra y los textos los sigue moviendo app.js. */
.progreso {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 18px;
  color: #fff;
  background-color: var(--azul);
  background-image: radial-gradient(ellipse 80% 120% at 30% 0%, var(--brillo), rgba(66, 120, 220, 0));
  border: 1px solid var(--azul);
  border-radius: 12px;
  box-shadow: 0 20px 40px -24px rgba(15, 27, 45, 0.6);
}
.progreso[hidden] { display: none; }
.progreso-aro { position: relative; width: 104px; height: 104px; flex: none; }
.progreso-aro svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.progreso-aro line {
  stroke: rgba(255, 255, 255, 0.14);
  stroke-width: 3;
  stroke-linecap: round;
  animation: rayita-encender 2.4s linear infinite;
  animation-delay: calc(var(--i) * 0.06s);
}
@keyframes rayita-encender {
  0% { stroke: #F5B517; }
  25% { stroke: rgba(245, 181, 23, 0.35); }
  60%, 100% { stroke: rgba(255, 255, 255, 0.14); }
}
.progreso-aro img { position: absolute; left: 50%; top: 50%; width: 44px; height: auto; transform: translate(-50%, -50%); }
.progreso-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.progreso-titulo { margin: 0; font-size: 1.06rem; font-weight: 600; letter-spacing: -0.01em; }
.progreso-texto { margin: 0; font-size: 0.85rem; font-weight: 400; color: #B9C3D4; }
.progreso-barra { position: relative; height: 4px; margin-top: 4px; background: rgba(255, 255, 255, 0.1); border-radius: 999px; overflow: hidden; }
.progreso-relleno { position: relative; overflow: hidden; background: var(--amarillo); box-shadow: 0 0 12px rgba(245, 181, 23, 0.6); }
.progreso-relleno::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  transform: translateX(-100%);
  animation: barra-reflejo 2.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes barra-reflejo { to { transform: translateX(100%); } }
.progreso-nota { margin: 4px 0 0; font-size: 0.8rem; line-height: 1.45; color: #8C9AB3; }

/* Pasos: solo en el ordenador, donde sobra ancho. Hecho: tic verde. En curso: aro amarillo con punto. */
.progreso-pasos { display: none; list-style: none; margin: 0; padding: 0; flex: 0 1 250px; flex-direction: column; gap: 12px; font-size: 0.88rem; color: #8C9AB3; }
.progreso-pasos li { display: flex; align-items: center; gap: 10px; }
.progreso-pasos li::before {
  content: "";
  width: 20px; height: 20px; flex: none;
  border-radius: 999px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.18);
  background: center / 12px 12px no-repeat;
}
.progreso[data-paso="leer"] .paso-leer,
.progreso[data-paso="redactar"] .paso-redactar { color: #fff; font-weight: 600; }
.progreso[data-paso="leer"] .paso-leer::before,
.progreso[data-paso="redactar"] .paso-redactar::before {
  box-shadow: inset 0 0 0 2px var(--amarillo);
  background-image: radial-gradient(circle, var(--amarillo) 3.5px, transparent 4.5px);
  background-size: 100% 100%;
}
.progreso[data-paso="redactar"] .paso-leer,
.progreso[data-paso="listo"] li { color: #B9C3D4; }
.progreso[data-paso="redactar"] .paso-leer::before,
.progreso[data-paso="listo"] li::before {
  box-shadow: none;
  background-color: rgba(63, 199, 127, 0.18);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233FC77F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E");
}
@media (min-width: 760px) {
  .progreso { gap: 32px; padding: 24px 28px; }
  .progreso-aro { width: 124px; height: 124px; }
  .progreso-aro img { width: 52px; }
  .progreso-titulo { font-size: 1.35rem; }
  .progreso-texto { font-size: 0.9rem; }
  .progreso-pasos { display: flex; }
}
@media (max-width: 420px) {
  .progreso { gap: 14px; padding: 18px 14px; }
  .progreso-aro { width: 84px; height: 84px; }
  .progreso-aro img { width: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .progreso-aro line, .progreso-relleno::after { animation: none; }
  .progreso-aro line:nth-child(-n+10) { stroke: rgba(245, 181, 23, 0.7); }
}

/* ==================== Rediseño, capa 4: pantalla de entrar y primer día ====================
   Entrar: bloque marino con el brillo azul y una rejilla muy suave; la caja blanca sube un
   poco al aparecer. En el ordenador, mitad marina a la izquierda (con los tres pasos) y la
   caja a la derecha. En el móvil, los pasos no salen: el botón tiene que verse sin bajar. */
.pagina-entrar { background: var(--fondo); }
.entrar-lado {
  position: relative;
  overflow: hidden;
  color: #fff;
  background-color: var(--azul);
  background-image: radial-gradient(ellipse 90% 70% at 50% 0%, var(--brillo), rgba(66, 120, 220, 0));
}
.entrar-lado::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%);
  mask-image: linear-gradient(180deg, #000, transparent 85%);
  pointer-events: none;
}
.pagina-entrar header { position: relative; background: none; box-shadow: none; border: 0; }
.entrar-portada { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 8px 24px 84px; max-width: 520px; }
.entrar-antetitulo { margin: 0; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: #8C9AB3; }
.entrar-lema { margin: 0; font-size: 1.9rem; line-height: 1.08; font-weight: 600; letter-spacing: -0.035em; }
.entrar-pasos { display: none; list-style: none; margin: 18px 0 0; padding: 0; flex-direction: column; gap: 14px; font-size: 1rem; color: #D5DBE6; }
.entrar-pasos li { display: flex; align-items: center; gap: 12px; }
.entrar-punto { width: 32px; height: 32px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.05); color: var(--amarillo); }
.pagina-entrar main { position: relative; padding: 0 16px; }
.caja-entrar {
  position: relative;
  max-width: 420px;
  margin: -64px auto 0;
  padding: 24px 20px;
  background: #fff;
  border: 1px solid var(--borde-suave);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 27, 45, 0.05), 0 30px 60px -30px rgba(15, 27, 45, 0.45);
  text-align: left;
  animation: caja-subir 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}
@keyframes caja-subir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.caja-entrar h2 { margin: 0 0 6px; font-size: 1.4rem; font-weight: 600; letter-spacing: -0.02em; color: var(--azul); }
.caja-entrar .subtitulo-entrar { margin: 0 0 18px; font-size: 0.9rem; color: #5B6475; }
.caja-entrar .nota-entrar, .caja-entrar .ayuda-entrar { text-align: center; font-size: 0.82rem; line-height: 1.45; color: #5B6475; }
.caja-entrar .legal-entrar { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid #EEF0F3; text-align: center; font-size: 0.78rem; line-height: 1.5; color: #646C7D; }
.caja-entrar .legal-entrar a, .caja-entrar .ayuda-entrar a { color: var(--azul); }
.campo-entrar {
  display: block;
  width: 100%;
  box-sizing: border-box;
  height: 52px;
  margin-bottom: 12px;
  padding: 0 14px;
  font: inherit;
  font-size: 1rem;
  color: var(--azul);
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.campo-entrar:focus { outline: none; border-color: var(--azul); box-shadow: var(--anillo); }
.campo-codigo { text-align: center; }
.btn-entrar { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 54px; padding: 14px; font-size: 1rem; }
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; box-sizing: border-box; height: 52px;
  font-size: 0.95rem; font-weight: 600; color: var(--azul); text-decoration: none;
  background: #fff; border: 1px solid var(--borde); border-radius: 10px;
  box-shadow: 0 1px 2px rgba(15, 27, 45, 0.05);
  transition: transform 0.3s var(--rebote), border-color 0.18s ease, box-shadow 0.2s ease;
}
.btn-google:hover { transform: translateY(-1px); border-color: #C5CBD6; box-shadow: 0 4px 12px -4px rgba(15, 27, 45, 0.15); }
.btn-google:active { transform: scale(0.96); transition-duration: 0.08s; background: #F7F8FA; }
.separador-entrar { display: flex; align-items: center; gap: 12px; margin: 14px 0; font-size: 0.82rem; color: #646C7D; }
.separador-entrar::before, .separador-entrar::after { content: ""; flex: 1; height: 1px; background: var(--borde-suave); }
.pagina-entrar .pie-legal { padding-top: 24px; }

@media (min-width: 900px) {
  .pagina-entrar { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; min-height: 100vh; }
  .entrar-lado {
    grid-row: 1 / 3;
    display: flex; flex-direction: column; justify-content: space-between;
    min-height: 100vh; box-sizing: border-box; padding: 24px 32px 48px;
    background-image: radial-gradient(ellipse 80% 60% at 15% 10%, var(--brillo), rgba(66, 120, 220, 0));
  }
  .entrar-lado::before { -webkit-mask-image: radial-gradient(ellipse at 20% 20%, #000, transparent 70%); mask-image: radial-gradient(ellipse at 20% 20%, #000, transparent 70%); background-size: 32px 32px; }
  .pagina-entrar header { padding: 0; }
  .pagina-entrar .marca-logo { height: 28px; }
  .entrar-portada { gap: 14px; padding: 0 24px 0 0; margin-bottom: auto; margin-top: 18vh; }
  .entrar-lema { font-size: 3.2rem; line-height: 1.04; letter-spacing: -0.04em; }
  .entrar-pasos { display: flex; }
  .pagina-entrar main { display: flex; align-items: center; justify-content: center; padding: 40px 24px; max-width: none; margin: 0; }
  .caja-entrar { width: 100%; margin: 0; padding: 32px; }
  .caja-entrar h2 { font-size: 1.6rem; }
  .pagina-entrar .pie-legal { grid-column: 2; padding: 0 16px 28px; }
}

/* Primer día: caja de borde discontinuo con los tres pasos numerados */
.primer-dia { margin: 4px 0 0; padding: 24px 20px; background: #fff; border: 1.5px dashed #C9CED8; border-radius: 12px; }
.primer-dia h2 { margin: 0 0 6px; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; color: var(--azul); }
.primer-dia .explicacion { margin: 0 0 20px; font-size: 0.9rem; line-height: 1.5; color: #5B6475; }
.primer-pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; counter-reset: paso; }
.primer-pasos li { position: relative; padding-left: 44px; min-height: 30px; font-size: 0.88rem; line-height: 1.45; color: #5B6475; counter-increment: paso; }
.primer-pasos li::before {
  content: counter(paso);
  position: absolute; left: 0; top: 0;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: var(--azul); color: var(--amarillo);
  font-weight: 600; font-variant-numeric: tabular-nums;
}
.primer-pasos strong { display: block; margin-bottom: 2px; font-size: 0.95rem; font-weight: 600; color: var(--azul); }
@media (min-width: 900px) {
  .primer-pasos { flex-direction: row; gap: 24px; }
  .primer-pasos li { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .caja-entrar { animation: none; }
  .btn-google { transition: none; transform: none; }
}

/* ==================== Rediseño, capa 4: Ajustes con franja marina ==================== */
.portada-ajustes {
  color: #fff;
  margin: -24px calc(50% - 50vw) 18px;
  padding: 8px calc(50vw - 50%) 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.portada-ajustes h2 { margin: 0; font-size: 1.7rem; line-height: 1.12; font-weight: 600; letter-spacing: -0.025em; color: #fff; }
@media (max-width: 700px) { .portada-ajustes { margin-top: -16px; } }

/* ==================== Rediseño, capa 4: la pantalla del apunte ====================
   «Añadir fotos o archivos» como una tarjeta con su icono marino, y «Cómo lo redacto»
   con las dos maneras como tarjetas: la elegida, con borde marino. */
#zona-entrada .rotulo { font-size: 0.95rem; font-weight: 600; }
#zona-entrada .foto-zona {
  gap: 14px;
  padding: 14px;
  border: 1.5px dashed #C9CED8;
  border-radius: 12px;
  transition: transform 0.3s var(--rebote), border-color 0.18s ease, box-shadow 0.2s ease;
}
#zona-entrada .foto-zona.activa:hover { border-color: var(--azul); box-shadow: var(--sombra-tarjeta); }
#zona-entrada .foto-zona.activa:active { transform: scale(0.98); transition-duration: 0.08s; }
#zona-entrada .foto-icono { width: 44px; height: 44px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--azul); color: #fff; }
.foto-textos { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.foto-textos strong { font-size: 0.95rem; font-weight: 600; color: var(--azul); }
.foto-detalle { font-size: 0.82rem; color: #5B6475; }
#zona-entrada .modo { padding: 0; border: 0; background: none; box-shadow: none; display: flex; flex-direction: column; gap: 8px; }
#zona-entrada .modo legend { margin-bottom: 10px; padding: 0; font-size: 0.95rem; font-weight: 600; }
#zona-entrada .modo label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 10px;
  transition: transform 0.3s var(--rebote), border-color 0.18s ease, background-color 0.18s ease;
}
#zona-entrada .modo label:active { transform: scale(0.98); transition-duration: 0.08s; }
#zona-entrada .modo label:has(input:checked) { border-color: var(--azul); box-shadow: 0 0 0 1px var(--azul); }
#zona-entrada .modo input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--azul); }
.modo-textos { display: flex; flex-direction: column; gap: 4px; }
.modo-textos strong { font-size: 0.95rem; font-weight: 600; color: var(--azul); }
.modo-textos > span { font-size: 0.86rem; line-height: 1.45; color: #5B6475; }
@media (hover: none) { #zona-entrada .foto-zona.activa:hover { box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { #zona-entrada .foto-zona, #zona-entrada .modo label { transition: none; transform: none; } }
@media (min-width: 900px) {
  #zona-entrada .modo { display: grid; grid-template-columns: 1fr 1fr; }
  #zona-entrada .modo legend { grid-column: 1 / -1; }
}

/* ==================== Rediseño, capa 4: los avisos ====================
   Todas las ventanas (¿Quién eres?, Ayuda, opinión, datos de la empresa, icono...) usan la misma
   capa. En el móvil suben desde abajo como una hoja, con su tirador; en el ordenador, tarjeta
   centrada. Fondo con un velo marino algo desenfocado. Entrada corta: sube un poco y aparece. */
.capa-perfil { background: rgba(8, 14, 24, 0.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.caja-perfil {
  border-radius: 14px;
  padding: 24px 22px;
  gap: 12px;
  box-shadow: 0 30px 60px -20px rgba(8, 14, 24, 0.5);
  animation: hoja-sube 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
@keyframes hoja-sube { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.caja-perfil h2 { font-size: 1.45rem; font-weight: 600; letter-spacing: -0.025em; color: var(--azul); }
.caja-perfil .explicacion { color: #5B6475; font-size: 0.92rem; }
.btn-perfil {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #fff;
  border-radius: 10px;
  transition: transform 0.3s var(--rebote), border-color 0.18s ease, background-color 0.18s ease;
}
.btn-perfil::after {
  content: "";
  flex: none;
  width: 18px; height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23646C7D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.btn-perfil:hover { outline: none; border-color: var(--azul); background: #F7F8FA; }
@media (max-width: 700px) {
  .capa-perfil { padding: 0; }
  .caja-perfil {
    margin: auto 0 0;
    max-width: none;
    border-radius: 16px 16px 0 0;
    padding: 10px 16px calc(24px + env(safe-area-inset-bottom));
    box-shadow: 0 -20px 50px -20px rgba(8, 14, 24, 0.5);
  }
  .caja-perfil::before { content: ""; align-self: center; flex: none; width: 40px; height: 4px; margin-bottom: 6px; border-radius: 999px; background: #D5D9E0; }
  /* los botones fijos de abajo de la ventana de datos, al mismo margen que la hoja */
  .botones-ventana { margin: 0 -16px calc(-24px - env(safe-area-inset-bottom)); padding: 12px 16px calc(24px + env(safe-area-inset-bottom)); border-radius: 0; }
}
/* en el ordenador, al margen nuevo de la tarjeta (22 px a los lados, 24 abajo) */
@media (min-width: 701px) { .botones-ventana { margin: 0 -22px -24px; padding: 12px 22px 24px; border-radius: 0 0 14px 14px; } }
@media (hover: none) { .btn-perfil:hover { background: #fff; border-color: var(--borde); } }
@media (prefers-reduced-motion: reduce) { .caja-perfil { animation: none; } .btn-perfil { transition: none; } }

/* ==================== El número del presupuesto, en su cajetín (Miquel, 29/10/2026) ====================
   No forma parte del título ni se cambia con el lápiz: va aparte, pequeño y en cifras. */
.numero-presupuesto {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  width: fit-content;
  padding: 3px 8px;
  font-family: var(--letra-cifras);
  font-variant-numeric: tabular-nums;
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: #3A4456;
  background: #F3F4F6;
  border: 1px solid var(--borde);
  border-radius: 6px;
  max-width: 100%;
  overflow-wrap: anywhere; /* un número largo escrito a mano parte la línea y no se sale de la tarjeta */
}
.numero-presupuesto[hidden] { display: none; }
.abrir-presupuesto .numero-presupuesto { margin-bottom: 6px; color: #3A4456; font-size: 0.74rem; white-space: normal; } /* (la regla vieja de los span de la tarjeta no lo deja partir) */
.cabecera-datos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 4px; }
.cabecera-datos .meta-presupuesto { margin: 0; }
.portada-editor .numero-presupuesto { color: #D5DBE6; background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.18); }