:root{
  /* ===== Paleta "Claridad PILAR" (marino + rosa), aplicada 09/09 =====
     Reemplaza a la paleta Cotizador (marino/naranja) del 08/09. Los 6
     colores base los definió Pablo. El resto de las variables se derivan
     de esos 6: si mañana cambia un base, cambia toda la app de una.
     El landing (static/landing.css) NO se tocó — queda con su paleta propia. */
  --marino:#111111;        /* BASE · negro/tinta · acentos oscuros puntuales (footer, botones oscuros) */
  --marino-2:#1A1A1A;      /* BASE · negro secundario · hover sobre elementos oscuros */
  --oro-cta:#1AAD64;       /* BASE · verde · botones / CTA / detalles */
  --oro-hover:#128049;     /* BASE · verde oscuro · hovers / texto de acento sobre claro */
  --hueso:#F7F8F6;         /* BASE · fondos claros */
  --tinta:#111111;         /* BASE · texto (paleta A, 29/09/2026) */
  --acento-tint:#E3F5EC;   /* BASE · verde clarito · fondo de chips/badges sobre superficie clara */

  /* ---- Derivados de los 6 base (no tocar sin tocar arriba) ---- */
  --bg:var(--hueso);       /* fondo de página */
  --surface:#ffffff;       /* superficies: cards, paneles */
  --surface-2:#F2F4F1;     /* fondos sutiles, celdas, hover (tinte marino) */
  --graf:var(--marino);    /* barra utilitaria / footer / bandas oscuras */
  --graf-2:var(--marino-2);/* chips/selects sobre marino */
  --acento:var(--oro-cta); /* CTA, barras, bordes-top */
  --acento-claro:var(--oro-hover);  /* verde oscurecido: links/hover sobre fondo claro. */
  --oro:var(--oro-hover);  /* dorado brillante: acentos sobre marino */
  --crema:var(--surface-2);/* header de tabla: gris clarito con texto oscuro (opción A) */
  --crema-txt:var(--marca);
  --marca:var(--marino);   /* títulos / valores destacados */
  --txt:var(--tinta);      /* texto principal */
  --suave:#5B615C;         /* texto secundario */
  --gris:#F2F4F1;          /* fondos sutiles */
  --gris-borde:#E4E7E2;    /* bordes claros (tinte marino) */
  --verde:#1e7a44;         /* verde legible sobre claro */
  --rojo:#b3261e;          /* rojo legible sobre claro */
  --bordo:#a45a2a;         /* bordó/coral */
  --sombra:0 1px 3px rgba(17,17,17,.08);
  --sombra-hover:0 8px 22px rgba(17,17,17,.16);
  /* compat con reglas que aún referencian nombres viejos */
  --az:var(--marca);
  --az-banner:var(--graf);
  --az-claro:var(--acento-claro);
}
*{box-sizing:border-box}
/* Misma tipografía que el landing (system-ui): la suite venía en Calibri, que
   en Linux/Mac no existe y caía a una fallback distinta según la máquina. */
body{margin:0;font-family:'Plus Jakarta Sans',-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  color:var(--txt);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:var(--acento-claro);text-decoration:none}
a:hover{text-decoration:underline}

/* ══════════════ HEADER (mismo lenguaje que el landing) ══════════════
   El landing tiene una barra marino sólida con acentos dorados. Acá se replica:
   el header entero es marino (antes la fila del logo era blanca), así entrar a
   la app desde el landing no cambia de registro visual. */
