/* ==========================================================================
   Pizisi – estilos web pública + área clientes + panel admin
   ========================================================================== */
:root {
  --azul-900: #062f42;
  --azul-800: #08435d;
  --azul-700: #0b5c7d;
  --azul-500: #0e88b0;
  --aqua: #1fc2e3;
  --aqua-100: #d9f4fa;
  --aqua-50: #eef9fc;
  --arena: #f2b45a;
  --arena-50: #fdf4e6;
  --texto: #15303c;
  --texto-2: #4c6570;
  --muted: #7c929b;
  --borde: #dce8ed;
  --fondo: #f4f8fa;
  --blanco: #ffffff;
  --ok: #138a5a;
  --ok-50: #e3f5ec;
  --warn: #a86a00;
  --warn-50: #fdf1dc;
  --err: #c23b3b;
  --err-50: #fbe7e7;
  --violeta: #5a4bb5;
  --violeta-50: #ece9fa;
  --radio: 14px;
  --sombra: 0 1px 2px rgba(6, 47, 66, .06), 0 8px 24px rgba(6, 47, 66, .06);
  --fuente: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fuente-titulo: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--fuente);
  color: var(--texto);
  background: var(--blanco);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--azul-500); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--fuente-titulo); line-height: 1.2; margin: 0 0 .5em; color: var(--azul-900); }
p { margin: 0 0 1em; }
small, .muted { color: var(--muted); }
.contenedor { width: min(1160px, 100% - 32px); margin-inline: auto; }