.banner{background:#FFFFFF;color:var(--tinta);border-bottom:1px solid var(--gris-borde)}
.util-bar{background:var(--surface-2);color:var(--suave);border-bottom:1px solid var(--gris-borde)}
.util-in{max-width:1180px;margin:0 auto;padding:6px 26px;display:flex;align-items:center;
  justify-content:space-between;gap:14px;font-size:12.5px}
.util-tag{display:flex;align-items:center;gap:8px;letter-spacing:.02em;color:var(--suave)}
.util-tag b{color:var(--tinta);font-weight:700}
.util-tag .oro{color:var(--oro)}
.util-acc{display:flex;align-items:center;gap:10px}

/* Fila principal (logo) — sobre marino, como el landing */
.banner-in{max-width:1180px;margin:0 auto;padding:16px 26px;display:flex;align-items:center;
  justify-content:space-between;gap:16px}
.marca-wrap{display:flex;align-items:center;gap:12px}
/* Casco: la misma chapita dorada del landing (templates/_casco.svg). */
.logo-casco{flex:0 0 auto;width:38px;height:38px;border-radius:10px;
  display:grid;place-items:center;background:var(--oro-cta)}
.logo-casco svg{width:23px;height:23px;display:block;fill:var(--marino)}
.marca-box{display:flex;flex-direction:column;line-height:1.05}
.marca{font-size:23px;letter-spacing:.4px;color:var(--tinta);font-weight:800}
.marca b{color:var(--oro-cta)}
.marca .sep{opacity:.4;margin:0 6px;font-weight:400}
.marca-ver{font-size:11px;color:var(--suave);letter-spacing:.6px;margin-top:2px;text-transform:uppercase}
.banner-acc{display:flex;align-items:center;gap:10px}

.sel-empresa{display:flex;align-items:center;gap:8px;font-size:13px}
.sel-empresa select,.origen select{padding:6px 10px;border-radius:6px;border:1px solid var(--gris-borde);background:#fff;color:var(--txt);font-size:14px}
.origen select{background:var(--surface);color:var(--txt);border:1px solid var(--gris-borde)}
.sel-origen{display:inline-flex;gap:2px;background:var(--surface-2);border:1px solid var(--gris-borde);border-radius:8px;padding:2px}
.sel-origen a{color:var(--suave);padding:5px 10px;border-radius:6px;text-decoration:none;font-weight:600;font-size:12px}
.sel-origen a:hover{color:var(--marca);text-decoration:none}
.sel-origen a.on{background:var(--acento);color:#fff}
.sel-origen-lbl{color:var(--suave);font-weight:700;font-size:12px;padding:0 6px 0 4px;align-self:center}

/* Cinta de navegación (clara, opción A — activo en verde) */
.nav{max-width:1180px;margin:0 auto;padding:0 26px;display:flex;align-items:center;gap:2px;flex-wrap:wrap;
  border-top:1px solid var(--gris-borde)}
.nav a{color:var(--txt);padding:13px 16px;font-weight:700;font-size:14.5px;position:relative;letter-spacing:.01em}
.nav a:hover{color:var(--acento-claro);text-decoration:none;background:var(--surface-2)}
.nav a.on{color:var(--acento-claro)}
.nav a.on::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:3px;background:var(--oro-cta);border-radius:2px 2px 0 0}
.nav .sel-empresa{margin-left:10px;color:var(--suave)}
/* Menú desplegable de la cinta */
.nav-drop{position:relative;display:inline-flex}
.nav-drop>a::after{content:" ▾";font-size:11px;opacity:.6}
.nav-drop-menu{position:absolute;top:100%;left:0;min-width:230px;background:#fff;
  border:1px solid var(--gris-borde);border-top:3px solid var(--acento);border-radius:0 0 10px 10px;
  padding:8px;z-index:50;box-shadow:0 14px 34px rgba(17,17,17,.14);display:none}
.nav-drop:hover>.nav-drop-menu,.nav-drop:focus-within>.nav-drop-menu{display:block}
.nav-drop-menu a{display:block;border-radius:7px;padding:9px 12px;font-weight:600;font-size:14px;white-space:nowrap;color:var(--txt)}
.nav-drop-menu a:hover{background:var(--surface-2);color:var(--acento-claro)}
.nav-drop-menu .nd-sub{color:var(--suave);font-weight:800;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;padding:8px 12px 3px}

.wrap{max-width:1180px;margin:0 auto;padding:26px 26px 44px}
.topbar{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:6px}
h1{margin:0;font-size:25px;color:var(--marca)}
.periodo{color:var(--suave);font-size:14px;margin-top:2px}
.acciones{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.origen{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--suave)}
.origen-detalle{color:var(--suave);font-size:13px;margin:4px 0 16px;font-style:italic}
.aviso-origen{background:#fbf1d5;border:1px solid #ebd79a;color:#8a6608;font-size:13px;padding:10px 14px;border-radius:10px;margin:0 0 16px}
/* Botón principal: píldora verde con texto blanco (opción A, editorial claro). */
.btn-pdf{background:var(--oro-cta);color:#fff;padding:10px 20px;border-radius:999px;
  font-weight:800;font-size:14px;box-shadow:0 8px 18px rgba(26,173,100,.30);
  transition:background .16s ease,transform .16s ease,box-shadow .16s ease}
.btn-pdf:hover{background:var(--oro-hover);text-decoration:none;transform:translateY(-1px);
  box-shadow:0 12px 24px rgba(18,128,73,.38)}
button.btn-pdf{border:none;cursor:pointer;font-family:inherit}

/* Cinta de filtro (Meses / Obras) */
.filtro-cert{display:flex;flex-wrap:wrap;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--gris-borde);border-radius:10px;padding:12px 14px;margin:12px 0 18px;box-shadow:var(--sombra)}
.filtro-cert .lbl{color:var(--suave);font-size:13px}
.menu{position:relative}
.menu>summary{list-style:none;cursor:pointer;background:var(--surface-2);color:var(--txt);border:1px solid var(--gris-borde);border-radius:8px;padding:8px 12px;font-size:14px;user-select:none}
.menu>summary::-webkit-details-marker{display:none}
.menu>summary::after{content:'▾';margin-left:8px;color:var(--suave)}
.menu[open]>summary{border-color:var(--acento);color:var(--marca)}
.menu .panel{position:absolute;z-index:30;margin-top:6px;background:var(--surface);border:1px solid var(--gris-borde);border-radius:8px;padding:8px;min-width:190px;max-height:280px;overflow:auto;box-shadow:0 10px 26px rgba(17,17,17,.16)}
.menu .panel label{display:block;padding:5px 6px;border-radius:6px;color:var(--txt);font-size:14px;white-space:nowrap;cursor:pointer}
.menu .panel label:hover{background:var(--surface-2)}
.menu .acc{display:flex;gap:12px;margin-bottom:6px;border-bottom:1px solid var(--gris-borde);padding-bottom:6px}
.menu .acc a{font-size:12px;color:var(--acento-claro);cursor:pointer}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:18px}
.kpi{background:var(--surface);border-radius:10px;padding:12px 14px;border:1px solid var(--gris-borde);border-top:4px solid var(--acento);box-shadow:var(--sombra)}
.kpi span{display:block;color:var(--suave);font-size:12px;text-transform:uppercase;letter-spacing:.4px}
.kpi b{display:block;font-size:22px;margin-top:4px;color:var(--marca)}
.kpi.bordo{border-top-color:var(--bordo)} .kpi.bordo b{color:var(--bordo)}
.kpi.verde{border-top-color:var(--verde)} .kpi.verde b{color:var(--verde)}
.kpi.rojo{border-top-color:var(--rojo)} .kpi.rojo b{color:var(--rojo)}

.grid{display:grid;grid-template-columns:360px 1fr;gap:18px;align-items:start}
@media(max-width:900px){.grid{grid-template-columns:1fr}}
.card{background:var(--surface);border-radius:12px;padding:16px 18px;border:1px solid var(--gris-borde);box-shadow:var(--sombra)}
.card h2{margin:0 0 12px;font-size:16px;color:var(--marca)}
.card h2 small{color:var(--suave);font-weight:normal;font-size:13px}

table.tabla{width:100%;border-collapse:collapse;font-size:14px}
.tabla th{background:var(--crema);color:var(--crema-txt);text-align:right;padding:8px 10px;font-weight:bold}
.tabla th:first-child{text-align:left;border-top-left-radius:6px}
.tabla th:last-child{border-top-right-radius:6px}
.tabla td{padding:7px 10px;border-bottom:1px solid var(--gris-borde)}
.tabla td.num{text-align:right;font-variant-numeric:tabular-nums}
.tabla td.obra,.tabla td:first-child{font-weight:bold;color:var(--marca);background:var(--surface-2)}
.tabla td.neg{color:var(--rojo);font-weight:bold}
.tabla tfoot td{background:var(--surface-2);color:var(--marca);font-weight:bold;border-top:2px solid var(--acento)}
.tabla tfoot td.neg{color:var(--rojo)}

.badge{display:inline-block;padding:3px 9px;border-radius:20px;font-size:12px;font-weight:bold;white-space:nowrap}
.badge.ganancia{background:#e3f3e9;color:#1e7a44}
.badge.perdida{background:#fbe9e7;color:#b3261e}
.badge.sin_ingreso{background:#f6e7dc;color:#a45a2a}
.badge.cero{background:var(--surface-2);color:var(--suave)}

.pie{text-align:center;color:var(--suave);font-size:12px;padding:20px}

/* --- Google Drive --- */
.banner-der{display:flex;align-items:center;gap:14px}
.chip-drive{display:inline-block;padding:6px 12px;border-radius:20px;font-size:13px;font-weight:bold;
  background:var(--acento-tint);color:var(--acento-claro);border:1px solid transparent}
.chip-drive.on{background:#1e7a44;border-color:#1e7a44}
.chip-drive:hover{text-decoration:none;filter:brightness(1.12)}
.tabla input[type=text]{padding:4px 7px;border:1px solid var(--gris-borde);border-radius:6px;
  font-size:13px;font-family:inherit;background:#fff;color:var(--txt)}
.tabla input[type=text]:focus{outline:none;border-color:var(--acento);box-shadow:0 0 0 2px rgba(26,173,100,.20)}
.banner-acc{display:flex;align-items:center;gap:10px}
/* Vive en la barra utilitaria, ahora clara (opción A). */
/* Sin el engranaje, el chip pasó de círculo de 32px a píldora con la palabra. */
.chip-cfg{display:inline-flex;align-items:center;justify-content:center;height:32px;padding:0 14px;
  border-radius:20px;background:var(--surface);color:var(--suave);border:1px solid var(--gris-borde);
  font-size:12.5px;font-weight:700;line-height:1;white-space:nowrap}
.chip-cfg:hover{text-decoration:none;background:var(--acento-tint);color:var(--acento-claro);
  border-color:var(--acento)}
.flash{background:#fbf1d5;border:1px solid #ebd79a;color:#8a6608;border-radius:8px;
  padding:10px 14px;margin-bottom:16px;font-size:14px}
.flash div+div{margin-top:4px}
.aviso{color:#a45a2a;background:#f6e7dc;border:1px solid #e6c8ac;border-radius:8px;padding:10px 12px}
.ok{color:var(--verde);font-weight:bold;font-size:16px}
.btn-sec{display:inline-block;margin-top:8px;padding:8px 13px;border-radius:8px;border:1px solid var(--gris-borde);
  color:var(--marca);font-weight:bold;background:var(--surface)}
.btn-sec:hover{background:var(--surface-2);text-decoration:none}
.form-raiz{display:flex;gap:10px;align-items:center;margin-top:8px}
.form-raiz input{padding:9px 11px;border:1px solid var(--gris-borde);border-radius:8px;font-size:14px;background:#fff;color:var(--txt)}
code{background:var(--surface-2);padding:1px 5px;border-radius:4px;font-size:13px;color:var(--acento-claro)}

/* --- Home institucional (hero + secciones) --- */
.banner-in{align-items:center}
.hero{padding:18px 0 8px}
.hero h1{font-size:28px;margin:0 0 6px;color:var(--marca)}
.hero p{color:var(--suave);font-size:16px;margin:0}
.cards2{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:18px;margin:18px 0}
@media(max-width:760px){.cards2{grid-template-columns:1fr}}
.card-sec.conv{border-top-color:var(--acento-claro)}
.card-sec{display:block;background:var(--surface);border-radius:14px;padding:22px;border:1px solid var(--gris-borde);box-shadow:var(--sombra);
  border-top:5px solid var(--acento);color:var(--txt);transition:transform .08s,box-shadow .12s}
.card-sec:hover{text-decoration:none;transform:translateY(-2px);box-shadow:var(--sombra-hover)}
.card-sec.cotiz{border-top-color:var(--bordo)}
.card-sec.cert{border-top-color:var(--verde)}
.card-sec .ico{font-size:34px}
.card-sec h2{margin:6px 0 8px;color:var(--marca);font-size:21px}
.card-sec p{color:var(--suave);font-size:14px;line-height:1.5;margin:0 0 12px}
.card-sec .ir{font-weight:bold;color:var(--acento-claro)}
.nota-drive{background:var(--surface);border-radius:10px;padding:12px 16px;color:var(--suave);font-size:14px;
  border:1px solid var(--gris-borde);box-shadow:var(--sombra)}

/* ====== Dashboard de proyectos (tarjetas con semáforo) ====== */
.proy-dash-card{background:var(--surface);border-radius:12px;padding:15px 17px;
  box-shadow:var(--sombra);border:1px solid var(--gris-borde);
  border-left:5px solid #D5D9D2;display:flex;flex-direction:column;gap:9px}
.proy-dash-card.sem-verde{border-left-color:var(--verde)}
.proy-dash-card.sem-amarillo{border-left-color:var(--acento)}
.proy-dash-card.sem-rojo{border-left-color:var(--rojo)}
.proy-dash-card.sem-pausa,.proy-dash-card.sem-finalizado{border-left-color:#D5D9D2;opacity:.8}

.pdc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.pdc-nombre{font-weight:700;color:var(--marca);font-size:15px;text-decoration:none;
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pdc-nombre:hover{text-decoration:underline}
.pdc-badge{font-size:11px;font-weight:700;padding:2px 9px;border-radius:20px;white-space:nowrap;flex-shrink:0}
.pdc-badge.est-activo{background:#F2F4F1;color:#1A1A1A}
.pdc-badge.est-pausa{background:#F2F4F1;color:#5b626e}
.pdc-badge.est-finalizado{background:#e3f3e9;color:#1e7a44}

.pdc-avance-wrap{display:flex;align-items:center;gap:8px}
.pdc-avance-bar{flex:1;height:7px;background:var(--surface-2);border-radius:4px;overflow:hidden;border:1px solid var(--gris-borde)}
.pdc-avance-fill{height:100%;border-radius:4px;transition:width .3s}
.pdc-avance-pct{font-size:11px;font-weight:700;color:var(--suave);min-width:28px;text-align:right}

.pdc-cert-prox{font-size:12px;color:var(--suave);padding:3px 0}
.pdc-cert-prox.urgente{color:var(--acento-claro);font-weight:700}
.pdc-cert-prox.sin-fecha{color:#8A9098;font-style:italic}
.pdc-cert-tit{color:var(--suave);font-style:italic}

.pdc-meta{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--suave)}

.pdc-acciones{display:flex;align-items:center;gap:8px;margin-top:2px;border-top:1px solid var(--gris-borde);padding-top:9px}
.pdc-btn-ver{font-size:13px;font-weight:700;color:var(--acento-claro);text-decoration:none;flex:1}
.pdc-btn-ver:hover{text-decoration:underline}
.pdc-avance-form{display:flex;align-items:center;gap:4px}
.pdc-avance-input{width:54px;padding:4px 7px;border:1px solid var(--gris-borde);border-radius:6px;
  font-size:13px;font-family:inherit;text-align:center;background:#fff;color:var(--txt)}
.pdc-btn-save{background:var(--acento);color:#fff;border:none;border-radius:6px;
  padding:5px 9px;cursor:pointer;font-size:13px}
.pdc-btn-save:hover{background:#b8901a}

.pdc-ficha-barra{display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  background:var(--surface);border-radius:10px;padding:10px 16px;margin-bottom:14px;
  box-shadow:var(--sombra);border:1px solid var(--gris-borde)}
.pdc-ficha-label{font-size:12px;font-weight:700;color:var(--suave);text-transform:uppercase;
  letter-spacing:.04em;margin-right:8px}
.pdc-ficha-avance-wrap{display:flex;align-items:center;gap:8px}
.pdc-ficha-avance-form{display:flex;align-items:center;gap:6px}
.pdc-ficha-estado-form{display:flex;align-items:center;gap:8px}
.pdc-estado-select{padding:5px 10px;border:1px solid var(--gris-borde);border-radius:7px;
  font-size:13px;font-family:inherit;background:#fff;color:var(--txt);cursor:pointer}

.sem-leyenda{display:flex;align-items:center;gap:6px;margin-top:12px;font-size:12px;color:var(--suave);flex-wrap:wrap}
.sem-dot{display:inline-block;width:10px;height:10px;border-radius:50%}
.sem-dot.rojo{background:var(--rojo)}
.sem-dot.amarillo{background:var(--acento)}
.sem-dot.verde{background:var(--verde)}
.sem-dot.pausa{background:#D5D9D2}

/* ====== Proyectos de usuario (cards legacy) ====== */
.proy-card{display:flex;align-items:center;gap:12px;background:var(--surface);border-radius:12px;
  padding:14px 16px;box-shadow:var(--sombra);border:1px solid var(--gris-borde);
  color:var(--txt);transition:transform .08s,box-shadow .12s,border-color .12s}
.proy-card:hover{text-decoration:none;transform:translateY(-2px);box-shadow:var(--sombra-hover);
  border-color:var(--acento)}
.proy-card-ico{font-size:28px;flex-shrink:0}
.proy-card-info{flex:1;min-width:0}
.proy-card-nombre{font-weight:700;color:var(--marca);font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proy-card-cert{font-size:13px;color:var(--verde);margin-top:3px}
.proy-card-cert b{color:var(--verde)}
.proy-cert-lbl{font-size:11px;color:var(--suave);font-weight:normal}
.proy-card-meta{font-size:12px;color:var(--suave);margin-top:2px}
.proy-card-arr{font-size:18px;color:var(--acento-claro);flex-shrink:0}

.proy-vacio{text-align:center;padding:48px 24px;color:var(--suave)}
.proy-vacio p{font-size:16px;margin:0 0 6px}
.proy-vacio-sub{font-size:14px}

.proy-form-wrap{max-width:560px;margin:24px 0}
.proy-form{background:var(--surface);border-radius:14px;padding:24px;border:1px solid var(--gris-borde);box-shadow:var(--sombra)}
.proy-form label{display:block;font-size:13px;font-weight:700;color:var(--suave);margin-bottom:6px}
.proy-form input[type=text]{width:100%;padding:11px 13px;border:1px solid var(--gris-borde);
  border-radius:8px;font-size:16px;font-family:inherit;background:#fff;color:var(--txt)}
.proy-form input[type=text]:focus{outline:none;border-color:var(--acento);
  box-shadow:0 0 0 2px rgba(26,173,100,.18)}
.proy-hint{font-size:13px;color:var(--suave);margin:6px 0 18px}
.proy-form-acc{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

.proy-upload{margin-bottom:16px}
.proy-upload-hint{font-size:13px;color:var(--suave);margin:0 0 12px}
.proy-upload-form{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.proy-file-input{display:none}
.proy-file-label{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:8px;
  border:1px solid var(--gris-borde);background:var(--surface);cursor:pointer;font-size:14px;
  color:var(--marca);font-weight:600;transition:border-color .12s}
.proy-file-label:hover{border-color:var(--acento)}
.proy-destino-lbl{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--suave)}
.proy-destino{padding:9px 10px;border-radius:8px;border:1px solid var(--gris-borde);
  background:#fff;color:var(--txt);font-size:14px;font-weight:600}
.arch-carpeta{color:var(--acento-claro);font-weight:600}

.proy-archivos{margin-bottom:16px}
.arch-lista{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.arch-item{display:flex;align-items:center;gap:10px;padding:10px 12px;
  background:var(--surface-2);border-radius:8px;flex-wrap:wrap}
/* El tipo de archivo va escrito (XLSX, PDF…), no como emoji: etiqueta
   chica en verde clarito, del mismo ancho para que la lista quede alineada. */
.arch-ico{flex-shrink:0;min-width:46px;text-align:center;padding:3px 7px;border-radius:5px;
  background:var(--acento-tint);color:var(--acento-claro);font-size:10.5px;font-weight:700;letter-spacing:.04em}
.arch-info{flex:1;min-width:0}
.arch-nombre{font-weight:600;color:var(--marca);font-size:14px;word-break:break-all}
.arch-meta{font-size:12px;color:var(--suave);margin-top:1px}
.arch-acc{display:flex;gap:6px;flex-shrink:0}

/* ====== Ficha de cliente (proyecto) ====== */
.proy-cliente-card{margin-bottom:16px}
.proy-cliente-header{display:flex;align-items:center;justify-content:space-between;
  cursor:pointer;user-select:none;padding:2px 0}
.proy-cliente-header:hover .proy-cliente-toggle{color:var(--acento-claro)}
.proy-cliente-preview{font-size:14px;font-weight:normal;color:var(--suave);margin-left:4px}
.proy-cliente-preview.sin-datos{font-style:italic}
.proy-cliente-toggle{font-size:13px;color:var(--suave);transition:transform .2s}
.proy-cliente-toggle.abierto{transform:rotate(180deg)}
.proy-cliente-body{padding-top:16px;border-top:1px solid var(--gris-borde);margin-top:12px}
.proy-cliente-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px}
@media(max-width:600px){.proy-cliente-grid{grid-template-columns:1fr}}
.proy-campo label{display:block;font-size:12px;font-weight:700;color:var(--suave);
  text-transform:uppercase;letter-spacing:.4px;margin-bottom:5px}
.proy-campo input{width:100%;padding:9px 12px;border:1px solid var(--gris-borde);
  border-radius:8px;font-size:14px;font-family:inherit;color:var(--txt);background:#fff}
.proy-campo input:focus{outline:none;border-color:var(--acento);
  box-shadow:0 0 0 2px rgba(26,173,100,.16)}
.proy-cliente-acc{margin-top:14px}

/* ====== Secciones colapsables genéricas ====== */
.proy-sec-header{display:flex;align-items:center;justify-content:space-between;
  cursor:pointer;user-select:none;padding:2px 0}
.proy-sec-header:hover .proy-sec-toggle{color:var(--acento-claro)}
.proy-sec-preview{font-size:14px;font-weight:normal;color:var(--suave);margin-left:4px}
.proy-sec-preview.sin-datos{font-style:italic}
.proy-sec-toggle{font-size:13px;color:var(--suave);transition:transform .2s}
.proy-sec-toggle.abierto{transform:rotate(180deg)}
.proy-sec-body{padding-top:16px;border-top:1px solid var(--gris-borde);margin-top:12px}
.proy-agenda-card,.proy-bita-card{margin-bottom:16px}

/* ── Agenda ── */
.agenda-lista{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.agenda-item{display:flex;align-items:center;gap:10px;padding:9px 12px;
  background:var(--surface-2);border-radius:8px;flex-wrap:wrap}
.agenda-item.vencida{background:#fbe9e7}
.agenda-tipo{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
  padding:3px 7px;border-radius:5px;white-space:nowrap;flex-shrink:0}
.tipo-inicio{background:#F2F4F1;color:#1A1A1A}
.tipo-entrega{background:#e3f3e9;color:#1e7a44}
.tipo-vencimiento{background:#fbe9e7;color:#b3261e}
.tipo-reunion{background:#fbf1d5;color:#8a6608}
.tipo-otro{background:#F2F4F1;color:var(--suave)}
.agenda-info{flex:1;min-width:0}
.agenda-titulo{font-weight:600;font-size:14px;color:var(--marca)}
.agenda-nota{font-size:12px;color:var(--suave);margin-top:2px}
.agenda-fecha{font-size:13px;font-weight:600;color:var(--marca);white-space:nowrap;flex-shrink:0}
.agenda-fecha.rojo{color:var(--rojo)}
.agenda-vencida-lbl{display:block;font-size:10px;font-weight:normal;color:var(--rojo)}

.agenda-form{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.agenda-form-fila{display:flex;gap:8px;flex-wrap:wrap}
.agenda-form-fila2{display:flex;gap:8px;flex-wrap:wrap}
.agenda-input-tit{flex:2;min-width:160px;padding:8px 11px;border:1px solid var(--gris-borde);
  border-radius:8px;font-size:14px;font-family:inherit;background:#fff;color:var(--txt)}
.agenda-input-fecha{flex:1;min-width:130px;padding:8px 11px;border:1px solid var(--gris-borde);
  border-radius:8px;font-size:14px;font-family:inherit;background:#fff;color:var(--txt)}
.agenda-input-tipo{flex:1;min-width:120px;padding:8px 11px;border:1px solid var(--gris-borde);
  border-radius:8px;font-size:14px;font-family:inherit;background:#fff;color:var(--txt)}
.agenda-input-nota{flex:1;min-width:200px;padding:8px 11px;border:1px solid var(--gris-borde);
  border-radius:8px;font-size:14px;font-family:inherit;background:#fff;color:var(--txt)}
.agenda-input-tit:focus,.agenda-input-fecha:focus,.agenda-input-tipo:focus,.agenda-input-nota:focus{
  outline:none;border-color:var(--acento);box-shadow:0 0 0 2px rgba(26,173,100,.16)}

/* ── Bitácora ── */
.bita-form{margin-bottom:16px}
.bita-textarea{width:100%;padding:10px 12px;border:1px solid var(--gris-borde);border-radius:8px;
  font-size:14px;font-family:inherit;resize:vertical;color:var(--txt);background:#fff}
.bita-textarea:focus{outline:none;border-color:var(--acento);box-shadow:0 0 0 2px rgba(26,173,100,.16)}
.bita-form-acc{margin-top:8px}
.bita-lista{display:flex;flex-direction:column;gap:8px}
.bita-item{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;
  background:var(--surface-2);border-radius:8px;border-left:3px solid var(--acento)}
.bita-fecha{font-size:11px;color:var(--suave);white-space:nowrap;flex-shrink:0;margin-top:2px}
.bita-texto{flex:1;font-size:14px;color:var(--txt);white-space:pre-wrap;word-break:break-word}
.bita-del{flex-shrink:0}

/* ====== Panel Financiero ====== */
.proy-fin-card,.proy-cobro-card{margin-bottom:16px}
.fin-vincular{margin-top:8px}
.fin-label{display:block;font-size:12px;font-weight:700;color:var(--suave);
  text-transform:uppercase;letter-spacing:.4px;margin-bottom:6px}
.fin-form-fila{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.fin-select{flex:1;min-width:200px;padding:8px 11px;border:1px solid var(--gris-borde);
  border-radius:8px;font-size:14px;font-family:inherit;background:#fff;color:var(--txt)}
.fin-hint{font-size:12px;color:var(--suave);margin:8px 0 0;font-style:italic}

/* ====== Panel Cobro (Mercado Pago) ====== */
.cobro-config-aviso{background:#F2F4F1;border:1px solid #E4E7E2;border-radius:10px;padding:16px 18px;margin-bottom:12px}
.cobro-config-aviso p{margin:0 0 10px;font-size:14px}
.cobro-token-form{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.cobro-token-input{flex:1;min-width:260px;padding:9px 12px;border:1px solid var(--gris-borde);
  border-radius:8px;font-size:14px;font-family:inherit;background:#fff;color:var(--txt)}
.cobro-hint{font-size:12px;color:var(--suave);margin:4px 0 0}
.cobro-hint a{color:var(--acento-claro)}

.cobro-form{margin-bottom:16px}
.cobro-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
@media(max-width:600px){.cobro-form-grid{grid-template-columns:1fr}}
.cobro-form-acc{display:flex;gap:10px}

.btn-mp{background:#009ee3;color:#fff;padding:10px 16px;border-radius:8px;
  font-weight:700;font-size:14px;border:none;cursor:pointer;display:inline-block}
.btn-mp:hover{background:#007fc0;text-decoration:none}
.btn-mp-chico{background:#009ee3;color:#fff;padding:6px 12px;border-radius:7px;
  font-size:13px;font-weight:600;white-space:nowrap}
.btn-mp-chico:hover{background:#007fc0;text-decoration:none}

.cobro-lista{margin-top:8px}
.cobro-lista-tit{font-size:14px;font-weight:700;color:var(--marca);margin:0 0 8px}
.cobro-item{display:flex;align-items:center;gap:10px;padding:10px 12px;
  background:var(--surface-2);border-radius:8px;margin-bottom:6px;flex-wrap:wrap}
.cobro-item-info{flex:1;min-width:0}
.cobro-item-titulo{font-weight:600;font-size:14px;color:var(--marca);word-break:break-word}
.cobro-item-meta{font-size:12px;color:var(--suave);margin-top:2px}
.cobro-item-monto{font-weight:700;font-size:15px;color:var(--verde);white-space:nowrap}
.cobro-estado{font-size:11px;font-weight:700;text-transform:uppercase;
  padding:2px 6px;border-radius:4px}
.estado-pendiente{background:#fbf1d5;color:#8a6608}
.estado-pagado{background:#e3f3e9;color:#1e7a44}

/* ====== Nav: link Mi Plan / usuario ====== */
.user-plan{color:var(--suave);font-size:15px;margin-right:2px;text-decoration:none}
.user-plan:hover{color:var(--acento-claro)}

/* ====== Mi Plan (página) ====== */
.mi-plan-actual{margin-bottom:20px}
.mi-plan-cabeza{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.mi-plan-nombre{font-size:22px;font-weight:700;color:var(--marca)}
.mi-plan-desc{font-size:14px;color:var(--suave);margin-top:4px}
.mi-plan-uso{text-align:right;flex-shrink:0}
.mi-plan-uso-num{font-size:28px;font-weight:700;color:var(--marca)}
.mi-plan-uso-lbl{font-size:12px;color:var(--suave);text-transform:uppercase;letter-spacing:.4px}
.mi-plan-barra-wrap{height:6px;background:var(--surface-2);border-radius:3px;margin-top:6px;width:120px}
.mi-plan-barra{height:6px;background:var(--acento);border-radius:3px;transition:width .3s}
.mi-plan-alerta{background:#fbf1d5;color:#8a6608;padding:10px 14px;border-radius:8px;
  font-size:14px;margin-top:12px}
.mi-plan-alerta a{color:var(--acento-claro);font-weight:700}
.mi-plan-sub-info{font-size:13px;color:var(--suave);margin-top:10px;display:flex;gap:16px;flex-wrap:wrap}
.mi-plan-sub-id{font-family:monospace;font-size:11px}
.mi-plan-sec-tit{font-size:16px;font-weight:700;color:var(--marca);margin:24px 0 14px}

.mi-plan-stripe-card h2{margin-bottom:12px}
.stripe-ok-badge{background:#e3f3e9;color:#1e7a44;padding:8px 12px;border-radius:8px;
  font-size:13px;font-weight:600}
.stripe-aviso{font-size:14px;color:var(--suave);margin:0 0 14px}
.stripe-cfg-form{display:flex;flex-direction:column;gap:10px;max-width:500px}
.stripe-hint{font-size:12px;color:var(--suave);margin:10px 0 0}
.stripe-hint a{color:var(--acento-claro)}

/* planes en /mi-plan */
.plan-actual{border:2px solid var(--acento)!important}
.plan-btn-actual{display:block;text-align:center;padding:9px 14px;border-radius:8px;
  background:var(--surface-2);color:var(--suave);font-size:14px;font-weight:600}
.plan-btn-upgrade{display:block;width:100%;text-align:center;box-sizing:border-box}
.plan-badge-actual{background:var(--acento)!important;color:#fff!important}

/* ====== Vista pública de proyecto ====== */
.pub-badge{font-size:12px;color:#fff;background:rgba(255,255,255,.18);
  padding:4px 10px;border-radius:20px}
.pub-card h2{margin:0 0 12px;font-size:15px;color:var(--marca)}
.pub-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(max-width:500px){.pub-grid{grid-template-columns:1fr}}
.pub-grid div span{display:block;font-size:11px;color:var(--suave);text-transform:uppercase;
  letter-spacing:.4px;margin-bottom:2px}
.pub-grid div strong{font-size:14px;color:var(--txt)}

/* ====== Dashboard de proyectos (home) ====== */
.dash-topbar{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:6px;padding:14px 0 4px}
.dash-topbar h1{margin:0;font-size:24px;color:var(--marca)}
.dash-topbar .periodo{color:var(--suave);font-size:14px;margin-top:2px}

.dash-grupo-tit{font-size:15px;font-weight:700;margin:20px 0 10px;padding-left:10px;
  border-left:4px solid var(--gris-borde);color:var(--suave)}
.dash-grupo-tit.cobran{border-left-color:var(--verde);color:var(--verde)}
.dash-grupo-tit.nocobran{border-left-color:var(--bordo);color:var(--bordo)}
.dash-grupo-tit small{font-weight:normal;color:var(--suave);font-size:13px}

.obras-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px;margin-bottom:6px}
@media(max-width:640px){.obras-grid{grid-template-columns:1fr}}

.obra-card{background:var(--surface);border-radius:12px;padding:16px 18px;box-shadow:var(--sombra);
  border:1px solid var(--gris-borde);border-top:4px solid var(--gris-borde);display:flex;flex-direction:column;gap:10px}
.obra-card.ganancia{border-top-color:var(--verde)}
.obra-card.perdida{border-top-color:var(--rojo)}
.obra-card.sin_ingreso{border-top-color:var(--bordo)}

.obra-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.obra-nombre{font-weight:700;color:var(--marca);font-size:15px;line-height:1.3}

.obra-avance-wrap{display:flex;align-items:center;gap:8px}
.obra-avance-bar{flex:1;height:8px;background:var(--surface-2);border-radius:4px;overflow:hidden;border:1px solid var(--gris-borde)}
.obra-avance-fill{height:100%;background:var(--acento);border-radius:4px;transition:width .3s}
.obra-avance-pct{font-size:11px;font-weight:700;color:var(--suave);white-space:nowrap}

.obra-nums{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px}
.obra-num-item span{display:block;font-size:11px;color:var(--suave);text-transform:uppercase;letter-spacing:.3px}
.obra-num-item b{display:block;font-size:14px;font-weight:700;color:var(--marca);margin-top:1px}
.num-neg{color:var(--rojo)!important}
.num-pos{color:var(--verde)!important}

.obras-sin-cert{display:flex;flex-direction:column;gap:4px;margin-bottom:4px}
.sin-cert-item{background:var(--surface);border-radius:8px;padding:9px 14px;display:flex;align-items:center;
  gap:10px;flex-wrap:wrap;border:1px solid var(--gris-borde)}
.sin-cert-nombre{font-weight:700;color:var(--marca);font-size:14px;flex:1;min-width:120px}
.sin-cert-gasto{font-size:13px;color:var(--suave)}

.dash-acciones-rapidas{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px;padding-top:18px;border-top:1px solid var(--gris-borde)}
.accion-rapida{display:inline-block;padding:9px 16px;border-radius:8px;background:var(--surface);
  border:1px solid var(--gris-borde);color:var(--marca);font-weight:700;font-size:14px;
  transition:transform .08s,box-shadow .12s,border-color .12s}
.accion-rapida:hover{text-decoration:none;transform:translateY(-1px);box-shadow:var(--sombra-hover);border-color:var(--acento)}

/* --- Login / registro (backdrop grafito de marca) --- */
.auth-body{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#111111,#1A1A1A 55%,#1AAD64);padding:24px}
.auth-card{background:var(--surface);border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.35);
  border:1px solid var(--gris-borde);border-top:4px solid var(--acento);padding:30px 30px 22px;width:100%;max-width:400px}
.auth-marca{font-size:20px;color:var(--marca);letter-spacing:.3px;font-weight:800}
.auth-marca b{color:var(--acento)}
.auth-sub{color:var(--suave);font-size:13px;margin-bottom:18px}
.auth-card h1{font-size:21px;margin:0 0 14px}
.auth-info{background:#F2F4F1;border:1px solid #E4E7E2;color:#1A1A1A;border-radius:8px;
  padding:9px 12px;font-size:13px;margin-bottom:12px}
.auth-form{display:flex;flex-direction:column;gap:4px}
.auth-form label{font-size:13px;color:var(--suave);margin-top:8px;font-weight:bold}
.auth-form label.auth-opt{font-weight:normal;color:var(--suave);font-size:12px}
.auth-form label.auth-opt span{opacity:.75}
.auth-form input{padding:10px 12px;border:1px solid var(--gris-borde);border-radius:8px;font-size:15px;background:#fff;color:var(--txt)}
.auth-form input:focus{outline:none;border-color:var(--acento);box-shadow:0 0 0 2px rgba(26,173,100,.18)}
.auth-form .btn-pdf{margin-top:16px;text-align:center;padding:11px;border:none;cursor:pointer;font-size:15px}
.auth-alt{margin-top:14px;font-size:14px;color:var(--suave)}
.auth-pie{margin-top:16px;padding-top:12px;border-top:1px solid var(--gris-borde);font-size:13px}
.auth-olvido{margin-top:6px;font-size:13px;text-align:right}
.reset-link{margin-top:8px;word-break:break-all;font-size:13px}
.reset-link a{font-weight:bold}

/* --- Campo de contraseña con ojito --- */
.pwd-wrap{position:relative;display:flex;align-items:center}
.pwd-wrap input{flex:1;width:100%;padding-right:42px}
.pwd-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:none;
  cursor:pointer;color:var(--suave);padding:5px;display:flex;align-items:center;border-radius:6px}
.pwd-eye:hover{color:var(--marca)}
.pwd-eye .eye-closed{display:none}
.pwd-eye.revealed .eye-open{display:none}
.pwd-eye.revealed .eye-closed{display:inline}

/* --- Chip de usuario en la barra utilitaria --- */
.user-chip{display:flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--gris-borde);
  border-radius:20px;padding:3px 6px 3px 4px}
.user-ini{width:24px;height:24px;border-radius:50%;background:var(--acento);color:#fff;font-weight:bold;
  display:flex;align-items:center;justify-content:center;font-size:13px}
.user-nom{color:var(--txt);font-size:13px;font-weight:bold}
.user-out{color:var(--suave);font-size:15px;padding:0 4px}
.user-out:hover{color:var(--marca);text-decoration:none}

/* --- Botones mini (tablas) --- */
.mini{display:inline-block;padding:3px 9px;border-radius:6px;border:1px solid var(--gris-borde);
  background:var(--surface);color:var(--marca);font-size:12px;font-weight:bold;cursor:pointer}
.mini:hover{text-decoration:none;background:var(--surface-2)}
.mini.danger,.btn-sec.danger{color:var(--rojo);border-color:#e8b3ad}
.mini.danger:hover,.btn-sec.danger:hover{background:#fbe9e7}

/* --- Planes / precios --- */
.planes-hero{text-align:center;padding:26px 0 8px}
.planes-hero h1{font-size:30px}
.planes-hero h1 span{color:var(--acento-claro)}
.planes-hero p{max-width:760px;margin:10px auto 0;color:var(--suave);font-size:16px;line-height:1.55}
.planes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:24px 0}
@media(max-width:820px){.planes-grid{grid-template-columns:1fr}}
.plan{background:var(--surface);border-radius:14px;padding:22px;box-shadow:var(--sombra);
  border:1px solid var(--gris-borde);display:flex;flex-direction:column}
.plan.destacado{border:2px solid var(--acento);box-shadow:var(--sombra-hover);position:relative}
.plan-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--acento);
  color:#fff;font-size:12px;font-weight:bold;padding:3px 12px;border-radius:20px}
.plan-tit{font-size:15px;font-weight:bold;color:var(--suave);text-transform:uppercase;letter-spacing:.5px}
.plan-precio{font-size:34px;font-weight:bold;color:var(--marca);margin:6px 0 2px}
.plan-precio small{font-size:15px;color:var(--suave);font-weight:normal}
.plan-nota{font-size:13px;color:var(--verde);font-weight:bold;margin-bottom:14px}
.plan ul{list-style:none;padding:0;margin:0 0 18px;flex:1}
.plan li{padding:6px 0;border-bottom:1px solid var(--gris-borde);font-size:14px}
.plan .btn-pdf,.plan .btn-sec{text-align:center}
.planes-vs{margin:30px 0}
.planes-vs h2{color:var(--marca)}
.planes-vs .tabla td:not(.obra){text-align:center}
.planes-foot{text-align:center;margin:24px 0;color:var(--suave)}

/* --- Checkout / pantalla de cobro RVA (estética Boca 2012) --- */
.checkout{display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--surface);
  border-radius:16px;overflow:hidden;box-shadow:var(--sombra-hover);
  border:1px solid var(--gris-borde);margin:12px 0 30px;max-width:1000px}
@media(max-width:820px){.checkout{grid-template-columns:1fr}}

/* Columna izquierda: resumen (banda marino) */
.co-resumen{background:var(--marino);color:#fff;padding:34px 34px 30px}
.co-marca{font-size:15px;letter-spacing:.3px;opacity:.9;margin-bottom:26px}
.co-marca .sep{color:var(--oro);margin:0 2px}
.co-marca b{color:var(--oro)}
.co-sub{font-size:15px;opacity:.82;margin-bottom:4px}
.co-precio{font-size:40px;font-weight:800;line-height:1.05;display:flex;align-items:flex-end;gap:8px}
.co-precio-per{font-size:12px;font-weight:600;opacity:.7;line-height:1.05;margin-bottom:6px}
.co-lineas{margin-top:28px;border-top:1px solid rgba(255,255,255,.14);padding-top:6px}
.co-linea{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;
  padding:14px 0;border-bottom:1px solid rgba(255,255,255,.10)}
.co-linea-tit{font-size:15px;font-weight:600}
.co-linea-nota{font-size:12px;opacity:.62;margin-top:3px}
.co-linea-monto{font-size:15px;font-weight:600;white-space:nowrap}
.co-muted{opacity:.62;font-weight:500}
.co-linea-sep{border-top:1px solid rgba(255,255,255,.14)}
.co-total{border-bottom:none;padding-bottom:2px}
.co-total .co-linea-tit,.co-total .co-linea-monto{font-size:17px;font-weight:800}
.co-promo{display:inline-block;margin:14px 0 2px;background:rgba(255,255,255,.08);
  color:#fff;border:1px solid rgba(255,255,255,.18);border-radius:8px;
  padding:9px 14px;font-size:13px;font-weight:600;cursor:pointer}
.co-promo:hover{background:rgba(255,255,255,.14)}
.co-promo-box{max-height:0;overflow:hidden;transition:max-height .2s}
.co-promo-box.abierto{max-height:60px;margin-top:8px}
.co-promo-box input{width:100%;padding:9px 11px;border-radius:8px;border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.06);color:#fff;font-size:14px;box-sizing:border-box}
.co-feat{font-size:13px;opacity:.85;margin-top:10px}
.co-feat:first-of-type{margin-top:20px}

/* Columna derecha: pago (fondo claro) */
.co-pago{padding:34px 34px 28px;background:var(--surface)}
.co-rapido{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.co-rap{padding:13px;border-radius:9px;border:none;font-size:15px;font-weight:700;cursor:pointer}
.co-rap-mp{background:var(--acento);color:#fff}
.co-rap-mp:hover{background:var(--oro-hover)}
.co-rap-link{background:var(--marino);color:#fff}
.co-rap-link:hover{background:var(--marino-2)}
.co-obien{text-align:center;position:relative;margin:20px 0}
.co-obien:before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:var(--gris-borde)}
.co-obien span{position:relative;background:var(--surface);padding:0 12px;
  font-size:12px;letter-spacing:.5px;color:var(--suave)}
.co-grupo{font-size:15px;font-weight:700;color:var(--marca);margin:6px 0 10px}
.co-campo{margin-bottom:18px}
.co-campo label,.co-lbl{display:block;font-size:12px;font-weight:600;color:var(--suave);
  text-transform:uppercase;letter-spacing:.3px;margin-bottom:6px}
.co-inp,.co-campo input,.co-tarjeta select{width:100%;padding:11px 12px;border-radius:8px;
  border:1px solid var(--gris-borde);background:var(--surface);font-size:15px;
  color:var(--txt);box-sizing:border-box;font-family:inherit}
.co-campo-mail input[readonly]{background:var(--surface-2);color:var(--suave)}
.co-inp:focus,.co-campo input:focus,.co-card input:focus{outline:none;border-color:var(--acento);
  box-shadow:0 0 0 3px rgba(26,173,100,.15)}
.co-tarjeta{border:1px solid var(--gris-borde);border-radius:10px;padding:16px;background:var(--surface)}
.co-tarjeta-cab{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--marca);
  font-size:14px;margin-bottom:14px}
.co-card{border:1px solid var(--gris-borde);border-radius:8px;overflow:hidden;margin-bottom:16px}
.co-card input{border:none;border-radius:0;box-shadow:none}
.co-card-num{border-bottom:1px solid var(--gris-borde)!important}
.co-card-row{display:grid;grid-template-columns:1fr 1fr}
.co-card-row input:first-child{border-right:1px solid var(--gris-borde)!important}
.co-tarjeta .co-lbl{margin-top:2px}
.co-tarjeta .co-inp{margin-bottom:14px}
.co-submit{width:100%;margin-top:22px;padding:14px;border:none;border-radius:9px;
  background:var(--acento);color:#fff;font-size:16px;font-weight:800;cursor:pointer;
  box-shadow:var(--sombra)}
.co-submit:hover{background:var(--oro-hover)}
.co-legal{font-size:12px;color:var(--suave);text-align:center;margin:14px 0 4px;line-height:1.5}
.co-seguro{font-size:12px;color:var(--suave);text-align:center;margin:0}
.co-volver{display:inline-block;margin-top:18px;font-size:13px;font-weight:600;color:var(--acento-claro)}

/* --- Plantillas por m² --- */
.plantillas-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:16px}
.plantilla-card{background:var(--surface);border-radius:14px;padding:20px;box-shadow:var(--sombra);
  border:1px solid var(--gris-borde);border-top:5px solid var(--bordo);display:flex;flex-direction:column}
.plantilla-card h2{margin:6px 0 2px;color:var(--marca);font-size:20px}
.pl-tipo{font-size:12px;font-weight:bold;color:var(--bordo);text-transform:uppercase;letter-spacing:.5px}
.pl-m2{font-size:26px;font-weight:bold;color:var(--acento-claro)}
.pl-desc{color:var(--suave);font-size:14px;line-height:1.5;margin:8px 0 14px;flex:1}
.pl-foot{display:flex;align-items:center;justify-content:space-between;gap:10px}

/* --- Conversor --- */
.conv-modos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:14px}
.conv-modo{display:flex;gap:10px;align-items:flex-start;background:var(--surface);border:1px solid var(--gris-borde);
  border-radius:10px;padding:12px 14px;cursor:pointer}
.conv-modo:has(input:checked){border-color:var(--acento);box-shadow:0 0 0 2px rgba(26,173,100,.18)}
.conv-modo input{margin-top:3px}
.conv-modo b{display:block;color:var(--marca);font-size:14px}
.conv-modo span{display:block;color:var(--suave);font-size:12.5px;line-height:1.45;margin-top:2px}
.conv-notas{margin:0;padding-left:18px;color:var(--suave);font-size:14px;line-height:1.7}

/* --- Materiales (form) --- */
.mat-form{display:grid;grid-template-columns:2fr 1.4fr .8fr 1fr auto;gap:10px;align-items:end}
.mat-form label{display:block;font-size:12px;color:var(--suave);font-weight:bold;margin-bottom:3px}
.mat-form input,.mat-form select{width:100%;padding:9px 11px;border:1px solid var(--gris-borde);border-radius:8px;font-size:14px;background:#fff;color:var(--txt)}
.mat-form .mat-acc{display:flex;gap:8px}
@media(max-width:760px){.mat-form{grid-template-columns:1fr 1fr}.mat-form .mat-acc{grid-column:1/-1}}

/* --- Infografía (iframe) --- */
.info-frame{background:var(--surface);border-radius:12px;box-shadow:var(--sombra);border:1px solid var(--gris-borde);overflow:hidden}
.info-frame iframe{width:100%;height:calc(100vh - 210px);min-height:560px;border:0;display:block}
@media(max-width:760px){.info-frame iframe{height:calc(100vh - 230px);min-height:480px}}

/* --- Planilla editable de cotización: rubros colapsables --- */
.rubro-det{border:1px solid var(--gris-borde);border-radius:9px;margin:8px 0;background:var(--surface);overflow:hidden}
.rubro-det>summary{cursor:pointer;list-style:none;padding:11px 14px;display:flex;align-items:center;
  justify-content:space-between;gap:12px;font-weight:700;user-select:none}
.rubro-det>summary::-webkit-details-marker{display:none}
.rubro-det>summary::before{content:"▸";margin-right:8px;color:var(--suave);transition:transform .15s}
.rubro-det[open]>summary::before{transform:rotate(90deg);display:inline-block}
.rubro-det.tiene-sel>summary{background:#e3f3e9}
.rubro-det .rb-nom{color:var(--marca)}
.rubro-det .rb-meta{font-weight:600;font-size:12px;color:var(--suave);white-space:nowrap}
.rubro-det.tiene-sel .rb-sub{color:var(--verde);font-weight:800}
.rubro-det .tabla-scroll{padding:0 6px 8px}
td.cod,.tabla td.cod{font-variant-numeric:tabular-nums;color:var(--suave);font-size:12px;white-space:nowrap}
.tabla-cot td .pick-mat{font-size:12px}
/* --- Detalle por obra: total general --- */
.tabla-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.grp-tit{font-size:14px;margin:16px 0 6px;padding-left:8px;border-left:4px solid var(--gris-borde)}
.grp-tit:first-of-type{margin-top:2px}
.grp-tit.cobran{border-left-color:var(--verde);color:var(--verde)}
.grp-tit.nocobran{border-left-color:var(--bordo);color:var(--bordo)}
.grp-tit small{color:var(--suave);font-weight:normal}
.total-general{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-top:16px;padding:12px 16px;border-radius:10px;background:var(--surface-2);color:var(--marca);border:1px solid var(--acento)}
.total-general.neg{background:#5a1f1a;border-color:#5a1f1a}
.total-general>span{font-weight:bold;letter-spacing:.5px}
.total-general .tg-nums{text-align:right}
.total-general .tg-nums small{display:block;opacity:.85;font-size:12px}
.total-general .tg-nums b{font-size:20px;color:var(--acento-claro)}

/* ====== MÓVIL ====== */
@media(max-width:760px){
  html,body{overflow-x:hidden}
  .wrap{padding:16px 12px 36px}
  .util-in{padding:6px 12px}
  .banner-in{flex-wrap:wrap;gap:10px;padding:12px 14px}
  .nav{flex-wrap:wrap;gap:2px;padding:0 12px}
  .nav a{padding:11px 11px;font-size:14px}
  .nav .sel-empresa{margin-left:0;width:100%;margin-top:6px}
  .acciones{width:100%}
  .form-raiz{flex-wrap:wrap}
  .form-raiz input{width:100%;flex:1 1 100%;min-width:0}
  .grid{grid-template-columns:1fr}
  .grid>*,.card,.tabla-scroll{min-width:0}
  table.tabla{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
  table.tabla th:first-child,
  table.tabla td:first-child{position:sticky;left:0;z-index:2;box-shadow:1px 0 0 var(--gris-borde)}
}
.tabla-scroll table.tabla th:first-child,
.tabla-scroll table.tabla td:first-child{position:sticky;left:0;z-index:2;box-shadow:1px 0 0 var(--gris-borde)}

/* ====== Materiales: sync bar + badges ====== */
.btn-sync{background:var(--verde);color:#fff;border:none;padding:8px 16px;border-radius:6px;cursor:pointer;font-size:14px;font-weight:600;white-space:nowrap}
.btn-sync:hover{opacity:.9}
.sync-bar{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;padding:8px 14px;border-radius:6px;font-size:13px;margin-bottom:12px}
.sync-ok{background:#e3f3e9;border:1px solid #bfe3cd;color:#1e7a44}
.sync-warn{background:#fbf1d5;border:1px solid #ebd79a;color:#8a6608}
.sync-fail{color:var(--bordo);margin-left:4px}
.badge-auto{background:#e3f3e9;color:#1e7a44;padding:2px 7px;border-radius:4px;font-size:12px;white-space:nowrap}
.badge-manual{background:#fbe9e7;color:#b3261e;padding:2px 7px;border-radius:4px;font-size:12px;white-space:nowrap}
.badge-base{background:#F2F4F1;color:#1A1A1A;padding:2px 7px;border-radius:4px;font-size:12px;white-space:nowrap}

/* ====== Cronograma ====== */
.cron-header{padding:10px 0 8px;display:flex;flex-wrap:wrap;gap:6px;align-items:baseline}
.cron-titulo{font-size:1.25em;font-weight:700;color:var(--marca)}
.cron-meta{color:var(--suave);font-size:.9em}
.cron-tabla{border-collapse:collapse;font-size:13px}
.cron-tabla th,.cron-tabla td{border:1px solid var(--gris-borde);padding:5px 8px;white-space:nowrap}
.cron-tabla thead th{background:var(--surface-2);color:var(--marca);font-weight:600;text-align:center;position:sticky;top:0;z-index:3}
.cron-th-fix{position:sticky!important;left:0;z-index:4!important;background:var(--surface-2)!important;min-width:200px;text-align:left!important}
.cron-td-fix{position:sticky;left:0;z-index:2;background:var(--surface);min-width:200px;max-width:260px;overflow:hidden;text-overflow:ellipsis}
.cron-item{color:var(--suave);font-size:.85em;margin-right:4px}
.cron-cert-th{min-width:52px;font-size:12px;padding:4px 5px}
.cron-cell{text-align:center;font-size:12px;font-weight:600;padding:4px 5px;cursor:default;transition:opacity .15s}
.cron-cell:hover{opacity:.8;outline:2px solid var(--acento)}
.cron-pct-col{min-width:110px}
.cron-bar-wrap{position:relative;height:22px;background:var(--surface-2);border-radius:3px;overflow:hidden;min-width:90px}
.cron-bar{position:absolute;top:0;left:0;height:100%;border-radius:3px;transition:width .3s}
.cron-bar-txt{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:12px;font-weight:700;white-space:nowrap}
.cron-total-row td{background:var(--surface-2)!important;font-weight:700;border-top:2px solid var(--acento)}
.cron-total-cell{font-weight:700!important}
.cron-leyenda{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px;color:var(--suave);margin-top:8px;padding:4px 2px}
.cron-leyenda span{display:inline-block;width:18px;height:14px;border-radius:2px;vertical-align:middle;border:1px solid var(--gris-borde)}

/* ====== Tablero de Desvío ====== */
.proy-desvio-card,.proy-gastos-card{margin-bottom:16px}
.desvio-tabla{width:100%;border-collapse:collapse;font-size:14px;margin-top:4px}
.desvio-tabla th{background:var(--crema);color:var(--crema-txt);text-align:left;
  padding:7px 10px;font-size:12px;text-transform:uppercase;letter-spacing:.3px}
.desvio-tabla th:not(:first-child){text-align:right}
.desvio-tabla td{padding:8px 10px;border-bottom:1px solid var(--gris-borde);color:var(--txt)}
.desvio-tabla td.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.desvio-tabla tbody tr:hover{background:var(--surface-2)}
.desvio-tabla tfoot td{background:var(--surface-2);border-top:2px solid var(--acento);color:var(--marca)}
.desvio-tabla tr.desvio-excedido td:first-child{border-left:3px solid var(--rojo)}
.desvio-tabla tr.desvio-alerta td:first-child{border-left:3px solid var(--acento)}
.desvio-tabla tr.desvio-ok td:first-child{border-left:3px solid var(--verde)}
.desvio-badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:12px;font-weight:700}
.badge-ok{background:#e3f3e9;color:var(--verde)}
.badge-alerta{background:#fbf1d5;color:#8a6608}
.badge-excedido{background:#fbe9e7;color:var(--rojo)}
.riesgo-caja{background:#fbe9e7;border:1px solid #e8b3ad;border-left:4px solid var(--rojo);
  border-radius:8px;padding:10px 14px;margin:12px 0;font-size:13px;color:var(--txt)}
.riesgo-caja strong{color:var(--rojo)}
.desvio-pie{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-top:8px}
.umbral-form{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--suave)}
.umbral-form label{display:flex;align-items:center;gap:6px}
.umbral-form input{width:60px;padding:4px 6px;border-radius:6px;border:1px solid var(--gris-borde);
  background:#fff;color:var(--marca);font-variant-numeric:tabular-nums}

/* ====== Panel Gastos ====== */
.gasto-form{margin-bottom:16px}
.gasto-ocr{display:flex;flex-wrap:wrap;align-items:center;gap:10px;background:var(--surface-2);
  border:1px dashed var(--gris-borde);border-radius:8px;padding:10px 12px;margin-bottom:12px}
.gasto-ocr-estado{font-size:13px;color:var(--suave)}
.gasto-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.gasto-lista{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.gasto-item{display:flex;gap:12px;align-items:center;padding:10px 12px;
  background:var(--surface-2);border-radius:8px;border-left:3px solid var(--acento)}
.gasto-rubro-badge{flex-shrink:0;background:#fff;color:var(--txt);font-size:12px;
  font-weight:700;padding:4px 10px;border-radius:20px;max-width:160px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;border:1px solid var(--gris-borde)}
.gasto-info{flex:1;min-width:0}
.gasto-prov{font-size:14px;color:var(--marca);font-weight:600}
.gasto-concepto{font-weight:400;color:var(--txt)}
.gasto-meta{font-size:12px;color:var(--suave);margin-top:2px}
.gasto-monto{font-size:15px;font-weight:700;color:var(--marca);white-space:nowrap;
  font-variant-numeric:tabular-nums}

/* ── Fase 1: estado de pago del gasto ── */
.gasto-pago{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:5px}
.gasto-estado-pago{font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;white-space:nowrap}
.pago-pendiente{background:#f6e7dc;color:#a45a2a}
.pago-parcial{background:#fbf1d5;color:#8a6608}
.pago-pagado{background:#e3f3e9;color:#1e7a44}
.gasto-saldo{font-size:12px;color:var(--suave);font-variant-numeric:tabular-nums}
.gasto-pago-det{font-size:12px}
.gasto-pago-det summary{cursor:pointer;color:var(--acento-claro);list-style:none;user-select:none}
.gasto-pago-det summary::-webkit-details-marker{display:none}
.gasto-pago-body{margin-top:6px;padding:8px;background:var(--surface);border:1px solid var(--gris-borde);border-radius:8px}
.gasto-pago-fila{display:flex;align-items:center;gap:8px;justify-content:space-between;padding:3px 0;color:var(--txt)}
.gasto-pago-fila .num{font-variant-numeric:tabular-nums;color:var(--marca);font-weight:600}
.gasto-pago-form{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:6px}
.gasto-pago-form input,.gasto-pago-form select{padding:6px 8px;border:1px solid var(--gris-borde);
  border-radius:6px;background:#fff;color:var(--txt);font-size:13px}
.gasto-pago-form input[name=monto]{width:130px}
.badge.pago-pendiente{background:#f6e7dc;color:#a45a2a}
.badge.pago-parcial{background:#fbf1d5;color:#8a6608}
.badge.pago-pagado{background:#e3f3e9;color:#1e7a44}

/* ── Cuentas por pagar (resumen en Proveedores) ── */
.cxp-resumen{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:14px 0}
.cxp-kpi{background:var(--surface);border:1px solid var(--gris-borde);border-top:4px solid var(--acento);
  border-radius:10px;padding:12px 14px;box-shadow:var(--sombra)}
.cxp-kpi.cxp-alerta{border-top-color:var(--rojo)}
.cxp-kpi-lbl{display:block;color:var(--suave);font-size:12px;text-transform:uppercase;letter-spacing:.4px}
.cxp-kpi-val{display:block;font-size:22px;margin-top:4px;color:var(--marca);font-weight:700;font-variant-numeric:tabular-nums}
.cxp-kpi.cxp-alerta .cxp-kpi-val{color:var(--rojo)}

/* ====== Panel WhatsApp ====== */
.wa-pasos{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wa-paso{display:flex;align-items:center;gap:10px;background:var(--surface-2);
  border:1px solid var(--gris-borde);border-radius:10px;padding:12px 14px;flex:1;min-width:170px}
.wa-paso.ok{border-color:var(--verde)}
.wa-num{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:50%;background:var(--acento);color:#fff;font-weight:700;flex-shrink:0}
.wa-paso.ok .wa-num{background:var(--verde)}
.wa-flecha{color:var(--suave);font-size:20px;flex-shrink:0}
.wa-sub{color:var(--suave);font-size:13px}
.wa-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:6px}
.wa-input{flex:1;min-width:220px;padding:9px 12px;border:1px solid var(--gris-borde);
  border-radius:8px;font-size:14px;background:#fff;color:var(--txt)}
.wa-vinculado{font-size:15px;color:var(--marca);margin:4px 0 12px}
.wa-webhook{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--surface-2);
  border:1px solid var(--gris-borde);border-radius:8px;padding:10px 12px;margin:8px 0}
.wa-webhook code{font-size:13px;color:var(--acento-claro);word-break:break-all;flex:1}
.wa-aviso{background:#fbf1d5;border:1px solid var(--acento)}
.wa-ok{background:#e3f3e9;border:1px solid var(--verde)}
.wa-aviso p,.wa-ok p{margin:0;font-size:14px}
.wa-badge-ok{font-size:12px;background:#e3f3e9;color:var(--verde);
  padding:2px 10px;border-radius:20px;font-weight:700;vertical-align:middle;margin-left:6px}
.wa-config-form{margin-top:10px}

/* ── Solapas Cliente/Obra ── */
.obra-tabs{display:flex;flex-wrap:wrap;gap:4px;margin:22px 0 0;border-bottom:2px solid var(--gris-borde)}
.obra-tab{background:none;border:none;border-bottom:3px solid transparent;color:var(--suave);font-size:14px;font-weight:600;padding:11px 18px;cursor:pointer;margin-bottom:-2px;transition:color .15s,border-color .15s;font-family:inherit}
.obra-tab:hover{color:var(--txt)}
.obra-tab.on{color:var(--acento-claro);border-bottom-color:var(--acento)}
.obra-panel{display:none;padding-top:20px}
.obra-panel.on{display:block}

/* ── Cards tipo "hub" ── */
.hub-clientes{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.hub-cliente-card{display:flex;align-items:center;gap:12px;text-decoration:none;background:var(--surface);border:1px solid var(--gris-borde);border-radius:12px;padding:12px 14px;transition:border-color .15s,transform .1s;box-shadow:var(--sombra)}
.hub-cliente-card:hover{border-color:var(--acento);transform:translateY(-1px)}
.hub-cliente-ini{width:38px;height:38px;border-radius:10px;background:var(--acento);color:#fff;font-weight:700;font-size:17px;display:flex;align-items:center;justify-content:center;flex:none}
.hub-cliente-info{flex:1;min-width:0}
.hub-cliente-nom{color:var(--marca);font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hub-cliente-meta{color:var(--suave);font-size:12px}
.hub-cliente-arrow{color:var(--suave);font-size:16px}

/* ── Form de generales embebido ── */
.gen-form label{font-size:12px;color:var(--suave)}
.gen-form input,.gen-form select{font-family:inherit;font-size:14px;padding:7px 9px;border-radius:6px;border:1px solid var(--gris-borde);background:#fff;color:var(--txt)}

/* ══════════════ FOOTER INSTITUCIONAL (grafito, multi-columna) ══════════════ */
.pie{background:var(--graf);color:#8A9098;text-align:left;font-size:13px;padding:0;margin-top:40px}
.pie-cols{max-width:1180px;margin:0 auto;padding:34px 26px 22px;display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:26px}
@media(max-width:760px){.pie-cols{grid-template-columns:1fr 1fr;gap:20px}}
@media(max-width:480px){.pie-cols{grid-template-columns:1fr}}
.pie-marca{font-size:19px;font-weight:800;color:#fff;letter-spacing:.4px}
.pie-marca b{color:var(--oro)}
.pie-tagline{margin:8px 0 0;line-height:1.6;color:#8A9098;max-width:320px}
.pie-col h4{color:#fff;font-size:12px;text-transform:uppercase;letter-spacing:.08em;margin:0 0 12px;font-weight:700}
.pie-col a{display:block;color:#8A9098;padding:4px 0;font-size:13.5px}
.pie-col a:hover{color:var(--oro);text-decoration:none}
.pie-bar{border-top:1px solid rgba(255,255,255,.1)}
.pie-bar-in{max-width:1180px;margin:0 auto;padding:14px 26px;display:flex;justify-content:space-between;
  align-items:center;gap:12px;flex-wrap:wrap;font-size:12.5px;color:#8A9098}
.pie-bar-in .oro{color:var(--oro)}

/* 21/10/2026 — desvío plan vs real en las tarjetas de Mis obras */
.pdc-plan{display:inline-block;font-size:11.5px;font-weight:700;border-radius:999px;padding:2px 9px;margin:2px 0 6px;text-decoration:none}
.pdc-plan.verde{background:#E3F5EC;color:#11663F}.pdc-plan.amarillo{background:#FFF1D6;color:#6E4700}.pdc-plan.rojo{background:#FDECEA;color:#8F1F18}