/* ---- Botones ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .7em 1.25em; border-radius: 999px; border: 1.5px solid transparent;
  font: 600 .95rem var(--fuente); cursor: pointer; text-decoration: none !important;
  transition: background .15s, color .15s, border-color .15s, transform .15s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primario { background: var(--azul-700); color: #fff; }
.btn-primario:hover { background: var(--azul-800); }
.btn-aqua { background: var(--aqua); color: var(--azul-900); }
.btn-aqua:hover { background: #4fd2ec; }
.btn-arena { background: var(--arena); color: var(--azul-900); }
.btn-arena:hover { background: #f5c37a; }
.btn-borde { background: transparent; border-color: var(--borde); color: var(--azul-800); }
.btn-borde:hover { border-color: var(--azul-500); background: var(--aqua-50); }
.btn-blanco { background: #fff; color: var(--azul-800); }
.btn-peligro { background: transparent; color: var(--err); border-color: #efc4c4; }
.btn-peligro:hover { background: var(--err-50); }
.btn-sm { padding: .45em .9em; font-size: .85rem; }
.btn-bloque { width: 100%; }

/* ---- Formularios -------------------------------------------------------- */
label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .35em; color: var(--azul-900); }
.campo { margin-bottom: 1rem; }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number],
input[type=date], input[type=search], input[type=file], select, textarea {
  width: 100%; padding: .7em .85em; border: 1.5px solid var(--borde); border-radius: 10px;
  font: inherit; color: var(--texto); background: #fff; transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--azul-500); box-shadow: 0 0 0 3px rgba(14, 136, 176, .15);
}
textarea { min-height: 110px; resize: vertical; }
.check { display: flex; align-items: center; gap: .5em; font-weight: 500; }
.check input { width: 18px; height: 18px; accent-color: var(--azul-700); }
.fila { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.ayuda { font-size: .82rem; color: var(--muted); margin-top: .3em; }

/* ---- Avisos (flash) ----------------------------------------------------- */
.avisos { display: grid; gap: .5rem; margin: 1rem 0; }
.aviso { padding: .8em 1em; border-radius: 10px; font-weight: 500; border: 1px solid; }
.aviso-ok { background: var(--ok-50); color: var(--ok); border-color: #bfe6d2; }
.aviso-error { background: var(--err-50); color: var(--err); border-color: #f1c6c6; }
.toasts { position: fixed; top: 84px; right: 16px; z-index: 100; width: min(400px, calc(100% - 32px)); margin: 0; }
.toasts .aviso { box-shadow: var(--sombra); cursor: pointer; animation: entrar .25s ease-out; }
@keyframes entrar { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---- Badges ------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: .35em; padding: .2em .65em; border-radius: 999px;
  font-size: .78rem; font-weight: 600; white-space: nowrap; background: var(--fondo); color: var(--texto-2);
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-nueva, .badge-planificado { background: var(--aqua-100); color: var(--azul-700); }
.badge-en_revision, .badge-pausado { background: var(--warn-50); color: var(--warn); }
.badge-presupuesto_enviado { background: var(--violeta-50); color: var(--violeta); }
.badge-aceptada, .badge-finalizado { background: var(--ok-50); color: var(--ok); }
.badge-en_curso { background: #e1efff; color: #1d5fb0; }
.badge-rechazada { background: var(--err-50); color: var(--err); }
.badge-cerrada { background: #eef1f3; color: #5f6f77; }
.badge-tipo { background: var(--arena-50); color: #8a5a10; }
.badge-tipo::before { display: none; }
.badge-canal-web { background: var(--aqua-100); color: var(--azul-700); }
.badge-canal-whatsapp { background: #dcf8e7; color: #128c4a; }
.badge-canal-email { background: var(--violeta-50); color: var(--violeta); }
.badge-canal-telefono { background: var(--arena-50); color: #8a5a10; }

/* ==========================================================================
   WEB PÚBLICA
   ========================================================================== */
.cabecera {
  position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--borde);
}
.cabecera .contenedor { display: flex; align-items: center; gap: 1.5rem; height: 70px; }
.logo { display: flex; align-items: center; gap: .55rem; font: 800 1.45rem var(--fuente-titulo); color: var(--azul-900) !important; text-decoration: none !important; letter-spacing: -.02em; }
.logo svg { width: 34px; height: 34px; }
.logo span { color: var(--azul-500); }
.nav { display: flex; gap: 1.4rem; margin-left: auto; align-items: center; }
.nav a { color: var(--texto-2); font-weight: 500; font-size: .95rem; }
.nav a:hover { color: var(--azul-700); text-decoration: none; }
.nav-acciones { display: flex; gap: .6rem; align-items: center; }
.menu-toggle { display: none; background: none; border: 0; padding: .4rem; cursor: pointer; margin-left: auto; color: var(--azul-900); }

.hero {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(31, 194, 227, .45), transparent 60%),
    linear-gradient(160deg, var(--azul-900) 0%, var(--azul-700) 60%, var(--azul-500) 100%);
}
.hero .contenedor { display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: center; padding: 5.5rem 0 7.5rem; }
.hero h1 { color: #fff; font-size: clamp(2.2rem, 4.6vw, 3.6rem); letter-spacing: -.03em; }
.hero h1 em { font-style: normal; color: var(--aqua); }
.hero p.lead { font-size: 1.15rem; color: #cfe9f2; max-width: 34em; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.6rem; }
.hero-cifras { display: flex; gap: 2.2rem; margin-top: 2.4rem; flex-wrap: wrap; }
.hero-cifras strong { display: block; font: 800 1.8rem var(--fuente-titulo); color: #fff; }
.hero-cifras span { font-size: .85rem; color: #a9d4e3; }
.hero-tarjeta {
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); border-radius: 22px;
  padding: 1.6rem; backdrop-filter: blur(6px);
}
.hero-tarjeta h3 { color: #fff; font-size: 1.15rem; }
.hero-tarjeta ul { list-style: none; padding: 0; margin: 0 0 1.2rem; display: grid; gap: .7rem; }
.hero-tarjeta li { display: flex; gap: .7rem; align-items: flex-start; color: #e1f3f8; }
.hero-tarjeta li svg { flex: none; margin-top: 3px; color: var(--aqua); }
.ola { position: absolute; bottom: -1px; left: 0; width: 100%; height: 90px; }

.seccion { padding: 5.5rem 0; }
.seccion-alt { background: var(--fondo); }
.seccion-cabecera { text-align: center; max-width: 640px; margin: 0 auto 3rem; }
.seccion-cabecera .eyebrow { display: inline-block; font-weight: 700; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--azul-500); margin-bottom: .6rem; }
.seccion-cabecera h2 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); letter-spacing: -.02em; }
.seccion-cabecera p { color: var(--texto-2); font-size: 1.05rem; }

.servicios { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.2rem; }
.servicio {
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.5rem;
  transition: transform .2s, box-shadow .2s, border-color .2s; display: flex; flex-direction: column;
}
.servicio:hover { transform: translateY(-3px); box-shadow: var(--sombra); border-color: var(--aqua-100); }
.servicio .icono { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--aqua-50); color: var(--azul-700); margin-bottom: 1rem; }
.servicio h3 { font-size: 1.08rem; }
.servicio p { color: var(--texto-2); font-size: .93rem; flex: 1; }
.servicio a { font-weight: 600; font-size: .9rem; }

.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 1.4rem; }
.trabajo { border-radius: var(--radio); overflow: hidden; background: #fff; border: 1px solid var(--borde); transition: box-shadow .2s, transform .2s; }
.trabajo:hover { box-shadow: var(--sombra); transform: translateY(-3px); }
.trabajo-img { aspect-ratio: 16 / 10; position: relative; overflow: hidden; }
.trabajo-img img { width: 100%; height: 100%; object-fit: cover; }
.trabajo-img .badge { position: absolute; top: .8rem; left: .8rem; background: rgba(255, 255, 255, .92); color: var(--azul-800); }
.trabajo-img .badge::before { display: none; }
.trabajo-cuerpo { padding: 1.1rem 1.25rem 1.3rem; }
.trabajo-cuerpo h3 { font-size: 1.08rem; margin-bottom: .3em; }
.trabajo-cuerpo p { color: var(--texto-2); font-size: .92rem; margin-bottom: .6em; }
.trabajo-meta { font-size: .82rem; color: var(--muted); display: flex; gap: 1rem; }

/* Imagen de relleno para trabajos sin foto */
.placeholder { width: 100%; height: 100%; display: grid; place-items: center; color: rgba(255, 255, 255, .9);
  background: linear-gradient(160deg, #0b5c7d, #1fc2e3); }
.placeholder svg { width: 38%; max-width: 140px; opacity: .85; }
.ph-1 { background: linear-gradient(160deg, #08435d, #1fc2e3); }
.ph-2 { background: linear-gradient(160deg, #0b5c7d, #5fd3c4); }
.ph-3 { background: linear-gradient(160deg, #164e7a, #4aa8e8); }
.ph-4 { background: linear-gradient(160deg, #0e6f84, #8fe0ef); }
.ph-5 { background: linear-gradient(160deg, #0a3b52, #2bb6a3); }
.ph-6 { background: linear-gradient(160deg, #1d4f91, #5fc6f0); }
.ph-7 { background: linear-gradient(160deg, #6a3e10, #f2b45a); }
.ph-0 { background: linear-gradient(160deg, #273e4a, #7aa3b3); }

.filtros { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: 2.2rem; }
.filtros a { padding: .45em 1em; border-radius: 999px; border: 1.5px solid var(--borde); color: var(--texto-2); font-size: .88rem; font-weight: 500; }
.filtros a:hover { border-color: var(--azul-500); text-decoration: none; }
.filtros a.activo { background: var(--azul-700); border-color: var(--azul-700); color: #fff; }

.pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; counter-reset: paso; }
.paso { position: relative; padding: 1.5rem 1.3rem 1.3rem; border-radius: var(--radio); background: #fff; border: 1px solid var(--borde); }
.paso::before { counter-increment: paso; content: counter(paso); display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--azul-700); color: #fff; font-weight: 700; margin-bottom: .9rem; }
.paso h3 { font-size: 1.05rem; }
.paso p { color: var(--texto-2); font-size: .93rem; margin: 0; }

.nosotros { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; }
.nosotros-visual { border-radius: 24px; aspect-ratio: 5 / 4; overflow: hidden; position: relative; }
.nosotros-visual .sello { position: absolute; right: 1.2rem; bottom: 1.2rem; background: #fff; border-radius: 16px; padding: 1rem 1.2rem; box-shadow: var(--sombra); }
.nosotros-visual .sello strong { display: block; font: 800 1.6rem var(--fuente-titulo); color: var(--azul-700); }
.lista-check { list-style: none; padding: 0; margin: 1.2rem 0 1.6rem; display: grid; gap: .7rem; }
.lista-check li { display: flex; gap: .65rem; }
.lista-check svg { flex: none; color: var(--ok); margin-top: 3px; }

.opiniones { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.2rem; }
.opinion { background: #fff; border-radius: var(--radio); padding: 1.5rem; border: 1px solid var(--borde); }
.opinion .estrellas { color: var(--arena); letter-spacing: 2px; margin-bottom: .6rem; }
.opinion p { color: var(--texto-2); font-style: italic; }
.opinion strong { font-size: .9rem; }

.cta-banda { background: linear-gradient(120deg, var(--azul-800), var(--azul-500)); color: #fff; border-radius: 24px; padding: 3rem; display: flex; gap: 2rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.cta-banda h2 { color: #fff; margin: 0 0 .3em; }
.cta-banda p { margin: 0; color: #cfe9f2; }

.contacto { display: grid; grid-template-columns: .9fr 1.1fr; gap: 3rem; }
.contacto-datos { display: grid; gap: 1rem; align-content: start; }
.dato { display: flex; gap: .9rem; align-items: flex-start; }
.dato .icono { width: 42px; height: 42px; border-radius: 12px; background: var(--aqua-50); color: var(--azul-700); display: grid; place-items: center; flex: none; }
.dato strong { display: block; color: var(--azul-900); }
.dato span { color: var(--texto-2); font-size: .93rem; }

.tarjeta { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.6rem; box-shadow: var(--sombra); }

.pie { background: var(--azul-900); color: #9fc0cc; padding: 3.5rem 0 2rem; margin-top: 0; }
.pie .contenedor { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; }
.pie .logo { color: #fff !important; }
.pie h4 { color: #fff; font-size: .95rem; }
.pie a { color: #9fc0cc; display: block; margin-bottom: .4rem; font-size: .92rem; }
.pie a:hover { color: #fff; }
.pie-legal { border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 2.5rem; padding-top: 1.5rem; font-size: .82rem; text-align: center; }

.whatsapp { position: fixed; right: 20px; bottom: 20px; width: 56px; height: 56px; border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; box-shadow: 0 6px 20px rgba(0, 0, 0, .2); z-index: 60; }
.whatsapp:hover { transform: scale(1.06); }

/* ---- Autenticación ---------------------------------------------------- */
.auth { min-height: calc(100vh - 70px); display: grid; place-items: center; padding: 3rem 16px; background: linear-gradient(180deg, var(--aqua-50), #fff); }
.auth .tarjeta { width: min(480px, 100%); padding: 2.2rem; }
.auth h1 { font-size: 1.7rem; }
.auth .sub { color: var(--texto-2); margin-bottom: 1.5rem; }
.auth .pie-auth { text-align: center; margin-top: 1.2rem; font-size: .93rem; color: var(--texto-2); }

/* ---- Área de clientes ------------------------------------------------- */
.area { background: var(--fondo); min-height: calc(100vh - 70px); padding: 2.5rem 0 4rem; }
.area-cabecera { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: 1.8rem; }
.area-cabecera h1 { font-size: 1.9rem; margin: 0; }
.acciones-rapidas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.accion { display: flex; gap: 1rem; align-items: center; padding: 1.3rem; border-radius: var(--radio); background: #fff; border: 1px solid var(--borde); color: var(--texto); transition: border-color .15s, box-shadow .15s; }
.accion:hover { border-color: var(--aqua); box-shadow: var(--sombra); text-decoration: none; }
.accion .icono { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--aqua-50); color: var(--azul-700); flex: none; }
.accion strong { display: block; color: var(--azul-900); }
.accion span { font-size: .88rem; color: var(--texto-2); }

.lista-solicitudes { display: grid; gap: .8rem; }
.item-solicitud { display: grid; grid-template-columns: 1fr auto; gap: .5rem 1rem; align-items: center; padding: 1.1rem 1.3rem; background: #fff; border: 1px solid var(--borde); border-radius: 12px; color: var(--texto); }
.item-solicitud:hover { border-color: var(--azul-500); text-decoration: none; }
.item-solicitud h3 { font-size: 1rem; margin: 0 0 .2em; }
.item-solicitud .meta { font-size: .85rem; color: var(--muted); display: flex; gap: .8rem; flex-wrap: wrap; }

.vacio { text-align: center; padding: 2.5rem 1rem; color: var(--muted); background: #fff; border: 1.5px dashed var(--borde); border-radius: var(--radio); }

.chat { display: grid; gap: .8rem; margin-bottom: 1rem; }
.msg { max-width: 80%; padding: .8rem 1rem; border-radius: 14px; background: var(--fondo); }
.msg.yo { margin-left: auto; background: var(--aqua-100); }
.msg .autor { font-size: .78rem; font-weight: 600; color: var(--texto-2); margin-bottom: .2rem; }
.msg p { margin: 0; white-space: pre-wrap; }

.presupuesto-box { background: linear-gradient(135deg, var(--violeta-50), #fff); border: 1px solid #d8d2f5; border-radius: var(--radio); padding: 1.4rem; margin-bottom: 1.2rem; }
.presupuesto-box .importe { font: 800 2rem var(--fuente-titulo); color: var(--azul-900); }

.dl { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1.2rem; margin: 0; font-size: .93rem; }
.dl dt { color: var(--muted); }
.dl dd { margin: 0; color: var(--texto); }

.dos-columnas { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.4rem; align-items: start; }
.pila { display: grid; gap: 1.4rem; }

/* ==========================================================================
   PANEL ADMIN
   ========================================================================== */
.admin { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; background: var(--fondo); }
.lateral { background: var(--azul-900); color: #a9c7d2; padding: 1.4rem 1rem; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; }
.lateral .logo { color: #fff !important; padding: 0 .5rem 1.4rem; font-size: 1.3rem; }
.lateral .logo small { display: block; font: 500 .7rem var(--fuente); letter-spacing: .1em; text-transform: uppercase; color: #6f97a6; }
.lateral nav { display: grid; gap: .2rem; }
.lateral nav .grupo { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: #5f8796; padding: 1rem .75rem .4rem; }
.lateral nav a { display: flex; align-items: center; gap: .7rem; padding: .6rem .75rem; border-radius: 10px; color: #b6d1db; font-weight: 500; font-size: .93rem; }
.lateral nav a:hover { background: rgba(255, 255, 255, .06); color: #fff; text-decoration: none; }
.lateral nav a.activo { background: rgba(31, 194, 227, .16); color: #fff; }
.lateral nav a .contador { margin-left: auto; background: var(--arena); color: var(--azul-900); font-size: .72rem; font-weight: 700; padding: .05em .55em; border-radius: 999px; }
.lateral .usuario { margin-top: auto; padding: .9rem .75rem 0; border-top: 1px solid rgba(255, 255, 255, .08); font-size: .85rem; }
.lateral .usuario a { color: #b6d1db; }

.principal { padding: 1.8rem 2.2rem 3rem; min-width: 0; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.topbar h1 { font-size: 1.6rem; margin: 0; }
.topbar .sub { color: var(--muted); font-size: .9rem; margin: .2rem 0 0; }
.topbar-acciones { display: flex; gap: .5rem; flex-wrap: wrap; }

.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem; margin-bottom: 1.4rem; }
.kpi { background: #fff; border-radius: var(--radio); padding: 1.15rem 1.25rem; border: 1px solid var(--borde); }
.kpi .etiqueta { font-size: .82rem; color: var(--texto-2); font-weight: 500; display: flex; align-items: center; gap: .45rem; }
.kpi .etiqueta svg { color: var(--azul-500); }
.kpi .valor { font: 800 1.75rem var(--fuente-titulo); color: var(--azul-900); margin: .35rem 0 .1rem; letter-spacing: -.02em; }
.kpi .detalle { font-size: .8rem; color: var(--muted); }
.kpi.destacado { background: linear-gradient(140deg, var(--azul-800), var(--azul-500)); border: 0; }
.kpi.destacado .etiqueta, .kpi.destacado .detalle { color: #bfe3ef; }
.kpi.destacado .etiqueta svg { color: var(--aqua); }
.kpi.destacado .valor { color: #fff; }

.panel { background: #fff; border-radius: var(--radio); border: 1px solid var(--borde); padding: 1.3rem 1.4rem; min-width: 0; }
.panel-cabecera { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.panel-cabecera h2 { font-size: 1.05rem; margin: 0; }
.panel-cabecera a { font-size: .85rem; font-weight: 600; }
.rejilla { display: grid; gap: 1.2rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 1.2rem; }
.rejilla-3 { grid-template-columns: 2fr 1fr; }
.grafico { position: relative; height: 250px; }

.tabla-envoltorio { overflow-x: auto; margin: 0 -1.4rem; padding: 0 1.4rem; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th { text-align: left; font-weight: 600; color: var(--muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; padding: .6rem .7rem; border-bottom: 1px solid var(--borde); white-space: nowrap; }
td { padding: .75rem .7rem; border-bottom: 1px solid #edf3f5; vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #f8fbfc; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.celda-cliente { display: flex; align-items: center; gap: .65rem; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--aqua-100); color: var(--azul-700); display: grid; place-items: center; font-weight: 700; font-size: .78rem; flex: none; }
.celda-cliente strong { display: block; color: var(--azul-900); font-weight: 600; }
.celda-cliente small { font-size: .8rem; }

.barra-filtros { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.barra-filtros input, .barra-filtros select { width: auto; min-width: 180px; padding: .55em .8em; }
.pestanas { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: 1rem; border-bottom: 1px solid var(--borde); }
.pestanas a { padding: .6rem .9rem; color: var(--texto-2); font-weight: 500; font-size: .9rem; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.pestanas a:hover { color: var(--azul-700); text-decoration: none; }
.pestanas a.activo { color: var(--azul-700); border-color: var(--azul-700); }
.pestanas a span { color: var(--muted); font-size: .8rem; margin-left: .2rem; }

.kanban { display: grid; grid-template-columns: repeat(4, minmax(240px, 1fr)); gap: 1rem; overflow-x: auto; padding-bottom: .5rem; }
.columna { background: #e9f1f4; border-radius: var(--radio); padding: .9rem; min-height: 200px; }
.columna-cabecera { display: flex; justify-content: space-between; align-items: center; margin-bottom: .8rem; padding: 0 .2rem; }
.columna-cabecera strong { font-size: .92rem; color: var(--azul-900); }
.columna-cabecera small { font-size: .78rem; }
.tarjeta-proyecto { display: block; background: #fff; border-radius: 12px; padding: .9rem 1rem; margin-bottom: .7rem; border: 1px solid var(--borde); color: var(--texto); }
.tarjeta-proyecto:hover { border-color: var(--azul-500); text-decoration: none; box-shadow: var(--sombra); }
.tarjeta-proyecto h4 { font-size: .93rem; margin: 0 0 .3rem; }
.tarjeta-proyecto .meta { font-size: .8rem; color: var(--muted); display: flex; justify-content: space-between; gap: .5rem; }
.tarjeta-proyecto .importe { font-weight: 700; color: var(--azul-800); }
/* Botón «→ siguiente estado» en la esquina de la tarjeta (fuera del enlace) */
.tarjeta-envoltura { position: relative; }
.tarjeta-proyecto .importe-clic { cursor: pointer; border-bottom: 1px dashed currentColor; }
.tarjeta-proyecto .importe-clic:hover { color: var(--azul-500); }
.dto-enlaces { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }
.tarjeta-envoltura .tarjeta-proyecto { padding-bottom: 2.3rem; }
.tarjeta-avanzar { position: absolute; right: .6rem; bottom: .55rem; z-index: 1; margin: 0; }
.tarjeta-avanzar button { border: 1px solid var(--borde); background: var(--fondo); color: var(--azul-700); border-radius: 999px; padding: .15rem .6rem; font-size: .75rem; font-weight: 600; cursor: pointer; }
.tarjeta-avanzar button:hover { background: var(--azul-700); border-color: var(--azul-700); color: #fff; }

.embudo { display: grid; gap: .7rem; }
.embudo-fila { display: grid; grid-template-columns: 160px 1fr 50px; gap: .8rem; align-items: center; font-size: .88rem; }
.embudo-barra { height: 26px; background: #edf3f5; border-radius: 6px; overflow: hidden; }
.embudo-barra div { height: 100%; background: #2a78d6; border-radius: 0 4px 4px 0; min-width: 4px; }
.embudo-fila .num { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

.lista-simple { list-style: none; margin: 0; padding: 0; }
.lista-simple li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid #edf3f5; }
.lista-simple li:last-child { border-bottom: 0; }
.lista-simple strong { color: var(--azul-900); font-weight: 600; font-size: .92rem; }
.lista-simple small { display: block; }

.portfolio-admin { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.portfolio-admin .trabajo-cuerpo { padding: .9rem 1rem 1rem; }
.portfolio-admin .acciones { display: flex; gap: .4rem; justify-content: space-between; align-items: center; margin-top: .6rem; }

/* ---- Presupuestos ------------------------------------------------------ */
.badge-p-borrador { background: #eef1f3; color: #5f6f77; }
.badge-p-enviado { background: var(--violeta-50); color: var(--violeta); }
.badge-p-aceptado { background: var(--ok-50); color: var(--ok); }
.badge-p-rechazado { background: var(--err-50); color: var(--err); }
.aviso-fecha { font-size: .78rem; font-weight: 600; white-space: nowrap; }
.aviso-fecha.vencido { color: var(--err); }
.aviso-fecha.hoy { color: var(--warn); }
.aviso-fecha.futuro { color: var(--muted); font-weight: 500; }

.selector-modo { display: inline-flex; background: var(--fondo); border-radius: 999px; padding: 3px; margin-bottom: 1rem; }
.selector-modo label { margin: 0; padding: .4em 1em; border-radius: 999px; cursor: pointer; font-size: .85rem; color: var(--texto-2); }
.selector-modo input { display: none; }
.selector-modo input:checked + span { color: #fff; }
.selector-modo label:has(input:checked) { background: var(--azul-700); color: #fff; }

/* Semáforo de presupuestos: verde a tiempo, amarillo moverse pronto, rojo retrasado, gris rechazado */
.leyenda-semaforo { display: flex; flex-wrap: wrap; gap: .5rem; margin: .4rem 0 .8rem; }
.sem { display: inline-flex; align-items: center; gap: .4em; padding: .25em .7em; border-radius: 999px;
       font-size: .8rem; font-weight: 600; white-space: nowrap; }
.sem::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.sem b { font-weight: 800; }
.sem-sm { font-size: .72rem; padding: .15em .55em; margin-top: .25em; }
.sem-verde { background: #e3f6ec; color: #138a5a; }
.sem-amarillo { background: #fff4d6; color: #a86a00; }
.sem-rojo { background: #fde6e6; color: #c23b3b; }
.sem-gris { background: #eef1f3; color: #5f6f77; }
.tabla-semaforo tr.fila-verde td { background: #f3fbf7; }
.tabla-semaforo tr.fila-amarillo td { background: #fffaf0; }
.tabla-semaforo tr.fila-rojo td { background: #fff5f5; }
.tabla-semaforo tr.fila-gris td { background: #f7f9fa; color: var(--texto-2); }
.tabla-semaforo tr td:first-child { border-left: 5px solid transparent; }
.tabla-semaforo tr.fila-verde td:first-child { border-left-color: #138a5a; }
.tabla-semaforo tr.fila-amarillo td:first-child { border-left-color: #e0a100; }
.tabla-semaforo tr.fila-rojo td:first-child { border-left-color: #c23b3b; }
.tabla-semaforo tr.fila-gris td:first-child { border-left-color: #b5c2c8; }

/* Transporte de esta obra (en el presupuesto) */
.transporte-pres { display: grid; gap: .6rem; margin-bottom: .8rem; }
.transporte-pres:empty { display: none; }
.transporte-caja { background: #fff; border: 1px solid var(--borde); border-left: 4px solid var(--azul-700); border-radius: 10px; padding: .7rem .9rem; }
.tc-cab { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.tc-cab strong { color: var(--azul-900); }
.tc-importe { font-weight: 800; font-size: 1.1rem; color: var(--azul-700); }
.tc-km { margin: .25rem 0 .5rem; font-size: .85rem; color: var(--texto-2); }
.tc-km.tc-falta { color: var(--warn); font-weight: 600; }
.tc-campos { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; align-items: center; font-size: .88rem; }
.tc-campos label { display: inline-flex; align-items: center; gap: .4rem; margin: 0; }
.tc-campos input[type=number], .tc-campos input[type=text] { width: 80px; }
.transporte-caja.tc-veces { border-left-color: #8a5a10; }
.transporte-caja.tc-quitado { opacity: .55; }
.transporte-caja.tc-quitado .tc-importe { text-decoration: line-through; }
.tc-dias { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .4rem; margin-top: .55rem; padding-top: .5rem; border-top: 1px dashed var(--borde); font-size: .82rem; color: var(--texto-2); }
.tc-dias input { width: 52px; padding: .2rem .35rem; }
.tc-dias .tc-dias-txt { font-weight: 600; color: var(--azul-700); }

/* Fichas de recargos (Impuestos y márgenes) */
.fichas-recargo { display: grid; gap: .5rem; }
.ficha-recargo { border: 1px solid var(--borde); border-radius: 12px; background: #fff; }
.ficha-recargo[open] { border-color: var(--azul-700); box-shadow: var(--sombra); }
.ficha-recargo > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; flex-wrap: wrap; }
.ficha-recargo > summary::-webkit-details-marker { display: none; }
.ficha-recargo > summary::before { content: "▸"; color: var(--azul-700); transition: transform .15s; }
.ficha-recargo[open] > summary::before { transform: rotate(90deg); }
.fr-nombre { font-weight: 700; color: var(--azul-900); }
.fr-resumen { color: var(--texto-2); font-size: .88rem; }
.fr-estado { margin-left: auto; font-size: .75rem; font-weight: 700; padding: .15em .6em; border-radius: 999px; }
.fr-estado.ok { background: #e3f6ec; color: #138a5a; }
.fr-estado.oculto { background: var(--warn-50); color: var(--warn); }
.fr-estado.off { background: #eef1f3; color: #5f6f77; }
.fr-cuerpo { padding: 0 .9rem .9rem; border-top: 1px solid var(--borde); padding-top: .8rem; }
.fr-cuerpo [hidden] { display: none !important; }
.fr-valor { display: flex; align-items: center; gap: .4rem; }
.fr-valor input { max-width: 140px; }
.fr-unidad { font-weight: 700; color: var(--azul-700); }
.calc-km { background: var(--fondo); border-radius: 10px; padding: .7rem .8rem; margin: 0 0 .8rem; }
.calc-km-titulo { margin: 0 0 .5rem; font-weight: 700; font-size: .88rem; color: var(--azul-700); display: flex; align-items: center; gap: .35rem; }
.calc-km-campos { display: flex; flex-wrap: wrap; gap: .5rem 1rem; font-size: .88rem; }
.calc-km-campos label { display: flex; flex-direction: column; gap: .2rem; margin: 0; }
.calc-km-campos span { display: inline-flex; align-items: center; gap: .3rem; }
.calc-km-campos input { width: 80px; }
.calc-km-pie { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: .6rem; }
.calc-km-pie .calc-km-resultado { margin: 0; flex: 1 1 260px; }
.calc-km-resultado { margin: .6rem 0 0; font-size: .85rem; color: var(--texto-2); }
.calc-km-resultado strong { color: var(--ok); font-size: 1rem; }
.fr-casillas { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin: .2rem 0 .8rem; }

/* Guardado automático */
.estado-guardado { font-size: .8rem; font-weight: 600; color: var(--ok); }
.estado-guardado.guardando { color: var(--warn); }
.estado-guardado.error { color: var(--err); }

/* Facturas y gastos */
.tabla-recargos { width: 100%; border-collapse: collapse; }
.tabla-recargos th { text-align: left; font-size: .8rem; color: var(--texto-2); padding: .3rem; }
.tabla-recargos td { padding: .25rem .3rem; }
.tabla-recargos input[type=text], .tabla-recargos input:not([type]) { width: 100%; }
button.chip { font-family: inherit; }
.recargos-pres { margin-top: .8rem; }
/* Botones de recargos del presupuesto: marcados = aplicados (clic para quitar) */
.chips-sm .chip.anadir-recargo.activo { background: var(--azul-700); border-color: var(--azul-700); color: #fff; }
.chips-sm .chip.anadir-recargo.activo::before { content: "✓"; }
.recargos-cab { display: flex; justify-content: space-between; align-items: center; font-size: .85rem; font-weight: 600; margin-bottom: .3rem; }
.recargo-fila { display: grid; grid-template-columns: 1fr 70px auto auto; gap: .35rem; align-items: center; margin-bottom: .3rem; }
.recargo-fila input { min-width: 0; }
.importes-factura { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
@media (max-width: 700px) { .importes-factura { grid-template-columns: 1fr 1fr; } }
.barra-cat { height: 6px; background: var(--fondo); border-radius: 999px; margin: .35rem 0 .2rem; overflow: hidden; }
.barra-cat span { display: block; height: 100%; background: var(--azul-700); border-radius: 999px; }

/* Detalles de la solicitud: datos en fichas, arriba de la conversación */
.detalles-solicitud { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
.detalles-solicitud > div { background: var(--fondo); border-radius: 10px; padding: .55rem .75rem; }
.detalles-solicitud span:first-child { display: block; font-size: .75rem; color: var(--texto-2); }
.detalles-solicitud strong { font-size: .95rem; color: var(--azul-700); }
.detalles-solicitud a { display: block; font-size: .85rem; }

/* Ubicación y desplazamiento (ficha de solicitud) */
.ruta-datos { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: .8rem; }
.ruta-datos > div { background: var(--fondo); border-radius: 10px; padding: .55rem .75rem; }
.ruta-datos span { display: block; font-size: .75rem; color: var(--texto-2); }
.ruta-datos strong { font-size: 1.05rem; color: var(--azul-700); }
.mapa-ruta { height: 280px; border-radius: 12px; overflow: hidden; border: 1px solid var(--borde); }

/* Secciones plegables con flecha */
details.seccion { border-bottom: 1px solid var(--borde); padding: .3rem 0 .6rem; margin-bottom: .6rem; }
details.seccion > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .5em;
                            font-weight: 700; color: var(--azul-700); padding: .5rem 0; user-select: none; }
details.seccion > summary::-webkit-details-marker { display: none; }
details.seccion > summary::before { content: "▸"; display: inline-block; width: 1em; transition: transform .15s; }
details.seccion[open] > summary::before { transform: rotate(90deg); }
details.seccion > summary .resumen { font-weight: 500; font-size: .85rem; color: var(--texto-2); margin-left: auto;
                                     overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
details.seccion[open] > summary .resumen { display: none; }
/* Un panel entero plegable: el título del panel hace de cabecera */
details.seccion-panel { border-bottom: 0; padding: 0; margin: 0; }
details.seccion-panel > summary { padding: 0; }
details.seccion-panel > summary h2 { margin: 0; font-size: 1.05rem; display: inline-flex; align-items: center; gap: .4rem; }
details.seccion-panel[open] > summary { margin-bottom: .8rem; }

/* Opciones como botones (radio = una sola; checkbox = varias) */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.chip { margin: 0; display: inline-flex; align-items: center; gap: .4em; padding: .55em 1.1em; border-radius: 10px;
        border: 1.5px solid var(--borde, #dce8ed); background: #fff; cursor: pointer; font-size: .9rem;
        font-weight: 600; color: var(--texto-2); user-select: none; transition: background .15s, border-color .15s; }
.chip:hover { border-color: var(--azul-700); }
/* Oculto a la vista, pero no con display:none: el navegador debe poder enfocarlo si es obligatorio. */
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.chip:has(input:checked) { background: var(--azul-700); border-color: var(--azul-700); color: #fff; }
.chip-web:has(input:checked) { background: #0b5c7d; border-color: #0b5c7d; }
.chip-whatsapp:has(input:checked) { background: #128c4a; border-color: #128c4a; }
.chip-email:has(input:checked) { background: var(--violeta); border-color: var(--violeta); }
.chip-telefono:has(input:checked) { background: #8a5a10; border-color: #8a5a10; }
.chips-sm .chip { padding: .35em .85em; font-size: .82rem; border-radius: 999px; }
.chips-sm .chip::before { content: "+"; font-weight: 700; }
.chips-sm .chip:has(input:checked)::before { content: "✓"; }

.tabla-lineas th, .tabla-lineas td { padding: .4rem .35rem; }
.tabla-lineas input, .tabla-lineas select { padding: .5em .55em; border-radius: 8px; }
.tabla-lineas .c-concepto { min-width: 230px; }
.tabla-lineas .c-cant { width: 85px; }
.tabla-lineas .c-unidad { width: 105px; }
.tabla-lineas .c-precio { width: 120px; }
.tabla-lineas .c-importe { width: 110px; text-align: right; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabla-lineas .c-borrar { width: 40px; }
.btn-icono { background: none; border: 0; color: var(--muted); cursor: pointer; padding: .35rem; border-radius: 8px; }
.btn-icono:hover { color: var(--err); background: var(--err-50); }

.totales { margin-left: auto; width: min(340px, 100%); display: grid; gap: .35rem; font-size: .93rem; font-variant-numeric: tabular-nums; }
.totales div { display: flex; justify-content: space-between; gap: 1rem; }
.totales .totales-recargos { display: grid; gap: .35rem; }
.totales .totales-recargos:empty { display: none; }
.totales .totales-recargos > div { color: var(--azul-700); }
.totales .recargo-total > span:first-child { display: inline-flex; align-items: center; gap: .35rem; }
.ojo-cliente { border: 1px solid var(--borde); background: #fff; color: var(--azul-700); border-radius: 6px; width: 26px; height: 22px; display: inline-grid; place-items: center; cursor: pointer; padding: 0; }
.ojo-cliente:hover { border-color: var(--azul-700); }
.totales .recargo-total.solo-yo { color: var(--texto-2); font-style: italic; }
.ojo-cliente + .ojo-cliente { margin-left: -.1rem; }
.cat-linea { font-size: .72rem; padding: .1rem .2rem; height: 22px; width: auto; max-width: 105px; border: 1px solid var(--borde); border-radius: 6px; background: var(--fondo); color: var(--azul-700); font-weight: 600; cursor: pointer; }
.recargo-total.quitado .cat-linea { opacity: .4; }
.ojo-cliente:disabled { opacity: .35; cursor: default; }
.totales .recargo-total.quitado { color: var(--texto-2); }
.totales .recargo-total.recargo-margen { color: var(--texto); }  /* como la línea del IVA */
.totales .recargo-total.quitado .rt-nombre, .totales .recargo-total.quitado .rt-importe { text-decoration: line-through; opacity: .65; }
.recargo-total.quitado .quitar-linea { background: #fde6e6; color: var(--err); border-color: var(--err); }
.recargo-total.solo-yo .ojo-cliente:not(.quitar-linea) { background: var(--warn-50); color: var(--warn); border-color: var(--warn); }
.totales .fila-beneficio { color: var(--verde-700, #15803d); font-weight: 600; }
.totales .fila-beneficio small { font-weight: 400; color: var(--texto-2); }
.totales .total-final { border-top: 2px solid var(--azul-900); padding-top: .5rem; margin-top: .2rem; font: 800 1.25rem var(--fuente-titulo); color: var(--azul-900); }
.totales-ajustes { display: flex; gap: .8rem; flex-wrap: wrap; }
.totales-ajustes .campo { width: 110px; margin: 0; }

.linea-tiempo { list-style: none; margin: 0; padding: 0; position: relative; }
.linea-tiempo li { display: grid; grid-template-columns: 30px 1fr; gap: .7rem; padding-bottom: 1rem; position: relative; }
.linea-tiempo li::before { content: ""; position: absolute; left: 14px; top: 30px; bottom: 0; width: 2px; background: var(--borde); }
.linea-tiempo li:last-child::before { display: none; }
.linea-tiempo .punto { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--aqua-50); color: var(--azul-700); }
.linea-tiempo .punto.t-estado { background: var(--violeta-50); color: var(--violeta); }
.linea-tiempo .punto.t-visto { background: var(--ok-50); color: var(--ok); }
.linea-tiempo .punto.t-llamada, .linea-tiempo .punto.t-whatsapp { background: var(--arena-50); color: #8a5a10; }
.linea-tiempo p { margin: 0; font-size: .9rem; white-space: pre-wrap; }
.linea-tiempo small { font-size: .78rem; }
.atajos { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .35rem; }
.atajos button { font: 500 .75rem var(--fuente); border: 1px solid var(--borde); background: #fff; border-radius: 999px; padding: .2em .65em; cursor: pointer; color: var(--texto-2); }
.atajos button:hover { border-color: var(--azul-500); color: var(--azul-700); }

.enlace-copiar { display: flex; gap: .4rem; }
.enlace-copiar input { font-size: .8rem; background: var(--fondo); }
.nota-aviso { font-size: .8rem; background: var(--warn-50); color: var(--warn); border-radius: 8px; padding: .5em .7em; margin: .5rem 0 0; }

/* Documento de presupuesto (vista cliente / imprimible) */
.documento { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: 2.4rem; }
.doc-cabecera { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; padding-bottom: 1.5rem; border-bottom: 2px solid var(--azul-900); margin-bottom: 1.5rem; }
.doc-cabecera .logo { font-size: 1.6rem; }
.doc-cabecera .empresa { font-size: .85rem; color: var(--texto-2); margin-top: .5rem; line-height: 1.5; }
.doc-numero { text-align: right; }
.doc-numero h1 { font-size: 1.5rem; margin: 0 0 .2rem; }
.doc-numero dl { margin: .4rem 0 0; font-size: .88rem; display: grid; grid-template-columns: auto auto; gap: .15rem .8rem; justify-content: end; }
.doc-numero dt { color: var(--muted); }
.doc-numero dd { margin: 0; font-weight: 600; }
.doc-partes { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem; font-size: .92rem; }
.doc-partes h3 { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: .4rem; }
.doc-tabla th { background: var(--fondo); }
.doc-condiciones { margin-top: 1.8rem; font-size: .85rem; color: var(--texto-2); white-space: pre-wrap; border-top: 1px solid var(--borde); padding-top: 1rem; }
.doc-respuesta { margin-top: 1.5rem; border-radius: var(--radio); padding: 1.4rem; background: linear-gradient(135deg, var(--aqua-50), #fff); border: 1px solid var(--aqua-100); }
.doc-respuesta h2 { font-size: 1.15rem; }
.doc-estado { margin-top: 1.5rem; padding: 1rem 1.2rem; border-radius: 12px; font-weight: 600; }
.doc-estado.ok { background: var(--ok-50); color: var(--ok); }
.doc-estado.err { background: var(--err-50); color: var(--err); }
.doc-estado.warn { background: var(--warn-50); color: var(--warn); }
/* ==========================================================================
   Presupuesto del cliente con el formato del negocio (templates/publico/presupuesto.html)
   ========================================================================== */
.pres { --p-navy: #13294b; --p-azul: #1e40af; --p-celeste: #1e88d6; --p-claro: #eff6ff; --p-borde: #cfe0f5; --p-texto: #334155;
  background: #fff; border-radius: 10px; box-shadow: var(--sombra); overflow: hidden; color: var(--p-texto);
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 15px; line-height: 1.55; }
.pres h1, .pres h2, .pres h3, .pres h4 { font-family: inherit; letter-spacing: 0; }
.pres-cabecera { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; padding: 2.4rem 3.4rem 2.6rem;
  background: linear-gradient(110deg, #10223f 0%, #1a3a8a 60%, #2142b5 100%); color: #e8eefc; }
.pres-emisor h1 { color: #fff; font-size: 1.95em; font-weight: 800; margin: 0 0 .5rem; }
.pres-especialidad { color: #4fc3f7; font-weight: 700; margin: 0 0 1rem; }
.pres-emisor p:last-child { margin: 0; font-size: .92em; line-height: 1.7; }
.pres-emisor strong, .pres-doc strong { color: #fff; }
.pres-doc { align-self: flex-start; min-width: 250px; text-align: right; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .25); border-radius: 8px; padding: 1.1rem 1.4rem; }
.pres-doc h2 { color: #4fc3f7; font-size: 1.3em; font-weight: 800; margin: 0 0 .5rem; }
.pres-doc p { margin: 0; font-size: .92em; line-height: 1.7; }
.pres-franja { height: 18px; margin: 1rem 3.4rem 0; border-radius: 0 0 0 0; background: linear-gradient(90deg, #4fc3f7, #93c5fd); clip-path: polygon(0 0, 100% 0, 100% 15%, 98% 60%, 0 100%); }
.pres-cuerpo { padding: 1.2rem 3.4rem 2.6rem; }
.pres-cliente { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; background: #f8fafc; border-left: 5px solid var(--p-azul); border-radius: 6px; padding: 1.1rem 1.6rem; margin-bottom: 1.8rem; }
.pres-cliente > span:nth-child(odd) { font-weight: 700; color: var(--p-navy); }
.pres-cliente strong { color: var(--p-navy); }
.pres-seccion { margin-bottom: 1.9rem; }
.pres-seccion > h3 { color: var(--p-navy); font-size: 1.22em; font-weight: 700; margin: 0 0 1rem; padding-bottom: .5rem; border-bottom: 3px solid var(--p-celeste); }
.pres-specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .9rem; }
.pres-specs div { background: var(--p-claro); border: 1px solid var(--p-borde); border-radius: 7px; padding: .8rem 1.1rem; }
.pres-specs span { display: block; font-size: .78em; font-weight: 700; color: #0e6aa8; }
.pres-specs strong { font-size: 1.25em; color: var(--p-navy); }
.pres-descripcion { background: var(--p-claro); border: 1px solid var(--p-borde); border-radius: 7px; padding: 1.2rem 1.5rem; color: #0e6aa8; }
.pres-descripcion p { margin: 0 0 .5rem; white-space: pre-wrap; }
.pres-descripcion p:last-child { margin: 0; }
.pres-destacado { font-weight: 700; }
.pres-trabajos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.8rem; }
.pres-trabajo { padding: .75rem .55rem 1rem; border-bottom: 1px solid #e2e8f0; break-inside: avoid; }
.pres-trabajos .pres-trabajo:last-child:nth-child(odd) { grid-column: 1 / -1; }
.pres-trabajo h4 { color: var(--p-azul); font-size: 1.02em; font-weight: 700; margin: 0 0 .3rem; }
.pres-trabajo p { margin: 0; font-size: .93em; }
.pres-trabajo .pres-nota { font-style: italic; color: #64748b; }
.pres-trabajo .pres-importe { margin-top: .4rem; color: var(--p-navy); font-size: .88em; }
.pres-tabla { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: 7px; overflow: hidden; font-size: .92em; }
.pres-tabla th { background: var(--p-azul); color: #fff; text-align: left; padding: .75rem 1rem; font-weight: 700; font-size: 1em; text-transform: none; letter-spacing: 0; }
.pres-tabla td { padding: .7rem 1rem; border-bottom: 1px solid #e2e8f0; }
.pres-tabla tbody tr:nth-child(odd) td { background: #f8fafc; }
.pres-tabla .estado { font-weight: 700; white-space: nowrap; }
.pres-tabla .estado-incluido { color: #15803d; }
.pres-tabla .estado-no-incluido { color: #b91c1c; }
.pres-tabla .estado-opcional, .pres-tabla .estado-a-cargo-del-cliente { color: #b45309; }
.pres-economico { border: 1px solid var(--p-borde); border-radius: 8px; overflow: hidden; }
.pres-economico > div { display: flex; justify-content: space-between; gap: 1rem; padding: .95rem 1.5rem; border-bottom: 1px solid #e2e8f0; font-variant-numeric: tabular-nums; }
.pres-economico strong { color: var(--p-navy); }
.pres-eco-cab { background: var(--p-azul); color: #fff; font-weight: 700; font-size: .92em; }
.pres-total { background: linear-gradient(110deg, #10223f, #2142b5); color: #fff; align-items: center; border-bottom: 0 !important; padding: 1.4rem 1.5rem !important; }
.pres-total span:first-child { font-weight: 700; font-size: 1.1em; letter-spacing: .02em; }
.pres-total span:last-child { font-weight: 800; font-size: 1.85em; }
.pres-condicion { background: #f8fafc; border-left: 4px solid var(--p-celeste); border-radius: 6px; padding: 1rem 1.3rem; margin-bottom: .9rem; break-inside: avoid; }
.pres-condicion h4 { color: var(--p-navy); font-size: .9em; font-weight: 700; margin: 0 0 .4rem; }
.pres-condicion p { margin: 0 0 .35rem; font-size: .92em; }
.pres-condicion p:last-child { margin: 0; }
.pres-firmas { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; margin-top: 2.6rem; text-align: center; font-size: .88em; color: #64748b; break-inside: avoid; }
.pres-firmas div { border-top: 2px solid #94a3b8; padding-top: .6rem; }
.area-doc .doc-estado, .area-doc .doc-respuesta { margin-top: 1.5rem; }
@media (max-width: 700px) {
  .pres-cabecera { padding: 1.6rem 1.2rem; }
  .pres-doc { text-align: left; width: 100%; }
  .pres-franja { margin: 1rem 1.2rem 0; }
  .pres-cuerpo { padding: 1rem 1.2rem 1.8rem; }
  .pres-trabajos { grid-template-columns: 1fr; }
  .pres-firmas { grid-template-columns: 1fr; gap: 2rem; }
  .pres-tabla { font-size: .82em; }
  .pres-tabla th, .pres-tabla td { padding: .55rem .6rem; }
}
@media print {
  /* A4 como los PDF del negocio: la banda azul pegada arriba en la 1ª página, 2 páginas en un caso normal. */
  @page { size: A4; margin: 11mm 0 12mm; }
  @page :first { margin-top: 0; }
  .area-doc { padding: 0 !important; }
  .area-doc .contenedor { max-width: none !important; width: 100%; padding: 0; }
  .pres { box-shadow: none; border-radius: 0; font-size: 10.6px; line-height: 1.5; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .pres-cabecera { flex-wrap: nowrap; padding: 11mm 13mm 11mm; }
  .pres-doc { min-width: 0; padding: 4mm 6mm; }
  .pres-franja { height: 12px; margin: 5mm 13mm 0; }
  .pres-cuerpo { padding: 5mm 13mm 0; }
  .pres-cliente { padding: 3.5mm 6mm; margin-bottom: 5mm; }
  .pres-seccion { margin-bottom: 5.5mm; }
  .pres-seccion > h3 { margin-bottom: 3mm; padding-bottom: 1.6mm; break-after: avoid; }
  .pres-specs div { padding: 2.6mm 4mm; }
  .pres-descripcion { padding: 3.5mm 5mm; }
  .pres-trabajo { padding: 2.2mm 1.5mm 3mm; }
  .pres-economico > div { padding: 3.2mm 5mm; }
  .pres-total { padding: 4.5mm 5mm !important; }
  .pres-condicion { padding: 2.4mm 5mm; margin-bottom: 2.4mm; }
  .pres-tabla th, .pres-tabla td { padding: 2.2mm 4mm; }
  .pres-firmas { margin-top: 9mm; }
  .pres-salto { break-before: page; }
  .whatsapp, .pz-ojo-boton { display: none !important; }
}

.doc-carta { white-space: pre-wrap; color: var(--texto-2); font-size: .95rem; line-height: 1.65; margin-bottom: 1.8rem; }
.doc-seccion { margin-bottom: 1.8rem; }
.doc-seccion h2 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: .08em; color: var(--azul-700); border-bottom: 1px solid var(--borde); padding-bottom: .4rem; margin-bottom: .9rem; }
.doc-seccion h3 { font-size: .9rem; margin: 0 0 .3rem; }
.doc-texto { white-space: pre-wrap; font-size: .93rem; line-height: 1.6; color: var(--texto); }
.doc-piscina { margin-top: 1rem; background: var(--aqua-50); border-radius: 12px; padding: 1rem 1.2rem; }
.doc-piscina dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem 1.2rem; margin: .5rem 0 0; }
.doc-piscina dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.doc-piscina dd { margin: 0; font-weight: 600; color: var(--azul-900); }
.doc-partida { display: block; font-weight: 600; color: var(--azul-900); }
.doc-explicacion { display: block; margin-top: .2rem; font-size: .84rem; color: var(--texto-2); white-space: pre-wrap; line-height: 1.5; }
.doc-tabla td { vertical-align: top; }
.doc-tabla .num { white-space: nowrap; }
.doc-resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem 2rem; }
.doc-resumen p { margin: 0; font-size: .9rem; color: var(--texto-2); }
details.rechazar summary { cursor: pointer; color: var(--muted); font-size: .9rem; margin-top: 1rem; }

@media print {
  .cabecera, .pie, .whatsapp, .toasts, .no-print, .lateral { display: none !important; }
  body, .area { background: #fff !important; padding: 0 !important; min-height: 0; }
  .documento { border: 0; box-shadow: none; padding: 0; }
  .contenedor { width: 100%; }
  a { color: inherit; }
}
@media (max-width: 700px) {
  .documento { padding: 1.3rem; }
  .doc-partes { grid-template-columns: 1fr; }
  .doc-numero { text-align: left; }
  .doc-numero dl { justify-content: start; }
}

/* Editor de presupuestos (pre-presupuesto): formulario ancho y lateral a la derecha solo en pantallas grandes */
.editor-pres { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.editor-pres .lateral-pres { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.4rem; align-items: start; }
@media (min-width: 1100px) {
  .editor-pres { grid-template-columns: minmax(0, 1fr) 320px; }
  .editor-pres .lateral-pres { grid-template-columns: 1fr; }
}
@media (min-width: 1500px) { .editor-pres { grid-template-columns: minmax(0, 1fr) 360px; } }
.bloque-pres { border-top: 1px solid var(--borde); margin-top: 1.4rem; padding-top: 1.2rem; }
.bloque-titulo { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; }
.bloque-titulo h2 { margin: 0; font-size: 1.1rem; }
.bloque-num { width: 26px; height: 26px; border-radius: 50%; background: var(--azul-700); color: #fff; font-weight: 700; font-size: .85rem; display: grid; place-items: center; flex: none; }
.solo-oficina { margin-left: auto; display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; font-weight: 600; color: var(--warn); background: var(--warn-50); padding: .2em .6em; border-radius: 999px; }
.solo-oficina.ok { color: var(--ok); background: var(--ok-50); }
.medidas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 1rem; }
.calc-medidas { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; margin: -.2rem 0 1rem; font-size: .82rem; }
.calc-medidas button { border: 1px solid var(--aqua-100); background: var(--aqua-50); color: var(--azul-800); border-radius: 999px; padding: .3em .8em; cursor: pointer; font: inherit; }
.calc-medidas button:hover { border-color: var(--azul-500); }
.calc-medidas strong { margin-left: .2rem; }
.ajustes-calculo { display: flex; flex-wrap: wrap; gap: 0 1rem; align-items: flex-end; }
.ajustes-calculo .campo { width: 190px; }
.ajustes-calculo .ayuda { flex: 1 1 260px; margin: 0 0 1rem; }
.tabla-calculo .c-concepto { min-width: 260px; }
.tabla-calculo .c-concepto textarea { min-height: 0; margin-top: .3rem; font-size: .82rem; padding: .4em .55em; border-radius: 8px; resize: vertical; overflow: hidden; }
.tabla-calculo td { vertical-align: top; }
.tabla-calculo .c-num { width: 88px; }
.tabla-calculo th.interno, .tabla-calculo td.interno { background: var(--warn-50); }
.tabla-calculo th.interno { color: var(--warn); }
.tabla-calculo .c-importe { padding-top: .9rem; }
.tabla-calculo .c-importe small { display: block; color: var(--muted); font-weight: 500; font-size: .75rem; }
.resumen-calculo { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between; align-items: flex-start; margin-top: 1.4rem; }
.rentabilidad { flex: 1 1 280px; max-width: 380px; background: var(--warn-50); border: 1px dashed var(--warn); border-radius: 12px; padding: 1rem 1.1rem; display: grid; gap: .3rem; font-size: .9rem; font-variant-numeric: tabular-nums; }
.rentabilidad h3 { display: flex; align-items: center; gap: .35rem; font-size: .95rem; margin: 0 0 .3rem; color: var(--warn); }
.rentabilidad h3 small { font-weight: 500; }
.rentabilidad > div { display: flex; justify-content: space-between; gap: 1rem; }
.rentabilidad .r-total { border-top: 1px solid rgba(0, 0, 0, .1); padding-top: .3rem; font-weight: 600; }
.rentabilidad .r-beneficio { font-weight: 700; color: var(--ok); font-size: 1rem; }
.rentabilidad .r-beneficio.justo { color: var(--warn); }
.rentabilidad .r-beneficio.negativo { color: var(--err); }
.rentabilidad .r-beneficio small { font-weight: 500; }
.rentabilidad .ayuda { margin: .3rem 0 0; }
.rentabilidad .r-sep { border-top: 1px dashed rgba(0, 0, 0, .15); padding-top: .3rem; margin-top: .2rem; color: var(--texto-2); }
.rentabilidad > div small { font-weight: 400; color: var(--texto-2); }
.acciones-guardar { display: flex; flex-wrap: wrap; gap: .6rem; }
.plantillas-barra { background: var(--aqua-50); border: 1px solid var(--aqua-100); border-radius: 12px; padding: .9rem 1rem; margin-bottom: 1.1rem; }
.plantillas-barra label { display: flex; align-items: center; gap: .4rem; }
.plantillas-fila { display: flex; gap: .5rem; flex-wrap: wrap; }
.plantillas-fila select { flex: 1 1 260px; }
.plantillas-barra .ayuda { margin: .5rem 0 0; }

/* Campos de teléfono con «+34» delante (static/js/telefono.js) */
.tel-es { display: flex; align-items: stretch; width: 100%; }
.tel-es > span { display: flex; align-items: center; padding: 0 .7rem; background: var(--aqua-50); border: 1px solid var(--borde); border-right: 0; border-radius: 10px 0 0 10px; color: var(--azul-700); font-weight: 600; font-size: .92rem; white-space: nowrap; }
.tel-es > input { flex: 1; min-width: 0; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.tel-es.extranjero > span { opacity: .35; text-decoration: line-through; }
.tel-es > select.tel-prefijo { width: auto; flex: none; padding: 0 .4rem; background: var(--aqua-50); border: 1px solid var(--borde); border-right: 0; border-radius: 10px 0 0 10px; color: var(--azul-700); font-weight: 600; font-size: .92rem; cursor: pointer; }
.tel-es.extranjero > select.tel-prefijo { opacity: .35; }
.cliente-cabecera .tel-es { width: auto; }

/* Cabecera del presupuesto: teléfono del cliente editable */
.cliente-cabecera { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.cliente-cabecera .btn-icono { vertical-align: middle; padding: .2rem; }
.cliente-cabecera form:not([hidden]) { display: inline-flex; gap: .4rem; align-items: center; }
.cliente-cabecera form input { width: 11rem; padding: .35rem .6rem; }

/* Categoría y trabajos para marcar con un clic (bloque 1 del presupuesto) */
.cat-botones, .chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.cat-botones button, .chips button { font: inherit; cursor: pointer; border: 1.5px solid var(--borde); background: #fff; color: var(--texto); border-radius: 99px; transition: background .12s, border-color .12s; }
.cat-botones button { padding: .55rem 1.1rem; font-weight: 600; }
.chips button { padding: .4rem .85rem; font-size: .88rem; }
.cat-botones button:hover, .chips button:hover { border-color: var(--azul-500); }
.cat-botones button[aria-pressed="true"] { background: var(--azul-700); border-color: var(--azul-700); color: #fff; }
.chips button[aria-pressed="true"] { background: var(--aqua-50); border-color: var(--azul-700); color: var(--azul-800); font-weight: 600; }
.chips button[aria-pressed="true"]::before { content: "✓ "; }
.trab-grupo { margin: .8rem 0; }
.trab-grupo h4 { margin: 0 0 .4rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-2); }
/* Subcategorías que se despliegan al pulsarlas: cada nivel abierto sale debajo, con un filete a la izquierda */
.trab-nivel { margin: .7rem 0; }
.trab-nivel + .trab-nivel { padding-left: .8rem; border-left: 3px solid var(--aqua-100); }
.trab-nivel h4 { margin: 0 0 .4rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-2); }
.chips button.chip-carpeta { background: var(--fondo); border-color: var(--azul-500); color: var(--azul-800); font-weight: 600; border-radius: 10px; }
.chips button.chip-carpeta::after { content: " ▸"; }
.chips button.chip-carpeta[aria-expanded="true"] { background: var(--azul-700); border-color: var(--azul-700); color: #fff; }
.chips button.chip-carpeta[aria-expanded="true"]::after { content: " ▾"; }
.chip-cuenta { display: inline-block; margin-left: .4rem; min-width: 1.3rem; padding: 0 .35rem; border-radius: 99px; background: var(--arena); color: var(--azul-900); font-size: .75rem; text-align: center; }
#trabajos-detalle { display: grid; gap: .6rem; margin-top: 1rem; }
.trab-detalle { border: 1px solid var(--aqua-100); background: var(--aqua-50); border-radius: 12px; padding: .7rem .9rem 0; }
.trab-detalle > strong { display: block; font-size: .9rem; margin-bottom: .4rem; color: var(--azul-800); }
.dlg-trabajo .trab-detalle { margin-bottom: .8rem; }

/* Ventana de un trabajo (cantidad y precio para este presupuesto) */
.dlg-trabajo { border: 0; border-radius: var(--radio); padding: 1.3rem 1.4rem; width: min(560px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow-y: auto; box-shadow: 0 20px 60px rgba(6, 47, 66, .3); color: var(--texto); }
.dlg-trabajo::backdrop { background: rgba(6, 47, 66, .5); }
.dlg-trabajo h3 { margin: 0 0 .4rem; color: var(--azul-800); }
.dlg-explicacion { margin: 0 0 1rem; font-size: .85rem; color: var(--texto-2); white-space: pre-line; max-height: 7.5em; overflow-y: auto; }
.dlg-explicacion:empty { display: none; }
.dlg-importe { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .7rem .9rem; border-radius: 10px; background: var(--fondo); font-size: .95rem; }
.dlg-importe strong { font-size: 1.25rem; color: var(--azul-800); }
.dlg-acciones { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; align-items: center; margin-top: 1rem; }
.dlg-acciones .dlg-quitar { margin-right: auto; color: var(--err); }
.enlace-boton { border: 0; background: none; padding: 0; font: inherit; color: var(--azul-500); text-decoration: underline; cursor: pointer; }

/* Resumen «En este presupuesto»: tarjeta aparte debajo del bloque 1; cada partida se edita al pulsarla */
.resumen-pres { margin: 2rem 0 1.6rem; border: 1px solid var(--borde); border-radius: var(--radio); background: #fff; box-shadow: var(--sombra); overflow: hidden; }
.resumen-cab { display: flex; align-items: center; gap: .75rem; padding: .9rem 1.1rem; background: linear-gradient(135deg, var(--azul-800), var(--azul-700)); color: #fff; }
.resumen-cab h3 { margin: 0; font-size: 1.02rem; color: #fff; letter-spacing: .01em; }
.resumen-cab small { color: #cfe6ee; font-size: .8rem; }
.resumen-icono { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 10px; background: rgba(255, 255, 255, .14); flex: none; }
.resumen-pista { margin-left: auto; font-size: .78rem; color: #cfe6ee; }
.resumen-lista { display: grid; }
.resumen-item { display: grid; grid-template-columns: 1.8rem minmax(0, 1fr) auto auto 1.6rem; gap: .8rem; align-items: center; width: 100%; padding: .8rem 1.1rem; border: 0; border-bottom: 1px solid var(--borde); background: #fff; font: inherit; color: var(--texto); text-align: left; cursor: pointer; transition: background .12s; }
.resumen-item:nth-child(even) { background: #fbfdfe; }
.resumen-item:hover, .resumen-item:focus-visible { background: var(--aqua-50); outline: none; }
.resumen-num { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--aqua-50); color: var(--azul-700); font-weight: 700; font-size: .8rem; }
.resumen-info { min-width: 0; display: grid; gap: .1rem; }
.resumen-info strong { font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resumen-info small { font-size: .8rem; color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resumen-calc { font-size: .85rem; color: var(--texto-2); white-space: nowrap; }
.resumen-importe { font-weight: 700; font-size: 1rem; color: var(--azul-800); white-space: nowrap; min-width: 6.5rem; text-align: right; }
.resumen-editar { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 8px; color: var(--azul-500); border: 1px solid var(--borde); font-size: .85rem; }
.resumen-item:hover .resumen-editar { background: var(--azul-700); border-color: var(--azul-700); color: #fff; }
.resumen-item.sin-precio { background: var(--warn-50); }
.resumen-item.sin-precio .resumen-calc { color: var(--warn); font-weight: 700; }
.resumen-item.sin-precio .resumen-num { background: var(--arena); color: var(--azul-900); }
/* Página de una obra (proyecto): datos, rentabilidad real, gastos, cronograma y compras */
.consumo-obra { background: #fff; border: 1px solid var(--borde); border-radius: 12px; padding: .7rem 1rem; margin: -.4rem 0 1rem; }
.consumo-txt { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; font-size: .9rem; }
.consumo-txt span { color: var(--texto-2); }
.consumo-barra { height: 10px; background: var(--fondo); border-radius: 999px; overflow: hidden; margin-top: .45rem; }
.consumo-barra span { display: block; height: 100%; background: var(--ok); border-radius: 999px; }
.consumo-obra.pasado .consumo-barra span { background: var(--err); }
.consumo-obra.pasado b { color: var(--err); }
.ficha-obra { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .6rem; margin-bottom: 1.2rem; }
.ficha-obra > div { background: #fff; border: 1px solid var(--borde); border-radius: 10px; padding: .6rem .8rem; display: grid; gap: .1rem; font-size: .88rem; }
.ficha-obra span { font-size: .75rem; color: var(--texto-2); }
.ficha-obra strong { color: var(--azul-900); }
details.seccion-panel > summary .resumen-fijo { margin-left: auto; font-size: .85rem; font-weight: 500; color: var(--texto-2); }
.cobros-resumen { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem; align-items: end; }
.cobros-total { margin: 0; }
.cobros-total label { display: grid; gap: .25rem; margin: 0; font-weight: 600; }
.cobros-total span { display: inline-flex; align-items: center; gap: .35rem; }
.cobros-total input { width: 120px; font-weight: 700; }
.cobros-cifras { display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; }
.pres-de-obra { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin: 0 0 1rem; padding: .7rem .8rem; background: var(--fondo); border-radius: 10px; }
.otros-pres > summary { cursor: pointer; font-weight: 600; color: var(--azul-700); font-size: .9rem; }
.otros-pres ul { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .35rem; }
.otros-pres li { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .88rem; }
.cuenta-beneficio { display: grid; gap: .1rem; margin: .35rem 0 .25rem; font-size: .78rem; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.cuenta-beneficio > div { display: flex; justify-content: space-between; gap: .8rem; }
.cuenta-beneficio .cb-iva { color: var(--err); }
.cuenta-beneficio .cb-sub { border-top: 1px dashed var(--borde); padding-top: .1rem; font-weight: 700; color: var(--azul-700); }
/* Dos columnas de importes: proyectado | real */
.cuenta-beneficio.cb-2col > div { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .6rem; }
.cuenta-beneficio.cb-2col > div > span:not(:first-child) { text-align: right; min-width: 4.2rem; }
.cuenta-beneficio .cb-cab { font-size: .9em; font-weight: 600; color: var(--texto-2); }
.kpis-guardar { margin-top: -.4rem; }
/* Obra: los cinco recuadros en una fila (en pantallas estrechas se reparten en varias) */
.kpis-obra { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; }
.kpis-obra .kpi { padding: .8rem .85rem; min-width: 0; }
.kpis-obra .valor { font-size: 1.35rem; }
.kpis-obra .cuenta-beneficio { font-size: .74rem; }
@media (max-width: 1100px) { .kpis-obra { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .kpis-obra { grid-template-columns: 1fr; } }
.kpi-guardar { background: #fff8f8; }
.kpi-beneficio.negativo { border-color: var(--err); background: #fff5f5; }
.kpi-enlace { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.kpi-enlace:hover { border-color: var(--azul-700); box-shadow: var(--sombra); }
.kpi-ver { color: var(--azul-700); font-weight: 700; }
.ganancia-doble { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: .1rem 0 .3rem; }
.ganancia-doble > div { display: grid; }
.ganancia-doble > div + div { border-left: 1px dashed var(--borde); padding-left: .5rem; }
.ganancia-doble small:first-child { font-size: .7rem; font-weight: 700; text-transform: uppercase; color: var(--texto-2); }
.ganancia-doble .valor { font-size: 1.2rem !important; line-height: 1.2; }
.ganancia-doble .muted { font-size: .7rem; }
.kpi-elegir { margin-top: .5rem; width: 100%; justify-content: center; }
.btn-elegir-otros { margin-left: .3rem; border: 1px solid var(--borde); background: #fff; color: var(--azul-700); border-radius: 5px; font-size: .68rem; font-weight: 700; padding: 0 .35rem; cursor: pointer; line-height: 1.5; }
.btn-elegir-otros:hover { border-color: var(--azul-700); }
.kpi-de { font-size: .85rem; font-weight: 600; color: var(--texto-2); }
.kpi-barra { height: 6px; background: var(--fondo); border-radius: 999px; overflow: hidden; margin: .35rem 0 .2rem; }
.kpi-barra span { display: block; height: 100%; background: var(--ok); border-radius: 999px; }
.kpi-barra.pasado span { background: var(--err); }
.cobros-balance { background: #e3f6ec; border-radius: 10px; padding: .35rem .8rem; }
.cobros-balance strong { color: #138a5a; }
.cobros-balance small { font-size: .72rem; color: #138a5a; }
.cobros-balance.negativo { background: #fde6e6; }
.cobros-balance.negativo strong, .cobros-balance.negativo small { color: var(--err); }
.cobros-cifras div { display: grid; }
.cobros-cifras span { font-size: .75rem; color: var(--texto-2); }
.cobros-cifras strong { font-size: 1.25rem; }
.cobros-barra { margin-top: .8rem; }
.pago-cobrado td { background: #f3fbf7; }
.plan-pagos { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .8rem 0; font-size: .88rem; }
#gastos [hidden], #pagos [hidden] { display: none !important; }
.obra-secciones { display: grid; gap: 1.2rem; margin-top: 1.2rem; }
.personal-nuevo { display: flex; flex-wrap: wrap; align-items: end; gap: .6rem .9rem; background: var(--fondo); border-radius: 10px; padding: .7rem .8rem; margin-bottom: .9rem; }
.personal-nuevo label { display: grid; gap: .2rem; margin: 0; font-size: .85rem; font-weight: 600; }
.personal-nuevo input[name=trabajador] { width: 170px; }
.personal-nuevo input[name=horas], .personal-nuevo input[name=precio_hora] { width: 75px; }
.personal-nuevo input[name=importe] { width: 105px; font-weight: 700; }
.personal-nuevo label.check { display: flex; align-items: center; gap: .35rem; padding-bottom: .5rem; }
.personal-resumen { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-size: .88rem; color: var(--texto-2); margin-bottom: .6rem; }
#personal tfoot td { border-top: 2px solid var(--borde); }
.gasto-rapido { display: flex; flex-wrap: wrap; align-items: end; gap: .8rem 1.2rem; }
.gasto-rapido label { display: grid; gap: .25rem; margin: 0; font-weight: 600; font-size: .9rem; }
.gasto-rapido label span { display: inline-flex; align-items: center; gap: .35rem; }
.gasto-rapido input[name=importe] { width: 140px; font-size: 1.15rem; font-weight: 700; }
.form-gasto-obra { background: var(--fondo); border-radius: 10px; padding: .8rem .9rem; margin-bottom: 1rem; }
.fila-imprevisto td { background: #fff5f5; }
.gasto-categorias { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .85rem; color: var(--texto-2); margin-top: .6rem; }
.crono { display: grid; gap: .35rem; margin-bottom: 1rem; }
.crono-escala { position: relative; height: 1.2rem; margin-left: 260px; border-bottom: 1px solid var(--borde); }
.crono-escala span { position: absolute; font-size: .72rem; color: var(--texto-2); transform: translateX(-50%); }
.crono-fila { display: grid; grid-template-columns: 250px 1fr; gap: 10px; align-items: center; }
.crono-nombre { display: flex; align-items: center; gap: .45rem; margin: 0; font-size: .88rem; }
.crono-nombre span { flex: 1; min-width: 0; display: grid; }
.crono-nombre small { color: var(--texto-2); font-size: .74rem; }
.crono-check { width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--azul-700); background: #fff; color: #fff; font-weight: 800; cursor: pointer; padding: 0; flex: none; }
.crono-fila.hecha .crono-check { background: var(--ok); border-color: var(--ok); }
.crono-fila.hecha .crono-nombre span { text-decoration: line-through; color: var(--texto-2); }
.crono-borrar { border: 0; background: none; color: var(--texto-2); cursor: pointer; opacity: .5; }
.crono-borrar:hover { opacity: 1; color: var(--err); }
.crono-pista { position: relative; height: 22px; background: var(--fondo); border-radius: 6px; }
.crono-barra { position: absolute; top: 3px; bottom: 3px; background: var(--azul-700); border-radius: 5px; }
.crono-fila.hecha .crono-barra { background: var(--ok); }
.crono-barra.tarde { background: var(--err); }
.crono-hoy { position: absolute; top: -3px; bottom: -3px; width: 2px; background: #f59e0b; z-index: 1; }
.crono-pista small { position: absolute; left: .5rem; top: 3px; }
.crono-nueva, .compra-nueva { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; background: var(--fondo); border-radius: 10px; padding: .6rem .7rem; }
.crono-nueva input[name=nombre], .compra-nueva input[name=concepto] { flex: 1 1 220px; }
.crono-nueva label, .compra-nueva label { display: inline-flex; align-items: center; gap: .3rem; margin: 0; font-size: .85rem; }
.compra-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: 0; }
.compra-importe { width: 90px; }
.compra-comprado td { color: var(--texto-2); }
@media (max-width: 760px) {
  .crono-fila { grid-template-columns: 1fr; }
  .crono-escala { margin-left: 0; }
}

/* Botón redondo de ordenar el menú (junto al ojo, al sol y a la selección múltiple) */
.pz-menu-boton { position: fixed; left: 200px; bottom: 20px; z-index: 9990; width: 50px; height: 50px; border-radius: 50%; border: 2px solid #fff; background: var(--azul-900); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); }
.pz-menu-boton:hover { transform: scale(1.06); }
.pz-menu-boton.pz-ojo-on { background: #1fc2e3; color: #062f42; animation: pz-ojo-pulso 1.4s ease-in-out infinite; }
@media (max-width: 960px) { .pz-menu-boton { left: 196px; bottom: 16px; } }
@media print { .pz-menu-boton { display: none !important; } }

/* Ordenar el menú lateral */
.menu-ordenar { margin: .6rem 1rem .2rem; padding: .45rem .7rem; border-radius: 8px; border: 1px dashed rgba(255, 255, 255, .35); background: transparent; color: #a9c7d2; font: 600 .8rem/1.2 inherit; cursor: pointer; font-family: inherit; }
.menu-ordenar:hover { color: #fff; border-color: #fff; }
/* Pestaña «Nuevo presupuesto» del menú lateral */
.lateral nav a.menu-nuevo { color: #fff; background: rgba(31, 194, 227, .1); border: 1px dashed rgba(31, 194, 227, .5); }
.lateral nav a.menu-nuevo:hover { background: rgba(31, 194, 227, .22); }

/* Página abierta dentro del visor del panel diario (iframe): sin menú, sin barra de pestañas y sin herramientas */
html.embebido .lateral, html.embebido .tabbar, html.embebido .velo-menu,
html.embebido .pz-ojo-boton, html.embebido .pz-sol-boton, html.embebido .pz-multi-boton, html.embebido .pz-menu-boton { display: none !important; }
html.embebido .admin { grid-template-columns: minmax(0, 1fr); }
html.embebido .principal { padding: .8rem 12px 1.5rem; }

/* ---- Avisos de la plataforma en los paneles (_avisos_plataforma.html) ---- */
.avisos-plataforma { display: grid; gap: .6rem; margin-bottom: 1rem; }
.aviso-plat { display: flex; align-items: flex-start; gap: .8rem; padding: .8rem 1rem; border-radius: 12px; background: var(--aqua-50); border: 1px solid #bfe7f1; border-left: 5px solid var(--azul-500); color: var(--azul-900); }
.aviso-plat-importante { background: var(--warn-50); border-color: #f1d9a8; border-left-color: var(--warn); }
.aviso-plat-urgente { background: var(--err-50); border-color: #efc4c4; border-left-color: var(--err); }
.aviso-plat .ap-texto { flex: 1; min-width: 0; }
.aviso-plat p { margin: .25rem 0 0; white-space: pre-wrap; font-size: .92rem; }
.aviso-plat .ap-form { margin: 0; }
.aviso-plat .ap-ok { border: 1px solid currentColor; background: #fff; color: inherit; border-radius: 999px; padding: .35rem .85rem; font: 600 .85rem var(--fuente); cursor: pointer; white-space: nowrap; }

/* ---- Barra de pestañas del móvil (base_admin.html) ---- */
.tabbar { display: none; }
@media (max-width: 960px) {
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9995;
            background: var(--azul-900); padding: .35rem .3rem calc(.35rem + env(safe-area-inset-bottom)); box-shadow: 0 -6px 20px rgba(0, 0, 0, .18); }
  .tabbar a, .tabbar button { position: relative; display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .3rem 0; border: 0; background: none;
                              color: #9fbfcb; font: 600 .68rem/1.1 var(--fuente); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .tabbar a.activo, .tabbar a:hover, .tabbar button[aria-expanded=true] { color: #fff; text-decoration: none; }
  .tabbar a.activo::before { content: ""; position: absolute; top: -.35rem; width: 28px; height: 3px; border-radius: 0 0 3px 3px; background: var(--aqua); }
  .tabbar .tab-nuevo i { display: grid; place-items: center; width: 52px; height: 52px; margin-top: -1.6rem; border-radius: 50%; background: var(--aqua);
                         color: var(--azul-900); border: 4px solid var(--azul-900); box-shadow: 0 4px 14px rgba(0, 0, 0, .3); }
  .tabbar .tab-nuevo { color: #fff; }
  .tabbar .tab-nuevo.activo::before { display: none; }
  .tab-contador { position: absolute; top: 0; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--arena);
                  color: var(--azul-900); font: 800 .65rem/18px var(--fuente); text-align: center; }

  /* Botones redondos de herramientas (ojo, sol, selección, ordenar menú): por encima de la barra y más pequeños */
  body .pz-ojo-boton, body .pz-sol-boton, body .pz-multi-boton, body .pz-menu-boton { width: 40px; height: 40px; bottom: calc(78px + env(safe-area-inset-bottom)); }
  body .pz-ojo-boton { left: 10px; } body .pz-sol-boton { left: 56px; } body .pz-multi-boton { left: 102px; } body .pz-menu-boton { left: 148px; }
  body .pz-ojo-panel { bottom: calc(126px + env(safe-area-inset-bottom)); left: 10px; }
  body .pz-multi-panel { bottom: calc(126px + env(safe-area-inset-bottom)); right: 10px; }

  /* Más cómodo con el dedo */
  .principal input, .principal select, .principal textarea { font-size: 16px; max-width: 100%; }  /* el iPhone no hace zoom al escribir */
  .principal .btn, .principal .btn-aceptar { white-space: normal; text-align: center; max-width: 100%; }  /* botones largos: en dos líneas */
  .btn { min-height: 42px; }
  .btn-sm { min-height: 36px; }
  .topbar { margin-bottom: 1rem; }
  .topbar h1 { font-size: 1.3rem; }
  .topbar > .btn, .topbar-acciones { width: 100%; }
  .topbar-acciones .btn { flex: 1 1 auto; justify-content: center; }
  .panel { padding: 1rem; }
  .tabla-envoltorio { margin: 0 -1rem; padding: 0 1rem; }
  .principal table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .principal table.dd-tabla { display: table; }
  /* Tablero de proyectos: una columna por pantalla, deslizando de lado */
  .kanban { grid-template-columns: repeat(4, 86vw); scroll-snap-type: x mandatory; margin: 0 -14px; padding: 0 14px .5rem; }
  .kanban .columna { scroll-snap-align: center; }
  /* Ventanas emergentes: casi a pantalla completa */
  dialog { max-width: calc(100vw - 1rem) !important; max-height: calc(100dvh - 2rem) !important; }
  .dlg-detalle, .dlg-trabajo { padding: 1rem; }
}
@media (max-width: 600px) {
  .kpis:not(.kpis-obra) { grid-template-columns: 1fr 1fr !important; gap: .6rem !important; }
  .kpi .valor { font-size: 1.25rem; }
  .fila { grid-template-columns: 1fr !important; }
}
#menu-lateral.ordenando > * { outline: 1px dashed rgba(255, 255, 255, .25); outline-offset: -2px; border-radius: 6px; }
#menu-lateral.ordenando a { cursor: default; }
.menu-flechas { margin-left: auto; display: inline-flex; gap: .2rem; }
.menu-flechas button { border: 0; background: rgba(255, 255, 255, .15); color: #fff; width: 22px; height: 22px; border-radius: 5px; cursor: pointer; font-size: .7rem; line-height: 1; padding: 0; }
.menu-flechas button:hover { background: #1fc2e3; color: #062f42; }
#menu-lateral .grupo { display: flex; align-items: center; }

/* Ventana «Gastos del presupuesto» (proyecto) */
.dlg-gastos { width: min(520px, calc(100vw - 24px)); border: 0; border-radius: 14px; padding: 0; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); }
.dlg-gastos::backdrop { background: rgba(6, 47, 66, .45); }
.dg-ayuda { margin: .7rem .9rem 0; font-size: .85rem; }
.dg-lista { list-style: none; margin: .6rem .9rem 0; padding: 0; display: grid; gap: .35rem; }
.dg-lista li { display: flex; justify-content: space-between; align-items: center; gap: .8rem; padding: .45rem .6rem; border: 1px solid var(--borde); border-radius: 10px; }
.dg-lista label { align-items: flex-start; }
.dg-lista label span { display: grid; }
.dg-lista small { color: var(--texto-2); font-size: .75rem; }
.dg-importe { font-weight: 700; color: var(--azul-900); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dg-cuenta { margin: .8rem .9rem 0; padding: .6rem .8rem; background: var(--fondo); border-radius: 10px; display: grid; gap: .2rem; font-variant-numeric: tabular-nums; }
.dg-cuenta > div { display: flex; justify-content: space-between; }
.dg-resultado { border-top: 2px solid var(--azul-900); padding-top: .3rem; margin-top: .2rem; font-weight: 700; }
.dg-resultado strong { font-size: 1.2rem; }

/* Ventanita del mapa del cliente (presupuesto) */
.dlg-mapa { width: min(560px, calc(100vw - 24px)); border: 0; border-radius: 14px; padding: 0; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); }
.dlg-mapa::backdrop { background: rgba(6, 47, 66, .45); }
.dm-cab { display: flex; justify-content: space-between; align-items: center; padding: .7rem .9rem; border-bottom: 1px solid var(--borde); color: var(--azul-900); }
.dm-cab strong { display: inline-flex; align-items: center; gap: .4rem; }
.dm-buscar { display: flex; gap: .4rem; padding: .7rem .9rem 0; }
.dm-buscar input { flex: 1; min-width: 0; }
.dm-mapa { height: 300px; margin: .7rem .9rem 0; border-radius: 10px; border: 1px solid var(--borde); }
.dm-km { margin: .6rem .9rem 0; font-size: .9rem; color: var(--texto-2); }
.dm-km.ok { color: var(--azul-700); font-weight: 700; }
.dm-km.falta { color: var(--warn); font-weight: 600; }
.dm-pie { display: flex; justify-content: space-between; gap: .5rem; padding: .7rem .9rem .9rem; }

/* Botones pequeños de la lista de presupuestos para cambiar de estado */
.mover-estado { display: flex; gap: .25rem; margin: 0; }
.mover-estado button { width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--borde); background: #fff; color: var(--azul-700); font-weight: 800; cursor: pointer; padding: 0; line-height: 1; }
.mover-estado button:hover { border-color: var(--azul-700); background: var(--aqua-50); }
.mover-estado .me-ok { color: var(--ok); }
.mover-estado .me-ok:hover { background: #e3f6ec; border-color: var(--ok); }
.mover-estado .me-no { color: var(--err); }
.mover-estado .me-no:hover { background: #fde6e6; border-color: var(--err); }

/* Mapa de pasos del seguimiento (presupuesto) */
.mapa-pasos { margin-bottom: 1.2rem; }
.mapa-pasos h3, .seg-titulo { font-size: .92rem; color: var(--azul-700); margin: .2rem 0 .6rem; display: flex; align-items: baseline; gap: .5rem; }
.mapa-pasos h3 small { font-weight: 500; color: var(--texto-2); }
.pasos { list-style: none; margin: 0 0 .7rem; padding: 0; position: relative; }
.pasos::before { content: ""; position: absolute; left: 15px; top: 14px; bottom: 14px; width: 2px; background: var(--borde); }
.paso { position: relative; display: flex; align-items: flex-start; gap: .6rem; padding: .35rem 0; }
.paso-marca, .paso-borrar { margin: 0; }
.paso-marca button { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--azul-700); background: #fff; color: var(--azul-700); font-weight: 800; cursor: pointer; padding: 0; }
.paso-marca button:hover { background: var(--aqua-50); }
.paso.hecho .paso-marca button { background: var(--ok); border-color: var(--ok); color: #fff; }
.paso.vencido .paso-marca button { border-color: var(--err); color: var(--err); }
.paso-cuerpo { flex: 1; min-width: 0; display: grid; gap: .05rem; padding-top: .1rem; }
.paso-tipo { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; color: var(--texto-2); }
.paso-cuerpo strong { font-size: .92rem; color: var(--azul-900); }
.paso.hecho .paso-cuerpo strong { text-decoration: line-through; color: var(--texto-2); }
.paso-cuerpo small { font-size: .76rem; color: var(--texto-2); }
.paso-borrar button { border: 0; background: none; color: var(--texto-2); cursor: pointer; opacity: .45; }
.paso-borrar button:hover { opacity: 1; color: var(--err); }
.paso-nuevo { display: grid; grid-template-columns: auto 1fr; gap: .4rem; background: var(--fondo); border-radius: 10px; padding: .6rem; }
.paso-nuevo input[name=fecha] { grid-column: 1; }
.paso-nuevo button { grid-column: 2; justify-self: end; }

/* Botón «El cliente lo ha aceptado → pasar a Proyectos» */
.aceptar-pres { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: .8rem 0; }
.btn-aceptar { background: var(--ok); color: #fff; border: 0; font-weight: 700; padding: .65rem 1.1rem; border-radius: 10px; display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; }
.btn-aceptar:hover { filter: brightness(1.08); }
.aceptar-ok { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--ok); }

/* Cliente en grande bajo el título del presupuesto */
.cliente-principal { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: .5rem 0 .2rem; }
.cliente-principal label { display: inline-flex; align-items: center; gap: .35rem; margin: 0; font-weight: 700; color: var(--azul-700); }
.select-cliente { font-size: 1.15rem; font-weight: 700; color: var(--azul-900); padding: .5rem .8rem; border: 2px solid var(--azul-700); border-radius: 10px; background: #fff; min-width: min(420px, 100%); max-width: 100%; }

/* Lo marcado como oculto se oculta aunque su clase tenga display: flex o grid */
.impuestos-pres [hidden] { display: none !important; }

/* Impuestos, márgenes, rentabilidad y totales dentro de «En este presupuesto» */
.impuestos-pres { padding: 1rem 1.1rem 1.1rem; background: var(--fondo); border-top: 1px solid var(--borde); }
.resumen-vacio { margin: 0; padding: .9rem 1.1rem; font-size: .9rem; }
.impuestos-pres h4 { margin: 0 0 .7rem; font-size: .95rem; color: var(--azul-700); }
/* Reparto del presupuesto (debajo de «Mi rentabilidad») */
.reparto-pres { background: #fff; border: 1px solid var(--borde); border-radius: 12px; padding: .9rem 1rem; display: grid; gap: .6rem; font-size: .88rem; font-variant-numeric: tabular-nums; }
.reparto-pres h3 { margin: 0; font-size: .95rem; color: var(--azul-700); display: flex; align-items: center; gap: .35rem; }
.reparto-pres h3 small { font-weight: 500; color: var(--texto-2); }
.reparto-barra { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--fondo); }
.reparto-barra span { display: block; height: 100%; }
.reparto-grupo { border-top: 1px solid var(--borde); padding-top: .45rem; }
.rg-cab { display: flex; align-items: center; gap: .45rem; }
.rg-cab strong { color: var(--azul-900); }
.rg-color { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.rg-suma { margin-left: auto; font-weight: 700; }
.reparto-grupo.negativo .rg-suma { color: var(--err); }
.reparto-grupo ul { list-style: none; margin: .25rem 0 0; padding: 0 0 0 1.05rem; display: grid; gap: .15rem; color: var(--texto-2); }
.reparto-grupo li { display: flex; justify-content: space-between; gap: 1rem; }
.reparto-total { display: flex; justify-content: space-between; border-top: 2px solid var(--azul-900); padding-top: .45rem; font-weight: 700; color: var(--azul-900); }
/* Botones «→» de Mi rentabilidad y resaltado del destino */
.rentabilidad > div > span:last-child { display: inline-flex; align-items: center; gap: .35rem; }
.r-ir { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; background: rgba(0, 0, 0, .06); color: var(--azul-700); font-weight: 800; font-size: .8rem; text-decoration: none; }
.r-ir:hover { background: var(--azul-700); color: #fff; }
.rentabilidad > div.r-clic { cursor: pointer; border-radius: 6px; margin: 0 -.3rem; padding: .05rem .3rem; }
.rentabilidad > div.r-clic:hover { background: rgba(0, 0, 0, .05); }
/* Ventana de detalle de «Mi rentabilidad» */
.dlg-detalle { border: 0; border-radius: var(--radio); padding: 1.2rem 1.3rem; width: min(720px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow-y: auto; box-shadow: 0 20px 60px rgba(6, 47, 66, .3); color: var(--texto); }
.dlg-detalle::backdrop { background: rgba(6, 47, 66, .5); }
.dlg-detalle .dd-cab { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.dlg-detalle h3 { margin: 0; color: var(--azul-800); }
.dlg-detalle h4 { margin: .9rem 0 .4rem; font-size: .95rem; color: var(--azul-700); }
.dlg-detalle input { padding: .3rem .45rem; font-size: .9rem; min-width: 0; }
.dd-tabla-caja { overflow-x: auto; }
.dd-tabla { width: 100%; border-collapse: collapse; font-size: .88rem; font-variant-numeric: tabular-nums; }
.dd-tabla th { text-align: left; font-weight: 600; color: var(--texto-2); border-bottom: 1px solid rgba(0, 0, 0, .12); padding: .25rem .35rem; }
.dd-tabla td { border-bottom: 1px solid rgba(0, 0, 0, .06); padding: .25rem .35rem; }
.dd-tabla td:last-child, .dd-tabla th:last-child { text-align: right; white-space: nowrap; }
.dd-tabla input { width: 6rem; }
.dd-tarifa { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; margin-top: .5rem; font-size: .88rem; }
.dd-tarifa input { width: 5.5rem; }
.dd-linea { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .35rem 0; border-bottom: 1px solid rgba(0, 0, 0, .06); font-size: .9rem; }
.dd-linea .dd-nombre { flex: 1 1 10rem; }
.dd-linea .dd-det { color: var(--texto-2); font-size: .82rem; }
.dd-linea .dd-campos { display: inline-flex; align-items: center; gap: .3rem; }
.dd-linea .dd-campos input { width: 5rem; }
.dd-linea .dd-imp { min-width: 5.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.dd-linea.quitado .dd-nombre, .dd-linea.quitado .dd-imp { text-decoration: line-through; opacity: .6; }
.dd-anadir { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem; }
.dd-anadir label { display: grid; gap: .15rem; width: 7rem; }
.dd-anadir label.dd-anadir-nombre { flex: 1 1 12rem; width: auto; }
.dd-anadir small { color: var(--texto-2); }
.dd-cuentas { display: grid; gap: .35rem; font-variant-numeric: tabular-nums; margin-top: .6rem; }
.dd-cuenta { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.dd-cuenta input { width: 5rem; }
.dd-total { display: flex; justify-content: space-between; gap: 1rem; border-top: 2px solid var(--azul-900); margin-top: .9rem; padding-top: .5rem; font: 800 1.1rem var(--fuente-titulo); color: var(--azul-900); }
.dlg-detalle .dd-nota { margin: .5rem 0 0; }
@keyframes resaltar { 0%, 60% { box-shadow: 0 0 0 4px rgba(31, 194, 227, .55); background-color: rgba(31, 194, 227, .12); } 100% { box-shadow: 0 0 0 0 rgba(31, 194, 227, 0); } }
.resaltado { animation: resaltar 1.8s ease-out; border-radius: 8px; }

/* «Mi rentabilidad» y «Reparto» en la columna lateral del presupuesto */
.oficina-lateral { display: grid; gap: 1rem; }
.oficina-lateral .rentabilidad { max-width: none; }
.oficina-lateral .rentabilidad h3, .oficina-lateral .reparto-pres h3 { flex-wrap: wrap; }
.oficina-lateral .rentabilidad h3 small, .oficina-lateral .reparto-pres h3 small { flex-basis: 100%; }
/* Partidas de «En este presupuesto» desplegables */
.partidas-det > summary.resumen-cab { list-style: none; cursor: pointer; }
.partidas-det > summary.resumen-cab::-webkit-details-marker { display: none; }
.partidas-det > summary.resumen-cab::after { content: "▸"; margin-left: .4rem; color: #fff; font-size: 1.1rem; transition: transform .15s; }
.partidas-det[open] > summary.resumen-cab::after { transform: rotate(90deg); }

/* Totales y «Mi rentabilidad» uno al lado del otro (en el móvil, uno debajo del otro) */
.impuestos-pres .resumen-calculo { margin-top: .4rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
.impuestos-pres .resumen-calculo > div:last-child { order: -1; }  /* los totales a la izquierda */
.impuestos-pres .rentabilidad { max-width: none; }
.impuestos-pres .totales { width: auto; margin: 0; }
.impuestos-pres .recargos-pres { margin-top: 0; }
@media (max-width: 760px) { .impuestos-pres .resumen-calculo { grid-template-columns: 1fr; } }
.impuestos-pres .totales { background: #fff; border-radius: 10px; padding: .7rem .9rem; }
.resumen-totales { display: grid; gap: .3rem; padding: .9rem 1.1rem 1rem; background: var(--fondo); font-size: .9rem; }
.resumen-totales > div { display: flex; justify-content: space-between; gap: 1rem; color: var(--texto-2); }
.resumen-totales .resumen-total { margin-top: .35rem; padding-top: .6rem; border-top: 2px solid var(--borde); color: var(--texto); font-weight: 600; font-size: 1rem; align-items: baseline; }
.resumen-total strong { font-size: 1.35rem; color: var(--azul-800); }
@media (max-width: 640px) {
  .resumen-pista { display: none; }
  .resumen-item { grid-template-columns: 1.8rem minmax(0, 1fr) auto; row-gap: .25rem; }
  .resumen-calc { grid-column: 2; grid-row: 2; }
  .resumen-importe { grid-column: 3; grid-row: 1; min-width: 0; }
  .resumen-editar { display: none; }
}
.anadir-fila { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .6rem; }
.anadir-fila select { width: auto; max-width: 100%; padding: .45em .7em; font-size: .85rem; border-radius: 999px; }
.tabla-materiales { width: 100%; }
.tabla-materiales th { font-size: .75rem; }
.tabla-materiales td:nth-child(3) { width: 170px; }
.tabla-calculo tr.falta-medida [name=cantidad] { border-color: var(--warn); background: var(--warn-50); }
@media (max-width: 700px) { .medidas { grid-template-columns: repeat(2, minmax(0, 1fr)); } .solo-oficina { margin-left: 0; } }

/* Dirección con mapa (templates/_ubicacion.html) */
.ubicacion { margin-bottom: 1rem; }
.ubicacion .campo { margin-bottom: .6rem; }
.ubi-buscar { display: flex; gap: .5rem; flex-wrap: wrap; }
.ubi-buscar input { flex: 1 1 220px; }
.ubi-caja { border: 2px solid var(--warn); border-radius: 12px; overflow: hidden; }
.ubicacion.confirmada .ubi-caja { border-color: var(--ok); }
.ubi-mapa { height: 300px; background: var(--fondo); z-index: 0; }
.ubi-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .6rem .8rem; background: #fff; border-top: 1px solid var(--borde); }
.ubi-estado { margin: 0; flex: 1 1 220px; font-size: .83rem; font-weight: 600; }
.ubi-estado.pendiente, .ubi-estado.buscando { color: var(--warn); }
.ubi-estado.ok { color: var(--ok); }
.ubi-estado.error { color: var(--err); }
.ubi-botones { display: flex; gap: .4rem; flex-wrap: wrap; }
.ubi-botones .btn[disabled] { opacity: .45; cursor: not-allowed; }
.ubicacion .leaflet-control-layers { font: 600 .78rem var(--fuente); }

/* Pedir presupuesto/asesoría: confirmar el teléfono */
.confirmar-tel { border: 1px solid var(--borde); border-radius: 12px; padding: .9rem 1rem 1rem; margin: 0 0 1rem; min-width: 0; }
.confirmar-tel legend { font-weight: 600; font-size: .9rem; color: var(--azul-900); padding: 0 .3rem; }
.tel-actual { display: flex; align-items: center; gap: .5rem; margin: .1rem 0 .3rem; font: 700 1.2rem var(--fuente-titulo); color: var(--azul-900); }
.tel-actual svg { color: var(--azul-500); }
.opciones-tel { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; margin-top: .6rem; }
.tel-nuevo { margin-top: .8rem; }

/* «Mi cuenta» sin solicitudes: dos formas de empezar */
.empezar-intro { margin: 0 0 1rem; color: var(--texto-2); }
.empezar-opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; align-items: start; }
.empezar-opcion { position: relative; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.3rem 1.2rem 1.2rem; }
.empezar-opcion h3 { display: flex; align-items: center; gap: .45rem; font-size: 1.02rem; margin: 0 0 .4rem; padding-right: 2rem; }
.empezar-opcion h3 svg { color: var(--azul-500); flex: none; }
.empezar-opcion > p { color: var(--texto-2); font-size: .9rem; margin: 0 0 1rem; }
.empezar-opcion .campo { margin-bottom: .8rem; }
.empezar-num { position: absolute; top: 1rem; right: 1rem; width: 26px; height: 26px; border-radius: 50%; background: var(--aqua-50); color: var(--azul-700); font-weight: 700; font-size: .85rem; display: grid; place-items: center; }

.botones-auth { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.botones-auth .btn { justify-content: center; }
.datos-cuenta { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1rem; margin: 0 0 1.4rem; padding: 1rem 1.2rem; background: var(--aqua-50); border: 1px solid var(--aqua-100); border-radius: 12px; }
.datos-cuenta dt { color: var(--muted); font-size: .85rem; align-self: center; }
.datos-cuenta dd { margin: 0; font-weight: 700; color: var(--azul-900); font-size: 1.05rem; word-break: break-all; }

/* Redes sociales (portada) */
.redes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.redes.redes-una { grid-template-columns: minmax(0, 560px); justify-content: center; }
.red { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; display: flex; flex-direction: column; }
.red-cabecera { display: flex; align-items: center; gap: .75rem; padding: .9rem 1rem; border-bottom: 1px solid var(--borde); }
.red-cabecera > div { flex: 1; min-width: 0; }
.red-cabecera strong { display: block; color: var(--azul-900); }
.red-cabecera small { color: var(--muted); }
.red-icono { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: #fff; flex: none; }
.red-ig { background: linear-gradient(45deg, #f9a825, #e1306c 55%, #833ab4); }
.red-fb { background: #1877f2; }
.red-marco { width: 100%; height: 640px; border: 0; display: block; background: #fff; }
.red-marco-ig { height: 540px; }
.red-marco-fb { max-width: 500px; margin: 0 auto; }  /* el recuadro de Facebook mide como máximo 500 px */
@media (max-width: 820px) { .redes { grid-template-columns: minmax(0, 1fr); } .red-marco { height: 560px; } .red-marco-ig { height: 480px; } }

.inline { display: inline; }
.texto-ok { color: var(--ok); }
.texto-err { color: var(--err); }
.mt { margin-top: 1.2rem; }
.sin-margen { margin: 0; }

/* ==========================================================================
   Botón del ojo (inspector de elementos) — static/js/inspector.js
   ========================================================================== */
.pz-ojo-boton { position: fixed; left: 20px; bottom: 20px; z-index: 9990; width: 50px; height: 50px; border-radius: 50%; border: 2px solid #fff; background: var(--azul-900); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); }
.pz-ojo-boton:hover { transform: scale(1.06); }
.pz-ojo-boton.pz-ojo-on { background: #f59e0b; color: var(--azul-900); animation: pz-ojo-pulso 1.4s ease-in-out infinite; }
@keyframes pz-ojo-pulso { 50% { box-shadow: 0 0 0 8px rgba(245, 158, 11, .25); } }
.pz-ojo-marco { position: fixed; z-index: 9980; pointer-events: none; border: 2px solid #f59e0b; background: rgba(245, 158, 11, .12); border-radius: 6px; }
.pz-ojo-sel { border-color: #10b981; background: rgba(16, 185, 129, .10); border-style: dashed; }
.pz-ojo-etiqueta { position: fixed; z-index: 9985; pointer-events: none; max-width: min(420px, calc(100vw - 8px)); background: var(--azul-900); color: #fff; font: 600 .8rem/1.3 var(--fuente, system-ui), sans-serif; padding: .35rem .6rem; border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, .25); }
.pz-ojo-panel { position: fixed; left: 20px; bottom: 82px; z-index: 9991; max-width: min(380px, calc(100vw - 32px)); background: #fff; color: var(--azul-900); border: 1px solid var(--borde); border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, .2); padding: .6rem .85rem; font-size: .85rem; }
.pz-ojo-estado { display: block; color: #059669; margin-bottom: .2rem; }
.pz-ojo-nombre { font-weight: 600; word-break: break-word; }
.pz-ojo-oculto { position: fixed; top: -1000px; opacity: 0; }
@media (max-width: 960px) { .pz-ojo-boton { left: 16px; bottom: 16px; } .pz-ojo-panel { left: 16px; bottom: 76px; } }
@media print { .pz-ojo-boton, .pz-sol-boton, .pz-ojo-panel, .pz-ojo-marco, .pz-ojo-etiqueta { display: none !important; } }

/* ==========================================================================
   Botón del sol (modo alto contraste para ver la pantalla al aire libre) — static/js/inspector.js
   ========================================================================== */
.pz-sol-boton { position: fixed; left: 80px; bottom: 20px; z-index: 9990; width: 50px; height: 50px; border-radius: 50%; border: 2px solid #fff; background: var(--azul-900); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); }
.pz-sol-boton:hover { transform: scale(1.06); }
.pz-sol-boton.pz-sol-on { background: #ffd500; color: #000; border-color: #000; }
@media (max-width: 960px) { .pz-sol-boton { left: 76px; bottom: 16px; } }

/* Botón de selección múltiple (al lado del ojo y del sol) */
.pz-multi-boton { position: fixed; left: 140px; bottom: 20px; z-index: 9990; width: 50px; height: 50px; border-radius: 50%; border: 2px solid #fff; background: var(--azul-900); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); }
.pz-multi-boton:hover { transform: scale(1.06); }
.pz-multi-boton.pz-ojo-on { background: #8b5cf6; color: #fff; animation: pz-ojo-pulso 1.4s ease-in-out infinite; }
.pz-multi-cuenta { position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 999px; background: #f59e0b; color: #062f42; font: 800 .75rem/22px system-ui, sans-serif; text-align: center; }
.pz-multi-sel { border-color: #8b5cf6; background: rgba(139, 92, 246, .12); border-style: solid; }
.pz-multi-sel::after { content: attr(data-num); position: absolute; top: -11px; left: -11px; width: 22px; height: 22px; border-radius: 50%; background: #8b5cf6; color: #fff; font: 800 .75rem/22px system-ui, sans-serif; text-align: center; }
.pz-multi-panel { left: auto; right: 20px; bottom: 20px; width: min(420px, calc(100vw - 32px)); max-height: 60vh; overflow: auto; }
.pz-multi-cab { display: flex; flex-direction: column; gap: .1rem; margin-bottom: .4rem; }
.pz-multi-ayuda, .pz-multi-vacio { color: var(--texto-2); font-size: .78rem; margin: 0; }
.pz-multi-lista { margin: 0 0 .5rem; padding-left: 1.2rem; display: grid; gap: .3rem; }
.pz-multi-lista li { font-size: .8rem; }
.pz-multi-lista li span { word-break: break-word; }
.pz-multi-lista button { margin-left: .3rem; border: 0; background: none; color: var(--err); cursor: pointer; font-weight: 700; }
.pz-multi-botones { display: flex; gap: .4rem; }
.pz-multi-botones button { border: 0; border-radius: 8px; padding: .45rem .8rem; font-weight: 700; cursor: pointer; font-family: inherit; }
.pz-multi-copiar { background: #8b5cf6; color: #fff; }
.pz-multi-vaciar { background: var(--fondo); color: var(--azul-900); }
@media (max-width: 960px) { .pz-multi-boton { left: 136px; bottom: 16px; } }
@media print { .pz-multi-boton, .pz-multi-panel, .pz-multi-sel { display: none !important; } }

/* Modo sol: texto negro, bordes marcados, fondos blancos y letra más gruesa. */
html.pz-sol {
  --azul-900: #001f2e;
  --azul-800: #002a3d;
  --azul-700: #003650;
  --azul-500: #004f70;
  --texto: #000;
  --texto-2: #000;
  --muted: #1f2d33;
  --borde: #3d5560;
  --fondo: #fff;
  --aqua-50: #fff;
  --aqua-100: #e6f4f8;
  --ok: #005c32;
  --warn: #6b3f00;
  --err: #9e0000;
  --violeta: #3a2a99;
  --sombra: none;
}
html.pz-sol body { font-weight: 500; color: #000; background: #fff; }
html.pz-sol strong, html.pz-sol b, html.pz-sol h1, html.pz-sol h2, html.pz-sol h3, html.pz-sol label, html.pz-sol th { font-weight: 800; }
html.pz-sol .panel, html.pz-sol .tarjeta, html.pz-sol .bloque-pres { border: 2px solid #000; }
html.pz-sol input, html.pz-sol select, html.pz-sol textarea { border: 2px solid #000 !important; color: #000; background: #fff; font-weight: 600; }
html.pz-sol input:focus, html.pz-sol select:focus, html.pz-sol textarea:focus { outline: 3px solid #ffd500; outline-offset: 1px; }
html.pz-sol ::placeholder { color: #4a5a60; opacity: 1; }
html.pz-sol .lateral { background: #000; color: #fff; }
html.pz-sol .lateral nav a { color: #fff; font-weight: 700; }
html.pz-sol .lateral nav a.activo { background: #ffd500; color: #000; }
html.pz-sol .btn { font-weight: 800; }
html.pz-sol .btn-borde { border: 2px solid #000; color: #000; background: #fff; }
html.pz-sol a { text-decoration: underline; text-underline-offset: 2px; }
html.pz-sol .lateral a, html.pz-sol .btn { text-decoration: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 960px) {
  .hero .contenedor, .nosotros, .contacto, .dos-columnas { grid-template-columns: 1fr; }
  .hero .contenedor { padding: 3.5rem 0 6rem; }
  .pie .contenedor { grid-template-columns: 1fr; }
  .rejilla, .rejilla-3 { grid-template-columns: 1fr; }
  .admin { grid-template-columns: minmax(0, 1fr); }  /* minmax(0, …): nada ensancha la página más que la pantalla */
  /* Menú lateral: panel que entra desde la izquierda (botón «Menú» de la barra de abajo) */
  .lateral { position: fixed; top: 0; left: 0; bottom: 0; z-index: 10001; width: min(300px, 86vw); height: 100dvh; overflow-y: auto;
             transform: translateX(-105%); transition: transform .22s ease; padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom)); box-shadow: 8px 0 30px rgba(0, 0, 0, .3); }
  .admin.menu-abierto .lateral { transform: none; }
  .lateral nav a { padding: .75rem .8rem; font-size: 1rem; }
  .velo-menu { position: fixed; inset: 0; z-index: 10000; background: rgba(6, 47, 66, .45); }
  .principal { padding: 1rem 14px calc(6rem + env(safe-area-inset-bottom)); }
}
@media (max-width: 820px) {
  .menu-toggle { display: block; }
  .nav { display: none; position: absolute; top: 70px; left: 0; right: 0; background: #fff; flex-direction: column; align-items: stretch; gap: 0; padding: .5rem 16px 1rem; border-bottom: 1px solid var(--borde); box-shadow: var(--sombra); }
  .nav.abierto { display: flex; }
  .nav a { padding: .7rem 0; }
  .nav-acciones { flex-direction: column; align-items: stretch; margin-top: .5rem; }
  .seccion { padding: 3.5rem 0; }
  .cta-banda { padding: 2rem 1.5rem; }
  .embudo-fila { grid-template-columns: 110px 1fr 40px; }
  .msg { max-width: 92%; }
}

/* ==========================================================================
   DISEÑO DE LA WEB (Portfolio web → Diseño): plantillas de cada cuenta
   Las variables (--azul-700, --aqua, --pagina…) las pone base_publica.html con los colores elegidos.
   ========================================================================== */
.logo .logo-texto { color: inherit; }
.logo .logo-texto b { font-weight: inherit; }
.logo-img { height: 44px; width: auto; max-width: 210px; object-fit: contain; }
.pie .logo-img { height: 52px; }
:is(.web, .web-marca) .btn-primario { color: var(--sobre-primario, #fff); }
:is(.web, .web-marca) .btn-primario:hover { background: var(--azul-800); }
:is(.web, .web-marca) .btn-aqua { color: var(--sobre-acento, var(--azul-900)); }
:is(.web, .web-marca) .btn-aqua:hover, :is(.web, .web-marca) .btn-arena:hover { filter: brightness(1.08); background: var(--aqua); }
:is(.web, .web-marca) .btn-arena { color: var(--sobre-destacado, var(--azul-900)); }
:is(.web, .web-marca) .btn-arena:hover { background: var(--arena); }

body.web { background: var(--pagina); color: var(--texto); }
.web .servicio, .web .trabajo, .web .paso, .web .opinion, .web .tarjeta, .web .red { background: var(--superficie); border-color: var(--borde); }
.web .hero .contenedor { position: relative; z-index: 1; }
.web .hero-deco { display: none; pointer-events: none; }
.web .ola { color: var(--pagina); }
.web .placeholder.ph-1 { background: linear-gradient(160deg, var(--azul-700), var(--aqua)); }
.web .nosotros-visual > img { width: 100%; height: 100%; object-fit: cover; }
.web .nosotros-texto { color: var(--texto-2); }
.web .nosotros .eyebrow { display: inline-block; font-weight: 700; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--azul-500); margin-bottom: .6rem; }
.web .nosotros h2 { font-size: clamp(1.8rem, 3.2vw, 2.4rem); }
.web .cta-banda h2 em, .web .seccion-cabecera h2 em, .web .nosotros h2 em { font-style: normal; color: var(--aqua); }
.web .cta-banda h2 em { color: var(--arena); }

/* Portada con foto de fondo */
.web .hero.con-imagen {
  background: linear-gradient(160deg, color-mix(in srgb, var(--azul-900) 88%, transparent), color-mix(in srgb, var(--azul-700) 50%, transparent)),
              var(--hero-img) center / cover no-repeat;
}
.web .hero.con-imagen h1 { color: #fff; }
.web .hero.con-imagen p.lead { color: rgba(255, 255, 255, .86); }
.web .hero.con-imagen .hero-deco { display: none; }
/* Formatos de la portada */
.hero-centrado .contenedor { grid-template-columns: 1fr; text-align: center; padding: 7rem 0 9rem; }
.hero-centrado h1 { font-size: clamp(2.5rem, 6vw, 4.6rem); max-width: 15em; margin-inline: auto; }
.hero-centrado p.lead { margin-inline: auto; }
.hero-centrado .hero-ctas { justify-content: center; }
.hero-foto { border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 30px 60px rgba(0, 0, 0, .22); }
.hero-foto img, .hero-foto .placeholder { width: 100%; height: 100%; object-fit: cover; }
/* Galería en mosaico */
.galeria-mosaico { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); grid-auto-rows: 250px; grid-auto-flow: dense; gap: 1rem; }
.galeria-mosaico .trabajo { position: relative; border: 0; }
.galeria-mosaico .trabajo:first-child { grid-column: span 2; grid-row: span 2; }
.galeria-mosaico .trabajo-img { position: absolute; inset: 0; aspect-ratio: auto; }
.galeria-mosaico .trabajo-img img { transition: transform .5s ease; }
.galeria-mosaico .trabajo:hover .trabajo-img img { transform: scale(1.06); }
.galeria-mosaico .trabajo-cuerpo { position: absolute; inset: auto 0 0 0; padding: 3rem 1.2rem 1.1rem; background: linear-gradient(transparent, rgba(0, 0, 0, .8)); }
.galeria-mosaico .trabajo-cuerpo h3 { color: #fff; }
.galeria-mosaico .trabajo-cuerpo p { color: rgba(255, 255, 255, .85); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.galeria-mosaico .trabajo-meta { color: rgba(255, 255, 255, .75); }
@media (max-width: 640px) { .galeria-mosaico .trabajo:first-child { grid-column: auto; grid-row: auto; } }

/* ---- Plantillas oscuras (Futurista) ---- */
.web-oscura .cabecera { background: color-mix(in srgb, var(--pagina) 78%, transparent); border-color: var(--borde); }
.web-oscura .logo, .web-oscura .menu-toggle { color: var(--texto) !important; }
.web-oscura .nav a { color: var(--texto-2); }
.web-oscura .nav a:hover { color: var(--aqua); }
.web-oscura .nav a.btn-primario, .web-oscura .nav a.btn-primario:hover { color: var(--sobre-primario); }
.web-oscura :is(h1, h2, h3, h4), .web-oscura label, .web-oscura .dato strong { color: var(--titulos); }
.web-oscura :is(input, select, textarea) { background: color-mix(in srgb, var(--pagina) 70%, #000); color: var(--texto); border-color: var(--borde); }
.web-oscura .btn-borde, .web-oscura .btn-blanco { background: transparent; color: var(--texto); border-color: var(--borde); }
.web-oscura .btn-borde:hover, .web-oscura .btn-blanco:hover { background: transparent; border-color: var(--aqua); color: var(--aqua); }
.web-oscura .trabajo-img .badge { background: rgba(0, 0, 0, .6); color: #fff; }
.web-oscura .vacio, .web-oscura .filtros a { background: var(--superficie); border-color: var(--borde); color: var(--texto-2); }
.web-oscura .filtros a.activo { background: var(--azul-700); color: var(--sobre-primario); }
.web-oscura .seccion-cabecera .eyebrow, .web-oscura .nosotros .eyebrow { color: var(--aqua); }
@media (max-width: 820px) { .web-oscura .nav { background: var(--pagina); } }

.tema-futurista .hero {
  border-bottom: 1px solid var(--borde);
  background: radial-gradient(900px 500px at 80% -10%, color-mix(in srgb, var(--azul-700) 55%, transparent), transparent 60%),
              radial-gradient(700px 500px at 0% 110%, color-mix(in srgb, var(--arena) 28%, transparent), transparent 60%), var(--azul-900);
}
.tema-futurista .hero-deco {
  display: block; position: absolute; inset: 0;
  background-image: linear-gradient(color-mix(in srgb, var(--aqua) 13%, transparent) 1px, transparent 1px),
                    linear-gradient(90deg, color-mix(in srgb, var(--aqua) 13%, transparent) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 35%, #000 25%, transparent 75%); mask-image: radial-gradient(ellipse at 50% 35%, #000 25%, transparent 75%);
}
.tema-futurista .ola { display: none; }
.tema-futurista .hero h1 { text-transform: uppercase; letter-spacing: .01em; font-size: clamp(2rem, 5vw, 3.8rem); }
.tema-futurista .hero h1 em, .tema-futurista .seccion-cabecera h2 em {
  background: linear-gradient(90deg, var(--aqua), var(--arena)); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--aqua) 45%, transparent));
}
.tema-futurista .btn { border-radius: 10px; text-transform: uppercase; letter-spacing: .07em; font-size: .82rem; }
.tema-futurista .btn-aqua { box-shadow: 0 0 26px color-mix(in srgb, var(--aqua) 55%, transparent); }
.tema-futurista .btn-arena { box-shadow: 0 0 26px color-mix(in srgb, var(--arena) 50%, transparent); }
.tema-futurista :is(.servicio, .trabajo, .paso, .opinion, .tarjeta, .hero-tarjeta, .red) {
  background: color-mix(in srgb, var(--superficie) 75%, transparent); border: 1px solid color-mix(in srgb, var(--aqua) 22%, transparent); backdrop-filter: blur(10px);
}
.tema-futurista :is(.servicio, .trabajo):hover { border-color: var(--aqua); box-shadow: 0 0 0 1px var(--aqua), 0 0 32px color-mix(in srgb, var(--aqua) 25%, transparent); }
.tema-futurista :is(.servicio .icono, .dato .icono) { background: color-mix(in srgb, var(--aqua) 12%, transparent); color: var(--aqua); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--aqua) 40%, transparent); }
.tema-futurista .paso::before { background: transparent; border: 1px solid var(--aqua); color: var(--aqua); box-shadow: 0 0 14px color-mix(in srgb, var(--aqua) 40%, transparent); }
.tema-futurista .eyebrow { font-family: var(--fuente-titulo); }
.tema-futurista .lista-check svg { color: var(--aqua); }
.tema-futurista .opinion .estrellas { text-shadow: 0 0 10px var(--arena); }
.tema-futurista .cta-banda { background: linear-gradient(120deg, color-mix(in srgb, var(--azul-700) 75%, #000), color-mix(in srgb, var(--arena) 50%, #000)); border: 1px solid color-mix(in srgb, var(--aqua) 30%, transparent); }
.tema-futurista .pie { border-top: 1px solid var(--borde); }
.tema-futurista .hero-foto { box-shadow: 0 0 0 1px var(--aqua), 0 0 50px color-mix(in srgb, var(--aqua) 30%, transparent); }

/* ---- Moderna ---- */
.tema-moderna .hero { background: var(--pagina); color: var(--texto); }
.tema-moderna .hero-deco {
  display: block; position: absolute; inset: 0;
  background: radial-gradient(620px 420px at 92% 8%, color-mix(in srgb, var(--aqua) 24%, transparent), transparent 70%),
              radial-gradient(520px 420px at 0% 100%, color-mix(in srgb, var(--azul-700) 15%, transparent), transparent 70%);
}
.tema-moderna .hero h1 { color: var(--azul-900); }
.tema-moderna .hero h1 em { background: linear-gradient(90deg, var(--azul-700), var(--aqua)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tema-moderna .hero p.lead { color: var(--texto-2); }
.tema-moderna .hero .btn-aqua { background: var(--azul-700); color: var(--sobre-primario); }
.tema-moderna .hero .btn-blanco { background: var(--superficie); color: var(--azul-900); border-color: var(--borde); }
.tema-moderna .hero-tarjeta { background: var(--superficie); border-color: var(--borde); box-shadow: 0 24px 60px rgba(17, 24, 39, .1); }
.tema-moderna .hero-tarjeta h3 { color: var(--azul-900); }
.tema-moderna .hero-tarjeta li { color: var(--texto-2); }
.tema-moderna .hero-tarjeta li svg { color: var(--azul-700); }
.tema-moderna .ola { display: none; }
.tema-moderna .btn { border-radius: 12px; }
.tema-moderna :is(.servicio, .trabajo, .paso, .opinion, .tarjeta) { border-color: transparent; border-radius: 20px; box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 12px 32px rgba(17, 24, 39, .07); }
.tema-moderna .seccion-cabecera .eyebrow, .tema-moderna .nosotros .eyebrow { background: var(--aqua-50); color: var(--azul-700); padding: .35em .95em; border-radius: 999px; }
.tema-moderna .cta-banda { border-radius: 28px; background: linear-gradient(120deg, var(--azul-700), var(--aqua)); }
.tema-moderna .cabecera { background: color-mix(in srgb, var(--pagina) 86%, transparent); }

/* ---- Aurora ---- */
.tema-aurora { --radio: 22px; }
.tema-aurora .hero {
  background: radial-gradient(800px 500px at 8% 0%, color-mix(in srgb, var(--azul-700) 75%, transparent), transparent 60%),
              radial-gradient(800px 600px at 92% 12%, color-mix(in srgb, var(--aqua) 80%, transparent), transparent 60%), var(--azul-900);
}
.tema-aurora .hero-deco {
  display: block; position: absolute; inset: -30%; filter: blur(50px); opacity: .85;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--arena) 55%, transparent), transparent) 25% 35% / 42% 42% no-repeat,
              radial-gradient(closest-side, color-mix(in srgb, var(--aqua) 60%, transparent), transparent) 72% 62% / 48% 48% no-repeat;
  animation: aurora 16s ease-in-out infinite alternate;
}
@keyframes aurora { to { transform: translate(7%, -5%) rotate(10deg); } }
.tema-aurora .hero h1 em { background: linear-gradient(90deg, var(--arena), #fff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tema-aurora .hero-tarjeta { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .3); backdrop-filter: blur(16px); }
.tema-aurora .btn-primario { background: linear-gradient(120deg, var(--azul-700), var(--aqua)); }
.tema-aurora :is(.servicio, .trabajo, .paso, .opinion) { border-color: color-mix(in srgb, var(--aqua) 18%, var(--borde)); }
.tema-aurora .servicio .icono { background: linear-gradient(135deg, var(--azul-700), var(--aqua)); color: #fff; }
.tema-aurora .paso::before { background: linear-gradient(135deg, var(--azul-700), var(--aqua)); }
.tema-aurora .seccion-cabecera .eyebrow, .tema-aurora .nosotros .eyebrow { background: linear-gradient(90deg, var(--azul-700), var(--aqua)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tema-aurora .cta-banda { background: linear-gradient(120deg, var(--azul-700), var(--aqua) 60%, var(--arena)); }
@media (prefers-reduced-motion: reduce) { .tema-aurora .hero-deco { animation: none; } }

/* ---- Elegante ---- */
.tema-elegante { --radio: 2px; }
.tema-elegante .btn { border-radius: 0; text-transform: uppercase; letter-spacing: .14em; font-size: .76rem; padding: 1.05em 1.9em; }
.tema-elegante .btn-sm { padding: .7em 1.2em; }
.tema-elegante .hero { background: var(--pagina); color: var(--texto); border-bottom: 1px solid var(--borde); }
.tema-elegante .hero h1 { color: var(--azul-900); letter-spacing: -.01em; }
.tema-elegante .hero h1 em { color: var(--aqua); font-style: italic; }
.tema-elegante .hero p.lead { color: var(--texto-2); }
.tema-elegante .hero .btn-aqua { background: var(--azul-700); color: var(--sobre-primario); }
.tema-elegante .hero .btn-blanco { background: transparent; border-color: var(--azul-900); color: var(--azul-900); }
.tema-elegante .hero-tarjeta { background: var(--fondo); border: 1px solid var(--borde); border-radius: 0; }
.tema-elegante .hero-tarjeta h3 { color: var(--azul-900); }
.tema-elegante .hero-tarjeta li { color: var(--texto-2); }
.tema-elegante .hero-tarjeta li svg { color: var(--aqua); }
.tema-elegante .hero-foto { border-radius: 0; box-shadow: none; outline: 1px solid var(--aqua); outline-offset: 14px; }
.tema-elegante .ola { display: none; }
.tema-elegante .seccion-cabecera .eyebrow, .tema-elegante .nosotros .eyebrow { color: var(--aqua); letter-spacing: .3em; font-weight: 400; }
.tema-elegante .seccion-cabecera h2::after { content: ""; display: block; width: 48px; height: 1px; background: var(--aqua); margin: 1.1rem auto 0; }
.tema-elegante .seccion-cabecera h2 em, .tema-elegante .nosotros h2 em { font-style: italic; }
.tema-elegante :is(.servicio, .trabajo, .paso, .opinion, .tarjeta, .nosotros-visual, .cta-banda) { border-radius: 0; box-shadow: none; }
.tema-elegante .servicio:hover, .tema-elegante .trabajo:hover { transform: none; box-shadow: none; border-color: var(--aqua); }
.tema-elegante .servicio .icono { background: transparent; border: 1px solid var(--aqua); border-radius: 50%; color: var(--aqua); }
.tema-elegante .paso::before { background: transparent; color: var(--aqua); border: 1px solid var(--aqua); font-family: var(--fuente-titulo); }
.tema-elegante .opinion p { font-family: var(--fuente-titulo); font-size: 1.1rem; }
.tema-elegante .cta-banda { background: var(--azul-900); }
.tema-elegante .cabecera { background: color-mix(in srgb, var(--pagina) 92%, transparent); }

/* ---- Natural ---- */
.tema-natural { --radio: 22px; }
.tema-natural .hero { background: radial-gradient(900px 500px at 85% 0%, color-mix(in srgb, var(--aqua) 38%, transparent), transparent 60%), linear-gradient(160deg, var(--azul-900), var(--azul-700)); }
.tema-natural .hero h1 em { color: var(--arena); font-style: italic; }
.tema-natural .hero .btn-aqua { background: var(--arena); color: var(--sobre-destacado); }
.tema-natural .hero-tarjeta { border-radius: 28px 28px 28px 6px; }
.tema-natural .hero-foto { border-radius: 200px 200px 28px 28px; }
.tema-natural .servicio .icono { border-radius: 50% 50% 50% 12px; }
.tema-natural .nosotros-visual { border-radius: 220px 220px 24px 24px; }
.tema-natural .cta-banda { background: linear-gradient(120deg, var(--azul-700), var(--azul-900)); border-radius: 32px 32px 32px 8px; }
.tema-natural .seccion-cabecera .eyebrow, .tema-natural .nosotros .eyebrow { color: var(--arena); }
.tema-natural .paso::before { background: var(--arena); color: var(--sobre-destacado); }

@media (max-width: 960px) {
  .hero-centrado .contenedor { padding: 4.5rem 0 6rem; }
  .hero-foto { max-width: 560px; }
}

/* ==========================================================================
   Panel: editor del diseño de la web
   ========================================================================== */
.editor-web { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 1.4rem; align-items: start; }
.editor-web .ew-form { display: grid; gap: .8rem; min-width: 0; }
.editor-web details.panel { padding: 0; }
.editor-web details.panel > summary { cursor: pointer; padding: 1rem 1.3rem; font-weight: 700; color: var(--azul-900); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.editor-web details.panel > summary::-webkit-details-marker { display: none; }
.editor-web details.panel > summary::after { content: "▾"; color: var(--muted); transition: transform .2s; }
.editor-web details[open].panel > summary::after { transform: rotate(180deg); }
.editor-web details.panel > summary small { font-weight: 400; color: var(--muted); margin-left: auto; }
.editor-web .ew-cuerpo { padding: 0 1.3rem 1.2rem; }
.ew-plantillas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .7rem; }
.ew-plantilla { position: relative; display: block; border: 2px solid var(--borde); border-radius: 14px; overflow: hidden; cursor: pointer; background: #fff; margin: 0; font-weight: 500; transition: border-color .15s, transform .15s; }
.ew-plantilla:hover { transform: translateY(-2px); }
.ew-plantilla input { position: absolute; opacity: 0; pointer-events: none; }
.ew-plantilla:has(input:checked) { border-color: var(--azul-500); box-shadow: 0 0 0 3px rgba(14, 136, 176, .18); }
.ew-mini { height: 84px; position: relative; padding: .55rem; display: grid; align-content: start; gap: 5px; }
.ew-mini i { display: block; height: 7px; border-radius: 4px; }
.ew-mini i:nth-child(1) { width: 70%; height: 9px; }
.ew-mini i:nth-child(2) { width: 50%; opacity: .6; }
.ew-mini i:nth-child(3) { width: 34%; height: 12px; border-radius: 6px; margin-top: 6px; }
.ew-mini b { position: absolute; right: .55rem; bottom: .55rem; width: 36%; height: 40%; border-radius: 8px; }
.ew-plantilla-texto { padding: .5rem .65rem .6rem; }
.ew-plantilla-texto strong { display: block; font-size: .9rem; color: var(--azul-900); }
.ew-plantilla-texto small { display: block; font-size: .74rem; line-height: 1.3; }
.ew-colores { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .6rem; }
.ew-color { display: flex; align-items: center; gap: .6rem; border: 1px solid var(--borde); border-radius: 10px; padding: .4rem .55rem; margin: 0; font-weight: 500; font-size: .85rem; cursor: pointer; }
.ew-color input[type=color] { width: 34px; height: 34px; border: 0; padding: 0; background: none; cursor: pointer; flex: none; }
.ew-color span small { display: block; color: var(--muted); font-weight: 400; font-family: ui-monospace, monospace; }
.ew-opciones { display: flex; flex-wrap: wrap; gap: .5rem; }
.ew-opcion { margin: 0; border: 1.5px solid var(--borde); border-radius: 999px; padding: .4rem .9rem; font-weight: 500; font-size: .87rem; cursor: pointer; }
.ew-opcion input { display: none; }
.ew-opcion:has(input:checked) { background: var(--azul-700); border-color: var(--azul-700); color: #fff; }
.ew-secciones { display: grid; gap: .4rem; }
.ew-seccion { display: flex; align-items: center; gap: .6rem; border: 1px solid var(--borde); border-radius: 10px; padding: .45rem .6rem; background: #fff; }
.ew-seccion .check { flex: 1; margin: 0; }
.ew-seccion button { border: 1px solid var(--borde); background: #fff; border-radius: 8px; width: 30px; height: 30px; cursor: pointer; color: var(--texto-2); }
.ew-seccion button:hover { border-color: var(--azul-500); color: var(--azul-700); }
.ew-imagenes { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .8rem; }
.ew-imagen { border: 1px dashed var(--borde); border-radius: 12px; padding: .7rem; display: grid; gap: .45rem; align-content: start; }
.ew-imagen-vista { height: 96px; border-radius: 8px; background: var(--fondo) center / contain no-repeat; display: grid; place-items: center; color: var(--muted); font-size: .8rem; }
.ew-imagen input[type=file] { font-size: .78rem; padding: .4em; }
.ew-car-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .7rem; }
.ew-car-lista:not(:empty) { margin-bottom: .8rem; }
.ew-car { border: 1px solid var(--borde); border-radius: 12px; padding: .5rem; display: grid; gap: .4rem; align-content: start; background: var(--superficie, #fff); }
.ew-car-nueva { border-style: dashed; border-color: var(--azul-500); }
.ew-car-foto { aspect-ratio: 4 / 3; border-radius: 8px; background: var(--fondo) center / cover no-repeat; position: relative; }
.ew-car-foto span { position: absolute; top: .35rem; left: .35rem; background: var(--azul-700); color: #fff; font-size: .7rem; font-weight: 700; padding: .1rem .45rem; border-radius: 99px; }
.ew-car input[type=text] { font-size: .82rem; padding: .45em .55em; }
.ew-car-acciones { display: flex; align-items: center; gap: .3rem; font-size: .8rem; }
.ew-car-acciones button { border: 1px solid var(--borde); background: none; border-radius: 6px; padding: .15rem .5rem; cursor: pointer; color: var(--texto-2); }
.ew-car-acciones button:hover { border-color: var(--azul-500); color: var(--azul-700); }
.ew-car-acciones .check { margin-left: auto; font-size: .8rem; }
.ew-car:has([name=car_quitar]:checked) { opacity: .45; }
.ew-car-subir { cursor: pointer; }
.ew-grupo { border-top: 1px solid var(--borde); padding-top: .9rem; margin-top: .4rem; }
.ew-grupo:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.ew-grupo h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 .6rem; }
.ew-guardar { position: sticky; bottom: 0; z-index: 5; display: flex; gap: .6rem; justify-content: space-between; flex-wrap: wrap; align-items: center;
              background: rgba(255, 255, 255, .94); backdrop-filter: blur(8px); border: 1px solid var(--borde); border-radius: var(--radio); padding: .7rem .9rem; }
.ew-vista { position: sticky; top: 1rem; display: grid; gap: .6rem; }
.ew-vista-barra { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; }
.ew-marco { border: 1px solid var(--borde); border-radius: 14px; overflow: hidden; background: #fff; height: calc(100vh - 150px); min-height: 520px; display: flex; justify-content: center; box-shadow: var(--sombra); }
.ew-marco iframe { border: 0; width: 100%; height: 100%; background: #fff; transition: width .25s; }
.ew-marco.movil { background: var(--fondo); padding: 1rem 0; }
.ew-marco.movil iframe { width: 390px; border-radius: 22px; box-shadow: 0 0 0 8px #1c2a30, var(--sombra); }
@media (max-width: 1100px) {
  .editor-web { grid-template-columns: minmax(0, 1fr); }
  .ew-vista { position: static; order: -1; }
  .ew-marco { height: 70vh; min-height: 420px; }
}
/* «Cómo trabajamos» de la web: la regla .paso del seguimiento del panel (más arriba) no debe aplicarse aquí */
.pasos .paso { display: block; padding: 1.5rem 1.3rem 1.3rem; }
.pasos .paso::before { width: 38px; height: 38px; }
.galeria-mosaico .placeholder svg { opacity: .3; }
/* ==========================================================================
   MOVIMIENTO DE LA WEB (static/js/web_animaciones.js)
   ========================================================================== */
/* Aparecer al bajar */
.web-anim .rv { opacity: 0; transform: translateY(28px); transition: opacity .75s cubic-bezier(.2, .7, .2, 1) var(--rv-retraso, 0s), transform .75s cubic-bezier(.2, .7, .2, 1) var(--rv-retraso, 0s); }
.web-anim [data-anim=dinamica] .rv { transform: translateY(44px) scale(.95); }
.web-anim .rv.rv-in { opacity: 1; transform: none; }
/* Entrada de la portada */
@keyframes web-entrar { from { opacity: 0; transform: translateY(26px); } }
@keyframes web-zoom { from { opacity: 0; transform: scale(.94); } }
.web-anim .hero-texto > * { animation: web-entrar .9s cubic-bezier(.2, .7, .2, 1) backwards; }
.web-anim .hero-texto > :nth-child(2) { animation-delay: .12s; }
.web-anim .hero-texto > :nth-child(3) { animation-delay: .24s; }
.web-anim .hero-tarjeta, .web-anim .hero-foto { animation: web-zoom 1s cubic-bezier(.2, .7, .2, 1) .3s backwards; }
/* Palabras que cambian */
.rotar { display: inline-grid; vertical-align: baseline; justify-items: start; transition: width .45s cubic-bezier(.2, .7, .2, 1); }
.rotar > span { grid-area: 1 / 1; opacity: 0; transform: translateY(.45em); transition: opacity .45s, transform .45s cubic-bezier(.2, .7, .2, 1); white-space: nowrap; }
.rotar > span.activa { opacity: 1; transform: none; }
.rotar > span.sale { opacity: 0; transform: translateY(-.45em); }
.hero-centrado .rotar { justify-items: center; }
/* Cabecera al bajar */
.web .cabecera { transition: box-shadow .3s, background .3s; }
.web .cabecera.con-scroll { box-shadow: 0 8px 30px rgba(0, 0, 0, .08); }
/* Detalles con movimiento */
.web-anim .servicio .icono { transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.web-anim .servicio:hover .icono { transform: scale(1.12) rotate(-6deg); }
.web-anim .trabajo-img img { transition: transform .6s ease; }
.web-anim .trabajo:hover .trabajo-img img { transform: scale(1.06); }
.web-anim .btn { transition: background .15s, color .15s, border-color .15s, transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s; }
.web-anim .hero .btn:hover, .web-anim .cta-banda .btn:hover { box-shadow: 0 10px 26px rgba(0, 0, 0, .18); }
.web-anim .whatsapp::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25d366; animation: web-pulso 2.4s ease-out infinite; }
@keyframes web-pulso { from { transform: scale(1); opacity: .7; } to { transform: scale(1.7); opacity: 0; } }
.inclinable { transition: transform .18s ease-out, box-shadow .25s; transform-style: preserve-3d; will-change: transform; }
.inclinable { background-image: radial-gradient(400px circle at var(--brillo-x, 50%) var(--brillo-y, 50%), rgba(255, 255, 255, .10), transparent 40%); }

/* Cinta en movimiento */
.cinta { background: var(--azul-900); color: #fff; overflow: hidden; padding: 1.05rem 0; border-block: 1px solid rgba(255, 255, 255, .08); }
.cinta-pista { display: flex; width: max-content; animation: web-cinta 45s linear infinite; }
.cinta:hover .cinta-pista { animation-play-state: paused; }
.cinta-grupo { display: flex; align-items: center; gap: 2rem; padding-right: 2rem; }
.cinta-grupo span { font: 700 1.05rem var(--fuente-titulo); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.cinta-grupo i { font-style: normal; color: var(--aqua); }
@keyframes web-cinta { to { transform: translateX(-50%); } }
[data-anim=ninguna] .cinta-pista { animation: none; }
@media (prefers-reduced-motion: reduce) { .cinta-pista { animation: none; } }
/* Carrusel de fotos (Servicios): cinta de fotos sin fin; al pasar el ratón se agranda y al pulsar se abre en grande */
.carrusel { position: relative; overflow: hidden; padding: 2.2rem 0 2.6rem; margin: -1rem 0 1.5rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.carrusel-pista { display: flex; width: max-content; animation: web-cinta var(--car-duracion, 48s) linear infinite; }
.carrusel:hover .carrusel-pista, .carrusel:focus-within .carrusel-pista, .carrusel.quieto .carrusel-pista { animation-play-state: paused; }
.carrusel-grupo { display: flex; gap: 1.4rem; padding-right: 1.4rem; }
.carrusel-foto { position: relative; margin: 0; flex: none; width: clamp(220px, 24vw, 330px); aspect-ratio: 4 / 3; border-radius: var(--radio, 14px);
  overflow: hidden; cursor: zoom-in; background: var(--fondo); box-shadow: 0 10px 28px -14px rgba(0, 0, 0, .45);
  transition: transform .45s cubic-bezier(.2, .8, .2, 1.2), box-shadow .45s, filter .45s; }
.carrusel-grupo .carrusel-foto:nth-child(odd) { transform: translateY(-.6rem) rotate(-1deg); }
.carrusel-grupo .carrusel-foto:nth-child(even) { transform: translateY(.6rem) rotate(1deg); }
.carrusel-foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1), filter .45s; }
.carrusel-foto figcaption { position: absolute; inset: auto 0 0; padding: 1.8rem 1rem .8rem; color: #fff; font: 600 .92rem/1.35 var(--fuente);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
  background: linear-gradient(transparent, rgba(0, 0, 0, .72)); transition: padding .45s; }
.carrusel-foto:hover figcaption, .carrusel-foto:focus-visible figcaption { white-space: normal; padding-top: 3.2rem; }
.carrusel-foto::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .6s;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%) -150% 0 / 250% 100% no-repeat; }
.carrusel-grupo .carrusel-foto:hover, .carrusel-grupo .carrusel-foto:focus-visible { transform: translateY(-.4rem) scale(1.14); z-index: 2; outline: none;
  box-shadow: 0 26px 50px -18px rgba(0, 0, 0, .6), 0 0 0 3px var(--aqua); }
.carrusel-foto:hover img, .carrusel-foto:focus-visible img { transform: scale(1.08); filter: saturate(1.15) contrast(1.05); }
.carrusel-foto:hover::after { opacity: 1; animation: car-brillo 1s ease-out; background-position: 150% 0; }
@keyframes car-brillo { from { background-position: -150% 0; } to { background-position: 150% 0; } }
.carrusel:hover .carrusel-foto:not(:hover) { filter: grayscale(.35) brightness(.85); }
[data-anim=ninguna] .carrusel-pista { animation: none; }
[data-anim=ninguna] .carrusel { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
[data-anim=ninguna] .carrusel-grupo[aria-hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .carrusel-pista { animation: none; } .carrusel { overflow-x: auto; } .carrusel-grupo[aria-hidden] { display: none; }
}
.tema-vibrante .carrusel-foto { border: 3px solid var(--tinta, #111); box-shadow: 6px 6px 0 var(--tinta, #111); }
.tema-neon .carrusel-foto { box-shadow: 0 0 0 1px var(--aqua), 0 0 24px -6px var(--aqua); }
.tema-minimal .carrusel-grupo .carrusel-foto, .tema-corporativa .carrusel-grupo .carrusel-foto { border-radius: 6px; }

/* Foto abierta en grande */
.visor { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 4.5rem 1rem 1.5rem;
  background: rgba(8, 12, 20, 0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); transition: background .4s, backdrop-filter .4s; }
.visor.abierto { background: rgba(8, 12, 20, .86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.visor figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .9rem; max-width: min(1100px, 100%); }
.visor img { max-width: 100%; max-height: calc(100vh - 11rem); border-radius: 14px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8);
  transform-origin: top left; will-change: transform; }
.visor figcaption { color: #fff; font: 500 1.05rem/1.4 var(--fuente); text-align: center; max-width: 60ch; opacity: 0; transform: translateY(10px); transition: opacity .4s .15s, transform .4s .15s; }
.visor.abierto figcaption { opacity: 1; transform: none; }
.visor button { position: absolute; border: 0; border-radius: 50%; width: 3rem; height: 3rem; font-size: 1.5rem; line-height: 1; cursor: pointer;
  color: #fff; background: rgba(255, 255, 255, .14); transition: background .2s, transform .2s; opacity: 0; }
.visor.abierto button { opacity: 1; }
.visor button:hover { background: rgba(255, 255, 255, .28); transform: scale(1.08); }
.visor-cerrar { top: 1rem; right: 1rem; }
.visor-ant { left: 1rem; top: 50%; margin-top: -1.5rem; }
.visor-sig { right: 1rem; top: 50%; margin-top: -1.5rem; }
.visor img.visor-cambia { animation: visor-cambia .35s ease-out; }
@keyframes visor-cambia { from { opacity: 0; transform: scale(.94); } }
@media (max-width: 640px) { .visor-ant, .visor-sig { top: auto; bottom: 1rem; margin: 0; } }
/* Cifras */
.seccion-cifras { padding: 3.5rem 0; }
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.2rem; }
.cifra { text-align: center; padding: 1.4rem 1rem; border-radius: var(--radio); }
.cifra strong { display: block; font: 800 clamp(2.2rem, 4.2vw, 3.3rem) var(--fuente-titulo); color: var(--azul-700); letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cifra span { color: var(--texto-2); font-size: .95rem; }
.web-oscura .cifra strong { color: var(--aqua); }

/* ==========================================================================
   PLANTILLAS PROFESIONALES
   ========================================================================== */
/* ---- Corporativa ---- */
.tema-corporativa { --radio: 10px; }
.tema-corporativa .hero {
  background: linear-gradient(115deg, var(--azul-900) 0%, var(--azul-900) 55%, color-mix(in srgb, var(--azul-700) 70%, var(--azul-900)) 100%);
}
.tema-corporativa .hero-deco {
  display: block; position: absolute; inset: 0; opacity: .5;
  background-image: repeating-linear-gradient(115deg, transparent 0 60px, rgba(255, 255, 255, .035) 60px 61px);
}
.tema-corporativa .ola { display: none; }
.tema-corporativa .btn { border-radius: 8px; }
.tema-corporativa .hero h1 em { color: var(--aqua); }
.tema-corporativa .hero-foto { border-radius: 14px; box-shadow: 0 30px 60px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .1); }
.tema-corporativa .seccion-cabecera .eyebrow, .tema-corporativa .nosotros .eyebrow { color: var(--azul-700); display: inline-flex; align-items: center; gap: .6rem; }
.tema-corporativa .seccion-cabecera .eyebrow::before, .tema-corporativa .nosotros .eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--azul-700); }
.tema-corporativa :is(.servicio, .trabajo, .paso, .opinion) { position: relative; overflow: hidden; }
.tema-corporativa .servicio::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--azul-700); transform: scaleX(0); transform-origin: left; transition: transform .35s; }
.tema-corporativa .servicio:hover::after { transform: scaleX(1); }
.tema-corporativa .servicio .icono { background: var(--azul-900); color: #fff; border-radius: 8px; }
.tema-corporativa .paso::before { border-radius: 8px; }
.tema-corporativa .cta-banda { border-radius: 14px; background: linear-gradient(115deg, var(--azul-900), var(--azul-700)); }
.tema-corporativa .cinta { background: var(--azul-700); }

/* ---- Premium (oscura) ---- */
.tema-premium { --radio: 0px; }
.tema-premium .hero { background: radial-gradient(800px 420px at 50% 0%, color-mix(in srgb, var(--azul-700) 22%, transparent), transparent 70%), var(--azul-900); border-bottom: 1px solid var(--borde); }
.tema-premium .hero-deco { display: block; position: absolute; inset: 2.2rem; border: 1px solid color-mix(in srgb, var(--azul-700) 35%, transparent); }
.tema-premium .ola { display: none; }
.tema-premium h1, .tema-premium h2 { font-weight: 500; letter-spacing: 0; }
.tema-premium .hero h1 { font-size: clamp(2.6rem, 6.4vw, 5rem); }
.tema-premium .hero h1 em { color: var(--azul-700); font-style: italic; }
.tema-premium .btn { border-radius: 0; text-transform: uppercase; letter-spacing: .18em; font-size: .74rem; padding: 1.1em 2em; }
.tema-premium .btn-aqua, .tema-premium .btn-primario, .tema-premium .btn-arena { background: var(--azul-700); color: #111; }
.tema-premium .btn-blanco, .tema-premium .btn-borde { border-color: var(--azul-700); color: var(--azul-700); }
.tema-premium :is(.servicio, .trabajo, .paso, .opinion, .tarjeta, .hero-tarjeta) { background: transparent; border: 1px solid color-mix(in srgb, var(--azul-700) 25%, transparent); border-radius: 0; box-shadow: none; }
.tema-premium :is(.servicio, .trabajo):hover { border-color: var(--azul-700); transform: none; box-shadow: none; }
.tema-premium .servicio .icono, .tema-premium .dato .icono { background: transparent; border: 1px solid var(--azul-700); color: var(--azul-700); border-radius: 50%; }
.tema-premium .seccion-cabecera .eyebrow, .tema-premium .nosotros .eyebrow { color: var(--azul-700); letter-spacing: .35em; font-weight: 500; }
.tema-premium .seccion-cabecera h2::after { content: ""; display: block; width: 60px; height: 1px; background: var(--azul-700); margin: 1.2rem auto 0; }
.tema-premium .paso::before { background: transparent; border: 1px solid var(--azul-700); color: var(--azul-700); font-family: var(--fuente-titulo); font-size: 1.1rem; }
.tema-premium .opinion p { font-family: var(--fuente-titulo); font-size: 1.25rem; }
.tema-premium .cta-banda { border-radius: 0; background: transparent; border: 1px solid var(--azul-700); }
.tema-premium .cta-banda h2 em { color: var(--azul-700); }
.tema-premium .nosotros-visual { border-radius: 0; }
.tema-premium .cinta { background: transparent; border-color: var(--borde); }
.tema-premium .cinta-grupo span { font-weight: 500; font-style: italic; text-transform: none; font-size: 1.35rem; }
.tema-premium .cinta-grupo i { color: var(--azul-700); }
.tema-premium .cifra strong { color: var(--azul-700); font-weight: 500; }

/* ---- Minimal ---- */
.tema-minimal { --radio: 16px; }
.tema-minimal .hero { background: var(--pagina); color: var(--texto); }
.tema-minimal .ola { display: none; }
.tema-minimal .hero h1 { color: var(--azul-900); font-size: clamp(2.8rem, 7.5vw, 6rem); letter-spacing: -.045em; line-height: 1.02; }
.tema-minimal .hero h1 em { color: var(--aqua); }
.tema-minimal .hero p.lead { color: var(--texto-2); }
.tema-minimal .hero .btn-aqua { background: var(--azul-900); color: #fff; }
.tema-minimal .hero .btn-blanco { background: transparent; color: var(--azul-900); border-color: var(--borde); }
.tema-minimal .hero-tarjeta { background: var(--fondo); border: 0; }
.tema-minimal .hero-tarjeta h3 { color: var(--azul-900); }
.tema-minimal .hero-tarjeta li { color: var(--texto-2); }
.tema-minimal .hero-tarjeta li svg { color: var(--azul-900); }
.tema-minimal h2 { letter-spacing: -.035em; }
.tema-minimal :is(.servicio, .paso, .opinion) { background: var(--fondo); border-color: transparent; }
.tema-minimal .seccion-alt :is(.servicio, .paso, .opinion) { background: var(--pagina); }
.tema-minimal .servicio .icono { background: var(--pagina); color: var(--azul-900); }
.tema-minimal .seccion-cabecera .eyebrow, .tema-minimal .nosotros .eyebrow { color: var(--aqua); letter-spacing: .02em; text-transform: none; font-size: .95rem; font-weight: 500; }
.tema-minimal .paso::before { background: var(--azul-900); }
.tema-minimal .cta-banda { background: var(--azul-900); }
.tema-minimal .cinta { background: var(--pagina); color: var(--azul-900); border-color: var(--borde); }
.tema-minimal .cinta-grupo span { font-size: 1.6rem; letter-spacing: -.02em; text-transform: none; }
.tema-minimal .cifra strong { color: var(--azul-900); }

/* ---- Neón (oscura, futurista) ---- */
.tema-neon { --radio: 14px; }
.tema-neon .hero { background: radial-gradient(700px 400px at 15% 10%, color-mix(in srgb, var(--azul-700) 22%, transparent), transparent 70%),
                               radial-gradient(700px 500px at 90% 90%, color-mix(in srgb, var(--aqua) 22%, transparent), transparent 70%), var(--azul-900); }
.tema-neon .hero-deco {
  display: block; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 4px);
  animation: neon-barrido 8s linear infinite;
}
@keyframes neon-barrido { from { background-position: 0 0; } to { background-position: 0 400px; } }
.tema-neon .ola { display: none; }
.tema-neon .hero h1 em { background: linear-gradient(90deg, var(--azul-700), var(--aqua), var(--arena), var(--azul-700)); background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: neon-degradado 6s linear infinite; }
@keyframes neon-degradado { to { background-position: 300% 0; } }
.tema-neon .btn { border-radius: 8px; font-weight: 600; letter-spacing: .03em; }
.tema-neon .btn-aqua { background: var(--azul-700); color: #0a0a0a; box-shadow: 0 0 24px color-mix(in srgb, var(--azul-700) 55%, transparent); }
.tema-neon .paso::before { display: none; }
.tema-neon .paso { border: 1px solid color-mix(in srgb, var(--azul-700) 30%, transparent); }
.tema-neon :is(.servicio, .opinion, .hero-tarjeta, .tarjeta, .cifra) {
  position: relative; background: color-mix(in srgb, var(--superficie) 85%, transparent); border: 1px solid transparent;
  background-clip: padding-box;
}
.tema-neon :is(.servicio, .opinion, .hero-tarjeta, .cifra)::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; z-index: -1;
  background: conic-gradient(from var(--neon-angulo, 0deg), var(--azul-700), var(--aqua), var(--arena), var(--azul-700));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .45; transition: opacity .3s;
}
.tema-neon :is(.servicio, .opinion, .hero-tarjeta, .cifra):hover::before { opacity: 1; animation: neon-giro 3s linear infinite; }
@property --neon-angulo { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes neon-giro { to { --neon-angulo: 360deg; } }
.tema-neon .paso h3::before { counter-increment: paso; content: "0" counter(paso) " — "; color: var(--azul-700); }
.tema-neon .servicio, .tema-neon .opinion, .tema-neon .paso, .tema-neon .cifra { isolation: isolate; }
.tema-neon .servicio .icono, .tema-neon .dato .icono { background: color-mix(in srgb, var(--azul-700) 14%, transparent); color: var(--azul-700); }
.tema-neon .seccion-cabecera .eyebrow, .tema-neon .nosotros .eyebrow { color: var(--azul-700); font-family: ui-monospace, "Chakra Petch", monospace; }
.tema-neon .seccion-cabecera .eyebrow::before, .tema-neon .nosotros .eyebrow::before { content: "// "; opacity: .6; }
.tema-neon .cta-banda { background: linear-gradient(120deg, color-mix(in srgb, var(--azul-700) 22%, #000), color-mix(in srgb, var(--aqua) 22%, #000)); border: 1px solid color-mix(in srgb, var(--azul-700) 40%, transparent); }
.tema-neon .cta-banda .btn-arena { background: var(--azul-700); color: #0a0a0a; }
.tema-neon .cinta { background: var(--azul-700); color: #0a0a0a; }
.tema-neon .cinta-grupo i { color: #0a0a0a; }
.tema-neon .cifra strong { color: var(--azul-700); text-shadow: 0 0 22px color-mix(in srgb, var(--azul-700) 50%, transparent); }
.tema-neon .lista-check svg { color: var(--azul-700); }
.tema-neon .galeria-mosaico .trabajo { outline: 1px solid color-mix(in srgb, var(--aqua) 25%, transparent); }

/* ---- Vibrante (brutalista) ---- */
.tema-vibrante { --radio: 14px; --tinta: #111; }
.tema-vibrante .hero { background: var(--arena); color: var(--tinta); border-bottom: 3px solid var(--tinta); }
.tema-vibrante .hero-deco { display: block; position: absolute; inset: 0; background-image: radial-gradient(rgba(0, 0, 0, .14) 1.5px, transparent 1.5px); background-size: 22px 22px; }
.tema-vibrante .ola { display: none; }
.tema-vibrante .hero h1 { color: var(--tinta); font-size: clamp(2.6rem, 6vw, 4.8rem); line-height: 1.02; letter-spacing: -.03em; }
.tema-vibrante .hero h1 em { color: var(--tinta); background: var(--aqua); padding: 0 .15em; border-radius: 8px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.tema-vibrante .hero h1 em.rotar { color: #fff; }
.tema-vibrante .hero p.lead { color: var(--tinta); }
.tema-vibrante .btn { border: 2px solid var(--tinta); border-radius: 12px; box-shadow: 4px 4px 0 var(--tinta); font-weight: 700; }
.tema-vibrante .btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--tinta); }
.tema-vibrante .btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--tinta); }
.tema-vibrante .hero .btn-aqua { background: var(--tinta); color: #fff; }
.tema-vibrante .hero .btn-blanco { background: #fff; color: var(--tinta); }
.tema-vibrante .nav .btn { box-shadow: 3px 3px 0 var(--tinta); }
.tema-vibrante .hero-tarjeta { background: #fff; border: 3px solid var(--tinta); box-shadow: 8px 8px 0 var(--tinta); backdrop-filter: none; }
.tema-vibrante .hero-tarjeta h3 { color: var(--tinta); }
.tema-vibrante .hero-tarjeta li { color: var(--tinta); }
.tema-vibrante .hero-tarjeta li svg { color: var(--aqua); }
.tema-vibrante .hero-tarjeta .btn-aqua { background: var(--aqua); color: #fff; }
.tema-vibrante .hero-foto { border: 3px solid var(--tinta); box-shadow: 10px 10px 0 var(--tinta); }
.tema-vibrante :is(.servicio, .trabajo, .paso, .opinion, .tarjeta, .cifra) { border: 2px solid var(--tinta); box-shadow: 5px 5px 0 var(--tinta); }
.tema-vibrante :is(.servicio, .trabajo):hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--tinta); border-color: var(--tinta); }
.tema-vibrante .cifra { background: #fff; }
.tema-vibrante .cifra strong { color: var(--tinta); }
.tema-vibrante .servicio .icono { background: var(--arena); color: var(--tinta); border: 2px solid var(--tinta); }
.tema-vibrante .seccion-cabecera .eyebrow, .tema-vibrante .nosotros .eyebrow { background: var(--aqua); color: #fff; padding: .35em .8em; border: 2px solid var(--tinta); border-radius: 999px; transform: rotate(-2deg); }
.tema-vibrante .paso::before { background: var(--aqua); border: 2px solid var(--tinta); }
.tema-vibrante .cta-banda { background: var(--aqua); border: 3px solid var(--tinta); box-shadow: 8px 8px 0 var(--tinta); }
.tema-vibrante .cta-banda .btn-arena { background: var(--arena); color: var(--tinta); }
.tema-vibrante .nosotros-visual { border: 3px solid var(--tinta); box-shadow: 10px 10px 0 var(--tinta); }
.tema-vibrante .cinta { background: var(--tinta); transform: rotate(-1.2deg) scale(1.04); margin: 1.4rem 0; }
body.web { overflow-x: clip; }
.tema-vibrante .cinta-grupo i { color: var(--arena); }
.tema-vibrante .pie { background: var(--tinta); }
/* ==========================================================================
   SECTORES: dibujo de fondo de la portada (web_sectores.py → «motivo»), sellos y logo
   ========================================================================== */
.hero-motivo {
  position: absolute; inset: 0; pointer-events: none; background: var(--motivo-color, #fff); opacity: .1;
  -webkit-mask-image: var(--m), linear-gradient(100deg, transparent 15%, #000 75%); mask-image: var(--m), linear-gradient(100deg, transparent 15%, #000 75%);
  -webkit-mask-repeat: repeat, no-repeat; mask-repeat: repeat, no-repeat;
  -webkit-mask-size: var(--m-tam), 100% 100%; mask-size: var(--m-tam), 100% 100%;
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.hero-centrado .hero-motivo { -webkit-mask-image: var(--m), radial-gradient(ellipse at 50% 50%, transparent 25%, #000 80%); mask-image: var(--m), radial-gradient(ellipse at 50% 50%, transparent 25%, #000 80%); }
:is(.tema-moderna, .tema-elegante, .tema-minimal, .tema-vibrante) .hero-motivo { --motivo-color: var(--azul-900); opacity: .07; }
.web .hero.con-imagen .hero-motivo { --motivo-color: #fff; opacity: .08; }
.motivo-olas { --m-tam: 120px 36px; --m: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='36'><path d='M0 18c15-12 30-12 60 0s45 12 60 0' fill='none' stroke='black' stroke-width='2'/></svg>"); }
.motivo-ladrillo { --m-tam: 80px 40px; --m: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='40'><path d='M0 1h80M0 21h80M20 1v20M60 1v20M0 21v20M40 21v20' fill='none' stroke='black' stroke-width='2'/></svg>"); }
.motivo-plano { --m-tam: 60px 60px; --m: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><path d='M0 .5h60M.5 0v60' fill='none' stroke='black'/><path d='M30 25v10M25 30h10' fill='none' stroke='black' stroke-width='1.5'/></svg>"); }
.motivo-circuito { --m-tam: 120px 120px; --m: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><path d='M0 30h40l15 15h30M85 45v40l15 15h20M30 120V90l15-15M60 0v20' fill='none' stroke='black' stroke-width='2'/><circle cx='85' cy='45' r='4'/><circle cx='45' cy='75' r='4'/><circle cx='40' cy='30' r='3.5' fill='none' stroke='black' stroke-width='2'/><circle cx='60' cy='20' r='3'/></svg>"); }
.motivo-tuberias { --m-tam: 140px 140px; --m: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><path d='M0 40h40a20 20 0 0 1 20 20v80M90 0v30a14 14 0 0 0 14 14h36' fill='none' stroke='black' stroke-width='6'/><rect x='30' y='32' width='8' height='16'/><rect x='52' y='96' width='16' height='8'/></svg>"); }
.motivo-manchas { --m-tam: 140px 140px; --m: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><circle cx='20' cy='20' r='6'/><circle cx='95' cy='55' r='12'/><circle cx='50' cy='112' r='4'/><circle cx='120' cy='122' r='7'/><path d='M40 70c15-8 30 6 45-2' fill='none' stroke='black' stroke-width='7' stroke-linecap='round'/></svg>"); }
.motivo-madera { --m-tam: 200px 60px; --m: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='60'><path d='M0 12c50-8 100 8 200 0M0 30c60 8 120-8 200 2M0 48c50-6 110 6 200-2' fill='none' stroke='black' stroke-width='1.5'/><ellipse cx='140' cy='30' rx='12' ry='4' fill='none' stroke='black' stroke-width='1.5'/></svg>"); }
.motivo-copos { --m-tam: 90px 90px; --m: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='90'><path d='M25 10v30M10 25h30M14 14l22 22M36 14 14 36' stroke='black' stroke-width='2'/><circle cx='70' cy='68' r='2.5'/><circle cx='60' cy='15' r='1.5'/></svg>"); }
.motivo-paneles { --m-tam: 72px 48px; --m: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='72' height='48'><g fill='none' stroke='black' stroke-width='1.5'><rect x='2' y='2' width='32' height='20'/><rect x='38' y='2' width='32' height='20'/><rect x='2' y='26' width='32' height='20'/><rect x='38' y='26' width='32' height='20'/></g><path d='M18 2v20M54 2v20M18 26v20M54 26v20' stroke='black' stroke-width='.8'/></svg>"); }
.motivo-tejas { --m-tam: 40px 20px; --m: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='20'><path d='M0 20a10 10 0 0 1 20 0a10 10 0 0 1 20 0M-10 10a10 10 0 0 1 20 0a10 10 0 0 1 20 0a10 10 0 0 1 20 0' fill='none' stroke='black' stroke-width='1.5'/></svg>"); }
.motivo-hojas { --m-tam: 110px 110px; --m: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='110' height='110'><path d='M18 52c0-20 15-30 32-30 0 18-13 30-32 30zM68 96c0-15 10-22 24-22 0 13-10 22-24 22z' fill='none' stroke='black' stroke-width='2'/><path d='M18 52 50 22M68 96l24-22' stroke='black' stroke-width='1.5'/></svg>"); }

/* Sellos de confianza bajo los botones */
.hero-sellos { list-style: none; padding: 0; margin: 1.6rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem 1.3rem; font-size: .9rem; font-weight: 500; color: rgba(255, 255, 255, .85); }
.hero-sellos li { display: inline-flex; align-items: center; gap: .45rem; }
.hero-sellos svg { color: var(--aqua); flex: none; }
.hero-centrado .hero-sellos { justify-content: center; }
:is(.tema-moderna, .tema-elegante, .tema-minimal, .tema-vibrante) .hero-sellos { color: var(--texto-2); }
.tema-vibrante .hero-sellos { color: var(--tinta); }
.tema-vibrante .hero-sellos svg, .tema-minimal .hero-sellos svg { color: var(--azul-900); }
.web .hero.con-imagen .hero-sellos { color: rgba(255, 255, 255, .88); }
.web-anim .hero-sellos { animation: web-entrar .9s cubic-bezier(.2, .7, .2, 1) .36s backwards; }

/* Logo con el icono del oficio (cuentas que no son de piscinas y no han subido logo) */
.logo-icono { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; color: #fff;
              background: linear-gradient(140deg, var(--azul-700), var(--aqua)); box-shadow: 0 4px 12px rgba(0, 0, 0, .12); }
.tema-vibrante .logo-icono { background: var(--arena); color: var(--tinta); border: 2px solid var(--tinta); box-shadow: 2px 2px 0 var(--tinta); }
.web-oscura .logo-icono { color: #0a0a0a; }
/* Imagen de relleno con el icono del oficio */
.placeholder > svg[width] { stroke-width: 1.1; max-width: 110px; }

/* Editor: elegir sector */
.ew-sectores { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: .6rem; }
.ew-sector { position: relative; margin: 0; display: grid; justify-items: start; gap: .35rem; padding: .75rem; border: 2px solid var(--borde); border-radius: 14px; cursor: pointer; background: #fff; font-weight: 500; transition: border-color .15s, transform .15s; }
.ew-sector:hover { transform: translateY(-2px); }
.ew-sector input { position: absolute; opacity: 0; pointer-events: none; }
.ew-sector:has(input:checked) { border-color: var(--azul-500); box-shadow: 0 0 0 3px rgba(14, 136, 176, .18); }
.ew-sector-icono { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, var(--s-1), var(--s-2) 60%, var(--s-3)); }
.ew-sector strong { font-size: .86rem; line-height: 1.25; color: var(--azul-900); }
.ew-sector small { font-size: .72rem; }
/* Servicios: con 3, 6 o 9 en la lista, 3 columnas (sin tarjetas sueltas en la última fila) */
@media (min-width: 900px) {
  .servicios:has(> :nth-child(3):last-child), .servicios:has(> :nth-child(6):last-child), .servicios:has(> :nth-child(9):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* ==========================================================================
   Resumen → Anotaciones
   ========================================================================== */
.notas-cabecera { display: grid; gap: .8rem; margin-bottom: 1.2rem; }
.nota-nueva { display: grid; gap: .55rem; max-width: 720px; }
.nota-nueva input[type=text] { font-weight: 600; }
.nota-nueva textarea { min-height: 76px; }
.nota-pie { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.nota-pie .btn { margin-left: auto; }
.notas-buscar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; max-width: 720px; }
.notas-buscar input { flex: 1; min-width: 200px; }
.nota-colores { display: flex; gap: .35rem; }
.nota-color { margin: 0; cursor: pointer; }
.nota-color input { position: absolute; opacity: 0; pointer-events: none; }
.nota-color span { display: block; width: 22px; height: 22px; border-radius: 50%; background: var(--nota-borde); border: 2px solid rgba(0, 0, 0, .1); transition: transform .15s; }
.nota-color:hover span { transform: scale(1.12); }
.nota-color input:checked + span { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--azul-700); }
.nota-color input:focus-visible + span { outline: 2px solid var(--azul-500); outline-offset: 3px; }
.notas { columns: 280px; column-gap: 1rem; }
.nota { break-inside: avoid; margin-bottom: 1rem; border-radius: 14px; padding: .9rem 1rem .7rem; background: var(--nota); border: 1px solid var(--nota-borde);
        box-shadow: 0 1px 2px rgba(0, 0, 0, .05); transition: box-shadow .2s, transform .2s; }
.nota:hover { box-shadow: 0 8px 22px rgba(0, 0, 0, .08); }
.nota.fijada { border-width: 2px; }
.nota-arriba { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
.nota-arriba h3 { font-size: 1rem; margin: 0 0 .35rem; color: #1d2a30; word-break: break-word; }
.nota-texto { white-space: pre-wrap; word-break: break-word; margin: 0 0 .6rem; color: #2a363b; font-size: .93rem; line-height: 1.5; }
.nota-abajo { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.nota-abajo small { color: rgba(0, 0, 0, .5); font-size: .75rem; }
.nota-boton { border: 0; background: transparent; cursor: pointer; padding: .25rem .45rem; border-radius: 8px; font: 600 .8rem var(--fuente); color: rgba(0, 0, 0, .6); opacity: .75; }
.nota-boton:hover { background: rgba(0, 0, 0, .07); opacity: 1; }
.nota-arriba .nota-boton { filter: grayscale(1); opacity: .35; font-size: .95rem; }
.nota-arriba .nota-boton.activo, .nota-arriba .nota-boton:hover { filter: none; opacity: 1; }
.nota-editar { display: grid; gap: .5rem; }
.nota-editar[hidden], .nota-ver[hidden] { display: none; }
.nota-editar input, .nota-editar textarea { background: rgba(255, 255, 255, .75); }
.nota-amarillo { --nota: #fff6c7; --nota-borde: #f1e08a; }
.nota-azul { --nota: #e1f0fb; --nota-borde: #b4d6f0; }
.nota-verde { --nota: #e3f5e6; --nota-borde: #b3dfbb; }
.nota-rosa { --nota: #fde6ec; --nota-borde: #f3bccb; }
.nota-violeta { --nota: #ede8fb; --nota-borde: #cdc2f1; }
.nota-gris { --nota: #f1f3f4; --nota-borde: #d6dbde; }
/* ==========================================================================
   Tutorial (estilo Duolingo): camino de lecciones y pantalla de lección
   ========================================================================== */
.tuto-stats { display: flex; gap: .8rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.tuto-stat { display: flex; align-items: center; gap: .6rem; background: #fff; border: 2px solid var(--borde); border-radius: 16px; padding: .6rem 1rem; }
.tuto-stat-icono { font-size: 1.5rem; }
.tuto-stat strong { display: block; font: 800 1.2rem var(--fuente-titulo); color: var(--azul-900); line-height: 1.1; }
.tuto-stat small { color: var(--muted); font-weight: 600; }
.tuto-stat-barra { flex: 1; min-width: 220px; display: grid; gap: .35rem; }
.tuto-barra { height: 16px; border-radius: 999px; background: #e5e5e5; overflow: hidden; }
.tuto-barra span { display: block; height: 100%; border-radius: inherit; background: #58cc02; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .12), inset 0 4px 0 rgba(255, 255, 255, .25); transition: width .5s cubic-bezier(.2, .7, .2, 1); }
.tuto-terminado { background: #d7ffb8; border: 2px solid #58cc02; color: #2b7a00; border-radius: 16px; padding: .9rem 1.1rem; margin-bottom: 1rem; }

.tuto-camino { max-width: 520px; margin: 0 auto 4rem; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }
.tuto-unidad { width: 100%; text-align: left; background: var(--azul-700); color: #fff; border-radius: 16px; padding: .8rem 1.1rem; margin-top: 1rem; box-shadow: 0 4px 0 var(--azul-900); }
.tuto-unidad span { display: block; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; opacity: .8; }
.tuto-unidad strong { font: 800 1.15rem var(--fuente-titulo); }
.tuto-nodo { position: relative; display: grid; justify-items: center; gap: .35rem; transform: translateX(var(--x, 0)); }
.tuto-circulo { width: 76px; height: 70px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; font-size: 1.6rem;
                color: #fff; background: var(--c); box-shadow: 0 7px 0 color-mix(in srgb, var(--c) 70%, #000); transition: transform .1s, box-shadow .1s; }
.tuto-circulo:hover { filter: brightness(1.06); }
.tuto-circulo:active { transform: translateY(5px); box-shadow: 0 2px 0 color-mix(in srgb, var(--c) 70%, #000); }
.tuto-hecha .tuto-circulo { background: #ffc800; box-shadow: 0 7px 0 #e0a800; }
.tuto-check { font-size: 2rem; font-weight: 900; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .15); }
.tuto-bloqueada .tuto-circulo { background: #e5e5e5; box-shadow: 0 7px 0 #c4c4c4; color: #afafaf; cursor: not-allowed; font-size: 1.4rem; }
.tuto-actual .tuto-circulo { outline: 6px solid color-mix(in srgb, var(--c) 25%, transparent); outline-offset: 6px; animation: tuto-latir 1.8s ease-in-out infinite; }
@keyframes tuto-latir { 50% { outline-offset: 10px; outline-color: color-mix(in srgb, var(--c) 10%, transparent); } }
.tuto-nombre { font-weight: 700; font-size: .88rem; color: var(--texto-2); }
.tuto-bloqueada .tuto-nombre { color: #afafaf; }
.tuto-globo { position: absolute; top: -46px; background: #fff; color: var(--c); border: 2px solid #e5e5e5; border-radius: 12px; padding: .35rem .8rem;
              font-weight: 800; font-size: .8rem; letter-spacing: .04em; white-space: nowrap; animation: tuto-flotar 1.6s ease-in-out infinite; }
.tuto-globo::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 12px; height: 12px; background: #fff; border: 2px solid #e5e5e5;
                     border-top: 0; border-left: 0; transform: translateX(-50%) rotate(45deg); }
@keyframes tuto-flotar { 50% { transform: translateY(-5px); } }
.tuto-actual { margin-top: 2.4rem; }
.tuto-sacudir { animation: tuto-sacudir .4s; }
@keyframes tuto-sacudir { 25% { transform: translateX(calc(var(--x) - 8px)); } 75% { transform: translateX(calc(var(--x) + 8px)); } }
.tuto-meta { display: grid; justify-items: center; font-size: 2.2rem; margin-top: 1rem; }
.tuto-meta span { font-size: .85rem; font-weight: 800; color: var(--muted); }

/* Pantalla de la lección */
.tuto-leccion { position: fixed; inset: 0; z-index: 20000; background: #fff; display: grid; grid-template-rows: auto 1fr auto; }
.tuto-leccion[hidden] { display: none; }
.tuto-arriba { display: flex; align-items: center; gap: 1rem; width: min(1000px, 100% - 32px); margin: 0 auto; padding: 1.4rem 0 .5rem; }
.tuto-cerrar { border: 0; background: none; font-size: 1.5rem; color: #afafaf; cursor: pointer; padding: .2rem .5rem; border-radius: 8px; }
.tuto-cerrar:hover { color: #777; background: #f2f2f2; }
.tuto-barra-leccion { flex: 1; }
.tuto-centro { width: min(600px, 100% - 32px); margin: 0 auto; align-self: center; padding: 1.5rem 0; overflow-y: auto; max-height: 100%; }
.tuto-entrar { animation: tuto-entrar .35s cubic-bezier(.2, .7, .2, 1); }
@keyframes tuto-entrar { from { opacity: 0; transform: translateX(30px); } }
.tuto-emoji { font-size: 4.5rem; line-height: 1; margin-bottom: 1rem; text-align: center; animation: tuto-rebote .6s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes tuto-rebote { from { transform: scale(.3); } }
.tuto-tipo { color: var(--c); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; margin: 0 0 .4rem; }
.tuto-titulo { font: 800 clamp(1.4rem, 3.5vw, 1.9rem) var(--fuente-titulo); color: #3c3c3c; margin: 0 0 .8rem; }
.tuto-emoji + .tuto-titulo { text-align: center; }
.tuto-texto { font-size: 1.15rem; line-height: 1.6; color: #4b4b4b; text-align: center; }
.tuto-opciones { display: grid; gap: .7rem; margin-top: 1.2rem; }
.tuto-opcion { display: flex; align-items: center; gap: .8rem; text-align: left; font: 600 1.05rem var(--fuente); color: #4b4b4b; background: #fff; cursor: pointer;
               border: 2px solid #e5e5e5; border-radius: 16px; padding: .9rem 1rem; box-shadow: 0 4px 0 #e5e5e5; transition: background .1s, transform .1s; }
.tuto-opcion:hover:not(:disabled) { background: #f7f7f7; }
.tuto-opcion:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #e5e5e5; }
.tuto-tecla { flex: none; width: 30px; height: 30px; border-radius: 8px; border: 2px solid #e5e5e5; display: grid; place-items: center; font-size: .85rem; color: #afafaf; }
.tuto-opcion.elegida { border-color: #84d8ff; background: #ddf4ff; color: #1899d6; box-shadow: 0 4px 0 #84d8ff; }
.tuto-opcion.elegida .tuto-tecla { border-color: #84d8ff; color: #1899d6; }
.tuto-opcion.correcta { border-color: #58cc02; background: #d7ffb8; color: #58a700; box-shadow: 0 4px 0 #58cc02; }
.tuto-opcion.incorrecta { border-color: #ff4b4b; background: #ffdfe0; color: #ea2b2b; box-shadow: 0 4px 0 #ff4b4b; animation: tuto-no .35s; }
@keyframes tuto-no { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.tuto-abajo { border-top: 2px solid #e5e5e5; padding: 1.3rem 0 calc(1.3rem + env(safe-area-inset-bottom)); transition: background .2s; }
.tuto-abajo-dentro { width: min(1000px, 100% - 32px); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.tuto-feedback strong { display: block; font: 800 1.4rem var(--fuente-titulo); }
.tuto-feedback span { font-size: .95rem; }
.tuto-abajo.bien { background: #d7ffb8; border-color: transparent; }
.tuto-abajo.bien .tuto-feedback { color: #58a700; }
.tuto-abajo.mal { background: #ffdfe0; border-color: transparent; }
.tuto-abajo.mal .tuto-feedback { color: #ea2b2b; }
.tuto-boton { margin-left: auto; min-width: 180px; border: 0; border-radius: 16px; padding: .95rem 1.6rem; cursor: pointer; font: 800 1rem var(--fuente);
              text-transform: uppercase; letter-spacing: .04em; color: #fff; background: #58cc02; box-shadow: 0 5px 0 #58a700; transition: transform .1s, filter .1s; }
.tuto-boton:hover:not(:disabled) { filter: brightness(1.05); }
.tuto-boton:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 #58a700; }
.tuto-boton:disabled { background: #e5e5e5; color: #afafaf; box-shadow: 0 5px 0 #d0d0d0; cursor: default; }
.tuto-abajo.mal .tuto-boton { background: #ff4b4b; box-shadow: 0 5px 0 #ea2b2b; }
.tuto-fin { position: relative; text-align: center; }
.tuto-premios { display: flex; gap: 1rem; justify-content: center; margin: 1.2rem 0; }
.tuto-premio { width: 140px; border-radius: 16px; border: 2px solid; overflow: hidden; animation: tuto-rebote .6s .2s cubic-bezier(.2, 1.6, .4, 1) backwards; }
.tuto-premio small { display: block; color: #fff; font-weight: 800; font-size: .75rem; text-transform: uppercase; padding: .3rem; }
.tuto-premio strong { display: block; font: 800 1.6rem var(--fuente-titulo); padding: .6rem; background: #fff; }
.tuto-premio.xp { border-color: #ffc800; } .tuto-premio.xp small { background: #ffc800; } .tuto-premio.xp strong { color: #ff9600; }
.tuto-premio.ok { border-color: #58cc02; } .tuto-premio.ok small { background: #58cc02; } .tuto-premio.ok strong { color: #58a700; }
.tuto-fin-botones { margin-top: 1rem; }
.tuto-confeti { position: absolute; inset: -40px 0 auto; height: 0; pointer-events: none; }
.tuto-confeti i { position: absolute; top: 0; width: 9px; height: 14px; border-radius: 2px; animation: tuto-caer 1.8s ease-in forwards; opacity: 0; }
@keyframes tuto-caer { 0% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 0 420px; } }
@media (max-width: 600px) { .tuto-nodo { transform: translateX(calc(var(--x, 0) * .6)); } .tuto-boton { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .tuto-actual .tuto-circulo, .tuto-globo, .tuto-confeti { animation: none; } .tuto-confeti { display: none; } }
/* ==========================================================================
   Guías interactivas del tutorial (static/js/guia.js)
   ========================================================================== */
.guia-foco { position: fixed; z-index: 2147483000; pointer-events: none; border-radius: 12px;
             box-shadow: 0 0 0 4px #58cc02, 0 0 0 9999px rgba(10, 24, 32, .58); }
.guia-foco::after { content: ""; position: absolute; inset: -4px; border-radius: 14px; border: 3px solid #58cc02; animation: guia-pulso 1.6s ease-out infinite; }
.guia-foco-suave { box-shadow: 0 0 0 9999px rgba(10, 24, 32, .35); }
.guia-foco-suave::after { display: none; }
@keyframes guia-pulso { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.08); } }
.guia-globo { position: fixed; z-index: 2147483001; width: min(380px, calc(100vw - 20px)); background: #fff; color: #3c3c3c; border-radius: 18px;
              border: 2px solid #e5e5e5; box-shadow: 0 6px 0 #e5e5e5, 0 20px 50px rgba(0, 0, 0, .25); padding: 1rem 1.1rem .9rem;
              font-family: var(--fuente, system-ui); animation: guia-entrar .3s cubic-bezier(.2, .9, .3, 1.2); }
.guia-globo.guia-centro { top: 50% !important; left: 50% !important; transform: translate(-50%, -50%); width: min(440px, calc(100vw - 24px)); animation: none; }
.guia-globo.guia-abajo { top: auto !important; left: 10px !important; right: 10px; bottom: 10px; width: auto; }
@keyframes guia-entrar { from { opacity: 0; translate: 0 8px; } }
.guia-cab { display: flex; align-items: center; gap: .6rem; }
.guia-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem; background: #ddf4ff; flex: none;
               animation: guia-saludo 2.4s ease-in-out infinite; }
@keyframes guia-saludo { 0%, 70%, 100% { transform: rotate(0); } 80% { transform: rotate(-12deg); } 90% { transform: rotate(10deg); } }
.guia-quien { flex: 1; min-width: 0; line-height: 1.2; }
.guia-quien strong { display: block; color: #1cb0f6; font-size: .95rem; }
.guia-quien small { color: #8a8a8a; font-size: .75rem; }
.guia-x { border: 0; background: none; color: #afafaf; font-size: 1.1rem; cursor: pointer; border-radius: 8px; padding: .2rem .4rem; }
.guia-x:hover { background: #f2f2f2; color: #777; }
.guia-barra { height: 8px; border-radius: 999px; background: #e5e5e5; margin: .7rem 0 .2rem; overflow: hidden; }
.guia-barra span { display: block; height: 100%; background: #58cc02; border-radius: inherit; transition: width .4s; }
.guia-titulo { font: 800 1.15rem var(--fuente-titulo, system-ui); color: #3c3c3c; margin: .6rem 0 .3rem; }
.guia-texto { margin: 0 0 .6rem; font-size: .95rem; line-height: 1.5; color: #4b4b4b; }
.guia-aviso { margin: 0 0 .6rem; font-size: .82rem; color: #a86a00; background: #fff4d6; border-radius: 10px; padding: .45rem .6rem; }
.guia-pie { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.guia-accion { font-size: .8rem; font-weight: 700; color: #1cb0f6; }
.guia-botones { display: flex; gap: .4rem; margin-left: auto; }
.guia-btn { border: 0; border-radius: 12px; padding: .6rem 1rem; cursor: pointer; font: 800 .8rem var(--fuente, system-ui); text-transform: uppercase; letter-spacing: .03em;
            color: #fff; background: #58cc02; box-shadow: 0 4px 0 #58a700; text-decoration: none !important; display: inline-block; }
.guia-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #58a700; }
.guia-btn:disabled { background: #e5e5e5; color: #afafaf; box-shadow: 0 4px 0 #d0d0d0; cursor: default; transform: none; }
.guia-btn-2 { background: #fff; color: #777; border: 2px solid #e5e5e5; box-shadow: 0 3px 0 #e5e5e5; }
.guia-btn-2:active { box-shadow: 0 1px 0 #e5e5e5; }
.guia-fin { text-align: center; }
.guia-fin-emoji { font-size: 3.4rem; animation: tuto-rebote .6s cubic-bezier(.2, 1.6, .4, 1); }
.guia-xp { display: inline-block; margin: .2rem 0 1rem; padding: .4rem 1rem; border-radius: 12px; background: #fff4d6; color: #ff9600; font: 800 1.4rem var(--fuente-titulo, system-ui); }
.guia-fin .guia-pie { justify-content: center; }
.guia-confeti { position: absolute; inset: 0 0 auto; height: 0; pointer-events: none; }
.guia-confeti i { position: absolute; top: 0; width: 8px; height: 12px; border-radius: 2px; opacity: 0; animation: tuto-caer 1.8s ease-in forwards; }
@media (prefers-reduced-motion: reduce) { .guia-foco::after, .guia-avatar, .guia-confeti { animation: none; display: none; } }

/* Tutorial: botón «Practicar en la app» */
.tuto-practicar { border: 2px solid #e5e5e5; background: #fff; border-radius: 12px; padding: .3rem .7rem; font: 800 .72rem var(--fuente); color: #1cb0f6;
                  text-transform: uppercase; letter-spacing: .04em; cursor: pointer; box-shadow: 0 3px 0 #e5e5e5; }
.tuto-practicar:active { transform: translateY(2px); box-shadow: 0 1px 0 #e5e5e5; }
.tuto-practicar.hecha { color: #58a700; border-color: #b8eb94; box-shadow: 0 3px 0 #b8eb94; }
.tuto-mixto { display: flex; gap: .9rem; align-items: center; background: #ddf4ff; border: 2px solid #84d8ff; color: #1677a8; border-radius: 16px; padding: .8rem 1rem; margin-bottom: 1rem; }
.tuto-mixto span { font-size: 1.8rem; }
.tuto-fin-botones { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.tuto-boton-practica { display: inline-block; border: 0; border-radius: 16px; padding: .85rem 1.3rem; cursor: pointer; font: 800 .9rem var(--fuente); text-transform: uppercase;
                       color: #fff; background: #1cb0f6; box-shadow: 0 5px 0 #1899d6; }
.tuto-boton-practica:active { transform: translateY(4px); box-shadow: 0 1px 0 #1899d6; }
/* ==========================================================================
   Dinero → Pago de empleados
   ========================================================================== */
.emp-rejilla { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.emp-form .emp-calculo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.emp-modo { border: 0; padding: 0; margin: 0 0 1rem; display: grid; gap: .5rem; }
.emp-modo legend { font-weight: 600; font-size: .9rem; color: var(--azul-900); margin-bottom: .35rem; }
.emp-opcion { display: flex; align-items: center; gap: .75rem; margin: 0; padding: .7rem .85rem; border: 2px solid var(--borde); border-radius: 12px;
              cursor: pointer; font-weight: 500; transition: border-color .15s, background .15s; }
.emp-opcion input { position: absolute; opacity: 0; pointer-events: none; }
.emp-opcion:hover { border-color: var(--azul-500); }
.emp-opcion:has(input:checked) { border-color: var(--azul-700); background: var(--aqua-50); }
.emp-opcion:has(input:focus-visible) { outline: 2px solid var(--azul-500); outline-offset: 2px; }
.emp-opcion-icono { font-size: 1.5rem; }
.emp-opcion strong { display: block; color: var(--azul-900); }
.emp-opcion small { color: var(--muted); }
.emp-mes { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 1rem; }
.emp-mes strong { font: 800 1.15rem var(--fuente-titulo); color: var(--azul-900); min-width: 9em; text-align: center; }
.emp-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.emp-kpis .valor { font-size: 1.4rem; }
.emp-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .8rem; }
.emp-tarjeta { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 1rem; display: grid; gap: .7rem; }
.emp-tarjeta.activa { border-color: var(--azul-700); box-shadow: 0 0 0 3px var(--aqua-100); }
.emp-tarjeta-cab { display: flex; align-items: center; gap: .65rem; }
.emp-tarjeta-cab strong { display: block; color: var(--azul-900); }
.emp-tarjeta-cab small { font-size: .78rem; }
.emp-cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; background: var(--fondo); border-radius: 10px; padding: .55rem .6rem; }
.emp-cifras small { display: block; font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.emp-cifras strong { font-size: .92rem; font-variant-numeric: tabular-nums; }
.emp-arrastra { margin: 0; font-size: .8rem; color: var(--err); font-weight: 600; }
.emp-acciones { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; }
.emp-acciones form { margin: 0; }
.tabla-empleados { width: 100%; border-collapse: collapse; }
.tabla-empleados th { text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: .55rem .5rem; border-bottom: 1px solid var(--borde); }
.tabla-empleados td { padding: .6rem .5rem; border-bottom: 1px solid var(--borde); font-size: .9rem; vertical-align: middle; }
.tabla-empleados .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 1000px) { .emp-rejilla { grid-template-columns: minmax(0, 1fr); } .emp-kpis { grid-template-columns: minmax(0, 1fr); } }
/* Panel diario → Empleados (versión rápida del Pago de empleados) */
.emp-rapido { background: var(--aqua-50); border-radius: 12px; padding: .8rem; margin-bottom: 1rem; }
.emp-modo-fila { grid-template-columns: 1fr 1fr; display: grid; }
.emp-modo-fila .emp-opcion { background: #fff; padding: .55rem .7rem; }
.emp-totales { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; background: var(--fondo); border-radius: 12px; padding: .6rem .8rem; margin-bottom: .8rem; }
.emp-totales small { display: block; font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.emp-totales strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
#empleados .lista li { align-items: center; }
#empleados .lista form { margin: 0; }
@media (max-width: 520px) { .emp-modo-fila { grid-template-columns: 1fr; } }