/* Fase 7: portal de clientes SIImplifica - hoja de estilos propia, separada
   de public/index.html (esta aplicacion nunca reusa ese archivo ni sus
   estilos internos). */
:root {
  --cp-navy: #081A33;
  --cp-primary: #1657E0;
  --cp-bg: #F5F7FB;
  --cp-card: #FFFFFF;
  --cp-border: #E1E6EF;
  --cp-text: #1C2434;
  --cp-muted: #6B7688;
  --cp-danger: #D64550;
  --cp-success: #1E9E6B;
  --cp-warning: #C8860D;
  --cp-radius: 10px;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%;
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  background: var(--cp-bg); color: var(--cp-text);
}

.cp-hidden { display: none !important; }

/* El portal de clientes ya no tiene formulario de acceso propio: hay un
   solo login en todo el sistema (/login). Con el formulario se fueron sus
   estilos - .cp-login-wrap, .cp-login-card, .cp-field y .cp-btn-primary no
   los usaba nada mas. */
.cp-btn-ghost { background: none; border: 1px solid var(--cp-border); border-radius: 8px; padding: 8px 14px; cursor: pointer; font-size: 0.85rem; color: var(--cp-text); }
.cp-error { color: var(--cp-danger); font-size: 0.85rem; margin-top: 10px; }
.cp-info { color: var(--cp-muted); font-size: 0.85rem; margin-top: 10px; }

/* ---- app shell ----
   El armazon vive mas abajo, en el bloque del menu lateral. Lo que habia
   aca eran las reglas de la barra de pestañas anterior, y no se podian
   dejar: `.cp-nav button` (0,1,1) le ganaba a `.cp-nav-link` (0,1,0), asi
   que los items del menu salian gris sobre azul marino (3.76:1) y el
   activo, azul sobre violeta (1.06:1) - practicamente ilegible. */

.cp-card { background: var(--cp-card); border: 1px solid var(--cp-border); border-radius: var(--cp-radius); padding: 20px; margin-bottom: 16px; }
.cp-card h2 { margin: 0 0 14px; font-size: 1.05rem; color: var(--cp-navy); }
.cp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }

.cp-badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.cp-badge-ok { background: rgba(30,158,107,0.12); color: var(--cp-success); }
.cp-badge-warn { background: rgba(200,134,13,0.12); color: var(--cp-warning); }
.cp-badge-danger { background: rgba(214,69,80,0.12); color: var(--cp-danger); }
.cp-badge-muted { background: rgba(107,118,136,0.12); color: var(--cp-muted); }

.cp-module-card { border: 1px solid var(--cp-border); border-radius: var(--cp-radius); padding: 16px; background: var(--cp-card); }
.cp-module-card h3 { margin: 0 0 8px; font-size: 0.95rem; }
.cp-module-card p { margin: 0 0 10px; color: var(--cp-muted); font-size: 0.82rem; }
.cp-module-card.cp-blocked { opacity: 0.55; }

.cp-empty { color: var(--cp-muted); font-size: 0.88rem; padding: 20px 0; text-align: center; }

table.cp-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
table.cp-table th, table.cp-table td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--cp-border); }

/* =====================================================================
   Activación de cuenta (/cliente/aceptar-invitacion)
   Tarjeta en dos columnas: a la izquierda la marca y qué gana la persona,
   a la derecha lo único que tiene que hacer. Paleta violeta propia, más
   cercana a la identidad de SIImplifica que el azul del resto del portal.
   ===================================================================== */
:root {
  --cp-violeta-900: #3B1E8F;
  --cp-violeta-700: #5B21B6;
  --cp-violeta-600: #6D28D9;
  --cp-violeta-500: #7C3AED;
  --cp-violeta-50: #F5F3FF;
  --cp-verde: #16A34A;
}

.cp-activar-wrap {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 32px 24px;
  background:
    radial-gradient(60rem 40rem at 8% 12%, rgba(124, 58, 237, 0.10), transparent 60%),
    radial-gradient(50rem 34rem at 92% 88%, rgba(99, 102, 241, 0.10), transparent 60%),
    #F7F6FE;
}

.cp-activar-card {
  width: 100%; max-width: 940px;
  display: grid; grid-template-columns: 44% 56%;
  background: #fff; border-radius: 22px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(59, 30, 143, 0.14), 0 2px 8px rgba(59, 30, 143, 0.06);
}

/* ---- columna izquierda ---- */
.cp-activar-lado {
  position: relative;
  padding: 40px 36px;
  display: flex; flex-direction: column; justify-content: space-between;
  color: #fff;
  background: linear-gradient(150deg, var(--cp-violeta-700) 0%, var(--cp-violeta-600) 45%, var(--cp-violeta-500) 100%);
}
/* Circulos concentricos muy tenues, como en el diseno. Van en un ::before
   para no sumar markup vacio. */
.cp-activar-lado::before {
  content: ""; position: absolute; right: -30%; bottom: -25%;
  width: 26rem; height: 26rem; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 0 0 3rem rgba(255, 255, 255, 0.05), 0 0 0 6rem rgba(255, 255, 255, 0.035);
  pointer-events: none;
}
.cp-activar-lado-top, .cp-activar-lado-pie { position: relative; z-index: 1; }

.cp-activar-marca { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; }
.cp-activar-logo { width: 140px; height: auto; display: block; }
.cp-activar-titulo-lado { font-size: 1.75rem; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; margin: 34px 0 14px; }
.cp-activar-bajada { font-size: 0.92rem; line-height: 1.55; color: rgba(255, 255, 255, 0.82); margin: 0; }

.cp-activar-beneficios { list-style: none; margin: 34px 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.cp-activar-beneficios li { display: flex; align-items: center; gap: 13px; font-size: 0.92rem; font-weight: 500; }
.cp-activar-bicono {
  width: 38px; height: 38px; border-radius: 11px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.13); border: 1px solid rgba(255, 255, 255, 0.16);
}
.cp-activar-bicono svg { width: 19px; height: 19px; }

/* "Clave protegida" y la ley de protección de datos, en el panel del paso
   del SII (17/10/2026): una tarjeta translúcida, del mismo vidrio que los
   iconos de arriba. */
.cp-activar-garantias {
  margin: 30px 0 0; padding: 16px 18px; border-radius: 14px;
  display: flex; flex-direction: column; gap: 14px;
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.16);
}
.cp-activar-garantia { display: flex; align-items: flex-start; gap: 12px; }
.cp-activar-garantia-icono { flex: none; display: flex; margin-top: 1px; color: #fff; }
.cp-activar-garantia-icono svg { width: 18px; height: 18px; }
.cp-activar-garantia b { display: block; font-size: 0.86rem; font-weight: 600; }
.cp-activar-garantia p { margin: 3px 0 0; font-size: 0.8rem; line-height: 1.45; color: rgba(255, 255, 255, 0.8); }

.cp-activar-lado-pie { display: flex; align-items: center; gap: 9px; margin: 40px 0 0; font-size: 0.85rem; color: rgba(255, 255, 255, 0.78); }
.cp-activar-lado-pie svg { width: 17px; height: 17px; flex: none; }

/* ---- columna derecha ---- */
.cp-activar-form { padding: 40px 44px; display: flex; flex-direction: column; }

.cp-activar-paso-chip {
  align-self: flex-start;
  background: var(--cp-violeta-50); color: var(--cp-violeta-700);
  border-radius: 999px; padding: 5px 12px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.cp-activar-titulo { font-size: 1.62rem; font-weight: 700; letter-spacing: -0.02em; color: #101828; margin: 14px 0 6px; }
.cp-activar-sub { font-size: 0.9rem; color: var(--cp-muted); margin: 0 0 22px; }

.cp-activar-pasos { list-style: none; display: flex; align-items: center; gap: 0; margin: 0 0 24px; padding: 0; }
.cp-activar-paso { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; font-weight: 600; color: var(--cp-muted); }
/* La linea entre pasos se dibuja como parte del paso siguiente, asi no
   hace falta un elemento suelto por separador. */
.cp-activar-paso + .cp-activar-paso::before { content: ""; width: 42px; height: 2px; background: #E4E7EC; margin: 0 12px; }
.cp-activar-paso-num {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 700;
  background: #E4E7EC; color: var(--cp-muted);
}
.cp-activar-paso-num svg { width: 12px; height: 12px; }
.cp-activar-paso-hecho .cp-activar-paso-num { background: var(--cp-violeta-600); color: #fff; }
.cp-activar-paso-actual { color: #101828; }
.cp-activar-paso-actual .cp-activar-paso-num { background: var(--cp-violeta-900); color: #fff; }

.cp-activar-campo { margin-bottom: 14px; }
.cp-activar-campo label { display: block; font-size: 0.84rem; font-weight: 600; color: #344054; margin-bottom: 7px; }
.cp-activar-input-wrap { position: relative; }
.cp-activar-input-wrap input {
  width: 100%; padding: 13px 44px 13px 15px;
  border: 1.5px solid #E4E7EC; border-radius: 11px;
  font-size: 0.95rem; font-family: inherit; color: #101828;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.cp-activar-input-wrap input:focus {
  outline: none; border-color: var(--cp-violeta-500);
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.12);
}
.cp-activar-ojo {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; padding: 8px;
  color: #98A2B3; display: flex;
}
.cp-activar-ojo svg { width: 19px; height: 19px; }
.cp-activar-ojo:hover { color: var(--cp-violeta-600); }

/* ---- medidor de seguridad ---- */
.cp-activar-fuerza { margin: 4px 0 12px; }
.cp-activar-barras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.cp-activar-barras span { height: 5px; border-radius: 999px; background: #E4E7EC; transition: background-color 0.2s; }
.cp-activar-barras span.cp-llena-baja { background: #F04438; }
.cp-activar-barras span.cp-llena-media { background: #F79009; }
.cp-activar-barras span.cp-llena-alta { background: var(--cp-violeta-600); }
.cp-activar-fuerza-texto { font-size: 0.8rem; color: var(--cp-muted); margin: 8px 0 0; }
.cp-activar-fuerza-texto b { color: #344054; }

.cp-activar-reglas {
  list-style: none; margin: 0 0 18px; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px;
}
.cp-activar-reglas li { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--cp-muted); }
.cp-activar-check {
  width: 15px; height: 15px; border-radius: 50%; flex: none;
  border: 1.5px solid #D0D5DD; background: #fff;
  background-position: center; background-repeat: no-repeat; background-size: 9px;
}
/* El tilde va como fondo SVG para no tener que crear un nodo por regla. */
.cp-activar-reglas li.cp-ok { color: #344054; }
.cp-activar-reglas li.cp-ok .cp-activar-check, .cp-activar-coincide .cp-activar-check {
  border-color: var(--cp-verde); background-color: var(--cp-verde);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E");
}
.cp-activar-coincide { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: #344054; margin: 9px 0 0; }
.cp-activar-coincide.cp-no-coincide { color: var(--cp-danger); }
.cp-activar-coincide.cp-no-coincide .cp-activar-check {
  border-color: var(--cp-danger); background-color: var(--cp-danger);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
}

/* Boton "pushable" de tres capas: sombra abajo, canto 3D en el medio y la
   cara arriba. Al apretar, la cara baja hasta casi tocar el canto y la
   sombra se achica - se siente como hundir una tecla de verdad.

   El efecto es una adaptacion de "evil-monkey-41" de cssbuttons-io
   (uiverse.io, licencia MIT). Cambia solo la paleta: el violeta de marca en
   vez del rojo del original. Los tiempos son los del autor - 600ms para
   soltar, 34ms para hundir - y esa asimetria es justamente lo que lo hace
   sentir mecanico y no elastico.

   Las tres capas van en el marcado porque cada una se mueve por su cuenta:
   con pseudo-elementos heredarian el transform de la cara y habria que
   contrarrestarlo, que es fragil y dificil de leer. */
.cp-activar-boton {
  position: relative;
  width: 100%; margin-top: 6px; padding: 0;
  background: transparent; border: none;
  font-family: inherit; cursor: pointer;
  outline-offset: 4px;
  transition: filter 250ms;
  -webkit-user-select: none; user-select: none;
  touch-action: manipulation;
}
.cp-boton-sombra {
  position: absolute; inset: 0; border-radius: 12px;
  background: rgba(59, 30, 143, 0.30);
  will-change: transform;
  transform: translateY(2px);
  transition: transform 600ms cubic-bezier(.3, .7, .4, 1);
}
/* El canto no se mueve nunca: es el que da la sensacion de volumen. */
.cp-boton-borde {
  position: absolute; inset: 0; border-radius: 12px;
  background: linear-gradient(
    to left,
    var(--cp-violeta-900) 0%,
    var(--cp-violeta-700) 8%,
    var(--cp-violeta-700) 92%,
    var(--cp-violeta-900) 100%
  );
}
.cp-boton-cara {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px; border-radius: 12px;
  background: linear-gradient(100deg, var(--cp-violeta-600), var(--cp-violeta-500));
  color: #fff; font-size: 0.98rem; font-weight: 700;
  will-change: transform;
  transform: translateY(-4px);
  transition: transform 600ms cubic-bezier(.3, .7, .4, 1);
}
.cp-activar-boton svg { width: 18px; height: 18px; }

.cp-activar-boton:hover:not(:disabled) { filter: brightness(108%); }
.cp-activar-boton:hover:not(:disabled) .cp-boton-cara {
  transform: translateY(-6px);
  transition: transform 250ms cubic-bezier(.3, .7, .4, 1.5);
}
.cp-activar-boton:hover:not(:disabled) .cp-boton-sombra {
  transform: translateY(4px);
  transition: transform 250ms cubic-bezier(.3, .7, .4, 1.5);
}
.cp-activar-boton:active:not(:disabled) .cp-boton-cara { transform: translateY(-2px); transition: transform 34ms; }
.cp-activar-boton:active:not(:disabled) .cp-boton-sombra { transform: translateY(1px); transition: transform 34ms; }
.cp-activar-boton:focus:not(:focus-visible) { outline: none; }
.cp-activar-boton:disabled { opacity: 0.55; cursor: default; }
/* Deshabilitado no se hunde ni levanta: queda apoyado. */
.cp-activar-boton:disabled .cp-boton-cara { transform: translateY(-2px); }
.cp-activar-boton:disabled .cp-boton-sombra { transform: translateY(1px); }

/* ---- El carril: el panel blanco se desliza, el violeta se queda ---- */
/* Los dos formularios se APILAN en la misma celda y se mueven ellos. El
   carril no se mueve nunca: es la ventana por la que se los ve.

   Moverlo a el fue el primer intento y esta mal - el carril ES la columna
   blanca de la tarjeta, asi que correrlo lo saca de su lugar y se lleva
   puesto al panel violeta. */
.cp-activar-carril {
  display: grid;
  overflow: hidden;
  /* Sin esto, la celda de grid toma el ancho de su contenido mas ancho en
     vez del que le toca, y la tarjeta se desborda - se ve en pantalla
     angosta, donde las dos columnas se apilan. */
  min-width: 0;
}
.cp-activar-carril > .cp-activar-form {
  grid-area: 1 / 1;
  min-width: 0;
  transition: transform 620ms cubic-bezier(.3, .7, .4, 1);
}
/* En reposo, el que no toca espera afuera por la derecha. */
#cp-activar-shell[data-paso="cuenta"] #cp-view-vincular-sii { transform: translateX(100%); }
#cp-activar-shell[data-paso="sii"] #cp-view-accept-invite { transform: translateX(-100%); }

/* El formulario de atras no puede ser alcanzable con Tab ni por un lector
   de pantalla. Eso lo hace el atributo `inert` solo, SIN esconderlo: tiene
   que seguir visible mientras se va deslizando. */

.cp-activar-lado-texto { transition: opacity 260ms ease; }

@media (prefers-reduced-motion: reduce) {
  .cp-activar-carril, .cp-boton-cara, .cp-boton-sombra, .cp-activar-lado-texto { transition: none; }
}

.cp-activar-pie { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 18px 0 0; font-size: 0.82rem; color: var(--cp-muted); }
.cp-activar-pie svg { width: 15px; height: 15px; }

@media (max-width: 820px) {
  .cp-activar-card { grid-template-columns: 1fr; max-width: 480px; }
  /* En pantalla angosta la columna de marca pasa a ser un encabezado
     compacto: el detalle largo no aporta y empuja el formulario fuera de
     la vista. */
  .cp-activar-lado { padding: 28px 26px; }
  .cp-activar-titulo-lado { font-size: 1.35rem; margin-top: 22px; }

  /* El indicador de pasos no entra en pantalla angosta: los conectores
     median 42px fijos, asi que los tres pasos sumaban mas ancho del que
     hay y las etiquetas se montaban una sobre otra. Ahora el conector se
     estira o se encoge con lo que sobra. */
  .cp-activar-pasos { gap: 4px; }
  .cp-activar-paso { font-size: 0.74rem; gap: 6px; min-width: 0; }
  .cp-activar-paso + .cp-activar-paso::before {
    width: auto; flex: 1 1 8px; min-width: 8px; margin: 0 6px;
  }
  .cp-activar-beneficios, .cp-activar-garantias, .cp-activar-lado-pie { display: none; }
  .cp-activar-form { padding: 30px 26px; }
  .cp-activar-reglas { grid-template-columns: 1fr; }
}

/* =====================================================================
   Portal cliente: el armazón (menú lateral + barra superior) y el inicio.
   Reemplaza la barra de pestañas anterior por un menú lateral fijo, que
   es lo que pide el diseño y lo que deja el ancho completo al contenido.

   Tokens propios de esta pantalla. Los --cp-* de más arriba siguen
   valiendo; acá se agregan sólo los que el armazón necesita.
   ===================================================================== */
:root {
  /* La barra superior mide 64 y la cabecera del menú lateral también, para
     que las dos líneas de abajo coincidan a lo ancho de la pantalla. Los
     anchos y los colores del menú viven en su propio bloque de tokens
     (--cp-menu-*), al final de este :root. */
  --cp-topbar-alto: 64px;
  --cp-linea: #DCE5F6;
  --cp-tinta: #0A1338;
  /* 6.0:1 sobre blanco. El anterior (#5B6A80) daba 4.45:1, por debajo de
     AA para texto chico, y este ademas acompana el azul de la marca. */
  --cp-gris: #46629C;
  --cp-page: #F5F8FF;
  --cp-turquesa: #16B8B2;
  /* Ambar de texto: el estado "sin actualizar" de la barra y el de Inicio
     son el mismo aviso, asi que son el mismo color y no dos hexadecimales
     iguales por casualidad. 4.83:1 sobre blanco (calculado, no estimado:
     sobra para AA de texto chico, que pide 4.5). */
  --cp-ambar-texto: #A8600F;
  /* El anillo de foco, con contraste medido contra el fondo sobre el que
     se dibuja (WCAG 2.2 SC 1.4.11 pide 3:1 para el indicador). El violeta
     translucido anterior -rgba(113, 55, 232, 0.42)- daba 1.44:1 sobre el
     menu y 2.0:1 sobre el blanco de la barra: no se veia. Solido da 6.15:1
     sobre blanco. Dentro del menu lateral va el del diseño del menu
     (--cp-menu-foco, 4.03:1 sobre su azul marino). */
  --cp-foco: #7137E8;
  --cp-r-sm: 8px;
  --cp-r-md: 12px;
  --cp-r-lg: 16px;
  --cp-sombra: 0 1px 2px rgba(7, 27, 53, 0.04);
  /* El portal no tiene tema oscuro. Sin esto, con el sistema en modo
     oscuro Chrome pinta los controles nativos (input[type=date], las
     barras de scroll) en oscuro sobre una pantalla clara. */
  color-scheme: light;
  /* Texto y superficies que el rediseno repite en varias pantallas: van
     por token para que el mismo gris sea el mismo gris en todas. */
  --cp-titulo: #101828;
  --cp-separador: #EDF0F5;
  --cp-guia: #E4EAF4;
  --cp-barra-fondo: #E9EEF8;
  --cp-superficie: #FAFBFE;
  --cp-superficie-tabla: #F2F6FD;
  --cp-hover-fila: #F3EEFE;
  /* Solo para ICONOS (la lupa del buscador): 3,3:1 sobre blanco, no llega
     a AA para texto. El texto de los ejes va en --cp-gris (6:1). */
  --cp-eje: #7C8DB5;
  --cp-chevron: #B0BFDC;
  --cp-violeta-400: #A78BFA;
  --cp-violeta-200: #C9B4F5;
  --cp-turquesa-200: #B8EDEB;
  --cp-ambar-300: #E9B949;
  --cp-ok-fondo: #E7F8EF;
  --cp-ok-borde: #BFE6D5;
  --cp-ok-tinta: #146C4E;
  --cp-aviso-fondo: #FFF3DF;
  --cp-aviso-borde: #F0DCB4;
  --cp-aviso-tinta: #8A5C05;
  --cp-aviso-barra: #F79009;
  --cp-info-fondo: #EDF3FF;
  --cp-info-borde: #CFE0FF;
  --cp-info-tinta: #2F67D8;
  /* Fondos de las tarjetas de "Proximos pasos" del F29: ambar suave para
     los avisos, casi blanco para los informativos. */
  --cp-aviso-suave: #FFFBF3;
  --cp-info-suave: #F9FBFF;
  /* El panel lateral del documento. */
  --cp-velo: rgba(7, 27, 53, 0.42);
  --cp-sombra-panel: -24px 0 60px rgba(7, 27, 53, 0.22);

  /* ── El menú lateral (menu-lateral.js) ──
     TODOS sus colores pasan por acá: la opción 1c del diseño (el panel
     claro) es este mismo bloque con otros valores, no otro componente (ver
     .cp-shell[data-menu-tema="claro"]). Los valores son los del diseño 1b,
     salvo el encabezado de grupo: #6B7C9E da 4.06:1 sobre #0B1B3A y el
     portal pide AA; #7384A7 da 4.53:1 y se ve igual. */
  --cp-menu-ancho-expandido: 264px;
  --cp-menu-ancho-colapsado: 96px;
  --cp-menu-fondo: #0B1B3A;
  /* El borde derecho sólo existe en el tema claro: sobre azul marino no
     hace falta. Es una sombra interior y no un border, así no le quita un
     píxel al ancho útil. */
  --cp-menu-borde: transparent;
  --cp-menu-grupo: #7384A7;
  --cp-menu-texto: #93A3C4;
  --cp-menu-icono: currentColor;
  --cp-menu-texto-hover: #E6ECF8;
  --cp-menu-hover: rgba(255, 255, 255, 0.06);
  --cp-menu-hover-boton: rgba(255, 255, 255, 0.08);
  --cp-menu-meta: #8FA0C4;
  --cp-menu-linea-bloque: rgba(255, 255, 255, 0.08);
  /* El bloque de la cuenta, al pie: el nombre y el avatar. */
  --cp-menu-claro: #E6ECF8;
  --cp-menu-avatar-fondo: rgba(255, 255, 255, 0.10);
  --cp-menu-avatar-borde: rgba(255, 255, 255, 0.14);
  --cp-menu-avatar-texto: #E6ECF8;
  /* El activo EXPANDIDO es la misma píldora suave del riel, un poco más
     clara, con su barra de 3px: pedido del usuario (18/9/2026). El bloque
     violeta sólido con resplandor del diseño 1b saltaba al plegar y
     expandir; así el cambio entre los dos es apenas un fundido. */
  --cp-menu-activo-fondo: rgba(124, 58, 237, 0.24);
  --cp-menu-activo-texto: #FFFFFF;
  --cp-menu-activo-icono: currentColor;
  --cp-menu-activo-peso: 700;
  --cp-menu-activo-sombra: none;
  --cp-menu-activo-barra: var(--cp-menu-indicador);
  --cp-menu-riel-activo-fondo: rgba(124, 58, 237, 0.18);
  --cp-menu-riel-activo-texto: #DDD6FE;
  --cp-menu-indicador: #8B5CF6;
  --cp-menu-tarjeta-fondo: rgba(255, 255, 255, 0.05);
  --cp-menu-tarjeta-borde: rgba(255, 255, 255, 0.09);
  /* El anillo de foco del diseño: 4.03:1 sobre el azul marino. */
  --cp-menu-foco: #8B5CF6;
}

.cp-skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  background: var(--cp-violeta-600); color: #fff;
  padding: 10px 16px; border-radius: var(--cp-r-sm);
  font-size: 0.85rem; font-weight: 600; text-decoration: none;
  transition: top 0.14s ease;
}
.cp-skip-link:focus { top: 12px; }

.cp-sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* Un `display` de autor le gana al `display: none` que el navegador le da a
   [hidden] (regla de autor vs. hoja del navegador). Sin esto, el menu de
   usuario -que es flex- aparecia abierto al cargar la pagina. */
[hidden] { display: none !important; }

/* ---- el armazón: menú lateral + columna principal ----
   Una fila flex: el menú (ancho del token según su forma) y la columna de
   la barra y el contenido. El <aside> se estira con la fila, así que su
   fondo llega hasta abajo aunque la página sea más larga que la ventana;
   lo que se queda pegado arriba al hacer scroll es el envoltorio de
   adentro (con el sticky en el <aside> quedaba una franja clara bajo el
   menú). */
.cp-shell {
  background: var(--cp-page);
  min-height: 100vh; min-height: 100dvh;
  display: flex;
}

/* ---- el menú lateral ----
   UN componente, tres formas (menu-lateral.js las pone en data-menu):
   expandido (264, diseño 1b), colapsado (el riel de 96, diseño 1a) y el
   cajón de pantalla angosta. Lo de acá es el expandido; el riel y el cajón
   son las diferencias, más abajo.
   SIN ANIMACIÓN DE ANCHO (pedido del usuario, 18/9/2026: "tiene un pequeño
   parpadeo cuando se expande y cuando se contrae"). Los ítems cambian de
   forma de golpe mientras el ancho se animaba 200ms, y todo el contenido de
   la derecha -tabla, cifras, textos- se reacomodaba en cada cuadro. El
   cambio es instantáneo: sin cuadros intermedios no hay parpadeo. */
.cp-sidebar {
  flex: none;
  width: var(--cp-menu-ancho-expandido);
  background: var(--cp-menu-fondo); color: var(--cp-menu-texto);
  box-shadow: inset -1px 0 0 var(--cp-menu-borde);
}
.cp-shell[data-menu="colapsado"] .cp-sidebar { width: var(--cp-menu-ancho-colapsado); }

/* Plegar y desplegar con animación (pedido del usuario, 19/9/2026). Sólo
   mientras dura el toque del botón (.cp-menu-cambiando lo pone y lo saca
   menu-lateral.js): al cargar la página o al achicar la ventana, directo.
   Y nunca con "reducir movimiento". */
@media (prefers-reduced-motion: no-preference) {
  .cp-shell.cp-menu-cambiando .cp-sidebar { transition: width 220ms cubic-bezier(.4, 0, .2, 1); }
  /* Al contraer: el menú se achica con su forma expandida mientras los
     textos se apagan; la forma de riel llega recién al final. */
  .cp-shell.cp-menu-plegando .cp-sidebar { width: var(--cp-menu-ancho-colapsado); }
  .cp-shell.cp-menu-plegando :is(.cp-nav-texto, .cp-menu-grupo, .cp-menu-plegar-fila, .cp-menu-cuenta-texto, .cp-menu-cuenta-chevron) {
    opacity: 0; transition: opacity 100ms ease-out;
  }
  /* Al expandir, y al llegar al riel: los textos aparecen con un fundido. */
  .cp-shell.cp-menu-cambiando:not(.cp-menu-plegando)[data-menu="expandido"] :is(.cp-nav-texto, .cp-menu-grupo, .cp-menu-plegar-fila, .cp-menu-cuenta-texto, .cp-menu-cuenta-chevron) {
    animation: cp-menu-aparecer 180ms ease-out 60ms both;
  }
  .cp-shell.cp-menu-cambiando[data-menu="colapsado"] :is(.cp-nav-texto, .cp-menu-plegar-fila) {
    animation: cp-menu-aparecer 140ms ease-out both;
  }
}
@keyframes cp-menu-aparecer { from { opacity: 0; } to { opacity: 1; } }

/* El padding lateral de 12px NO va acá sino en cada hijo: el anillo de
   foco se dibuja 4px afuera del ítem, y con el padding en el envoltorio el
   scroll de .cp-nav lo recortaba.
   El menú de la cuenta se asoma por fuera del menú (más ancho que él, y en
   el riel, al lado): por eso el envoltorio va por encima del contenido
   (z-index) y recorta lo que se sale SÓLO mientras se anima el ancho, para
   que las etiquetas no se asomen sobre el contenido al crecer. */
.cp-sidebar-inner {
  position: sticky; top: 0; z-index: 15;
  height: 100vh; height: 100dvh;
  display: flex; flex-direction: column;
}
.cp-shell.cp-menu-cambiando .cp-sidebar-inner { overflow: hidden; }

/* Plegar y desplegar: el botón vive ABAJO, en el pie (pedido del usuario:
   lo primero del menú es siempre Inicio). Lleva los tres iconos y el CSS
   muestra el de la forma actual.
   Es UNA FILA MÁS del menú -icono y texto, con la caja de un ítem y el
   icono en la misma columna- y no un icono suelto: así se entiende qué
   hace y no queda flotando sobre el pie (pedido del usuario, 13/10/2026).
   Va más apagada que los ítems: es una acción del menú, no un destino. */
.cp-menu-plegar-fila { display: flex; }
.cp-menu-plegar {
  width: 100%; height: 38px; flex: none;
  display: flex; align-items: center; gap: 12px;
  padding: 0 12px; border: none; background: none; border-radius: 10px;
  font: inherit; font-size: 0.78125rem; font-weight: 600; line-height: normal; white-space: nowrap; text-align: left;
  color: var(--cp-menu-meta); cursor: pointer;
  transition: background-color 150ms ease-out, color 150ms ease-out;
}
.cp-menu-plegar svg { width: 18px; height: 18px; flex: none; }
.cp-menu-plegar:hover { background: var(--cp-menu-hover-boton); color: var(--cp-menu-texto-hover); }
.cp-menu-plegar-abrir, .cp-menu-plegar-cajon { display: none; }

/* ---- la navegación ----
   El grupo Principal, una <ul> con su encabezado tipográfico arriba. Se
   lleva el alto sobrante y, si la ventana es baja, hace scroll sin barra
   visible. */
.cp-nav {
  flex: 1 1 auto; min-height: 0;
  padding: 18px 12px 12px;
  overflow-x: hidden; overflow-y: auto; scrollbar-width: none;
}
.cp-menu-grupo {
  margin: 0; padding: 0 6px 8px;
  font-size: 0.625rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cp-menu-grupo);
}
.cp-menu-grupo:not(:first-child) { padding-top: 20px; }
.cp-menu-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }

/* El ítem: 42px, icono de 20 y etiqueta de 13.5. El activo se marca con
   aria-current (lo pone el router a partir de la ruta), con fondo, barra
   Y peso: no sólo con el violeta. El fondo y el color se funden en 150ms,
   también al plegar y expandir. */
.cp-nav-link {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  height: 42px; padding: 0 11px; border-radius: 10px;
  font-size: 0.84375rem; font-weight: 600; line-height: normal; white-space: nowrap;
  color: var(--cp-menu-texto); text-decoration: none;
  transition: background-color 150ms ease-out, color 150ms ease-out, box-shadow 150ms ease-out;
}
.cp-nav-icono { width: 20px; height: 20px; flex: none; color: var(--cp-menu-icono); }
.cp-nav-link:hover { background: var(--cp-menu-hover); color: var(--cp-menu-texto-hover); }
.cp-nav-link[aria-current="page"],
.cp-nav-link[aria-current="page"]:hover {
  background: var(--cp-menu-activo-fondo); color: var(--cp-menu-activo-texto);
  font-weight: var(--cp-menu-activo-peso); box-shadow: var(--cp-menu-activo-sombra);
}
.cp-nav-link[aria-current="page"] .cp-nav-icono { color: var(--cp-menu-activo-icono); }
/* La barra del activo expandido: AFUERA de la píldora, pegada al borde
   izquierdo del menú, igual que en el riel (pedido del usuario, 19/9/2026:
   "el palito tenía que quedar fuera"). Los -12px son el padding lateral de
   .cp-nav; la misma violeta en el azul marino y en el tema claro (1c). */
.cp-nav-link[aria-current="page"]::before {
  content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--cp-menu-activo-barra);
}

/* ---- el indicador que se desliza (7/10/2026) ----
   La barra y la píldora del activo, en UNA pieza que se mueve de un ítem a
   otro en vez de apagarse en uno y prenderse en el siguiente. La coloca
   cpMoverIndicadorMenu (menu-lateral.js) con cuatro medidas del enlace
   activo; va detrás de los enlaces y no recibe clics.

   La pieza ocupa todo el ancho del <nav> a la altura del ítem: su ::before
   es la barra, pegada al borde izquierdo del menú, y su ::after la píldora,
   en el lugar exacto del enlace. Mientras el <nav> no tenga data-indicador
   no se ve, y el enlace activo se pinta solo como antes. */
.cp-nav { position: relative; }
.cp-nav-link { z-index: 1; }
.cp-nav-indicador {
  display: none; position: absolute; left: 0; right: 0; top: 0; z-index: 0;
  height: var(--cp-ind-alto, 42px);
  transform: translateY(var(--cp-ind-y, 0));
  pointer-events: none;
  transition: transform 280ms cubic-bezier(.3, .7, .3, 1), height 280ms cubic-bezier(.3, .7, .3, 1);
}
.cp-nav[data-indicador="si"] .cp-nav-indicador { display: block; }
.cp-nav-indicador::before {
  content: ""; position: absolute; left: 0; top: 9px; bottom: 9px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--cp-menu-activo-barra);
}
.cp-nav-indicador::after {
  content: ""; position: absolute; top: 0; bottom: 0;
  left: var(--cp-ind-x, 12px); width: var(--cp-ind-ancho, 0px);
  border-radius: 10px;
  background: var(--cp-menu-activo-fondo); box-shadow: var(--cp-menu-activo-sombra);
}
/* Recolocado sin animación: cambió el tamaño, no la sección. */
.cp-nav-indicador.cp-nav-indicador-quieto { transition: none; }
/* Con el indicador puesto, el enlace activo no dibuja su propia marca. */
.cp-nav[data-indicador="si"] .cp-nav-link[aria-current="page"],
.cp-nav[data-indicador="si"] .cp-nav-link[aria-current="page"]:hover { background: transparent; box-shadow: none; }
.cp-nav[data-indicador="si"] .cp-nav-link[aria-current="page"]::before { content: none; }
@media (prefers-reduced-motion: reduce) {
  .cp-nav-indicador { transition: none; }
}

/* ---- el pie: "Contraer el menú" y la cuenta ----
   Anclado abajo y separado de la lista por una línea: la fila para plegar y,
   en la esquina, el bloque de la cuenta (20/10/2026). */
.cp-menu-pie { flex: none; display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 14px; border-top: 1px solid var(--cp-menu-linea-bloque); }

/* El bloque de la cuenta: las iniciales, el nombre y, debajo y en chico, el
   correo. Es un botón que abre el menú de la cuenta hacia arriba. Mientras
   no llega el contexto guarda su alto vacío: nada salta cuando llega. */
.cp-menu-cuenta { position: relative; min-height: 52px; }
.cp-menu-cuenta-boton {
  width: 100%; min-height: 52px;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px 8px 7px; border: none; border-radius: 12px;
  background: none; font: inherit; line-height: normal; text-align: left;
  color: var(--cp-menu-texto); cursor: pointer;
  transition: background-color 150ms ease-out;
}
.cp-menu-cuenta-boton:hover,
.cp-menu-cuenta-boton[aria-expanded="true"] { background: var(--cp-menu-hover-boton); }
.cp-menu-avatar {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--cp-menu-avatar-fondo); box-shadow: inset 0 0 0 1px var(--cp-menu-avatar-borde);
  color: var(--cp-menu-avatar-texto); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.02em;
}
.cp-menu-cuenta-texto { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.cp-menu-cuenta-nombre { font-size: 0.8125rem; font-weight: 700; color: var(--cp-menu-claro); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-menu-cuenta-correo { font-size: 0.6875rem; font-weight: 600; color: var(--cp-menu-meta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* La flecha mira hacia donde se abre el menú (arriba) y, abierto, gira con
   la curva de entrada del portal. */
.cp-menu-cuenta-chevron {
  width: 16px; height: 16px; flex: none; pointer-events: none; color: var(--cp-menu-meta);
  transform: rotate(180deg); transition: transform 200ms cubic-bezier(0.05, 0.7, 0.1, 1);
}
.cp-menu-cuenta-boton[aria-expanded="true"] .cp-menu-cuenta-chevron { transform: none; }
/* Su menú se abre hacia arriba, desde el borde izquierdo del bloque: más
   ancho que el menú lateral (se asoma sobre el contenido) y nunca más alto
   que la ventana. */
.cp-menu-cuenta-pop {
  left: 0; bottom: calc(100% + 8px);
  width: 280px; max-width: calc(100vw - 32px);
  max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px);
}

/* ---- el riel (data-menu="colapsado", diseño 1a) ----
   96px: ítems de 72 con el icono de 22 y la etiqueta de 10.5 abajo (no hay
   lugar para el encabezado del grupo, que queda para el lector de
   pantalla) y el botón para expandirlo al pie. */
.cp-shell[data-menu="colapsado"] .cp-menu-plegar-fila { justify-content: center; }
/* En el riel no hay lugar para el texto: queda el icono, en un botón con
   borde (que se vea que se toca) del ancho de la columna de los iconos. */
.cp-shell[data-menu="colapsado"] .cp-menu-plegar {
  width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 12px;
  background: var(--cp-menu-tarjeta-fondo); box-shadow: inset 0 0 0 1px var(--cp-menu-tarjeta-borde);
}
.cp-shell[data-menu="colapsado"] .cp-menu-plegar:hover { background: var(--cp-menu-hover-boton); }
.cp-shell[data-menu="colapsado"] .cp-menu-plegar-texto { display: none; }
.cp-shell[data-menu="colapsado"] .cp-menu-plegar-cerrar { display: none; }
.cp-shell[data-menu="colapsado"] .cp-menu-plegar-abrir { display: block; }
.cp-shell[data-menu="colapsado"] .cp-nav { padding: 14px 0 0; }
.cp-shell[data-menu="colapsado"] .cp-menu-grupo {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.cp-shell[data-menu="colapsado"] .cp-menu-lista { gap: 2px; }
.cp-shell[data-menu="colapsado"] .cp-menu-lista > li { display: flex; justify-content: center; }
.cp-shell[data-menu="colapsado"] .cp-nav-link {
  width: 72px; height: auto;
  flex-direction: column; gap: 6px;
  padding: 9px 2px; border-radius: 12px;
  font-size: 0.65625rem; font-weight: 700; letter-spacing: 0.02em;
}
.cp-shell[data-menu="colapsado"] .cp-nav-icono { width: 22px; height: 22px; }
/* La etiqueta que no cabe en el riel ("Formulario 29") se cambia por la
   corta ("F29", data-corta): abierto y en el cajón, la larga. */
.cp-shell[data-menu="colapsado"] .cp-nav-link[data-corta] .cp-nav-texto { display: none; }
.cp-shell[data-menu="colapsado"] .cp-nav-link[data-corta]::after { content: attr(data-corta); }
/* El activo del riel: píldora suave y una barra de 3px pegada al borde
   izquierdo del RIEL, no del ítem (el ítem está centrado: 12px más allá).
   Expandido va igual, afuera de la píldora. */
.cp-shell[data-menu="colapsado"] .cp-nav-link[aria-current="page"],
.cp-shell[data-menu="colapsado"] .cp-nav-link[aria-current="page"]:hover {
  background: var(--cp-menu-riel-activo-fondo); color: var(--cp-menu-riel-activo-texto);
  font-weight: 700; box-shadow: none;
}
.cp-shell[data-menu="colapsado"] .cp-nav-link[aria-current="page"]::before {
  left: calc((var(--cp-menu-ancho-colapsado) - 72px) / -2); top: 50%; bottom: auto;
  height: 24px; transform: translateY(-50%);
  border-radius: 0 3px 3px 0; background: var(--cp-menu-indicador);
}
/* El indicador deslizante, en el riel: la barra de 24px centrada y la
   píldora suave del riel. Van después de las dos reglas de arriba, que con
   el indicador puesto dejarían al enlace dibujando su marca otra vez. */
.cp-shell[data-menu="colapsado"] .cp-nav-indicador::before {
  top: 50%; bottom: auto; height: 24px; transform: translateY(-50%);
  background: var(--cp-menu-indicador);
}
.cp-shell[data-menu="colapsado"] .cp-nav-indicador::after {
  border-radius: 12px; background: var(--cp-menu-riel-activo-fondo); box-shadow: none;
}
.cp-shell[data-menu="colapsado"] .cp-nav[data-indicador="si"] .cp-nav-link[aria-current="page"],
.cp-shell[data-menu="colapsado"] .cp-nav[data-indicador="si"] .cp-nav-link[aria-current="page"]:hover { background: transparent; }
.cp-shell[data-menu="colapsado"] .cp-nav[data-indicador="si"] .cp-nav-link[aria-current="page"]::before { content: none; }
.cp-shell[data-menu="colapsado"] .cp-menu-pie { margin: 0 12px; padding: 10px 0 14px; gap: 8px; }
/* La cuenta en el riel: sólo las iniciales, en un botón cuadrado centrado
   (el lector oye el nombre y el correo igual). Su menú se abre al lado del
   riel, con el borde de abajo a la altura del bloque. */
.cp-shell[data-menu="colapsado"] .cp-menu-cuenta { display: flex; justify-content: center; min-height: 48px; }
.cp-shell[data-menu="colapsado"] .cp-menu-cuenta-boton { width: 48px; min-height: 48px; padding: 0; justify-content: center; }
.cp-shell[data-menu="colapsado"] .cp-menu-cuenta-texto {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.cp-shell[data-menu="colapsado"] .cp-menu-cuenta-chevron { display: none; }
.cp-shell[data-menu="colapsado"] .cp-menu-cuenta-pop { left: calc(100% + 20px); bottom: 0; }

/* ---- el tema claro (diseño 1c) ----
   No se expone en ninguna parte: está para que cambiar de superficie sea
   cambiar tokens y no escribir otro menú. Los grises del diseño 1c (#98A1B8
   y #7B849B) no llegan a AA sobre blanco (2.6 y 3.7:1): van los más
   oscuros que sí llegan. */
.cp-shell[data-menu-tema="claro"] {
  --cp-menu-ancho-expandido: 248px;
  --cp-menu-fondo: #FFFFFF;
  --cp-menu-borde: #E7E9F4;
  --cp-menu-grupo: #6B7488;
  --cp-menu-texto: #4A5468;
  --cp-menu-icono: #7E879C;
  --cp-menu-texto-hover: #101935;
  --cp-menu-hover: #F6F7FB;
  --cp-menu-hover-boton: #F6F7FB;
  --cp-menu-meta: #667085;
  --cp-menu-linea-bloque: #EDEFF7;
  --cp-menu-claro: #1E2742;
  --cp-menu-avatar-fondo: #F1EDFE;
  --cp-menu-avatar-borde: #F1EDFE;
  --cp-menu-avatar-texto: #5B21B6;
  --cp-menu-activo-fondo: #F1EDFE;
  --cp-menu-activo-texto: #5B21B6;
  --cp-menu-activo-icono: #7C3AED;
  --cp-menu-activo-peso: 800;
  --cp-menu-activo-sombra: none;
  --cp-menu-activo-barra: #7C3AED;
  --cp-menu-riel-activo-fondo: #F1EDFE;
  --cp-menu-riel-activo-texto: #5B21B6;
  --cp-menu-indicador: #7C3AED;
  --cp-menu-tarjeta-fondo: #F6F7FB;
  --cp-menu-tarjeta-borde: #E7E9F4;
  --cp-menu-foco: #7C3AED;
}

/* El velo del cajón: sólo existe en pantalla angosta (ver @media 1023). */
.cp-sidebar-fondo {
  position: fixed; inset: 0; z-index: 18;
  background: var(--cp-velo);
}

/* ---- barra superior ---- */
.cp-shell-main { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }

.cp-topbar {
  min-height: var(--cp-topbar-alto);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 0 22px;
  background: #fff; color: var(--cp-tinta);
  border-bottom: 1px solid var(--cp-linea);
}
.cp-topbar-izq { display: flex; align-items: center; gap: 14px; flex: 1 1 auto; min-width: 0; }
/* El logo se estiliza por su posición y no por una clase: el <img> va sin
   atributo class a propósito (test/clientRcvPantalla.test.js lo busca
   literal, para que nadie lo cambie por la palabra rearmada con texto). */
.cp-topbar-izq > img { width: 132px; height: auto; flex: none; display: block; object-fit: contain; }
.cp-topbar-sep { width: 1px; height: 28px; flex: none; background: var(--cp-linea); }
/* El logo y el selector de empresa quedan SIEMPRE en la barra, con el
   menú expandido o plegado: no saltan al menú (pedido del usuario).
   Orden (pedido del usuario, 19/9/2026): logo y buscador a la izquierda;
   la empresa a la derecha, antes de la marca del SII. */
/* El lugar del buscador de documentos: crece con la barra hasta 420px. */
#cp-topbar-buscar { flex: 1 1 auto; min-width: 0; max-width: 420px; }

.cp-menu-btn {
  display: none;
  width: 40px; height: 40px; flex: none;
  align-items: center; justify-content: center;
  border: 1px solid var(--cp-linea); border-radius: var(--cp-r-sm);
  background: #fff; color: var(--cp-tinta); cursor: pointer;
}
.cp-menu-btn svg { width: 20px; height: 20px; }

.cp-topbar-right { display: flex; align-items: center; gap: 16px; min-width: 0; }

/* ---- el botón de la empresa y los dos menús de botón ----
   El botón (las iniciales, el nombre y el RUT de la empresa activa) abre las
   empresas de la cuenta; el bloque de la cuenta, abajo a la izquierda en el
   menú lateral, abre Perfil, Configuración, el SII, el plan y "Cerrar sesión"
   (company-selector.js y menu-lateral.js, 20/10/2026). Las mismas piezas del
   portal: la tarjeta blanca con el borde y la sombra de siempre, el violeta
   suave de las iniciales, el gris de los textos de apoyo y los iconos de
   Lucide en 1.6. */
.cp-empresa-sel { position: relative; min-width: 0; }
.cp-empresa-sel-caja {
  display: flex; align-items: center; gap: 9px;
  min-width: 0; max-width: 100%;
  font: inherit; text-align: left; cursor: pointer;
}
.cp-empresa-sel-iniciales {
  width: 22px; height: 22px; flex: none; border-radius: 6px;
  display: grid; place-items: center;
  font-size: 0.625rem; font-weight: 800; letter-spacing: 0.02em;
}
.cp-empresa-sel-texto { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.cp-empresa-sel-nombre { font-size: 0.78125rem; font-weight: 700; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-empresa-sel-rut { font-size: 0.65625rem; font-weight: 600; line-height: 1.35; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cp-empresa-sel-chevron { width: 15px; height: 15px; flex: none; pointer-events: none; transition: transform 200ms cubic-bezier(0.05, 0.7, 0.1, 1); }
/* Abierto, la flecha mira hacia arriba: el menú está a la vista. */
.cp-empresa-sel-caja[aria-expanded="true"] .cp-empresa-sel-chevron { transform: rotate(180deg); }

.cp-empresa-sel-barra { flex: 0 1 auto; }
.cp-empresa-sel-barra .cp-empresa-sel-caja {
  min-height: 40px; padding: 0 12px 0 9px;
  border: 1px solid var(--cp-linea); border-radius: 10px;
  background: #fff; color: var(--cp-tinta);
  transition: background-color 150ms ease-out, border-color 150ms ease-out;
}
.cp-empresa-sel-barra .cp-empresa-sel-caja:hover,
.cp-empresa-sel-barra .cp-empresa-sel-caja[aria-expanded="true"] { background: var(--cp-page); }
.cp-empresa-sel-barra .cp-empresa-sel-caja[aria-expanded="true"] { border-color: var(--cp-violeta-200); }
.cp-empresa-sel-barra .cp-empresa-sel-iniciales { background: var(--cp-violeta-50); color: var(--cp-violeta-700); }
.cp-empresa-sel-barra .cp-empresa-sel-nombre { font-size: 0.8125rem; max-width: 300px; }
.cp-empresa-sel-barra .cp-empresa-sel-rut,
.cp-empresa-sel-barra .cp-empresa-sel-chevron { color: var(--cp-gris); }

/* La tarjeta de los DOS menús de botón: el de las empresas (bajo el botón de
   la barra) y el de la cuenta (sobre el bloque de la cuenta, en el menú
   lateral). Es la misma pieza en los dos lugares, blanca también sobre el
   azul marino. Si la ventana es baja, la tarjeta entera se desplaza: todo se
   alcanza. */
.cp-pop {
  position: absolute; z-index: 25;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 6px;
  background: #fff; border: 1px solid var(--cp-linea); border-radius: 14px;
  box-shadow: 0 16px 36px rgba(7, 27, 53, 0.22);
  color: var(--cp-tinta); text-align: left; white-space: normal;
}
/* Las empresas: bajo el botón, de 304px y nunca más ancha que la pantalla. */
.cp-empresa-pop {
  left: 0; top: calc(100% + 8px);
  width: 304px; max-width: min(320px, calc(100vw - 32px));
  max-height: calc(100vh - var(--cp-topbar-alto) - 16px); max-height: calc(100dvh - var(--cp-topbar-alto) - 16px);
}
/* Se abre hacia la izquierda: el botón está contra el borde derecho y,
   anclado a su izquierda, se saldría de la pantalla. En pantalla angosta el
   botón ocupa su renglón y el menú vuelve a la izquierda. */
@media (min-width: 768px) {
  .cp-empresa-sel-barra .cp-empresa-pop { left: auto; right: 0; transform-origin: top right; }
}
/* Entran en 200 ms con la curva de entrada del portal, sin rebote: el de
   las empresas baja 6px desde su botón y el de la cuenta sube 6px desde el
   suyo. Se cierran sin animación (lo que sale no se hace esperar). Sin
   movimiento, simplemente están: la opacidad 0 solo existe en el fotograma
   de partida. */
@media (prefers-reduced-motion: no-preference) {
  .cp-empresa-pop { transform-origin: top left; animation: cp-empresa-pop-entra 200ms cubic-bezier(0.05, 0.7, 0.1, 1); }
  .cp-menu-cuenta-pop { transform-origin: bottom left; animation: cp-menu-cuenta-pop-entra 200ms cubic-bezier(0.05, 0.7, 0.1, 1); }
}
@keyframes cp-empresa-pop-entra { from { opacity: 0; transform: translateY(-6px) scale(0.98); } }
@keyframes cp-menu-cuenta-pop-entra { from { opacity: 0; transform: translateY(6px) scale(0.98); } }

/* Las opciones: icono de 18 y texto de 13, en filas de 40. */
.cp-pop-item {
  width: 100%; min-height: 40px;
  display: flex; align-items: center; gap: 11px;
  padding: 0 10px; border: none; border-radius: var(--cp-r-sm);
  background: none; font: inherit; font-size: 0.8125rem; font-weight: 600; line-height: 1.3; text-align: left; text-decoration: none;
  color: var(--cp-tinta); cursor: pointer;
}
.cp-pop-ico { width: 18px; height: 18px; flex: none; color: var(--cp-gris); }
.cp-pop-texto { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Con un dato chico debajo (el plan, debajo de "Mi plan"). */
.cp-pop-dos { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; padding: 5px 0; }
.cp-pop-sub { font-size: 0.71875rem; font-weight: 600; color: var(--cp-gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-pop-item:hover,
.cp-empresa-opcion:hover { background: var(--cp-page); }
/* Lo que todavía no existe se ve apagado y lo dice ("Próximamente"): se
   alcanza con el teclado, pero no hace nada ni cambia con el puntero. */
.cp-pop-item[aria-disabled="true"] { color: var(--cp-muted); cursor: default; }
.cp-pop-item[aria-disabled="true"]:hover { background: none; }
.cp-pop-item[aria-disabled="true"] .cp-pop-ico { color: var(--cp-chevron); }
.cp-pop-item .cp-pop-pronto { flex: none; padding: 3px 8px; font-size: 0.6875rem; }
/* La conexión con el SII al lado de su opción: el punto Y la palabra. */
.cp-pop-estado { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 600; color: var(--cp-gris); }
.cp-pop-estado .cp-punto { width: 8px; height: 8px; }
/* "Cerrar sesión", en el rojo de la salida del Perfil del celular. */
.cp-pop-salir, .cp-pop-salir .cp-pop-ico { color: #B4232F; }
.cp-pop-salir:hover { background: #FFF5F5; }

.cp-pop-regla { height: 1px; margin: 6px 4px; background: var(--cp-separador); }

/* Las empresas de la cuenta: el cuadrito, el nombre, el RUT y el tilde en
   la actual. Con muchas, la lista se desplaza sola y "Agregar empresa" queda
   a la vista. */
.cp-empresa-pop-lista { display: flex; flex-direction: column; gap: 2px; max-height: min(360px, 50vh); overflow-y: auto; }
.cp-empresa-opcion {
  width: 100%; min-height: 46px; flex: none;
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; border: none; border-radius: var(--cp-r-sm);
  background: none; font: inherit; text-align: left; color: var(--cp-tinta); cursor: pointer;
}
.cp-empresa-opcion-iniciales {
  width: 28px; height: 28px; flex: none; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--cp-superficie-tabla); color: var(--cp-gris);
  font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.02em;
}
/* La actual se marca con el tilde (y el lector oye "marcada"), además del
   color de sus iniciales: no sólo con color. */
.cp-empresa-opcion[aria-checked="true"] .cp-empresa-opcion-iniciales { background: var(--cp-violeta-50); color: var(--cp-violeta-700); }
.cp-empresa-opcion-texto { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.cp-empresa-opcion-nombre { font-size: 0.8125rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-empresa-opcion-rut { font-size: 0.75rem; color: var(--cp-gris); font-variant-numeric: tabular-nums; }
.cp-empresa-opcion-tilde { width: 16px; height: 16px; flex: none; color: var(--cp-violeta-600); }

/* El anillo de foco va por dentro de la opción: por fuera lo recortaría el
   desplazamiento de la tarjeta. */
.cp-pop :where(a, button):focus-visible { outline: 2px solid var(--cp-foco); outline-offset: -2px; }

/* Cuándo se leyó el SII, a nivel de EMPRESA (activeCompany.siiLeidoAt).
   El punto de color nunca es el único indicador: el estado va escrito
   ("sin actualizar desde…", "sin lectura registrada"). */
.cp-topbar-sii {
  display: flex; align-items: center; gap: 7px; margin: 0;
  font-size: 0.8125rem; color: var(--cp-gris); white-space: nowrap;
}
.cp-topbar-sii .cp-punto { width: 8px; height: 8px; }
.cp-topbar-sii.es-viejo { color: var(--cp-ambar-texto); font-weight: 600; }

/* El padding de abajo es aire, y el aire no puede ser el motivo de una barra
   de scroll: lo achica /js/compartido/aire-del-pie.js cuando el contenido
   entra en la ventana (ahi esta el porque). Por eso se escribe siempre con
   esta formula, nunca con un numero fijo. */
.cp-main { --aire-natural: 30px; flex: 1; width: 100%; min-width: 0; max-width: none; padding: 18px 22px var(--aire-del-pie, var(--aire-natural)); margin: 0; }

/* ---- encabezado de página ----
   UNA fila en todas las vistas: el título y, al lado, los controles del
   período que esa vista lleve (stepper, atajos, pastilla del mes). Sin
   migas ni bajada. Lo que va a la derecha (Exportar CSV) lo pasa la vista.
   Los contenedores vacíos no ocupan lugar: una vista sin período o una
   empresa sin datos no deja una caja en blanco ni un hueco de 14px. */
.cp-page-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin: 0 0 14px; min-height: 42px; }
.cp-page-head-izq { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-width: 0; }
.cp-page-head-izq > div:empty { display: none; }
.cp-page-titulo { margin: 0; font-size: 1.375rem; line-height: 1.2; font-weight: 750; letter-spacing: -0.025em; color: var(--cp-tinta); white-space: nowrap; }
/* Sin stepper al lado (Mi empresa, Cuenta, Mi plan, Balances) el título
   puede partirse: "Mi empresa" lleva el nombre de la empresa, y uno de
   60-70 letras en una sola línea se salía de la pantalla entre 768 y 1000
   px. El nowrap sólo hace falta para que el título no se parta al lado
   del stepper. */
.cp-page-head-izq > .cp-page-titulo:only-child { white-space: normal; }

/* El stepper del período: flechas de 32x34 y la etiqueta al medio. La
   flecha sin destino va `disabled` DE VERDAD (lo pone el JS): la opacidad
   sólo lo muestra. */
.cp-periodo-stepper { display: flex; align-items: center; gap: 2px; padding: 3px; background: #fff; border: 1px solid var(--cp-linea); border-radius: 10px; flex: none; }
.cp-periodo-flecha { width: 32px; height: 34px; display: grid; place-items: center; border: none; background: none; border-radius: 7px; color: var(--cp-gris); cursor: pointer; }
.cp-periodo-flecha svg { width: 15px; height: 15px; stroke-width: 2.3; }
.cp-periodo-flecha:hover:not(:disabled) { background: var(--cp-page); color: var(--cp-tinta); }
.cp-periodo-flecha:disabled { opacity: 0.35; cursor: default; }
.cp-periodo-etiqueta { min-width: 132px; text-align: center; font-size: 0.9375rem; font-weight: 700; white-space: nowrap; color: var(--cp-tinta); }

/* Atajos "Este mes" / "Anterior". El que corresponde al período que se
   mira va apretado (aria-pressed), con fondo Y peso: no sólo color. */
.cp-periodo-atajos { display: flex; gap: 5px; }
.cp-atajo { padding: 6px 12px; border: 1px solid var(--cp-linea); background: #fff; border-radius: 8px; font: inherit; font-size: 0.8125rem; font-weight: 600; color: var(--cp-gris); white-space: nowrap; flex: none; cursor: pointer; }
.cp-atajo:hover:not(:disabled) { background: var(--cp-page); color: var(--cp-tinta); }
.cp-atajo[aria-pressed="true"] { background: var(--cp-violeta-50); border-color: var(--cp-violeta-200); color: var(--cp-violeta-700); font-weight: 700; }
.cp-atajo:disabled { opacity: 0.45; cursor: default; }

/* ---- aviso de una línea, en la fila del título ----
   "Configura tu personal" (personal.js). Era una tarjeta a todo lo ancho
   encima del resumen; el usuario la pidió "más discreta pero notoria"
   (13/10/2026) y marcó este lugar. Ocupa lo que sobra de la fila: blanca y
   baja como las pastillas de al lado, con el título en negrita y el enlace
   al final. Sin la franja naranja de la izquierda: el dueño pidió sacarla
   ("elimina lo naranja", 13/10/2026); el aviso se reconoce por su ícono. El motivo se corta con puntos suspensivos
   si no cabe (queda en el `title`) y, si el lugar es poco, no se muestra:
   quedan el título y el enlace, que alcanzan para saber qué es y a dónde
   va. Recién cuando ni eso cabe baja a su propio renglón. Toda la línea se
   puede tocar: el enlace se estira sobre ella. */
.cp-page-head-aviso { flex: 1 1 270px; min-width: 0; display: flex; container-type: inline-size; }
/* Con dos avisos (deudas y personal, 23/10/2026), uno debajo del otro. */
#cp-dashboard-aviso { flex-direction: column; gap: 6px; }
@container (max-width: 520px) { .cp-aviso-linea-motivo { display: none; } }
.cp-page-head-aviso:empty { display: none; }
.cp-aviso-linea {
  position: relative; flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: 8px;
  background: #fff; border: 1px solid var(--cp-aviso-borde);
  font-size: 0.8125rem; line-height: 1.3; white-space: nowrap; color: var(--cp-gris);
  transition: border-color 150ms ease-out, background-color 150ms ease-out;
}
.cp-aviso-linea:hover { background: #FFFCF5; border-color: #E8C886; }
.cp-aviso-linea-icono { width: 16px; height: 16px; flex: none; color: #B54708; }
.cp-aviso-linea b { flex: none; font-weight: 750; color: var(--cp-tinta); }
.cp-aviso-linea-motivo { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cp-aviso-linea-ir {
  flex: none; margin-left: auto; padding-left: 8px;
  display: inline-flex; align-items: center; gap: 2px;
  font-weight: 750; color: var(--cp-violeta-700); text-decoration: none;
}
.cp-aviso-linea-ir svg { width: 14px; height: 14px; flex: none; transition: transform 150ms ease-out; }
.cp-aviso-linea-ir::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.cp-aviso-linea:hover .cp-aviso-linea-ir svg { transform: translateX(2px); }
/* "Cargando 7 meses más" (24/10/2026, entrar con el mes actual): no es un
   problema ni lleva a ningún lado, así que va en el borde de siempre y sin
   cambio al pasar el cursor; el ícono, en el violeta del portal. */
.cp-aviso-cargando, .cp-aviso-cargando:hover { background: #fff; border-color: var(--cp-linea); }
.cp-aviso-cargando .cp-aviso-linea-icono { color: var(--cp-violeta-700); }
.cp-aviso-cargando b { font-weight: 650; color: var(--cp-gris); }
/* En la Renta va entre los avisos del resultado (una columna): sin estirarse. */
.cp-sueldos-resultado > .cp-aviso-cargando { flex: none; }
/* "Datos hasta" (24/10/2026, dashboard.js cpAvisoDatosHastaHtml): la fecha
   nunca se esconde. Si la línea entera no cabe, en vez del motivo y la fecha
   queda "Datos hasta 24 oct" en negrita; el motivo sigue en el title. Lo que
   necesita la línea entera, medido con la fuente del portal: ~440 px (~480
   con el año, "30 sep 2025"); con "Sin plan" (-breve), ~320 (~360). */
.cp-aviso-datos { --cp-aviso-largo: inline; --cp-aviso-corto: none; }
.cp-aviso-datos .cp-aviso-datos-motivo, .cp-aviso-datos-hasta { display: var(--cp-aviso-largo); }
.cp-aviso-datos-hasta { flex: none; }
.cp-aviso-datos-corto { display: var(--cp-aviso-corto); }
/* Con la caja en su mínimo (270 px) y una fecha con año, se corta con puntos
   suspensivos en vez de salirse. */
.cp-aviso-linea .cp-aviso-datos-corto { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@container (max-width: 450px) { .cp-aviso-datos:not(.cp-aviso-datos-breve) { --cp-aviso-largo: none; --cp-aviso-corto: inline; } }
@container (max-width: 490px) { .cp-aviso-datos-anio:not(.cp-aviso-datos-breve) { --cp-aviso-largo: none; --cp-aviso-corto: inline; } }
@container (max-width: 330px) { .cp-aviso-datos-breve { --cp-aviso-largo: none; --cp-aviso-corto: inline; } }
@container (max-width: 370px) { .cp-aviso-datos-breve.cp-aviso-datos-anio { --cp-aviso-largo: none; --cp-aviso-corto: inline; } }

/* ---- banner de estado ---- */
/* Sin la franja de color a la izquierda (24/10/2026, el dueño la marcó:
   "quita esto"): el tono lo da el círculo del icono. */
.cp-banner {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; border-radius: 14px; margin-bottom: 18px;
  background: #fff; border: 1px solid var(--cp-border);
}
.cp-banner b { font-size: 1rem; color: #101828; }
.cp-banner p { margin: 3px 0 0; font-size: 0.86rem; color: var(--cp-muted); }
.cp-banner-icono {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
}
.cp-banner-icono svg { width: 19px; height: 19px; }
.cp-banner-ok .cp-banner-icono { background: rgba(22, 163, 74, 0.12); color: var(--cp-verde); }
.cp-banner-warn .cp-banner-icono { background: rgba(247, 144, 9, 0.14); color: #B54708; }
/* Mes de prueba terminado (27/9/2026): en rojo, con la forma de contratar. */
.cp-banner-danger .cp-banner-icono { background: rgba(214, 69, 80, 0.12); color: var(--cp-danger); }
.cp-banner-accion { display: inline-block; margin-top: 6px; font-size: 0.86rem; font-weight: 700; color: var(--cp-violeta-700); text-decoration: none; }
.cp-banner-accion:hover { text-decoration: underline; }

/* ---- tarjetas de resumen ---- */

.cp-chip { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; }
.cp-chip-ok { background: rgba(30, 158, 107, 0.12); color: #16744F; }
.cp-chip-warn { background: rgba(200, 134, 13, 0.14); color: #8A5C05; }
.cp-chip-danger { background: rgba(214, 69, 80, 0.12); color: var(--cp-danger); }
.cp-chip-muted { background: #F2F4F7; color: var(--cp-muted); }

/* ---- columnas y tarjetas ---- */
/* §4.3: el borde y la sombra del diseno, los mismos de la franja. Sin
   esto las tarjetas heredaban #E1E6EF sin sombra y no hacian juego con la
   franja que tienen al lado. */
.cp-card { border-radius: 14px; padding: 18px 20px; border-color: var(--cp-linea); box-shadow: var(--cp-sombra); }
.cp-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.cp-card-head h2 { margin: 0; font-size: 1rem; color: #101828; }
.cp-nota { font-size: 0.84rem; color: var(--cp-muted); line-height: 1.5; margin: 0; }


.cp-datos { margin: 0 0 14px; display: flex; flex-direction: column; gap: 12px; }
.cp-datos div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.cp-datos dt { font-size: 0.82rem; color: var(--cp-muted); }
.cp-datos dd { margin: 0; font-size: 0.86rem; font-weight: 600; color: #101828; text-align: right; }

/* ---- Balances (documents.js) ----
   Una tarjeta sin padding propio: la cabecera gris y las filas llegan al
   borde, y el padding lo pone cada pieza. Una fila por período vigente.
   12 px hasta "Otros documentos", como el diseño (el 16 de .cp-card es
   para las tarjetas del resto del portal). */
.cp-balances { padding: 0; overflow: hidden; margin-bottom: 12px; }
.cp-balances-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 18px; background: var(--cp-superficie); border-bottom: 1px solid var(--cp-linea); }
.cp-balances-cabecera h2 { margin: 0; font-size: 1rem; font-weight: 700; color: var(--cp-titulo); }
.cp-balances-conteo { font-size: 0.8125rem; color: var(--cp-gris); }
/* La barra que ocupa el lugar del conteo mientras carga: 12 + 4 = 16 px,
   el alto de la línea del conteo real. */
.cp-balances-conteo .cp-barra { width: 180px; margin: 2px 0; }
#cp-docs-lista > .cp-empty, #cp-docs-lista > .cp-btn { margin: 0 18px; }
/* "Reintentar" va centrado bajo su mensaje (.cp-empty centra el texto), y
   con margen abajo: la tarjeta no tiene padding y sin él quedaba pegado al
   borde (medido en el banco, caso de error). */
#cp-docs-lista > .cp-btn { display: block; width: fit-content; margin: 0 auto 18px; }
.cp-balances-lista { list-style: none; margin: 0; padding: 0; }
.cp-balances-fila { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 13px 18px; border-bottom: 1px solid var(--cp-separador); }
.cp-balances-fila:last-child { border-bottom: none; }
.cp-doc-tipo { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 10px; background: rgba(214, 69, 80, 0.10); color: var(--cp-danger); font-size: 0.625rem; font-weight: 800; letter-spacing: 0.04em; }
/* 4 px entre el título y "Contabilidad" y 40 de alto mínimo: así la fila
   mide 67, como el diseño (que lo logra con un <b> en bloque y el subtítulo
   en línea). El mínimo también lo cumple el esqueleto, que sólo tiene una
   barra, y la fila no cambia de alto cuando llega la lista. */
.cp-balances-nombre { display: flex; flex-direction: column; gap: 4px; min-height: 40px; min-width: 0; }
.cp-balances-nombre b { font-size: 0.9375rem; font-weight: 700; color: var(--cp-tinta); }
.cp-balances-nombre span { font-size: 0.8125rem; color: var(--cp-gris); }
.cp-balances-fecha { font-size: 0.8125rem; color: var(--cp-gris); white-space: nowrap; }
.cp-doc-bajar { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border: 1px solid var(--cp-linea); border-radius: 10px; color: #344054; text-decoration: none; }
.cp-doc-bajar svg { width: 17px; height: 17px; }
.cp-doc-bajar:hover { background: var(--cp-violeta-50); text-decoration: none; }
.cp-doc-bajar-vacio { color: #D0D5DD; cursor: default; }
.cp-doc-bajar-vacio:hover { background: none; }
/* El color va explícito: sin él hereda el azul marino de .cp-card h2, y el
   diseño lo quiere igual que el título de la otra tarjeta. */
.cp-balances-otros h2 { margin: 0 0 8px; font-size: 1rem; font-weight: 700; color: var(--cp-titulo); }
.cp-balances-otros .cp-nota { font-size: 0.875rem; line-height: 1.6; color: var(--cp-gris); max-width: 68ch; }

@media (max-width: 760px) {
  /* Acá vivían los últimos restos de la barra de pestañas anterior, que
     ya no existe: `.cp-nav { order: 3; flex: none; overflow-x: auto; }`
     volvía a poner la navegación en una fila horizontal (y rompía el
     empuje de Salir al fondo del riel) y `.cp-nav button { padding: 8px
     10px; }` le ganaba por especificidad (0,1,1 contra 0,1,0) al padding
     del ítem del riel. El armazón angosto lo resuelven los @media de 1023
     y 767: el menú se abre encima, como cajón, no se acuesta. */
  .cp-main { padding: 18px 16px var(--aire-del-pie, var(--aire-natural)); }
}

/* ---- zona de acciones sin vuelta atrás (eliminar la cuenta) ---- */
.cp-zona-peligro { border-color: rgba(214, 69, 80, 0.35); }
.cp-zona-peligro .cp-card-head h2 { color: var(--cp-danger); }
.cp-nota-secundaria { margin-top: 8px; font-size: 0.8rem; }
.cp-btn-peligro {
  margin-top: 14px; padding: 10px 16px;
  background: var(--cp-danger); color: #fff;
  border: none; border-radius: 10px;
  font-size: 0.88rem; font-weight: 600; font-family: inherit; cursor: pointer;
}
.cp-btn-peligro:hover:not(:disabled) { background: #B93B45; }
.cp-btn-peligro:disabled { opacity: 0.6; cursor: default; }
.cp-eliminar-aviso { margin-top: 16px; font-weight: 600; color: #344054; }
.cp-eliminar-campo { max-width: 320px; margin-top: 10px; }
.cp-eliminar-acciones { display: flex; align-items: center; gap: 10px; }
.cp-eliminar-acciones .cp-btn-peligro, .cp-eliminar-acciones .cp-btn-ghost { margin-top: 4px; }
.cp-boton-espaciado { margin-top: 10px; }

/* ---- paso de vinculación con el SII ---- */
.cp-sii-ayuda { font-size: 0.76rem; color: var(--cp-muted); margin: 6px 0 0; }
.cp-sii-check {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; border-radius: 50%; background: var(--cp-verde);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E");
  background-size: 11px; background-position: center; background-repeat: no-repeat;
}
.cp-sii-confirmo { display: flex; align-items: center; gap: 9px; font-size: 0.83rem; color: #344054; margin-bottom: 16px; cursor: pointer; }
/* Corrigiendo una empresa (después de un rechazo) el RUT es el suyo y no se
   cambia (vincular-sii.js, cpFormularioDeEmpresa): se ve apagado. */
.cp-activar-input-wrap input[readonly] { background: #F2F4F7; color: #475467; cursor: default; }
/* "Esa empresa ya está en tu cuenta · Ir a ella", en una línea bajo el RUT. */
.cp-sii-ya-esta { margin: 8px 0 0; font-size: 0.83rem; color: var(--cp-aviso-tinta); }
.cp-sii-ir-empresa {
  margin-left: 4px; padding: 0; background: none; border: none; font: inherit; font-weight: 700;
  color: var(--cp-violeta-700); cursor: pointer;
}
.cp-sii-ir-empresa:hover { text-decoration: underline; }
/* El aviso de cuántos intentos quedan antes de que el SII bloquee la clave.
   Va en tono de aviso, no de error: el error es el rechazo, esto es lo que
   hay que tener en cuenta antes de volver a probar. Con los dos .cp-sii-aviso
   delante: .cp-sii-aviso va más abajo y, con la misma especificidad, lo
   dejaba violeta (27/9/2026). */
.cp-sii-aviso.cp-sii-aviso-intentos { background: var(--cp-aviso-suave); border: 1px solid var(--cp-aviso-borde); }
.cp-sii-aviso.cp-sii-aviso-intentos b { color: var(--cp-aviso-tinta); }

/* Las salidas de la pantalla de conexión cuando se llega por la puerta (una
   empresa a medio armar): las otras empresas y "Salir". */
.cp-sii-salidas { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 14px; }
.cp-sii-salidas-rotulo { margin: 0; font-size: 0.8125rem; color: var(--cp-gris); }
.cp-sii-mas-tarde {
  display: block; margin: 14px auto 0; background: none; border: none;
  font-family: inherit; font-size: 0.85rem; font-weight: 600;
  color: var(--cp-violeta-600); cursor: pointer;
}
.cp-sii-mas-tarde:hover { text-decoration: underline; }
.cp-sii-estado-caja { text-align: center; padding: 8px 0 4px; }
.cp-sii-estado-detalle { margin: 12px 0 18px; }
.cp-sii-estado-datos { text-align: left; margin-bottom: 18px; }

/* ---- "Preparando tu espacio": avance real de la vinculación ---- */
.cp-sii-estado-titulo { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; color: #101828; margin: 6px 0 6px; }
.cp-sii-estado-sub { font-size: 0.88rem; color: var(--cp-muted); margin: 0 0 18px; }
.cp-sii-estado-sub b { color: #344054; }

.cp-sii-anillo-wrap { position: relative; width: 128px; height: 128px; margin: 0 auto 14px; }
.cp-sii-anillo { width: 128px; height: 128px; transform: rotate(-90deg); }
.cp-sii-anillo circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.cp-sii-anillo-fondo { stroke: #EDE9FE; }
/* 0.6s para que se vea LLENARSE. Si el elemento se recreara en cada
   consulta esto no haria nada: una transicion necesita un valor anterior
   desde el cual salir (ver cpEsqueletoEstadoSii). */
.cp-sii-anillo-avance { stroke: var(--cp-violeta-600); transition: stroke-dashoffset 0.6s cubic-bezier(.4, 0, .2, 1); }
.cp-sii-anillo-texto {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 1px;
  font-weight: 700; color: #101828;
}
.cp-sii-anillo-texto b { font-size: 1.7rem; letter-spacing: -0.03em; }
.cp-sii-anillo-texto span { font-size: 0.9rem; margin-top: 6px; }

.cp-sii-paso-actual { text-align: center; font-size: 0.86rem; font-weight: 600; color: #344054; margin: 0 0 18px; }

.cp-sii-pasos { --cp-sii-gap: 14px; list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: var(--cp-sii-gap); }
.cp-sii-paso { display: flex; align-items: flex-start; gap: 12px; position: relative; }
/* La línea que une los pasos cuelga del <li>, NO de la marca.
   Colgaba de la marca, y la marca del paso en curso gira: la línea giraba
   con ella y se veía dar vueltas alrededor del círculo. Los 11px son la
   mitad de la marca (22px), que es lo primero del <li>. */
/* De cuadrado a cuadrado (20/10/2026): la línea arranca 4 px bajo la marca
   (24 px) y termina 4 px antes de la siguiente, sea cual sea el alto del
   texto y el espacio entre pasos (--cp-sii-gap). Solo entre dos pasos: el
   último no lleva (el renglón de resumen que sigue va escondido). */
.cp-sii-paso:has(+ .cp-sii-paso:not(.cp-sii-paso-resumen))::after {
  content: ""; position: absolute; left: 12px; top: 28px; bottom: calc(4px - var(--cp-sii-gap)); width: 2px;
  transform: translateX(-50%); border-radius: 1px; background: #E4E7EC;
}
.cp-sii-paso.cp-paso-hecho:has(+ .cp-sii-paso:not(.cp-sii-paso-resumen))::after { background: #BDEDEA; }
.cp-sii-paso-marca {
  position: relative; width: 22px; height: 22px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #E4E7EC; background: #fff; color: #fff;
}
.cp-sii-paso-marca svg { width: 12px; height: 12px; }
/* El tick va BLANCO sobre el verde. Con la clase sola perdía contra
   `.cp-sii-paso span` (el texto gris del paso, 0,1,1): la marca también es
   un <span> y el tick salía gris (medido: rgb(107,118,136)). */
.cp-sii-paso .cp-sii-paso-marca { color: #fff; }
.cp-sii-paso b { display: block; font-size: 0.88rem; color: #344054; }
.cp-sii-paso span { font-size: 0.78rem; color: var(--cp-muted); }

.cp-paso-hecho .cp-sii-paso-marca { background: var(--cp-verde); border-color: var(--cp-verde); }
.cp-paso-hecho b { color: #101828; }
.cp-paso-curso .cp-sii-paso-marca { border-color: var(--cp-violeta-600); border-right-color: transparent; animation: cp-girar 0.9s linear infinite; }
.cp-paso-curso b { color: var(--cp-violeta-700); }
.cp-paso-pendiente b, .cp-paso-pendiente span { color: #98A2B3; }
@keyframes cp-girar { to { transform: rotate(360deg); } }

/* Los cinco pasos resumidos en un renglón (7/10/2026): cuando la conexión
   terminó y llega el historial, los pasos ya tildados no dicen nada nuevo y
   empujaban el final de la tarjeta fuera de la ventana. El renglón de resumen
   viene siempre en la lista y solo se muestra plegada. */
.cp-sii-paso-resumen { display: none; }
.cp-sii-pasos-plegados .cp-sii-paso { display: none; }
.cp-sii-pasos-plegados .cp-sii-paso-resumen { display: flex; }
/* Hasta la primera respuesta del servidor (24/10/2026), sin pasos: lo que
   dijeran antes de saber el estado podría no ser cierto. Lo normal es que no
   se alcance a ver (la pantalla nace con el estado: cpEstadoSiiParaAbrir). */
#cp-sii-estado.cp-sii-sin-estado .cp-sii-pasos { display: none; }

/* ---- El historial del año, en la pantalla de alta ----
   Después de verificar la clave el sistema sale a buscar el año completo
   (formularios presentados y compras/ventas mes a mes). Desde el 20/10/2026
   es UNA barra con lo REAL de la cola (nada se llena solo), sin el número:
   el mensaje del tramo va arriba, bajo el logo, y debajo de la barra el
   tiempo que falta. Se llena con la curva del portal; sin movimiento si el
   sistema lo pide. */
.cp-sii-historial { margin: 0 0 18px; border-top: 1px solid var(--cp-border); padding-top: 16px; }
.cp-sii-barra { height: 8px; border-radius: 999px; background: #EEF2F8; overflow: hidden; }
.cp-sii-barra > span {
  display: block; height: 100%; background: linear-gradient(90deg, var(--cp-violeta-600), var(--cp-turquesa));
  transform-origin: left center; transition: transform 600ms cubic-bezier(.3, .7, .3, 1);
}
/* El mensaje del tramo bajo la barra (21/10/2026: antes iba bajo el logo, y
   aquí el tiempo que faltaba, que ya no se muestra). Con el aire de arriba
   que pide "Todo al día" para sus estrellas. */
.cp-sii-historial-mensaje { margin: 12px 0 0; font-size: 0.86rem; font-weight: 600; color: #344054; text-align: center; }
/* La estrella alta de "Todo al día" sube 11 px: sin esto rozaba la barra. */
.cp-sii-historial-mensaje:has(.cp-sii-todo-al-dia) { margin-top: 18px; }
.cp-sii-historial-nota { margin: 6px 0 0; font-size: 0.78rem; color: var(--cp-aviso-tinta); text-align: center; }

/* "Todo al día" con tres estrellas que entran en cascada corta (180 ms en
   total), con la misma curva de entrada, y quedan quietas. */
.cp-sii-todo-al-dia { position: relative; display: inline-block; padding: 0 20px; font-weight: 700; color: #0B7F86; }
.cp-sii-estrellas { position: absolute; inset: 0; pointer-events: none; }
.cp-sii-estrella { position: absolute; display: block; animation: cp-estrella-entra 520ms cubic-bezier(.3, .7, .3, 1) both; }
.cp-sii-estrella svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.cp-sii-estrella-1 { left: 0; top: -7px; width: 11px; height: 11px; color: var(--cp-turquesa); }
.cp-sii-estrella-2 { right: 2px; top: -11px; width: 14px; height: 14px; color: var(--cp-violeta-600); animation-delay: 90ms; }
.cp-sii-estrella-3 { right: -4px; bottom: -3px; width: 9px; height: 9px; color: var(--cp-turquesa); animation-delay: 180ms; }
@keyframes cp-estrella-entra {
  from { opacity: 0; transform: scale(.2) rotate(-35deg); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cp-sii-barra > span { transition: none; }
  .cp-sii-estrella { animation: none; }
}

.cp-sii-aviso { display: block; background: var(--cp-violeta-50); border-radius: 11px; padding: 12px 14px; margin-bottom: 14px; }
.cp-sii-aviso b { font-size: 0.85rem; color: #101828; }
.cp-sii-aviso p { margin: 3px 0 0; font-size: 0.79rem; line-height: 1.4; color: var(--cp-muted); }
.cp-sii-aviso a { color: var(--cp-violeta-700); font-weight: 700; }
/* El RUT ya usó su mes de prueba (27/9/2026): en ámbar, no en el violeta
   de los avisos que sólo informan. */
.cp-sii-aviso.cp-sii-aviso-sin-prueba { background: var(--cp-aviso-suave); border: 1px solid var(--cp-aviso-borde); }
.cp-sii-aviso.cp-sii-aviso-sin-prueba b { color: var(--cp-aviso-tinta); }
/* El plan de la cuenta ya está lleno (24/10/2026): en una línea, en ámbar. */
.cp-sii-aviso.cp-sii-aviso-linea { margin-top: 0; font-size: 0.82rem; line-height: 1.4; color: var(--cp-aviso-tinta); background: var(--cp-aviso-suave); border: 1px solid var(--cp-aviso-borde); }
.cp-sii-aviso-error { background: rgba(214, 69, 80, 0.08); }
.cp-sii-aviso-error b { color: var(--cp-danger); }

/* Ficha con lo que se leyo del SII, en la pantalla de "Todo listo". */
.cp-sii-ficha { margin: 0 0 14px; border: 1px solid var(--cp-border); border-radius: 12px; overflow: hidden; }
.cp-sii-ficha-fila { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 10px 14px; }
.cp-sii-ficha-fila + .cp-sii-ficha-fila { border-top: 1px solid var(--cp-border); }
.cp-sii-ficha dt { flex: 0 0 auto; font-size: 0.78rem; color: var(--cp-muted); }
.cp-sii-ficha dd { margin: 0; text-align: right; font-size: 0.83rem; font-weight: 600; color: #101828; overflow-wrap: anywhere; }
.cp-sii-ficha-falta dd { font-weight: 500; font-style: italic; color: var(--cp-muted); }
.cp-sii-ficha-nota { margin: -6px 0 14px; font-size: 0.76rem; line-height: 1.45; color: var(--cp-muted); }


/* ---- Vista "Mi empresa": lo que el SII informa ---- */
/* La tabla scrollea dentro de su caja, no arrastra la pagina entera: las
   descripciones de actividades economicas del SII son larguisimas. */
.cp-tabla-scroll { overflow-x: auto; }
.cp-tabla { width: 100%; border-collapse: collapse; font-size: 0.83rem; }
.cp-tabla th {
  text-align: left; font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--cp-muted); padding: 0 12px 8px; white-space: nowrap;
}
.cp-tabla td { padding: 10px 12px; border-top: 1px solid var(--cp-border); vertical-align: top; }
.cp-tabla tr:first-child td { border-top: 1px solid var(--cp-border); }
.cp-mono { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Mi empresa: a la derecha del título, "Actualizar datos" y de cuándo es
   la última lectura del SII (13/10/2026: una sola fecha, no una por
   tarjeta). El botón primero y la fecha a su derecha; en angosto bajan
   juntos a su propio renglón. */
.cp-empresa-lectura { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-left: auto; }
.cp-empresa-leido { font-size: 0.8125rem; color: var(--cp-gris); white-space: nowrap; }
.cp-empresa-actualizar { white-space: nowrap; }
.cp-empresa-actualizar.es-ocupado .cp-btn-ico { animation: cp-girar 0.9s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .cp-empresa-actualizar.es-ocupado .cp-btn-ico { animation: none; }
}
.cp-aviso-suave { margin: 10px 0 0; font-size: 0.76rem; line-height: 1.45; color: var(--cp-muted); }

/* ---- Formulario 29 ----
   Hero de tres columnas (total, composicion, estado del periodo) y dos
   tarjetas debajo (resumen tributario y proximos pasos). Medidas del
   diseno aprobado (Portal SIImplifica.dc.html, vista Formulario 29). */
.cp-f29-hero { display: grid; grid-template-columns: minmax(280px, 0.95fr) minmax(0, 1.1fr) minmax(0, 1fr); background: #fff; border: 1px solid var(--cp-linea); border-radius: 14px; overflow: hidden; box-shadow: var(--cp-sombra); }
/* Sin el submódulo de formularios compactos no hay "Mes a mes": dos columnas
   (f29.js, cpF29Hero). */
.cp-f29-hero.sin-mes-a-mes { grid-template-columns: minmax(280px, 0.95fr) minmax(0, 1.1fr); }
.cp-f29-hero-col { min-width: 0; padding: 22px 24px; }
.cp-f29-hero-col + .cp-f29-hero-col { border-left: 1px solid var(--cp-separador); }
.cp-f29-etiqueta { display: inline-block; padding: 4px 11px; background: var(--cp-violeta-50); border-radius: 999px; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--cp-violeta-700); }
.cp-f29-monto-cifra { margin: 18px 0 0; font-size: 2.5rem; line-height: 1.05; font-weight: 750; letter-spacing: -0.04em; color: var(--cp-tinta); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cp-f29-monto-cifra.es-vacia { font-size: 1.25rem; font-weight: 650; letter-spacing: 0; color: var(--cp-gris); }
.cp-f29-monto-nombre { margin: 7px 0 0; font-size: 0.9375rem; font-weight: 650; color: var(--cp-gris); }
/* El monto es la ESTIMACION del equipo contable, no lo que declaro el
   SII: se dice donde esta el numero, no en una nota al pie. */
.cp-f29-monto-nota { margin: 14px 0 0; font-size: 0.8125rem; line-height: 1.55; color: var(--cp-gris); }
.cp-f29-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.cp-f29-col-titulo { margin: 0 0 16px; font-size: 0.9375rem; font-weight: 700; color: var(--cp-titulo); }
.cp-f29-vacio { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--cp-gris); }
.cp-f29-desglose { list-style: none; margin: 0; padding: 0; }
.cp-f29-desglose-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--cp-separador); }
.cp-f29-desglose-nombre { display: block; font-size: 0.875rem; font-weight: 650; color: var(--cp-tinta); }
/* El (i) de cada línea, al lado del nombre (pedido del usuario, 19/9/2026).
   Su tarjeta va con posición fija (la ubica cpF29UbicarInfo): el cuadro
   del F29 recorta lo que se sale. */
.cp-f29-desglose-titulo { display: flex; align-items: center; gap: 5px; }
.cp-f29-desglose-titulo .cp-f29-desglose-nombre { display: inline; }
.cp-f29-info { flex: none; width: 20px; height: 20px; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--cp-gris); cursor: pointer; }
.cp-f29-info svg { width: 15px; height: 15px; }
.cp-f29-info:hover, .cp-f29-info[aria-expanded="true"] { color: var(--cp-violeta-700); background: var(--cp-violeta-50); }
.cp-f29-info:focus-visible { outline: 2px solid var(--cp-violeta-600); outline-offset: 1px; }
.cp-f29-info-caja { position: fixed; z-index: 60; display: grid; gap: 10px; padding: 14px 16px; text-align: left; white-space: normal; font-size: 0.8125rem; font-weight: 500; line-height: 1.45; color: var(--cp-tinta); background: #fff; border: 1px solid var(--cp-linea); border-radius: 12px; box-shadow: 0 14px 34px rgba(7, 27, 53, 0.16); }
.cp-f29-info-caja[hidden] { display: none; }
/* Con tope de alto (lo pone cpF29UbicarInfo) se desplaza adentro. La que
   abre el mouse al pasar no recibe el puntero: si no, tapaba el (i) de la
   línea siguiente. La fijada con clic sí (se puede seleccionar el texto). */
.cp-f29-info-caja { overflow-y: auto; overscroll-behavior: contain; }
.cp-f29-info-caja:not(.es-fijada) { pointer-events: none; }
.cp-f29-info-titulo { display: block; font-size: 0.875rem; font-weight: 750; color: var(--cp-tinta); }
.cp-f29-info-bloque { display: grid; gap: 2px; }
.cp-f29-info-rotulo { display: block; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cp-gris); }
.cp-f29-info-texto { display: block; }
.cp-f29-desglose-ayuda { font-size: 0.75rem; color: var(--cp-gris); }
/* Un dato corto pegado al nombre de la línea: la tasa del PPM. */
.cp-f29-desglose-junto { padding: 1px 7px; border-radius: 999px; background: var(--cp-violeta-50); font-size: 0.75rem; font-weight: 700; line-height: 1.4; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--cp-violeta-700); }
.cp-f29-desglose-monto { font-size: 0.9375rem; font-weight: 750; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--cp-tinta); }
.cp-f29-desglose-fila.es-resta .cp-f29-desglose-monto { color: var(--cp-ok-tinta); }
.cp-f29-desglose-fila.es-subtotal .cp-f29-desglose-nombre { font-weight: 750; }
/* Una línea que la hoja no trae no se pinta como monto (ni en el verde de
   las restas): "Sin dato" en gris, como en el resumen. */
.cp-f29-desglose-fila .cp-f29-desglose-monto.es-vacia { font-weight: 600; color: var(--cp-gris); }
/* Una línea en $0 que se muestra igual (el impuesto único que la hoja no
   trae): se ve, pero sin el peso de un monto. */
.cp-f29-desglose-fila .cp-f29-desglose-monto.es-cero { font-weight: 600; color: var(--cp-gris); }
/* Lo que el mes anterior declaró y este período no trae, debajo de su
   línea. Con el icono y el texto: no sólo el color. */
.cp-f29-desglose-nota { display: flex; align-items: flex-start; gap: 5px; margin-top: 4px; font-size: 0.75rem; font-weight: 600; line-height: 1.4; color: var(--cp-aviso-tinta); }
.cp-f29-desglose-nota svg { width: 13px; height: 13px; flex: none; margin-top: 1px; }
/* Las líneas que se pueden corregir llevan el lápiz a la IZQUIERDA del
   monto (pedido del usuario, 19/9/2026): los montos siguen alineados a la
   derecha con los de las otras líneas. El formulario va debajo, a lo
   ancho de la línea. El orden del DOM no cambia (monto, lápiz): sólo la
   posición en la grilla, y el monto no recibe foco. */
.cp-f29-desglose-fila.es-editable { grid-template-columns: minmax(0, 1fr) auto auto; }
.cp-f29-desglose-fila.es-editable > :first-child { grid-column: 1; grid-row: 1; }
.cp-f29-desglose-fila.es-editable > .cp-f29-editar { grid-column: 2; grid-row: 1; }
.cp-f29-desglose-fila.es-editable > .cp-f29-desglose-monto { grid-column: 3; grid-row: 1; }
.cp-f29-desglose-fila.es-editable > .cp-f29-editor { grid-row: 2; }
.cp-f29-editar { align-self: start; margin-top: -4px; width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 1px solid var(--cp-linea); border-radius: 8px; background: #fff; color: var(--cp-gris); cursor: pointer; }
.cp-f29-editar svg { width: 14px; height: 14px; }
.cp-f29-editar:hover, .cp-f29-editar[aria-expanded="true"] { color: var(--cp-violeta-700); border-color: var(--cp-violeta-200); background: var(--cp-violeta-50); }
.cp-f29-editor { grid-column: 1 / -1; display: grid; gap: 8px; margin-top: 2px; padding: 12px 14px; border: 1px solid var(--cp-linea); border-radius: 10px; background: var(--cp-superficie); }
.cp-f29-editor[hidden] { display: none; }
.cp-f29-editor label { font-size: 0.8125rem; font-weight: 650; color: var(--cp-tinta); }
.cp-f29-editor-campo { display: flex; align-items: center; gap: 6px; font-weight: 650; color: var(--cp-gris); }
.cp-f29-editor-campo input { width: 160px; max-width: 100%; height: 36px; padding: 0 10px; font: inherit; font-size: 0.875rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--cp-tinta); background: #fff; border: 1px solid var(--cp-linea); border-radius: var(--cp-r-sm); }
.cp-f29-editor-ayuda { margin: 0; font-size: 0.75rem; color: var(--cp-gris); }
.cp-f29-editor .cp-error { margin: 0; }
.cp-f29-editor-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.cp-f29-desglose-total { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 14px; padding: 13px 0 0; }
.cp-f29-desglose-total b { font-size: 0.9375rem; font-weight: 800; color: var(--cp-tinta); }
.cp-f29-desglose-total > .cp-money { font-size: 1.125rem; font-weight: 800; color: var(--cp-tinta); white-space: nowrap; }
/* Cuando las lineas no explican el total, la frase que lo dice va donde
   iria "Total a pagar", con la misma separacion. */
.cp-f29-desglose + .cp-f29-vacio { padding-top: 13px; }
.cp-f29-pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.cp-f29-paso { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: start; gap: 14px; }
/* El color no es lo unico que distingue un paso cumplido: el cumplido
   lleva tilde (el pendiente no) y el lector de pantalla oye "Cumplido" o
   "Pendiente" antes del titulo. */
.cp-f29-marca { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; border: 2px solid #E4E7EC; background: #fff; color: #fff; }
.cp-f29-marca svg { width: 11px; height: 11px; stroke-width: 3.5; }
.cp-f29-paso.es-pendiente .cp-f29-marca svg { opacity: 0; }
.cp-f29-paso.es-hecho .cp-f29-marca { background: var(--cp-verde); border-color: var(--cp-verde); }
.cp-f29-paso-titulo { display: block; font-size: 0.875rem; font-weight: 700; color: var(--cp-titulo); }
.cp-f29-paso.es-pendiente .cp-f29-paso-titulo { color: var(--cp-gris); }
.cp-f29-paso-detalle { font-size: 0.8125rem; line-height: 1.45; color: var(--cp-gris); }
/* En --cp-gris y no en el #7C8DB5 del boceto: ese no llega a AA como
   texto (3,3:1). */
.cp-f29-actualizado { margin: 18px 0 0; font-size: 0.75rem; color: var(--cp-gris); }
/* El estado del período va debajo del total, en la primera columna, con
   su línea de separación (pedido del usuario, 13/10/2026). */
.cp-f29-estado { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--cp-separador); }
/* ---- el Formulario 29 mes a mes (cpF29Pagos), en la tercera columna ----
   Barras con el dibujo de las de Compras y Ventas (.cp-barras, sus guías y
   su eje). Llena: pago registrado o sin monto; clara: pago sin confirmar;
   borde punteado: la estimación del mes que todavía no se declaró. */
.cp-f29-pagos-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cp-f29-pagos-cab span { font-size: 0.75rem; color: var(--cp-gris); white-space: nowrap; }
.cp-f29-pagos .cp-grafico-caja { display: block; }
.cp-f29-barra.es-pagado { fill: var(--cp-violeta-500); }
.cp-f29-barra.es-pendiente { fill: var(--cp-violeta-200); }
.cp-f29-barra.es-estimacion { fill: var(--cp-violeta-50); stroke: var(--cp-violeta-500); stroke-width: 1.5; stroke-dasharray: 4 3; }
.cp-f29-barra.es-recorrido { stroke: var(--cp-violeta-700); stroke-width: 2; stroke-dasharray: none; }
/* Donde cambia el año: una rayita gris y el año que empieza. */
.cp-f29-corte { stroke: var(--cp-gris); stroke-opacity: 0.5; stroke-width: 1; stroke-dasharray: 3 4; }
.cp-f29-corte-anio { font-size: 10px; font-weight: 650; fill: var(--cp-gris); font-variant-numeric: tabular-nums; }
.cp-rcv-eje.es-actual, .cp-rcv-eje.es-recorrido { fill: var(--cp-tinta); font-weight: 700; }
.cp-f29-pagos-leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 0.75rem; color: var(--cp-gris); }
.cp-f29-pagos-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.cp-f29-muestra { width: 10px; height: 10px; flex: none; border-radius: 3px; }
.cp-f29-muestra.es-pagado { background: var(--cp-violeta-500); }
.cp-f29-muestra.es-pendiente { background: var(--cp-violeta-200); }
.cp-f29-muestra.es-estimacion { background: var(--cp-violeta-50); box-shadow: inset 0 0 0 1px var(--cp-violeta-500); }
.cp-f29-pagos-cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--cp-separador); }
.cp-f29-pagos-cifras dt { font-size: 0.75rem; color: var(--cp-gris); }
.cp-f29-pagos-cifras dd { margin: 3px 0 0; font-size: 1rem; font-weight: 750; color: var(--cp-tinta); }
.cp-f29-seccion { margin: 12px 0 0; }
.cp-f29-seccion-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
/* `.cp-card h2` y no la clase sola: `.cp-card h2 { font-size: 1.05rem;
   color: var(--cp-navy) }` (arriba en esta hoja) pesa 0,1,1 y le ganaba a
   una clase sola (0,1,0). "Próximos pasos" salía en 16,8px y azul marino,
   más chico que los demás títulos de sección (18px, --cp-titulo). Mismo arreglo que
   `.cp-card h2.cp-rcv-analisis-h`. */
.cp-f29-seccion-cab h2, .cp-card h2.cp-f29-seccion-titulo { margin: 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.02em; color: var(--cp-titulo); }
.cp-card h2.cp-f29-seccion-titulo { margin-bottom: 14px; }
.cp-f29-seccion-cab span { font-size: 0.8125rem; color: var(--cp-gris); }

/* min(300px, 100%): a 360px la tarjeta mide menos de 300 por dentro, y una
   columna de 300 fijos correria la pagina hacia el costado. */
.cp-f29-avisos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 10px; }
.cp-f29-aviso { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 11px; }
.cp-f29-aviso.es-aviso { background: var(--cp-aviso-suave); border: 1px solid var(--cp-aviso-borde); border-left: 3px solid var(--cp-aviso-barra); }
.cp-f29-aviso.es-info { background: var(--cp-info-suave); border: 1px solid var(--cp-linea); border-left: 3px solid var(--cp-violeta-600); }
.cp-f29-aviso b { display: block; font-size: 0.9375rem; font-weight: 700; color: var(--cp-titulo); }
.cp-f29-aviso span { font-size: 0.875rem; line-height: 1.5; color: var(--cp-gris); }

/* Los formularios compactos: una fila por mes, con la misma pieza de PDF y
   el mismo botón de bajar que la lista de balances. */
.cp-f29-compactos-cab { align-items: flex-start; flex-wrap: wrap; }
.cp-f29-compactos-nota { margin: 4px 0 0; font-size: 0.8125rem; line-height: 1.45; color: var(--cp-gris); }
.cp-f29-anios { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-f29-compactos-lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--cp-separador); }
.cp-f29-compacto {
  display: grid; grid-template-columns: 38px minmax(0, 1fr) minmax(130px, auto) minmax(150px, auto) 36px;
  align-items: center; gap: 16px; padding: 12px 10px; border-bottom: 1px solid var(--cp-separador);
}
.cp-f29-compacto:last-child { border-bottom: none; }
/* El mes que se está mirando arriba: fondo suave y una barra, no sólo el
   color (y el lector de pantalla lo oye por aria-current). */
/* El mes que se está mirando arriba: sólo el fondo suave. Sin el palito
   morado de la izquierda (pedido del usuario, 20/9/2026). Que sea el
   actual no lo dice sólo el color: la fila lleva aria-current y el texto
   "(el período que estás viendo)" para el lector de pantalla. */
.cp-f29-compacto.es-actual { background: var(--cp-violeta-50); border-radius: 10px; }
.cp-f29-compacto-nombre { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cp-f29-compacto-nombre b { font-size: 0.9375rem; font-weight: 700; color: var(--cp-tinta); }
.cp-f29-compacto-nombre > span { font-size: 0.8125rem; color: var(--cp-gris); }
.cp-f29-compacto-total { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.cp-f29-compacto-total span { font-size: 0.75rem; color: var(--cp-gris); white-space: nowrap; }
.cp-f29-compacto-total b { font-size: 0.9375rem; font-weight: 750; color: var(--cp-tinta); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cp-f29-compacto-total b.es-vacia { font-weight: 600; color: var(--cp-gris); }
.cp-f29-compacto-estado { display: flex; justify-content: flex-end; }

/* =====================================================================
   Inicio del portal: "Resumen general".

   Escala calibrada contra el boceto aprobado (Inicio User.png, 1536x1024):
   riel 92, topbar 64 (el boceto original decia 268 y 98: el armazon se
   rediseno despues), contenido a ancho completo, tarjetas de dos
   columnas y paneles de la misma altura. Desde el menu lateral nuevo el
   menu mide 264 expandido (96 plegado): el contenido es mas angosto a
   1536, y la franja y la grilla se reacomodan solas (auto-fit).

   Los tamanos van en rem a proposito: el boceto esta en px, pero un px
   fijo ignora a quien agranda la letra del navegador. Con la raiz en 16px
   la equivalencia es exacta (2.5rem = 40px).

   Fondos de color SOLO en iconos, estados y porcentajes - nunca la
   tarjeta entera pintada. Numeros tabulares en todo lo que sea plata,
   para que dos periodos se puedan comparar de un vistazo.
   ===================================================================== */
.cp-money,
.cp-grafico-eje { font-variant-numeric: tabular-nums; }

.cp-punto { width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; }
.cp-punto-ok { background: #20A879; }
.cp-punto-warn { background: #D98A22; }
.cp-punto-muted { background: #9AA6B8; }
.cp-punto-ventas { background: var(--cp-violeta-500); }
.cp-punto-compras { background: var(--cp-turquesa); }

/* ---- la pastilla de estado ---- */
/* UNA sola clase con cuatro tonos, en vez de una familia por pantalla. El
   tono NUNCA es el único indicador: el texto dice siempre qué pasa, y el
   borde del tono la separa del fondo para quien no distingue el color. */
.cp-pastilla {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border: 1px solid transparent; border-radius: 999px;
  font-size: 0.75rem; font-weight: 700; line-height: 1.3; white-space: nowrap;
}
/* `nowrap`: "Pago sin confirmar · diciembre" en una columna angosta se
   partía en dos líneas y la pastilla crecía a lo alto. */
.cp-pastilla-ico { width: 12px; height: 12px; flex: none; stroke-width: 3; }
.cp-pastilla-ok { color: var(--cp-ok-tinta); background: var(--cp-ok-fondo); border-color: var(--cp-ok-borde); }
.cp-pastilla-aviso { color: var(--cp-aviso-tinta); background: var(--cp-aviso-fondo); border-color: var(--cp-aviso-borde); }
.cp-pastilla-info { color: var(--cp-info-tinta); background: var(--cp-info-fondo); border-color: var(--cp-info-borde); }
.cp-pastilla-violeta { color: var(--cp-violeta-700); background: var(--cp-violeta-50); border-color: var(--cp-violeta-200); }

/* ---- la franja de métricas ---- */
/* Reemplaza a las cuatro tarjetas de 208px de alto, que gastaban media
   pantalla en iconos y en botones "Revisar →" para repetir lo que el menú
   lateral ya ofrece. Una sola caja, cuatro celdas, todas con la misma
   forma: rótulo, cifra, pies.

   El separador es una SOMBRA y no un borde: la de la primera columna de
   cada fila queda fuera del recorte y no se ve, así que la franja puede
   pasar a dos filas sin que quede una línea suelta al borde. */
.cp-franja {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  align-items: stretch; margin: 0 0 12px;
  background: #fff; border: 1px solid var(--cp-linea); border-radius: 14px;
  overflow: hidden; box-shadow: var(--cp-sombra);
}
.cp-franja-ancha { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.cp-franja-celda {
  min-width: 0; padding: 14px 18px;
  box-shadow: -1px 0 0 var(--cp-separador), 0 -1px 0 var(--cp-separador);
}
.cp-franja-rotulo {
  margin: 0 0 5px; font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--cp-gris);
}
/* `nowrap` y letra más chica a 1279px: un monto de nueve dígitos partido a
   la mitad se lee como otro monto. */
.cp-franja-cifra {
  margin: 0; font-size: 1.5rem; line-height: 1.1; font-weight: 750;
  letter-spacing: -0.03em; color: var(--cp-tinta);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.cp-franja-cifra.es-texto { font-variant-numeric: normal; }
/* "Sin dato" no es una cifra: va más chico y en gris, para que no se lea
   como un número. */
.cp-franja-cifra.es-vacia { font-size: 1.125rem; font-weight: 650; letter-spacing: 0; color: var(--cp-gris); }
.cp-franja-pie { margin: 5px 0 0; font-size: 0.8125rem; line-height: 1.45; color: var(--cp-gris); }
.cp-franja-pie.es-ok { color: var(--cp-ok-tinta); font-weight: 600; }
.cp-franja-pie.es-aviso { color: var(--cp-aviso-tinta); font-weight: 600; }
/* El MISMO alto mínimo que una celda con dato, para que la franja no
   cambie de alto al llegar la respuesta: 96px es lo que mide una celda de
   rótulo, cifra y un pie (medido a 1536 con Plus Jakarta Sans). */
.cp-franja-celda, .cp-franja-esqueleto .cp-franja-celda { min-height: 96px; }
.cp-franja-esqueleto .cp-franja-celda {
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
}
/* En el Inicio las celdas son de rótulo y cifra, SIN pie (pedido del
   usuario, 13/10/2026: lo de abajo quedó como texto de ayuda de la celda).
   Son más bajas, y su esqueleto mide lo mismo: la franja no salta al llegar
   el dato. Compras y Ventas siguen con sus tres renglones y sus 96px. */
#cp-view-dashboard .cp-franja-celda { min-height: 75px; }

/* ---- grafico y actividad: los dos paneles de abajo ---- */
/* `stretch` y no `start`: el boceto los tiene terminando a la misma
   altura, y con `start` el mas corto dejaba un escalon. */
.cp-grid-baja {
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 12px; margin-top: 0; align-items: stretch;
}
/* Con un solo panel (el plan no trae Compras ni Ventas, o no trae el F29),
   ese panel va a todo el ancho (dashboard.js, cpPintarInicio). */
.cp-grid-baja.es-una { grid-template-columns: minmax(0, 1fr); }
.cp-grid-baja .cp-card { margin: 0; padding: 18px 20px; }
.cp-grid-baja > .cp-card { display: flex; flex-direction: column; }
.cp-grid-baja .cp-card-head { align-items: baseline; margin-bottom: 6px; }
.cp-grid-baja .cp-card-head h2, .cp-inicio-lateral h2 { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.02em; color: var(--cp-titulo); }
.cp-card-head-nota { font-size: 0.8125rem; color: var(--cp-gris); white-space: nowrap; }
/* La columna derecha apila actividad y fechas, y la de fechas se estira
   (`flex: 1`) hasta que las DOS columnas terminan a la misma altura. Sin
   eso, la corta dejaba un escalón contra el gráfico. */
.cp-inicio-lateral { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cp-inicio-lateral > .cp-fechas { flex: 1; }
.cp-card-grafico { min-width: 0; }
/* ---- el Inicio entra en la pantalla (escritorio) ----
   Pedido del usuario, 13/10/2026: "las configuraciones más que nada son
   para que no tengamos que scrollear en la página". Con ancho y alto de
   escritorio, la vista mide justo lo que queda debajo de la barra
   superior: el encabezado y la franja de cifras miden lo suyo y los dos
   paneles de abajo se reparten el resto. Lo que no cabe se desplaza DENTRO
   de su tarjeta -la actividad, los pagos, el gráfico con su tabla abierta-,
   no la página. Con menos alto, o con el menú en cajón, todo vuelve a fluir
   hacia abajo como siempre. Sólo el Inicio de UNA empresa (el que tiene
   #cp-inicio-cuerpo): el tablero de varias empresas no. */
@media (min-width: 1100px) and (min-height: 820px) {
  #cp-view-dashboard:not(.cp-hidden):has(> #cp-inicio-cuerpo) {
    display: flex; flex-direction: column;
    height: calc(100dvh - var(--cp-topbar-alto) - 18px - var(--aire-del-pie, var(--aire-natural)));
  }
  #cp-view-dashboard > #cp-inicio-cuerpo { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  #cp-inicio-cuerpo > .cp-grid-baja { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); }
  /* La franja de cifras mide lo suyo (24/10/2026, captura del dueño: el
     monto de Compras quedaba pegado al borde de abajo). Con un aviso arriba
     (el de "sin plan") faltaba alto, y la franja -que recorta, overflow
     hidden- se achicaba junto con los paneles y se comía su borde de abajo.
     Ahora el que cede alto es el gráfico. */
  #cp-inicio-cuerpo > .cp-franja { flex: none; }
  /* NINGUNA TARJETA ES UNA CAJA QUE SE DESPLAZA (el usuario, 13/10/2026, con
     los pagos corridos hacia un lado en la captura: "me está dejando moverlo
     con el mousepad"). Con `overflow: auto` una tarjeta se puede arrastrar
     con el panel táctil aunque su contenido quepa: alcanza una fracción de
     píxel, o el rebote elástico del navegador. Acá nada lleva `overflow`
     que desplace. La única excepción es el gráfico mientras tiene abierta su
     tabla de montos, que no cabe de otra forma. */
  #cp-inicio-cuerpo > .cp-grid-baja > .cp-card-grafico { min-height: 0; }
  #cp-inicio-cuerpo > .cp-grid-baja > .cp-card-grafico:has(details[open]) { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--cp-linea) transparent; }
  /* El gráfico se achica para caber en el alto que le toca (nunca menos de 140). */
  #cp-inicio-cuerpo .cp-card-grafico .cp-grafico-caja { min-height: 140px; }
  #cp-inicio-cuerpo .cp-card-grafico .cp-grafico { max-height: 100%; }
  #cp-inicio-cuerpo .cp-inicio-lateral { min-height: 0; }
  /* SIN AIRE Y SIN BARRAS (pedido del usuario, 13/10/2026: "ahora tiene
     demasiado aire, ajústalo para que quede perfecto, ya no es necesario
     que se pueda scrollear"). Los pagos miden lo que mide su contenido: ni
     queda un hueco debajo del último ni les falta lugar. Todo el alto que
     sobra es de la actividad reciente, que muestra las filas que caben
     ENTERAS (cpActividadQueCabe, dashboard.js, esconde las demás) y las
     estira para llenar su tarjeta. Nada se desplaza por dentro: si la
     pantalla es tan baja que no caben los pagos y dos filas de actividad,
     la columna sigue hacia abajo y se desplaza la PÁGINA, como en cualquier
     pantalla baja. */
  /* El alto de la tarjeta y de la lista sale del LUGAR que queda, no de
     cuántas filas trae (base 0): si saliera del contenido, las cinco filas
     empujarían a los pagos. El mínimo de la tarjeta son su título y dos
     filas (14 + 27 + 8 + 2 x 60 + 14, y un resto). */
  #cp-inicio-cuerpo .cp-inicio-lateral > .cp-actividad-card { flex: 1 1 0; min-height: 190px; display: flex; flex-direction: column; }
  #cp-inicio-cuerpo .cp-actividad {
    flex: 1 1 0; min-height: 0; max-height: none;
    display: flex; flex-direction: column; overflow: clip; overscroll-behavior: auto; scrollbar-gutter: auto;
  }
  #cp-inicio-cuerpo .cp-inicio-lateral > .cp-fechas { flex: 0 0 auto; }
  /* Las dos tarjetas de la derecha van más apretadas, para que los Pagos
     de siempre -un formulario y tres pagos próximos- entren ENTEROS, sin
     barra. A 1920x931 les faltaban 8 px y la barra aparecía (el usuario,
     13/10/2026: "ajústalo porque literal está justo justo"); así quedan
     unos 60 px de holgura ahí, y entra también con 50 px menos de alto. */
  #cp-inicio-cuerpo .cp-inicio-lateral > .cp-card { padding-top: 14px; padding-bottom: 14px; }
  #cp-inicio-cuerpo .cp-actividad-card h2 { margin-bottom: 8px; }
  #cp-inicio-cuerpo .cp-actividad { --cp-actividad-fila: 60px; }
  #cp-inicio-cuerpo .cp-actividad-fila { flex: 1 1 var(--cp-actividad-fila); max-height: 100px; padding: 8px 0; }
  #cp-inicio-cuerpo .cp-pagos-sub { margin: 10px 0 6px; }
  #cp-inicio-cuerpo .cp-fechas-lista { gap: 6px; }
  #cp-inicio-cuerpo .cp-fecha-item { padding: 8px 12px; }
}

.cp-grafico-leyenda { display: flex; gap: 20px; margin: 8px 0 6px; font-size: 0.8125rem; color: var(--cp-gris); }
.cp-grafico-leyenda span { display: inline-flex; align-items: center; gap: 7px; }

.cp-grafico-caja { position: relative; width: 100%; min-width: 0; flex: 1; display: flex; align-items: center; }
/* `overflow: visible` para que no se recorte el rotulo del ULTIMO mes: el
   punto del mes en curso va en x=690 de un lienzo de 700, y "Sep" centrado
   ahi se sale dos pixeles. Sobra lugar: la tarjeta tiene 20px de padding.
   Lo unico que puede asomarse son esos rotulos; las lineas y las areas
   terminan en x=690. */
.cp-grafico { width: 100%; height: auto; display: block; overflow: visible; }
/* Retícula tenue y discontinua, como el boceto: sólo las horizontales,
   que marcan los montos. Las verticales las dibujaba el gráfico viejo. */
.cp-grafico-guia { stroke: var(--cp-guia); stroke-width: 1; stroke-dasharray: 4 5; }
/* La del cero es la línea de base del eje: va entera. */
.cp-grafico-guia-base { stroke-dasharray: none; }
.cp-grafico-eje { font-size: 12px; fill: var(--cp-gris); }
/* El mes abierto se marca también en el rótulo del eje, no sólo con el
   trazo punteado. */
.cp-grafico-eje.es-abierto { fill: var(--cp-tinta); font-weight: 700; }
.cp-grafico-nota { margin: 8px 0 0; font-size: 0.8125rem; line-height: 1.5; color: var(--cp-gris); }
/* ---- el gráfico se recorre (cpGraficoInteractivo) ----
   Una franja invisible por mes recibe el cursor; al pasar se marca el mes
   con una línea, se encienden sus dos puntos con un halo y aparece la
   ficha con los montos completos. */
.cp-grafico-franja { fill: transparent; pointer-events: all; }
.cp-grafico-foco { display: none; }
.cp-grafico.es-recorrido .cp-grafico-foco { display: inline; }
.cp-grafico-cursor { stroke: var(--cp-gris); stroke-opacity: 0.4; stroke-width: 1.2; stroke-dasharray: 3 4; }
.cp-grafico-halo { stroke: none; fill-opacity: 0.22; }
.cp-halo-ventas { fill: var(--cp-violeta-500); }
.cp-halo-compras { fill: var(--cp-turquesa); }
.cp-grafico-eje.es-recorrido { fill: var(--cp-tinta); font-weight: 700; }
.cp-grafico:focus { outline: none; }
.cp-grafico:focus-visible { outline: 2px solid var(--cp-foco); outline-offset: 6px; border-radius: 8px; }
.cp-grafico-ficha {
  position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none;
  min-width: 196px; padding: 10px 13px 11px;
  display: grid; gap: 7px;
  background: #fff; border: 1px solid var(--cp-linea); border-radius: 12px;
  box-shadow: 0 12px 30px rgba(10, 19, 56, 0.14), 0 2px 6px rgba(10, 19, 56, 0.06);
  font-size: 0.8125rem; line-height: 1.3; white-space: nowrap; color: var(--cp-tinta);
}
.cp-grafico-ficha[hidden], .cp-grafico-ficha-fila[hidden] { display: none; }
.cp-grafico-ficha p { margin: 0; }
.cp-grafico-ficha-mes { display: flex; align-items: center; gap: 8px; padding-bottom: 7px; border-bottom: 1px solid var(--cp-linea); }
.cp-grafico-ficha-mes b { font-weight: 750; }
.cp-grafico-ficha-nota { padding: 1px 7px; border-radius: 999px; background: var(--cp-aviso-fondo); color: var(--cp-aviso-tinta); font-size: 0.6875rem; font-weight: 700; }
.cp-grafico-ficha-nota:empty { display: none; }
.cp-grafico-ficha-fila { display: flex; align-items: center; gap: 8px; }
.cp-grafico-ficha-fila span { color: var(--cp-gris); }
.cp-grafico-ficha-fila b { margin-left: auto; padding-left: 20px; font-weight: 750; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
  .cp-grafico-ficha { transition: left 90ms ease-out, top 90ms ease-out; animation: cp-ficha-aparece 140ms ease-out; }
}
@keyframes cp-ficha-aparece { from { opacity: 0; transform: translateY(4px) scale(0.98); } }
.cp-linea-ventas { fill: none; stroke: var(--cp-violeta-500); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.cp-linea-compras { fill: none; stroke: var(--cp-turquesa); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
/* El tramo de un período con datos parciales (el mes abierto, o un mes que
   se leyó antes de cerrar): punteado y más tenue, para que no se lea como
   un dato cerrado. La palabra la pone la nota al pie. */
.cp-linea-parcial { stroke-dasharray: 6 5; opacity: 0.6; }
/* Puntos solidos con un aro del color de la superficie: se distinguen
   aunque las dos series se crucen. */
.cp-linea-ventas-punto { fill: var(--cp-violeta-500); stroke: #fff; stroke-width: 2; }
.cp-linea-compras-punto { fill: var(--cp-turquesa); stroke: #fff; stroke-width: 2; }
/* El punto de un período parcial va HUECO: se distingue del sólido por la
   forma, no por el color. */
.cp-linea-ventas-punto.cp-punto-abierto { fill: #fff; stroke: var(--cp-violeta-500); stroke-width: 3; }
.cp-linea-compras-punto.cp-punto-abierto { fill: #fff; stroke: var(--cp-turquesa); stroke-width: 3; }
/* El area es relleno: nunca se lleva el mouse, para que el <title> de
   los puntos aparezca aunque un area quede por encima. */
.cp-area { stroke: none; pointer-events: none; }
/* Los colores del degradado salen de los mismos tokens que las lineas:
   stop-color y stop-opacity son propiedades CSS, asi que no hay que
   repetir el hexadecimal dentro del SVG. */
.cp-area-ventas-arriba { stop-color: var(--cp-violeta-500); stop-opacity: 0.20; }
.cp-area-ventas-abajo { stop-color: var(--cp-violeta-500); stop-opacity: 0; }
.cp-area-compras-arriba { stop-color: var(--cp-turquesa); stop-opacity: 0.22; }
.cp-area-compras-abajo { stop-color: var(--cp-turquesa); stop-opacity: 0; }

/* La tabla no es un extra: es la unica forma de ver el monto exacto sin
   depender de pasar el mouse por encima. */
.cp-grafico-tabla { margin-top: 12px; }
.cp-grafico-tabla summary { font-size: 0.9375rem; font-weight: 650; color: var(--cp-violeta-600); cursor: pointer; }
.cp-grafico-tabla table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 0.9375rem; }
.cp-grafico-tabla th, .cp-grafico-tabla td { padding: 8px; border-bottom: 1px solid var(--cp-linea); text-align: right; }
.cp-grafico-tabla thead th, .cp-grafico-tabla tbody th { text-align: left; font-weight: 650; color: var(--cp-tinta); }
.cp-grafico-tabla thead th { color: var(--cp-gris); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.05em; }

.cp-actividad-card h2 { margin: 0 0 14px; }
/* TRES filas a la vista; las demás se desplazan DENTRO de la tarjeta
   (pedido del usuario, 13/10/2026), sin arrastrar la página cuando se llega
   al final. La barra es angosta y su lugar está reservado: las pastillas
   de estado no se corren cuando aparece. */
.cp-actividad {
  --cp-actividad-fila: 63px;
  list-style: none; margin: 0; padding: 0;
  max-height: calc(3 * var(--cp-actividad-fila)); overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--cp-linea) transparent; scrollbar-gutter: stable;
}
/* Tres columnas fijas: la sigla, el texto y el estado, en filas de 63px
   (la sigla de 36, el título y la fecha debajo). */
.cp-actividad-fila {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center; gap: 12px;
  min-height: var(--cp-actividad-fila); box-sizing: border-box;
  padding: 10px 0; border-bottom: 1px solid var(--cp-separador);
}
.cp-actividad-fila:last-child, .cp-actividad-fila.es-ultima { border-bottom: none; }
/* `hidden` solo no alcanza: la fila es una grilla y su `display` le gana. */
.cp-actividad-fila[hidden] { display: none; }
/* La sigla dice QUE es el evento en tres letras (F29 / BAL). Va
   aria-hidden: el titulo de al lado ya lo dice con todas las palabras, y
   leer "efe dos nueve" antes de cada fila sería ruido. */
.cp-actividad-sigla {
  width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: 10px; background: var(--cp-violeta-50); color: var(--cp-violeta-600);
  font-size: 0.6875rem; font-weight: 800;
}
.cp-actividad-texto { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
/* Un titulo largo baja de linea en vez de cortarse: lo que dice el evento
   es mas importante que la altura de la fila. */
.cp-actividad-texto b { font-size: 0.875rem; font-weight: 650; line-height: 1.35; color: var(--cp-tinta); overflow-wrap: anywhere; }
.cp-actividad-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 0.8125rem; color: var(--cp-gris); }
.cp-actividad-sep { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.6; }
.cp-actividad-estado { flex: none; white-space: nowrap; }

/* ---- la tarjeta de fechas programadas ---- */
/* Ya no es una franja a lo ancho debajo de todo: vive en la columna
   derecha, apilada bajo la actividad, y se estira para que las dos
   columnas terminen juntas. */
.cp-fechas { display: block; padding: 18px 20px; margin: 0; }
.cp-fechas h2 { margin: 0 0 4px; }
.cp-fechas .cp-nota { margin: 0 0 14px; font-size: 0.8125rem; line-height: normal; color: var(--cp-gris); }
.cp-fechas-vacio { margin: 0; font-size: 0.875rem; color: var(--cp-gris); }
.cp-fechas-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cp-fecha-item {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center; gap: 12px; padding: 11px 13px;
  background: var(--cp-superficie); border: 1px solid var(--cp-linea); border-radius: 11px;
}
.cp-fecha-icono { width: 34px; height: 34px; flex: none; border-radius: 9px; display: grid; place-items: center; background: #fff; color: var(--cp-violeta-600); border: 1px solid var(--cp-linea); }
.cp-fecha-icono svg { width: 17px; height: 17px; }
/* 18 + 3 + 18: la columna de texto mide los 39px del diseno (antes 34, el
   periodo quedaba pegado al titulo). */
.cp-fecha-texto { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cp-fecha-texto b { font-size: 0.875rem; font-weight: 650; color: var(--cp-tinta); }
.cp-fecha-texto span { font-size: 0.8125rem; line-height: 1.4; color: var(--cp-gris); }
.cp-fecha-dia { font-size: 0.875rem; font-weight: 750; color: var(--cp-tinta); white-space: nowrap; }
/* "Hoy" se dice con palabras, no solo con otro color. */
.cp-fecha-dia.es-hoy { color: var(--cp-aviso-tinta); }
/* La tarjeta de pagos: "Último formulario" y "Próximos pagos" como
   subtítulos; el monto declarado a la derecha; el pagado con su tilde
   verde; un F29 vencido sin declarar, en rojo y dicho en palabras. */
.cp-pagos-sub { margin: 14px 0 8px; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--cp-gris); }
.cp-fechas .cp-nota + .cp-pagos-sub { margin-top: 0; }
.cp-fecha-monto { font-size: 0.875rem; font-weight: 750; color: var(--cp-tinta); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cp-fecha-icono.es-ok { color: var(--cp-ok-tinta); }
.cp-fecha-item.es-vencido .cp-fecha-texto span, .cp-fecha-item.es-vencido .cp-fecha-dia { color: var(--cp-danger); }

/* ---- carga y error ---- */
.cp-card-esqueleto { display: flex; flex-direction: column; gap: 12px; justify-content: center; }
/* El esqueleto del F29 conserva las tres columnas del hero (sin esto la
   regla de arriba lo apilaria) y el alto de lo que reemplaza: un hero con
   tres lineas de composicion mide 315px a 1536 y el resumen tributario
   124. Asi, al cambiar de periodo, la pagina no salta cuando llega el dato.
   A <=1099 cada columna va en su fila y guarda su propio alto. */
.cp-f29-hero.cp-card-esqueleto { display: grid; min-height: 315px; }
.cp-f29-hero.cp-card-esqueleto .cp-f29-hero-col { display: flex; flex-direction: column; gap: 14px; }
.cp-f29-seccion.cp-card-esqueleto { min-height: 124px; }
@media (max-width: 1099px) {
  .cp-f29-hero.cp-card-esqueleto .cp-f29-hero-col { min-height: 270px; }
}
.cp-barra { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, #EEF1F6, #F7F9FC, #EEF1F6); background-size: 200% 100%; animation: cp-brillo 1.25s linear infinite; }
.cp-barra-alta { height: 30px; }
/* Las barras del esqueleto tienen el alto de lo que reemplazan: la cifra
   de la franja y una fila de actividad. */
.cp-barra-cifra { height: 26px; }
.cp-barra-fila { height: 22px; }
/* El hueco del grafico guarda su proporcion exacta (700x230), asi que la
   tarjeta no cambia de alto cuando llega el SVG. */
.cp-barra-grafico { height: auto; aspect-ratio: 700 / 230; border-radius: var(--cp-r-md); }
@keyframes cp-brillo { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.cp-card-error { border-color: #F2C5C5; }
.cp-card-error .cp-btn { margin-top: 10px; }
.cp-btn {
  border: 1px solid var(--cp-linea); background: #fff; font-family: inherit;
  padding: 9px 16px; border-radius: var(--cp-r-sm);
  font-size: 0.9375rem; font-weight: 650; color: var(--cp-tinta); cursor: pointer;
}
.cp-btn:hover { background: var(--cp-page); }

/* ---- foco visible en todo lo que se puede usar ---- */
:where(a, button, input, select, textarea, summary, [role="button"], [role="menuitem"]):focus-visible {
  outline: 3px solid var(--cp-foco);
  outline-offset: 3px;
}
/* Dentro del menu lateral, el anillo del diseño del menu: 2px de
   #8B5CF6 a 2px (4.03:1 sobre el azul marino, sobre el 3:1 de SC 1.4.11).
   Cae en los 12px de padding de cada bloque del menu, asi que no lo
   recorta el scroll de .cp-nav. */
.cp-sidebar :where(a, button):focus-visible { outline: 2px solid var(--cp-menu-foco); outline-offset: 2px; }
/* El menú de la cuenta es blanco aun dentro del menú lateral: ahí vale el
   anillo del portal, por dentro de cada opción. */
.cp-sidebar .cp-pop :where(a, button):focus-visible { outline: 2px solid var(--cp-foco); outline-offset: -2px; }

/* ---- responsive ---- */

/* Una cifra de nueve digitos no entra a 1100px con Plus Jakarta Sans en
   750: se achica la letra, NO se parte el numero. */
@media (max-width: 1279px) {
  .cp-franja-cifra { font-size: 1.3125rem; }
}

/* Tablet ancha: la grilla de abajo pasa a una columna. La franja se
   reacomoda sola, por el auto-fit de 210px. */
@media (max-width: 1099px) {
  .cp-grid-baja { grid-template-columns: minmax(0, 1fr); }
  .cp-grid-baja > .cp-card { min-height: 0; }
}

/* Angosto (< 1024px): el menú deja de ocupar columna y es un cajón que se
   abre encima, sobre un velo. Es el menú expandido (264px) entero, con su
   pie. Cerrado queda `visibility: hidden`: fuera
   de la pantalla no alcanza con moverlo, el tabulador seguiría entrando. */
@media (max-width: 1023px) {
  .cp-sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 19;
    width: var(--cp-menu-ancho-expandido); max-width: calc(100vw - 48px);
    transform: translateX(-100%); visibility: hidden;
    transition: transform 200ms cubic-bezier(.4, 0, .2, 1), visibility 0s linear 200ms;
  }
  .cp-menu-abierto .cp-sidebar {
    transform: none; visibility: visible;
    box-shadow: inset -1px 0 0 var(--cp-menu-borde), 24px 0 60px rgba(7, 27, 53, 0.28);
    transition: transform 200ms cubic-bezier(.4, 0, .2, 1);
  }
  .cp-sidebar-inner { height: 100%; }
  /* En el cajón se usa con el dedo: la cruz llega a 36px. */
  .cp-menu-plegar { width: 36px; height: 36px; }
  .cp-menu-btn { display: inline-flex; }
  .cp-main { padding: 18px 16px var(--aire-del-pie, var(--aire-natural)); }
  .cp-topbar { padding: 0 16px; gap: 12px; }
}
/* En el cajón, el botón del pie cierra (una cruz), no pliega: sólo el
   icono, en la columna de los iconos. */
.cp-shell[data-menu="cajon"] .cp-menu-plegar-cerrar { display: none; }
.cp-shell[data-menu="cajon"] .cp-menu-plegar-cajon { display: block; }
.cp-shell[data-menu="cajon"] .cp-menu-plegar-fila { padding-left: 3px; }
.cp-shell[data-menu="cajon"] .cp-menu-plegar { padding: 0; justify-content: center; }
.cp-shell[data-menu="cajon"] .cp-menu-plegar-texto { display: none; }
/* El velo sólo existe con el cajón; en escritorio el menú está fijo y un
   velo oscuro no tendría sentido. */
@media (min-width: 1024px) {
  .cp-sidebar-fondo { display: none; }
}

@media (max-width: 767px) {
  /* La barra se parte en los DOS GRUPOS del diseño, no en piezas sueltas:
     cuando el ancho no da, el grupo derecho entero (la marca del SII) baja
     a una segunda fila, pegado al borde derecho.

     REGRESIÓN ARREGLADA: antes los dos envoltorios se volvían
     `display: contents` y las seis piezas se ordenaban a mano con `order`
     más un `margin-left: auto` en .cp-usuario-wrap. Ese auto se comía el
     espacio libre ANTES del avatar en la primera línea, así que lo clavaba
     pegado al logo (order 1) y empujaba el selector de empresa (order 3) y
     la marca del SII (order 4) a su derecha. Consecuencias medidas entre
     440 y 767px: el menú de usuario —que se ancla con `right: 0` sobre
     .cp-usuario-wrap— se abría en mitad de la barra y tapaba el texto del
     SII, y el nombre de la empresa salía cortado ("CONSTRUCT…") con la
     barra medio vacía.

     Sin `contents` no hay ningún orden que inventar: el DOM ya está en el
     orden del diseño (hamburguesa · logo · buscador … empresa · SII) y el
     corte de línea lo decide el ancho real de cada grupo, no un flex-basis
     adivinado. (El avatar y su menú se fueron de la barra: la identidad
     vive al pie del menú lateral.) */
  .cp-topbar { flex-wrap: wrap; padding: 10px 16px; column-gap: 12px; row-gap: 10px; }
  /* El grupo izquierdo envuelve ADENTRO, y el corte lo decide el ancho real
     del nombre de la empresa, no un breakpoint adivinado: el selector tiene
     `flex-basis: auto`, así que cuando hamburguesa + logo + nombre completo
     ya no entran en una línea, el selector se baja a la suya -donde entra
     entero- en vez de recortarse a diez letras. Con el nombre de la empresa
     más larga del banco (222px de texto) eso pasa abajo de ~520px; con un
     nombre corto, nunca. */
  .cp-topbar-izq { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; column-gap: 12px; row-gap: 10px; }
  /* Contra el borde derecho, esté arriba o abajo. Envuelve adentro: si la
     empresa y la marca del SII no entran juntas, el SII baja a su renglón
     en vez de correr la página. */
  .cp-topbar-right { flex: 1 1 auto; margin-left: auto; gap: 12px; flex-wrap: wrap; justify-content: flex-end; row-gap: 10px; }
  .cp-topbar-sep { display: none; }
  /* El selector crece con su renglón: cuando no entra al lado del logo se
     baja al suyo y ocupa el ancho entero, con 40px de alto para el dedo. */
  .cp-empresa-sel-barra { flex: 1 1 auto; min-width: 0; }
  .cp-empresa-sel-barra .cp-empresa-sel-caja { width: 100%; min-height: 40px; }
  .cp-empresa-sel-barra .cp-empresa-sel-nombre { max-width: none; }
  /* El buscador va en su propio renglón; mientras está vacío no ocupa
     ninguno (ni el hueco de 10px entre renglones). */
  #cp-topbar-buscar { flex-basis: 100%; max-width: none; }
  #cp-topbar-buscar:empty { display: none; }
  /* Con el dedo, 18px de alto es un blanco imposible. */
  .cp-grafico-tabla summary { min-height: 40px; display: inline-flex; align-items: center; gap: 5px; }
  /* Con el dedo y 375px de ancho, el estado no entra en la misma fila que
     el texto: baja a la segunda linea, alineado con el titulo. */
  .cp-actividad-fila { grid-template-columns: 36px minmax(0, 1fr); }
  .cp-actividad-estado { grid-column: 2; justify-self: start; }
  .cp-grafico-tabla table { font-size: 0.875rem; }
  /* A 360px el rotulo del rango ("Enero 2026 - Agosto 2026") no entra en
     una linea y empujaba la pagina 3px a lo ancho. */
  .cp-grid-baja .cp-card-head { flex-wrap: wrap; }
  .cp-card-head-nota { white-space: normal; }
  /* Balances: nombre, fecha y botón no entran en una línea. La fecha baja
     bajo el nombre y el botón se queda a la derecha, en la misma fila. Con
     2 px entre renglones (el gap de 14 es para las columnas): con 14 la
     fecha quedaba suelta, lejos de "Contabilidad". */
  .cp-balances-fila { grid-template-columns: 38px minmax(0, 1fr) auto; row-gap: 2px; }
  .cp-balances-fecha { grid-column: 2; grid-row: 2; }
  /* El título y el conteo tampoco entran juntos: el conteo baja a su
     propia línea en vez de partir los dos en dos renglones. */
  .cp-balances-cabecera { flex-wrap: wrap; row-gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .cp-barra { animation: none; background: #EEF1F6; }
  /* El ancho del menú no anima al plegar, ni el cajón al abrir. */
  .cp-sidebar, .cp-nav-link, .cp-menu-plegar, .cp-menu-cuenta-boton, .cp-menu-cuenta-chevron, .cp-empresa-sel-caja, .cp-empresa-sel-chevron, .cp-skip-link { transition: none; }
  .cp-periodo-flecha, .cp-atajo { transition: none; }
}

/* =====================================================================
   Base compartida del rediseno: la pastilla y la franja de metricas.

   Las dos las usan varias pantallas (Compras, Ventas y el Inicio), asi
   que viven aca y no dentro del bloque de ninguna. UNA sola clase de
   pastilla con cuatro tonos, y UNA sola franja con un modificador de
   ancho: escribir dos juegos de clases para el mismo componente es como
   se desincronizan.
   ===================================================================== */

.cp-pastilla { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid transparent; border-radius: 999px; font-size: 0.75rem; font-weight: 700; line-height: 1.3; white-space: nowrap; }
.cp-pastilla-ico { width: 12px; height: 12px; flex: none; stroke-width: 3; }
/* Todas llevan borde del tono: el color de fondo solo no alcanza para
   distinguirlas de un bloque de texto con fondo. */
.cp-pastilla-ok { background: var(--cp-ok-fondo); border-color: var(--cp-ok-borde); color: var(--cp-ok-tinta); }
.cp-pastilla-aviso { background: var(--cp-aviso-fondo); border-color: var(--cp-aviso-borde); color: var(--cp-aviso-tinta); }
.cp-pastilla-info { background: var(--cp-info-fondo); border-color: var(--cp-info-borde); color: var(--cp-info-tinta); }
.cp-pastilla-violeta { background: var(--cp-violeta-50); border-color: var(--cp-violeta-200); color: var(--cp-violeta-700); }
/* Boton de la fila Revisar: filtra la tabla. */
.cp-pastilla-filtro { gap: 8px; padding: 7px 13px; font: inherit; font-size: 0.8125rem; font-weight: 650; cursor: pointer; }
.cp-pastilla-filtro b { font-weight: 800; font-variant-numeric: tabular-nums; }
/* Activo: un borde interior del mismo color, ademas del icono de tilde.
   El color no puede ser el unico indicador de que el filtro esta puesto. */
.cp-pastilla-filtro[aria-pressed="true"] { box-shadow: inset 0 0 0 1px currentColor; }
.cp-pastilla-quitar { gap: 7px; padding: 7px 13px; background: #fff; border: 1px dashed var(--cp-chevron); font: inherit; font-size: 0.8125rem; font-weight: 650; color: var(--cp-gris); cursor: pointer; }
.cp-pastilla-quitar:hover { background: var(--cp-page); color: var(--cp-tinta); }
.cp-pastilla-quitar .cp-pastilla-ico { width: 11px; height: 11px; stroke-width: 2.4; }
/* Pastilla de mes abierto o incompleto, en el encabezado. */
.cp-pastilla-encabezado { gap: 7px; padding: 6px 12px; border-radius: 8px; font-size: 0.8125rem; font-weight: 650; }
.cp-pastilla-encabezado .cp-pastilla-ico { width: 14px; height: 14px; stroke-width: 2; }

.cp-franja { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); align-items: stretch; margin: 0 0 12px; background: #fff; border: 1px solid var(--cp-linea); border-radius: 14px; overflow: hidden; box-shadow: var(--cp-sombra); }
.cp-franja-ancha { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
/* El separador es una SOMBRA, no un borde: la de la primera columna de
   cada fila queda fuera del recorte y no aparece, aunque la franja pase a
   dos filas. Con border-left habria que saber cual celda arranca fila. */
.cp-franja-celda { min-width: 0; padding: 14px 18px; box-shadow: -1px 0 0 var(--cp-separador), 0 -1px 0 var(--cp-separador); }
.cp-franja-rotulo { margin: 0 0 5px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cp-gris); }
.cp-franja-cifra { margin: 0; font-size: 1.5rem; line-height: 1.1; font-weight: 750; letter-spacing: -0.03em; color: var(--cp-tinta); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cp-franja-cifra.es-iva { color: var(--cp-violeta-700); }
.cp-franja-cifra.es-texto { font-variant-numeric: normal; }
/* "Sin dato" no es una cifra: se ve como lo que es. */
.cp-franja-cifra.es-vacia { font-size: 1.125rem; font-weight: 650; letter-spacing: 0; color: var(--cp-gris); }
.cp-franja-pie { margin: 5px 0 0; font-size: 0.8125rem; line-height: 1.45; color: var(--cp-gris); }
.cp-franja-pie.es-ok { color: var(--cp-ok-tinta); font-weight: 600; }
.cp-franja-pie.es-aviso { color: var(--cp-aviso-tinta); font-weight: 600; }
.cp-franja-chispa { background: var(--cp-superficie); padding: 12px 16px; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.cp-franja-chispa .cp-franja-rotulo, .cp-franja-chispa .cp-franja-pie { margin: 0; }
.cp-franja-chispa .cp-franja-pie { font-size: 0.75rem; }
/* overflow visible: el punto del ultimo mes va en x=178 con r=3 y el
   viewBox termina en 180, asi que recortado se veia media luna. El punto
   hueco es el indicador de "este mes todavia puede cambiar": tiene que
   verse entero. */
.cp-chispa { width: 100%; height: auto; display: block; overflow: visible; }
.cp-chispa-compras { color: var(--cp-turquesa); }
.cp-chispa-ventas { color: var(--cp-violeta-500); }
.cp-chispa-area { fill: currentColor; fill-opacity: 0.14; stroke: none; }
.cp-chispa-linea { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* El tramo que todavia puede cambiar va punteado Y con el punto hueco: el
   trazo distinto es el indicador, el color es el mismo. */
.cp-chispa-parcial { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 4 4; opacity: 0.6; }
.cp-chispa-punto { fill: #fff; stroke: currentColor; stroke-width: 2; }
/* El esqueleto mide lo mismo que la franja llena (~96px), para que la
   pagina no salte cuando llega la respuesta. */
.cp-franja-esqueleto .cp-franja-celda { min-height: 96px; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
/* La quinta celda del esqueleto reserva el alto REAL de la chispa, que no
   es fijo: el SVG va a ancho completo con viewBox 180x46, asi que crece
   con la columna. Con una barra de alto fijo la pagina saltaba 31px al
   llegar la respuesta. */
.cp-franja-esqueleto .cp-franja-chispa { gap: 4px; }
.cp-franja-esqueleto .cp-franja-chispa .cp-barra { height: 17px; }
.cp-franja-esqueleto .cp-franja-chispa .cp-barra-chispa { height: auto; width: 100%; aspect-ratio: 180 / 46; border-radius: var(--cp-r-sm); }
.cp-barra-cifra { height: 26px; }
.cp-barra-fila { height: 22px; }

/* =====================================================================
   Compras y Ventas: los documentos del Registro de Compras y Ventas.

   Lo propio de esta pantalla es la tabla, que es su centro operativo: el
   analisis NO puede crecer hasta empujarla fuera de la primera pantalla,
   y por eso vive en un panel plegable DEBAJO de ella.
   ===================================================================== */

/* Exportar CSV, a la derecha del encabezado. El periodo va a la izquierda,
   junto al titulo, y la fecha de lectura del SII vive en la barra. */
.cp-compras-exportar { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 1px solid var(--cp-linea); border-radius: 10px; background: #fff; font-size: 0.875rem; font-weight: 650; color: var(--cp-tinta); text-decoration: none; white-space: nowrap; }
.cp-compras-exportar:hover { background: var(--cp-page); text-decoration: none; }
.cp-btn-ico { width: 18px; height: 18px; flex: none; }
.cp-compras-exportar .cp-btn-ico { width: 16px; height: 16px; }
/* Si no entra en la fila del título (entre 768 y ~1090 px) baja a la
   segunda, y ahí también va a la DERECHA: el space-between del encabezado
   lo dejaba a la izquierda. */
.cp-page-head > .cp-compras-exportar { margin-left: auto; }
/* Sin documentos no hay nada que exportar: el enlace se ve apagado Y deja
   de tener destino, para que no sea un boton que no hace nada. */
.cp-compras-exportar[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }

/* ---- la fila Revisar ---- */
.cp-rcv-revisar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.cp-rcv-revisar-rotulo { margin-right: 2px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cp-gris); }

/* ---- la tarjeta de la tabla ---- */
.cp-rcv-tabla { padding: 0; margin: 0; overflow: hidden; }
.cp-rcv-tabla-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 13px 16px; background: var(--cp-superficie); border-bottom: 1px solid var(--cp-linea); }
/* flex-wrap: a 390 "130 de 130 · resultados filtrados" no entra al lado
   del titulo y la tarjeta lo cortaba. Baja de linea y se lee entero. */
.cp-rcv-tabla-titulo { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 10px; }
.cp-rcv-tabla-titulo h2 { margin: 0; font-size: 1rem; font-weight: 700; color: var(--cp-titulo); white-space: nowrap; }
/* El contador va entre el buscador y el tipo: el margen automático lo
   empuja a la derecha junto con el tipo y las fechas, y el buscador queda
   pegado al título (pedido del usuario, 19/9/2026). */
.cp-rcv-contador { margin-left: auto; padding-right: 4px; font-size: 0.8125rem; color: var(--cp-gris); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cp-rcv-contador b { color: var(--cp-tinta); }
/* Los filtros van EN LINEA dentro de la cabecera. Lo que se gana en alto
   es lo que deja entrar la tabla arriba del pliegue. */
.cp-rcv-filtros { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; }
.cp-rcv-filtros :is(input, select) { height: 36px; padding: 0 10px; font: inherit; font-size: 0.8125rem; color: var(--cp-tinta); background: #fff; border: 1px solid var(--cp-linea); border-radius: var(--cp-r-sm); }
.cp-rcv-buscar { position: relative; }
.cp-rcv-buscar input { width: 228px; padding: 0 12px 0 34px; }
.cp-rcv-buscar-ico { position: absolute; left: 11px; top: 10px; width: 16px; height: 16px; color: var(--cp-eje); stroke-width: 1.9; pointer-events: none; }
/* Dos campos de fecha vacios son indistinguibles sin rotulo: estos dos lo
   llevan a la vista, no solo para el lector de pantalla. */
.cp-rcv-fechas { display: inline-flex; align-items: center; gap: 6px; }
.cp-rcv-fechas label { font-size: 0.8125rem; font-weight: 600; color: var(--cp-gris); }

/* ---- la tabla compacta ---- */
/* Scrollea DENTRO de su caja: la pagina entera no se corre a lo ancho. El
   tabindex la hace alcanzable con el teclado, que si no no puede
   desplazarla. */
.cp-tabla-caja { overflow-x: auto; max-width: 100%; }
.cp-tabla-caja.es-cargando { opacity: 0.55; }
.cp-tabla-docs { width: 100%; min-width: 1020px; border-collapse: collapse; font-size: 0.8125rem; }
.cp-tabla-docs :is(th, td) { text-align: left; vertical-align: middle; }
.cp-tabla-docs thead th { padding: 8px 14px; background: var(--cp-superficie-tabla); border-bottom: 1px solid var(--cp-linea); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--cp-gris); white-space: nowrap; }
/* Los montos y nombres van en --cp-tinta, no en el --cp-text del body.
   En el tbody y no en el td: las celdas con color propio (fecha en gris)
   lo siguen ganando porque esto les llega heredado. */
.cp-tabla-docs tbody { color: var(--cp-tinta); }
.cp-tabla-docs tbody td { padding: 7px 14px; border-bottom: 1px solid var(--cp-separador); white-space: nowrap; }
.cp-tabla-docs tbody tr { cursor: pointer; }
.cp-tabla-docs tbody tr:hover { background: var(--cp-hover-fila); }
.cp-tabla-docs .cp-money { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cp-tabla-docs thead th.cp-money { text-align: right; }
.cp-tabla-docs thead th.cp-money .cp-th-orden { justify-content: flex-end; width: 100%; }
/* La nota de credito ya se distingue por su columna Documento y por el
   signo del monto; esto es un refuerzo, no el unico indicador. */
.cp-tabla-docs tr.es-nota-credito .cp-money { color: var(--cp-aviso-tinta); }
/* `line-height: 14px` y `vertical-align: middle`: como caja EN LINEA el
   boton se apoyaba en la linea base del <th> y el glifo de la flecha
   (↕/↓, que el prototipo no tiene) estiraba el renglon. El padding es el
   del contrato, 8px 14px; lo que crecia era la caja de linea. Medido a
   1536: la cabecera pasa de 34px a 32, los 32 del prototipo. */
.cp-th-orden { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; border: none; background: none; padding: 0; font: inherit; line-height: 14px; color: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.cp-th-orden:hover { color: var(--cp-tinta); }
.cp-th-orden.es-activo { color: var(--cp-violeta-600); }
.cp-th-flecha { font-size: 0.75rem; }
/* Un nombre largo no rompe la fila, y el nombre completo queda en el title. */
.cp-td-proveedor { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; color: var(--cp-tinta); }
.cp-rcv-td-tenue { color: var(--cp-gris); font-variant-numeric: tabular-nums; }
.cp-rcv-td-total { font-weight: 750; }
/* Tipo de documento: punto de color MAS texto. El punto solo seria color
   como unico indicador. */
.cp-rcv-doctipo { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 700; }
.cp-rcv-doctipo i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
/* Un documento pendiente de acuse (todavía no aceptado ni reclamado en el
   SII): se marca en su celda de documento y la fila va apenas teñida. El
   color no es lo único: la pastilla lo dice con palabras. */
.cp-rcv-pendiente { margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 0.6875rem; font-weight: 700; color: var(--cp-aviso-tinta); background: var(--cp-aviso-fondo); border: 1px solid var(--cp-aviso-borde); white-space: nowrap; }
.cp-tabla-docs tr.es-pendiente { background: var(--cp-aviso-suave); }
.cp-rcv-doctipo-factura { color: var(--cp-info-tinta); }
.cp-rcv-doctipo-exenta { color: var(--cp-violeta-700); }
.cp-rcv-doctipo-nc { color: var(--cp-aviso-tinta); }
.cp-rcv-doctipo-otro { color: var(--cp-gris); }
/* position: relative para que el <span class="cp-sr-only"> de adentro se
   ancle al <th> y no al bloque inicial: anclado afuera, un rotulo de 1px
   al final de una tabla de 1183px estiraba el scroll horizontal de la
   pagina entera (medido a 1100px: scrollWidth 1262 contra 1100). */
.cp-rcv-th-abrir { width: 34px; position: relative; }
/* 4px arriba y abajo, no 7: el chevron del prototipo es un <svg> de 14px
   sin foco, y aca es un <button> de 24 (el blanco minimo de WCAG 2.2). Con
   7px la fila pasaba de 33px a 39 y entraban dos filas menos en pantalla. */
/* Dos clases, para ganarle a .cp-tabla-docs tbody td: 4px arriba y abajo
   y no 7, porque el chevron del prototipo es un <svg> de 14px sin foco y
   aca es un <button> de 24 (el blanco minimo de WCAG 2.2). */
.cp-tabla-docs .cp-rcv-td-abrir { padding: 4px 10px 4px 0; }
/* display: grid, no inline-grid: como caja EN LINEA, el boton de 24px se
   alinea por su base y el renglon crecia a 30, con la fila en 39px en vez
   de los 33 del prototipo. Como bloque mide lo que mide, y margin-left
   auto lo deja a la derecha. */
.cp-rcv-abrir { display: grid; margin-left: auto; place-items: center; width: 24px; height: 24px; border: none; background: none; border-radius: 6px; color: var(--cp-chevron); cursor: pointer; }
.cp-rcv-abrir svg { width: 14px; height: 14px; stroke-width: 2; }
.cp-rcv-abrir:hover, .cp-rcv-abrir:focus-visible { color: var(--cp-violeta-600); }
/* El pie suma lo que la tabla dice mostrar, no la pagina visible. */
.cp-tabla-docs tfoot :is(th, td) { padding: 11px 14px; background: var(--cp-superficie-tabla); border-top: 1px solid var(--cp-linea); font-weight: 800; color: var(--cp-tinta); white-space: nowrap; }
.cp-tabla-docs tfoot th { font-size: 0.8125rem; text-align: left; }
.cp-tabla-docs tfoot td { font-size: 0.875rem; }
/* Con una sola clase pierde contra `.cp-tabla-docs tfoot :is(th, td)` de
   dos lineas mas arriba (0,1,2 contra 0,1,0) y el total de IVA se pintaba
   azul marino: el pie perdia el unico lazo de color con la celda "IVA
   recuperable" de la franja, que si es violeta. */
.cp-tabla-docs tfoot td.cp-rcv-tfoot-iva { color: var(--cp-violeta-700); }
/* La línea de lo que el SII no detalla, arriba del total: se lee como una
   fila más (peso normal, fondo blanco), con su explicación debajo del
   nombre. Lo que va en negrita es el total. */
.cp-tabla-docs tfoot tr.cp-rcv-sin-detalle :is(th, td) { background: #fff; font-weight: 600; }
.cp-tabla-docs tfoot tr.cp-rcv-sin-detalle th { white-space: normal; }
.cp-rcv-sin-detalle-nota { display: block; margin-top: 2px; font-size: 0.75rem; font-weight: 500; color: var(--cp-gris); }

/* ---- paginador, dentro de la tarjeta ---- */
.cp-paginador { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0; padding: 11px 16px; border-top: 1px solid var(--cp-linea); }
.cp-pag-rango { margin: 0; font-size: 0.8125rem; color: var(--cp-gris); font-variant-numeric: tabular-nums; }
.cp-pag-botones { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.cp-pag-btn { min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid var(--cp-linea); background: #fff; border-radius: var(--cp-r-sm); font: inherit; font-size: 0.8125rem; font-weight: 600; color: var(--cp-tinta); cursor: pointer; }
.cp-pag-btn:hover:not([disabled]):not(.es-actual) { background: var(--cp-page); }
.cp-pag-btn.es-actual { background: var(--cp-violeta-600); border-color: var(--cp-violeta-600); color: #fff; font-weight: 700; }
/* Deshabilitado de verdad, no solo apagado: en la primera pagina el boton
   anterior no puede recibir el clic ni el foco. */
.cp-pag-btn[disabled] { opacity: 0.4; cursor: default; }
.cp-pag-hueco { color: var(--cp-gris); padding: 0 2px; }

/* ---- el panel de analisis, plegable ---- */
.cp-rcv-analisis { margin: 0 0 12px; padding: 0; overflow: hidden; }
/* Dos clases, para ganarle a `.cp-card h2 { margin: 0 0 14px }` (arriba en
   esta hoja): con una sola clase pierde por especificidad (0,1,0 contra
   0,1,1) y el h2 dejaba 14px de aire muerto entre el boton del acordeon y
   la linea del cuerpo. Medido: la tarjeta cerrada pasa de 85px a 71, los
   70 del prototipo. */
.cp-card h2.cp-rcv-analisis-h { margin: 0; }
.cp-rcv-analisis-boton { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 18px; border: none; background: none; font: inherit; text-align: left; cursor: pointer; }
.cp-rcv-analisis-boton:hover { background: var(--cp-superficie); }
/* El anillo global cae 3px AFUERA y la tarjeta (overflow: hidden) lo
   recortaba entero: el boton que abre el analisis no mostraba el foco.
   Adentro se ve completo. Lo mismo la caja de la tabla, que ocupa todo el
   ancho de su tarjeta. */
.cp-rcv-analisis-boton:focus-visible,
.cp-rcv-tabla .cp-tabla-caja:focus-visible { outline: 3px solid var(--cp-foco); outline-offset: -3px; }
.cp-rcv-analisis-ico { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 9px; background: var(--cp-violeta-50); color: var(--cp-violeta-600); }
.cp-rcv-analisis-ico svg { width: 17px; height: 17px; stroke-width: 1.9; }
.cp-rcv-analisis-textos { display: flex; flex-direction: column; gap: 2px; margin-right: auto; margin-left: 12px; }
.cp-rcv-analisis-textos b { font-size: 1rem; font-weight: 700; color: var(--cp-titulo); }
.cp-rcv-analisis-textos span { font-size: 0.8125rem; font-weight: 400; color: var(--cp-gris); }
.cp-rcv-analisis-accion { font-size: 0.8125rem; font-weight: 650; color: var(--cp-violeta-600); white-space: nowrap; }
.cp-rcv-analisis-cuerpo { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); border-top: 1px solid var(--cp-linea); }
.cp-rcv-analisis-col { min-width: 0; padding: 18px; }
.cp-rcv-analisis-col + .cp-rcv-analisis-col { border-left: 1px solid var(--cp-separador); }
.cp-rcv-analisis-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.cp-rcv-analisis-col h3 { margin: 0; font-size: 0.9375rem; font-weight: 700; color: var(--cp-titulo); }
.cp-rcv-analisis-cab span { font-size: 0.75rem; color: var(--cp-gris); white-space: nowrap; }
.cp-rcv-analisis-nota { margin: 8px 0 0; font-size: 0.8125rem; line-height: 1.5; color: var(--cp-gris); }

/* overflow visible: los rotulos del eje ("$300M") empiezan unas unidades
   antes del 0 del viewBox y el SVG los recorta por defecto, partiendo el
   "$" a la mitad. La columna tiene 18px de padding para que entren. */
.cp-barras { width: 100%; height: auto; display: block; overflow: visible; }
.cp-barras-compras { --barra: var(--cp-turquesa-200); --barra-ultima: var(--cp-turquesa); }
.cp-barras-ventas { --barra: var(--cp-violeta-200); --barra-ultima: var(--cp-violeta-500); }
.cp-rcv-barra { fill: var(--barra); }
.cp-rcv-barra-ultima { fill: var(--barra-ultima); }
.cp-rcv-guia { stroke: var(--cp-guia); stroke-width: 1; }
.cp-rcv-guia-d { stroke-dasharray: 4 5; }
.cp-rcv-eje { font-size: 11px; fill: var(--cp-gris); font-variant-numeric: tabular-nums; }

.cp-comp-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.cp-comp-fila { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 36px 48px; align-items: center; gap: 8px; padding: 8px 6px; border: none; background: none; border-radius: 8px; font-family: inherit; font-size: 0.8125rem; color: var(--cp-tinta); text-align: left; cursor: pointer; }
.cp-comp-fila:hover { background: var(--cp-page); }
.cp-comp-fila[aria-pressed="true"] { background: var(--cp-violeta-50); }
.cp-comp-nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.cp-comp-cantidad { font-weight: 750; text-align: right; font-variant-numeric: tabular-nums; }
.cp-comp-pct { color: var(--cp-gris); text-align: right; font-variant-numeric: tabular-nums; }
.cp-rcv-apilada { display: flex; height: 10px; margin-top: 12px; border-radius: 999px; overflow: hidden; background: var(--cp-barra-fondo); }
.cp-rcv-apilada i { display: block; height: 100%; }
.cp-rcv-apilada-factura { background: var(--cp-violeta-600); }
.cp-rcv-apilada-exenta { background: var(--cp-violeta-400); }
.cp-rcv-apilada-nc { background: var(--cp-ambar-300); }
.cp-rcv-apilada-otro { background: var(--cp-chevron); }
/* `.cp-nota` es global y no trae margen: sin esto la nota de la
   composicion quedaba pegada a la barra apilada (0px entre las dos). */
.cp-rcv-apilada + .cp-nota { margin-top: 10px; }

.cp-rcv-top { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.cp-rcv-top li { color: var(--cp-tinta); display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 9px; }
.cp-rcv-top-pos { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 6px; background: var(--cp-violeta-50); color: var(--cp-violeta-600); font-size: 0.6875rem; font-weight: 800; }
.cp-rcv-top-nombre { min-width: 0; font-size: 0.8125rem; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-rcv-top-monto { font-size: 0.8125rem; font-weight: 750; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---- esqueleto ---- */
.cp-rcv-tabla.cp-card-esqueleto .cp-barra-fila { margin: 6px 16px; }
/* Alto de la tarjeta cerrada: la pagina no puede saltar al llegar la
   respuesta. Medido a 1536: con los 22px del contrato el esqueleto daba
   58px contra los 71 de la tarjeta real; con 28 da 70. */
.cp-rcv-analisis.cp-card-esqueleto { padding: 28px 18px; }

/* ---- el panel lateral del documento ---- */
/* Con el panel abierto, lo de atras no scrollea. El padding ocupa el lugar
   exacto de la barra que se esconde (lo mide rcv.js y lo escribe en
   --cp-barra-scroll), asi que la pagina no salta a lo ancho. NO se usa
   `scrollbar-gutter: stable`: el gutter reservado encoge el bloque
   contenedor de lo fijo y el panel se quedaba a 15px del borde derecho,
   con una franja de fondo de pagina sin velo (medido pixel a pixel a
   1536: de x=1521 a 1535 el color era el de --cp-page). */
html.cp-sin-scroll { overflow: hidden; padding-right: var(--cp-barra-scroll, 0px); }
/* z-index 30: por encima del menu lateral (19) y del menu de usuario (20),
   por debajo del skip link (50) y de los avisos (999). */
.cp-rcv-detalle { position: fixed; inset: 0; z-index: 30; display: flex; justify-content: flex-end; }
.cp-rcv-detalle-fondo { position: absolute; inset: 0; border: none; background: var(--cp-velo); cursor: pointer; }
.cp-rcv-detalle-panel { position: relative; width: 440px; max-width: 92vw; height: 100%; display: flex; flex-direction: column; background: #fff; box-shadow: var(--cp-sombra-panel); outline: none; }
.cp-rcv-detalle-cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 18px 20px 16px; background: var(--cp-superficie); border-bottom: 1px solid var(--cp-linea); }
.cp-rcv-detalle-cabecera > div { min-width: 0; }
.cp-rcv-detalle-cabecera .cp-rcv-doctipo { margin-bottom: 8px; }
.cp-rcv-detalle-cabecera h2 { margin: 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; color: var(--cp-tinta); }
.cp-rcv-detalle-cabecera p { margin: 4px 0 0; font-size: 0.875rem; color: var(--cp-gris); font-variant-numeric: tabular-nums; }
.cp-rcv-detalle-cerrar { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border: 1px solid var(--cp-linea); background: #fff; border-radius: 9px; color: var(--cp-gris); cursor: pointer; }
.cp-rcv-detalle-cerrar:hover { background: var(--cp-page); color: var(--cp-tinta); }
.cp-rcv-detalle-cerrar svg { width: 16px; height: 16px; stroke-width: 2; }
.cp-rcv-detalle-cuerpo { flex: 1; overflow-y: auto; padding: 20px; }
.cp-rcv-detalle-datos { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.cp-rcv-detalle-datos :is(th, td) { padding: 10px 0; border-bottom: 1px solid var(--cp-separador); }
.cp-rcv-detalle-datos th { text-align: left; font-weight: 500; color: var(--cp-gris); }
.cp-rcv-detalle-datos td { color: var(--cp-tinta); text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.cp-rcv-detalle-datos td.es-iva { color: var(--cp-violeta-700); }
.cp-rcv-detalle-total :is(th, td) { border-bottom: 2px solid var(--cp-linea); font-weight: 800; color: var(--cp-tinta); }
.cp-rcv-detalle-total td { font-size: 1.125rem; }
.es-nota-credito .cp-rcv-detalle-total td { color: var(--cp-aviso-tinta); }
.cp-rcv-detalle-datos tr:last-child :is(th, td) { border-bottom: none; }
.cp-rcv-detalle-nota { display: flex; align-items: flex-start; gap: 10px; margin-top: 18px; padding: 13px 15px; background: var(--cp-violeta-50); border-radius: 10px; }
.cp-rcv-detalle-nota svg { width: 17px; height: 17px; flex: none; margin-top: 1px; color: var(--cp-violeta-600); }
.cp-rcv-detalle-nota p { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: var(--cp-gris); }

/* Cifras de nueve digitos a 1100px: con Plus Jakarta Sans no entran en
   178px a 24px. */
@media (max-width: 1279px) {
  .cp-franja-cifra { font-size: 1.3125rem; }
}

/* Tres columnas de analisis no entran: pasan a una. Lo mismo el hero del
   F29, con el separador arriba en vez de al costado. */
@media (max-width: 1099px) {
  .cp-rcv-analisis-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .cp-rcv-analisis-col + .cp-rcv-analisis-col { border-left: none; border-top: 1px solid var(--cp-separador); }
  .cp-f29-hero, .cp-f29-hero.sin-mes-a-mes { grid-template-columns: minmax(0, 1fr); }
  .cp-f29-hero-col + .cp-f29-hero-col { border-left: none; border-top: 1px solid var(--cp-separador); }
}

@media (max-width: 767px) {
  /* Un compacto en el celular: el mes arriba, y el total y el estado
     debajo, en la misma columna; el PDF sigue a la derecha. */
  .cp-f29-compacto { grid-template-columns: 38px minmax(0, 1fr) 36px; row-gap: 8px; }
  .cp-f29-compacto-total { grid-column: 2; grid-row: 2; flex-direction: row; align-items: baseline; gap: 6px; }
  .cp-f29-compacto-estado { grid-column: 2; grid-row: 3; justify-content: flex-start; }
  .cp-f29-compacto .cp-doc-bajar { grid-column: 3; grid-row: 1; }
  /* Un nombre de empresa largo en "Mi empresa" no entra en una linea. */
  .cp-page-titulo { white-space: normal; }
  .cp-compras-exportar { width: 100%; justify-content: center; }
  .cp-rcv-filtros, .cp-rcv-buscar, .cp-rcv-buscar input, .cp-rcv-fechas { width: 100%; }
  /* En el celular el contador va en su renglón, a la izquierda, bajo el
     buscador. */
  .cp-rcv-contador { margin-left: 0; width: 100%; }
  /* Cada fecha en su fila, con el campo a lo ancho: lado a lado median
     114px y "01/09/2026" quedaba debajo del icono del calendario. */
  .cp-rcv-fechas { display: grid; grid-template-columns: auto minmax(0, 1fr); row-gap: 8px; }
  .cp-rcv-fechas input { width: 100%; }
  .cp-rcv-filtros select { width: 100%; }
  /* Los dos campos de fecha se reparten la linea en vez de desbordarla. */
  .cp-rcv-fechas input { flex: 1 1 0; min-width: 0; }
  /* Un chip largo no entra en 358px: se parte en dos lineas en vez de
     correr la pagina. */
  .cp-pastilla-filtro, .cp-pastilla-quitar { max-width: 100%; white-space: normal; text-align: left; }
  .cp-paginador { flex-direction: column; align-items: flex-start; }
  /* Con el dedo, 24px de lado es un blanco imposible. */
  .cp-periodo-flecha, .cp-rcv-abrir, .cp-rcv-detalle-cerrar, .cp-pag-btn { min-width: 36px; min-height: 36px; }
  .cp-atajo, .cp-pastilla-filtro, .cp-pastilla-quitar, .cp-comp-fila, .cp-th-orden, .cp-rcv-analisis-boton, .cp-compras-exportar { min-height: 36px; }
}

/* =====================================================================
   Buscador de documentos (barra superior)

   El campo "Buscar documento" del diseño (Menu lateral.dc.html, barra de
   1b y 1c), MEDIDO en el prototipo dibujado y no leído de su estilo: 34px
   de alto (el prototipo escribe `height: 32px` pero sin border-box, así
   que con el borde mide 34 -lo mismo que el selector de empresa de al
   lado-), radio 8, borde de 1px #E7E9F4, lupa de 15px, 7px entre la lupa y
   el texto, 10px de relleno a los lados y letra de 12px en 600. La lupa va
   con el trazo 1.6 del sistema de iconos del diseño (el prototipo la dejó
   en 1.8). La lógica está en public/js/client/buscador.js.

   DOS COSAS DISTINTAS DEL PROTOTIPO, a propósito:
     - El placeholder. El #8B93A9 del prototipo da 3,07:1 sobre blanco, por
       debajo de AA para texto (4,5). Va en #6B7488, que es el text-3 del
       mismo diseño y da 4,68:1.
     - La lupa del botón plegado. El #A3ABBF del prototipo (2,3:1) sirve
       para un adorno, no para el único dibujo de un botón: esa va en
       --cp-gris (6:1). La lupa DENTRO del campo sí es adorno (el campo se
       nombra por su etiqueta) y usa --cp-eje, que existe para eso.

   CUÁNDO SE PLIEGA EN LA LUPA. A ≤767px siempre (el campo se despliega
   debajo de la barra al tocarla). Y además cuando la barra no le deja
   lugar para escribir: el contenedor usa el espacio LIBRE de la barra
   (container-type: inline-size hace que su contenido no empuje a nadie)
   y, con menos de 200px, se pliega solo. Así no le recorta el nombre a la
   empresa para meter un campo de 90px, y en una barra más holgada entra
   entero sin tocar esta hoja.
   ===================================================================== */
:root {
  --cp-buscar-borde: #E7E9F4;
  --cp-buscar-borde-hover: #CBD3E6;
  /* 4,68:1 sobre blanco (calculado): el text-3 del diseño. */
  --cp-buscar-placeholder: #6B7488;
}

.cp-buscar {
  position: relative;
  container: cp-buscar / inline-size;
  flex: 1 1 0; min-width: 40px; max-width: 340px;
  display: flex; align-items: center; justify-content: flex-end;
}
/* El grupo de la derecha tiene que poder crecer para darle al campo el
   lugar que sobra; sin el buscador sigue midiendo lo que su contenido. */
@media (min-width: 768px) {
  .cp-topbar-right:has(> .cp-buscar:not([hidden])) { flex: 1 1 auto; justify-content: flex-end; }
}

.cp-buscar-caja { position: relative; flex: 1 1 auto; min-width: 0; }
.cp-buscar-campo {
  display: flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 10px;
  border: 1px solid var(--cp-buscar-borde); border-radius: 8px;
  background: #fff; color: var(--cp-tinta); cursor: text;
  transition: border-color 0.15s ease-out;
}
.cp-buscar-campo:hover { border-color: var(--cp-buscar-borde-hover); }
/* El anillo abraza la caja (lupa incluida), no el <input> de adentro: es
   la pieza que se ve. Mismo criterio que el selector de empresa. */
.cp-buscar-campo:has(input:focus-visible) { outline: 3px solid var(--cp-foco); outline-offset: 2px; }
.cp-buscar-campo input:focus { outline: none; }
.cp-buscar-lupa { width: 15px; height: 15px; flex: none; color: var(--cp-eje); }
.cp-buscar-campo input {
  flex: 1 1 auto; min-width: 0; height: 100%;
  border: none; background: none; padding: 0; margin: 0;
  font-family: inherit; font-size: 0.75rem; font-weight: 600; color: var(--cp-tinta);
}
.cp-buscar-campo input::placeholder { color: var(--cp-buscar-placeholder); opacity: 1; }

/* La lupa sola, cuando el campo está plegado. 40x40, como el botón del
   menú: se toca con el dedo. */
.cp-buscar-abrir {
  display: none;
  width: 40px; height: 40px; flex: none;
  align-items: center; justify-content: center;
  border: 1px solid var(--cp-buscar-borde); border-radius: var(--cp-r-sm);
  background: #fff; color: var(--cp-gris); cursor: pointer;
}
.cp-buscar-abrir:hover { background: var(--cp-page); }
.cp-buscar-abrir .cp-buscar-lupa { width: 18px; height: 18px; color: currentColor; }
.cp-buscar.es-desplegado .cp-buscar-abrir { background: var(--cp-violeta-50); border-color: var(--cp-violeta-200); color: var(--cp-violeta-700); }

/* ---- la lista de resultados ---- */
.cp-buscar-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 25;
  width: max(100%, 420px); max-width: calc(100vw - 32px);
  max-height: min(460px, 70vh); overflow-y: auto; overscroll-behavior: contain;
  padding: 6px;
  background: #fff; border: 1px solid var(--cp-linea);
  border-radius: var(--cp-r-md); box-shadow: 0 12px 30px rgba(7, 27, 53, 0.14);
}
.cp-buscar-grupo + .cp-buscar-grupo { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--cp-separador); }
.cp-buscar-grupo-titulo {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px 4px;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--cp-gris);
}
.cp-buscar-grupo-titulo span { font-weight: 600; letter-spacing: 0; }
.cp-buscar-grupo-titulo span::before { content: "· "; }
.cp-buscar-op {
  display: flex; flex-direction: column; gap: 3px;
  padding: 8px 10px; border-radius: var(--cp-r-sm);
  cursor: pointer; color: var(--cp-tinta);
}
.cp-buscar-op:hover { background: var(--cp-page); }
/* La activa NO se distingue sólo por el fondo: lleva el mismo anillo que
   el foco del resto del portal (y aria-selected para el lector). */
.cp-buscar-op.es-activa { background: var(--cp-hover-fila); outline: 2px solid var(--cp-foco); outline-offset: -2px; }
.cp-buscar-op-linea { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.cp-buscar-op-folio { flex: none; font-size: 0.8125rem; font-weight: 700; white-space: nowrap; }
/* Un tipo largo ("Liquidación factura electrónica") se corta con puntos
   suspensivos -el nombre entero queda en el title y en la etiqueta de la
   opción- en vez de empujar el total fuera de la caja: a 390px lo hacía. */
.cp-buscar-op-tipo { flex: 0 1 auto; min-width: 0; }
.cp-buscar-op-tipo span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-buscar-op-monto { flex: none; margin-left: auto; font-size: 0.8125rem; font-weight: 700; white-space: nowrap; }
.cp-buscar-op-meta { font-size: 0.75rem; color: var(--cp-gris); }
.cp-buscar-op-contraparte { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-buscar-op-periodo { margin-left: auto; flex: none; white-space: nowrap; }

.cp-buscar-mensaje { padding: 10px 10px 8px; font-size: 0.8125rem; color: var(--cp-gris); }
.cp-buscar-mensaje p { margin: 0 0 4px; }
.cp-buscar-mensaje b { color: var(--cp-tinta); font-weight: 650; overflow-wrap: anywhere; }
.cp-buscar-mensaje .cp-btn { margin-top: 8px; padding: 7px 14px; font-size: 0.8125rem; }
.cp-buscar-cargando { display: flex; align-items: center; gap: 8px; }
.cp-buscar-giro {
  width: 14px; height: 14px; flex: none; border-radius: 50%;
  border: 2px solid var(--cp-guia); border-top-color: var(--cp-violeta-600);
  animation: cp-buscar-giro 0.8s linear infinite;
}
@keyframes cp-buscar-giro { to { transform: rotate(360deg); } }
.cp-buscar-pie {
  margin: 6px 0 0; padding: 8px 10px 4px;
  border-top: 1px solid var(--cp-separador);
  font-size: 0.75rem; color: var(--cp-gris);
}

/* ---- plegado: la lupa, y el campo desplegado debajo de la barra ----
   Menos de 200px de lugar -o ≤767px, ver abajo- y el campo se pliega. Al
   desplegarse flota FIJO justo debajo de la barra (buscador.js pone la
   altura en --cp-buscar-arriba), del ancho de la pantalla con 16px de
   margen, o de 440px contra el borde derecho donde sobra lugar. */
@container cp-buscar (max-width: 199px) {
  .cp-buscar-abrir { display: inline-flex; }
  .cp-buscar-caja { display: none; }
  .cp-buscar.es-desplegado .cp-buscar-caja {
    display: block;
    position: fixed; z-index: 30;
    top: var(--cp-buscar-arriba, 72px); right: 16px;
    width: min(440px, calc(100vw - 32px));
    padding: 10px;
    background: #fff; border: 1px solid var(--cp-linea);
    border-radius: var(--cp-r-md); box-shadow: 0 12px 30px rgba(7, 27, 53, 0.16);
  }
  /* Adentro de la caja flotante, la lista va debajo del campo y no encima
     de otra cosa: deja de ser absoluta. */
  .cp-buscar.es-desplegado .cp-buscar-panel {
    position: static; width: auto; max-width: none;
    margin-top: 8px; padding: 0; border: none; box-shadow: none;
    max-height: min(420px, calc(100dvh - var(--cp-buscar-arriba, 72px) - 90px));
  }
  /* Con el dedo: 40px de alto y 16px de letra (con menos, Safari de iOS
     agranda la página al enfocar el campo). */
  .cp-buscar.es-desplegado .cp-buscar-campo { height: 40px; }
  .cp-buscar.es-desplegado .cp-buscar-campo input { font-size: 1rem; }
  .cp-buscar.es-desplegado .cp-buscar-op { padding: 10px; }
}
/* A ≤767px el buscador se pliega siempre: el contenedor mide lo que la
   lupa, así que la consulta de arriba se cumple sola. */
@media (max-width: 767px) {
  .cp-buscar { flex: none; width: 40px; min-width: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .cp-buscar-campo { transition: none; }
  .cp-buscar-giro { animation: none; }
}

/* ═══════════════════ Mi cuenta (21/9/2026) ═══════════════════
   Handoff "Mi cuenta": una columna, cuatro tarjetas y una franja de estado.
   Todo sale de las variables --cp-* de arriba; lo que no existe todavía se
   ve deshabilitado con "Próximamente" (ver public/js/client/account.js). */
.cp-cuenta-bajada { margin: -8px 0 18px; font-size: 0.875rem; color: var(--cp-gris); max-width: 1000px; }
.cp-cuenta { max-width: 1000px; display: flex; flex-direction: column; gap: 16px; }
.cp-cuenta > .cp-card { margin-bottom: 0; }

/* MI CUENTA CON EL DISEÑO DE PERFIL DEL CELULAR (7/10/2026). Dos columnas:
   a la izquierda la tarjeta de perfil y la lista, con las MISMAS piezas del
   teléfono (cp-m-usuario, cp-m-grupo, cp-m-item, más abajo en este archivo);
   a la derecha los bloques para editar, con el mismo borde, radio y
   separadores. En pantallas más angostas el perfil va arriba. */
.cp-cuenta.cp-cuenta-dos {
  max-width: 1120px;
  display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 20px; align-items: start;
}
.cp-cuenta-perfil {
  position: sticky; top: 88px;
  display: flex; flex-direction: column; gap: 14px;
  color: #0A1338; font-variant-numeric: tabular-nums;
}
.cp-cuenta-perfil .cp-m-item { min-height: 54px; padding-top: 8px; padding-bottom: 8px; cursor: default; }
.cp-cuenta-perfil a.cp-m-item { cursor: pointer; }
.cp-cuenta-perfil a.cp-m-item:hover { background: #F7F9FE; }
.cp-cuenta-perfil .cp-m-item-txt { gap: 1px; min-width: 0; }
.cp-cuenta-perfil .cp-m-item-txt span { overflow-wrap: anywhere; }
.cp-cuenta-perfil .cp-m-usuario .cp-m-fila-txt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-cuenta-perfil-flecha { width: 18px; height: 18px; flex: none; color: #B0BFDC; }
.cp-cuenta-perfil .cp-m-salir { height: 48px; }
.cp-cuenta-perfil .cp-m-salir:hover { background: #FFF5F5; }
.cp-cuenta-perfil .cp-m-legal a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 8px; color: #6B7688; text-decoration: none; }
.cp-cuenta-perfil .cp-m-legal a:hover { color: #0A1338; text-decoration: underline; }
.cp-cuenta-principal { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cp-cuenta-principal > .cp-card { margin-bottom: 0; border: 1px solid #DCE5F6; border-radius: 16px; box-shadow: none; }
.cp-cuenta-principal > .cp-card.cp-zona-peligro { border-color: #F3C9CD; }
.cp-cuenta-principal .cp-card h2.cp-cuenta-titulo { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; color: #0A1338; }
.cp-cuenta-principal .cp-card h2.cp-cuenta-titulo-peligro { color: #B4232F; }
.cp-cuenta-principal .cp-cuenta-fila { border-top-color: #EDF0F5; }
.cp-cuenta-principal .cp-cuenta-franja { border-radius: 16px; }
.cp-cuenta-principal #cp-cuenta-franja:empty { display: none; }
.cp-cuenta-principal .cp-cuenta-dispositivo { border-color: #DCE5F6; border-radius: 12px; }
@media (max-width: 1100px) {
  .cp-cuenta.cp-cuenta-dos { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
  .cp-cuenta-perfil { position: static; }
}
.cp-cuenta #cp-cuenta-franja:empty { display: none; }
.cp-card h2.cp-cuenta-titulo { margin: 0 0 14px; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.02em; color: var(--cp-titulo); }
/* .cp-card h2 del portal (1.05rem, navy) pesa más que una clase sola:
   sin el .cp-card h2 delante, los títulos quedaban chicos y el de la zona
   de peligro, negro. */
.cp-card h2.cp-cuenta-titulo-peligro { color: var(--cp-danger); }
/* El diseño pide 14px en los botones de esta vista (el .cp-btn general del
   portal es de 15px). */
.cp-cuenta .cp-btn { font-size: 0.875rem; }
.cp-cuenta-subtitulo { margin: -10px 0 14px; }

/* Franja de estado */
.cp-cuenta-franja { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 18px 20px; border-radius: 14px; border: 1px solid var(--cp-aviso-borde); background: var(--cp-aviso-suave); }
.cp-cuenta-franja-ico { width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--cp-aviso-fondo); color: var(--cp-aviso-tinta); }
.cp-cuenta-franja-ico svg { width: 22px; height: 22px; }
.cp-cuenta-franja-texto { flex: 1 1 320px; min-width: 0; }
.cp-cuenta-franja-titulo { margin: 0 0 8px; font-size: 1rem; font-weight: 700; color: var(--cp-titulo); }
.cp-cuenta-pastillas { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-cuenta-pastillas .cp-chip { font-size: 0.75rem; padding: 4px 11px; }
.cp-chip-fuerte { font-weight: 700; }
.cp-chip-info { background: var(--cp-info-fondo); color: var(--cp-info-tinta); }
.cp-chip-violeta { background: var(--cp-violeta-50); color: var(--cp-violeta-700); flex: none; }

/* Filas */
.cp-cuenta-fila { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 0; border-top: 1px solid var(--cp-separador); }
.cp-cuenta-fila:last-child { padding-bottom: 0; }
.cp-cuenta-fila-columna { flex-direction: column; align-items: stretch; gap: 12px; }
.cp-cuenta-fila-datos { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.cp-cuenta-etiqueta { font-size: 0.8125rem; color: var(--cp-muted); }
.cp-cuenta-valor { font-size: 0.9375rem; font-weight: 600; color: var(--cp-titulo); overflow-wrap: anywhere; }
.cp-cuenta-valor-vacio { font-weight: 500; color: var(--cp-muted); }
.cp-cuenta-fila-titulo { font-size: 0.9375rem; font-weight: 600; color: var(--cp-titulo); }
.cp-cuenta-nota { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: var(--cp-gris); }
.cp-cuenta-nota-angosta { max-width: 560px; }
.cp-cuenta-accion { display: flex; align-items: center; gap: 8px; flex: none; }
.cp-cuenta-proximamente { font-size: 0.72rem; }
.cp-cuenta-zona-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cp-cuenta-ok { margin: 0 0 4px; font-size: 0.8125rem; font-weight: 600; color: var(--cp-ok-tinta); }
.cp-cuenta-fila-pie { justify-content: flex-start; }

/* Botones que el portal no tenía: primario de contenido y contorno */
.cp-btn-primario {
  border: none; background: var(--cp-primary); color: #fff; font-family: inherit;
  padding: 11px 18px; border-radius: 10px; font-size: 0.875rem; font-weight: 700; cursor: pointer;
}
.cp-btn-primario:hover:not(:disabled) { background: #0F42AC; }
.cp-btn-contorno {
  border: 1px solid var(--cp-primary); background: #fff; color: var(--cp-primary); font-family: inherit;
  padding: 9px 16px; border-radius: var(--cp-r-sm); font-size: 0.875rem; font-weight: 700; cursor: pointer;
}
.cp-btn-contorno:hover:not(:disabled) { background: var(--cp-info-fondo); }
.cp-btn-primario:disabled, .cp-btn-contorno:disabled, .cp-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.cp-btn:disabled:hover { background: #fff; }
.cp-btn-chico { padding: 7px 12px; font-size: 0.8125rem; }
.cp-btn .cp-btn-ico { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; }

/* Edición en línea del nombre y panel de contraseña */
.cp-cuenta-editor { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 420px; }
.cp-cuenta-input input { padding-right: 15px; }
.cp-cuenta-editor-acciones { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cp-cuenta-editor .cp-error, .cp-cuenta-panel .cp-error { margin: 0; }
.cp-cuenta-panel { max-width: 420px; padding: 4px 0 16px; }
.cp-cuenta-panel .cp-activar-input-wrap input { padding-right: 15px; }
.cp-cuenta-panel .cp-activar-campo .cp-cuenta-nota { margin-top: 6px; }
.cp-cuenta-panel > .cp-cuenta-nota { margin: 0 0 12px; }

/* Dispositivos */
.cp-cuenta-dispositivos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cp-cuenta-dispositivo { display: flex; align-items: center; gap: 12px; padding: 12px 15px; border: 1px solid var(--cp-guia); border-radius: 10px; background: var(--cp-superficie); }
.cp-cuenta-dispositivo-ico { width: 34px; height: 34px; flex: none; border-radius: 9px; display: grid; place-items: center; background: var(--cp-info-fondo); color: var(--cp-info-tinta); }
.cp-cuenta-dispositivo-ico svg { width: 18px; height: 18px; }
.cp-cuenta-dispositivo-texto { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.cp-cuenta-dispositivo-titulo { font-size: 0.906rem; font-weight: 600; color: var(--cp-titulo); }
.cp-cuenta-dispositivo-meta { font-size: 0.78rem; color: var(--cp-gris); }
.cp-cuenta-dispositivo-accion { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; flex: none; }
.cp-cuenta-dispositivo-accion .cp-error { flex-basis: 100%; margin: 0; text-align: right; }
.cp-cuenta-confirmar-texto { font-size: 0.8125rem; font-weight: 600; color: var(--cp-titulo); }
.cp-cuenta-cerrada { font-size: 0.8125rem; font-weight: 600; color: var(--cp-ok-tinta); }
.cp-cuenta-barra { width: 60%; }
.cp-cuenta-error-zona { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Empresas */
.cp-cuenta-empresa { justify-content: flex-start; }
.cp-cuenta-avatar { width: 40px; height: 40px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--cp-info-fondo); color: var(--cp-info-tinta); font-size: 0.8125rem; font-weight: 800; }
.cp-cuenta-empresa-nombre { font-size: 0.9375rem; font-weight: 700; color: var(--cp-titulo); overflow-wrap: anywhere; }
.cp-cuenta-rut { font-size: 0.8125rem; font-weight: 500; color: var(--cp-muted); }

/* El correo de la cuenta, verificado (lo demostró abriendo un enlace). */
.cp-cuenta-verificado { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 99px; background: #ECFDF3; color: #067647; font-size: 0.75rem; font-weight: 650; vertical-align: 1px; }

/* Eliminar */
.cp-cuenta-borrado-resumen { margin: 0 0 8px; max-width: 700px; font-size: 0.875rem; line-height: 1.55; color: #344054; }

/* Bajo 768px, cada fila en columna y el botón abajo, a lo ancho y con alto
   de dedo (44px). */
@media (max-width: 767px) {
  .cp-cuenta-fila { flex-direction: column; align-items: flex-start; }
  .cp-cuenta-fila > .cp-btn, .cp-cuenta-fila > .cp-cuenta-accion { width: 100%; }
  .cp-cuenta-fila > .cp-btn, .cp-cuenta-accion > button { min-height: 44px; }
  .cp-cuenta-accion { flex-wrap: wrap; }
  .cp-cuenta-accion > button { flex: 1 1 auto; }
  .cp-cuenta-empresa { flex-direction: row; align-items: center; }
  .cp-cuenta-dispositivo { flex-wrap: wrap; }
  .cp-cuenta-dispositivo-accion { width: 100%; justify-content: flex-start; }
  .cp-cuenta-franja-texto { flex-basis: 100%; }
  .cp-cuenta-franja > .cp-cuenta-accion { width: 100%; }
  .cp-cuenta .cp-btn-peligro { width: 100%; min-height: 44px; }
  /* La lista de dispositivos, a lo ancho (la regla de fila de arriba la
     angostaba al contenido). */
  .cp-cuenta-fila-columna { align-items: stretch; }
  /* "Cerrar sesión", y su "Sí, cerrar" / "No", del mismo tamaño y con
     alto de dedo. */
  .cp-cuenta-dispositivo-accion > button { flex: 1 1 0; min-height: 44px; }
  .cp-cuenta-confirmar-texto { flex-basis: 100%; }
}

/* ---- /cliente/instalar (27/9/2026) ----
   La página a la que lleva "Instalar app" de la landing. Cada bloque se ve
   solo en su estado (data-estado lo pone instalar-app.js). */
.cp-instalar-wrap {
  min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center;
  padding: 24px 16px; background: var(--cp-bg);
}
.cp-instalar-card {
  width: 100%; max-width: 420px; background: #fff; border: 1px solid #E7E9F4; border-radius: 20px;
  padding: 32px 24px 26px; text-align: center; box-shadow: 0 12px 32px rgba(16, 25, 53, 0.08);
}
.cp-instalar-icono { width: 76px; height: 76px; border-radius: 20px; display: block; margin: 0 auto 18px; }
.cp-instalar-titulo { font-size: 1.35rem; line-height: 1.25; color: #101935; margin: 0 0 8px; }
.cp-instalar-bajada { color: #5B6478; line-height: 1.5; margin: 0 0 22px; font-size: 0.95rem; }
.cp-instalar-bloque { display: none; }
.cp-instalar-wrap[data-estado="instalable"] [data-para="instalable"],
.cp-instalar-wrap[data-estado="android"] [data-para="android"],
.cp-instalar-wrap[data-estado="iphone"] [data-para="iphone"],
.cp-instalar-wrap[data-estado="instalada"] [data-para="instalada"],
.cp-instalar-wrap[data-estado="otra-app"] [data-para="otra-app"],
.cp-instalar-wrap[data-estado="otro"] [data-para="otro"],
/* Chrome avisó tarde: el botón se suma debajo de los pasos de Android. */
.cp-instalar-wrap[data-boton] [data-para="instalable"] { display: block; }
.cp-instalar-o { display: none; margin: 20px 0 10px; color: #5B6478; font-size: 0.85rem; font-weight: 600; }
.cp-instalar-wrap[data-boton] .cp-instalar-o { display: block; }
.cp-instalar-qr {
  display: block; margin: 0 auto; width: 164px; height: 164px; padding: 10px; box-sizing: border-box;
  border: 1px solid #ECEBF3; border-radius: 14px; background: #fff;
}
.cp-instalar-aviso { color: #101935; font-weight: 600; line-height: 1.45; margin: 0; }
/* Recién instalada desde la pestaña: se abre desde el ícono, no siguiendo en el navegador. */
.cp-instalar-wrap[data-estado="instalada"] .cp-instalar-portal { display: none; }
.cp-instalar-btn {
  width: 100%; height: 50px; border: 0; border-radius: 14px; cursor: pointer;
  background: var(--cp-violeta-700); color: #fff; font: inherit; font-size: 1rem; font-weight: 700;
}
.cp-instalar-btn:focus-visible { outline: 3px solid #C4B5FD; outline-offset: 2px; }
.cp-instalar-pasos { list-style: none; margin: 0; padding: 0; text-align: left; display: grid; gap: 12px; }
.cp-instalar-pasos li { display: flex; gap: 12px; align-items: flex-start; color: #101935; line-height: 1.45; font-size: 0.95rem; }
.cp-instalar-num {
  flex: none; width: 26px; height: 26px; border-radius: 50%; background: #EDE9FE; color: var(--cp-violeta-700);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem;
}
.cp-instalar-compartir { width: 18px; height: 18px; vertical-align: -3px; color: #1657E0; }
.cp-instalar-nota { color: #5B6478; font-size: 0.85rem; line-height: 1.5; margin: 14px 0 0; }
.cp-instalar-listo { color: #0F7A4B; font-weight: 600; margin: 0; }
.cp-instalar-portal {
  display: inline-block; margin-top: 22px; color: var(--cp-violeta-700); font-weight: 600; text-decoration: none;
}

/* ---- Carga (#cp-loader, diseño móvil 27/9/2026) ----
   Blanca y con la S donde la deja el splash de la app Android. La S del
   PNG trae sus cuadrados: se recortan con clip-path y se dibujan aparte
   para que caigan con rebote. Tiempos del handoff: S 0-550 ms, cuadrados
   380/500/620 ms, palabra 850 ms, barra 1100 ms, mensaje 1200 ms. */
#cp-loader {
  position: fixed; inset: 0; z-index: 2000; background: #FFFFFF;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif; transition: opacity .4s ease;
}
#cp-loader .cp-loader-centro { display: flex; flex-direction: column; align-items: center; margin-top: -40px; transition: opacity .4s ease, transform .4s ease; }
#cp-loader.cp-loader-saliendo { opacity: 0; pointer-events: none; }
#cp-loader.cp-loader-saliendo .cp-loader-centro { transform: scale(1.08); }
.cp-loader-logo { position: relative; width: 128px; height: 129px; }
.cp-loader-s {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0;
  clip-path: polygon(0 0, 70% 0, 70% 10%, 66.5% 16.5%, 65% 24%, 65% 37%, 100% 37%, 100% 100%, 0 100%);
  animation: cp-carga-s .55s cubic-bezier(.2, .8, .2, 1) forwards;
}
.cp-loader-sq {
  position: absolute; border-radius: 22%; opacity: 0;
  background: linear-gradient(135deg, #2AF5EC 0%, #14CFD3 49%, #0A8FA3 51%, #0B9DAE 100%);
}
.cp-loader-sq1 { left: 67.6%; top: 24.6%; width: 10.6%; height: 10.6%; animation: cp-carga-sq .6s cubic-bezier(.2, .9, .3, 1.25) 380ms forwards, cp-carga-pulso 1.2s ease-in-out 1280ms infinite; }
.cp-loader-sq2 { left: 68.7%; top: 17.4%; width: 5.6%; height: 5.6%; animation: cp-carga-sq .6s cubic-bezier(.2, .9, .3, 1.25) 500ms forwards, cp-carga-pulso 1.2s ease-in-out 1400ms infinite; }
.cp-loader-sq3 { left: 78.4%; top: 13.5%; width: 11.2%; height: 11.2%; animation: cp-carga-sq .6s cubic-bezier(.2, .9, .3, 1.25) 620ms forwards, cp-carga-pulso 1.2s ease-in-out 1520ms infinite; }
.cp-loader-marca {
  margin-top: 22px; font-size: clamp(26px, 7.6vw, 30px); font-weight: 800; letter-spacing: -.02em; color: #5B12D9;
  opacity: 0; animation: cp-carga-sube .5s ease 850ms forwards;
}
.cp-loader-marca b { color: #0B1654; font-weight: 800; }
.cp-loader-barra { margin-top: 34px; width: 120px; height: 4px; border-radius: 2px; background: #EDEFF8; overflow: hidden; opacity: 0; animation: cp-carga-sube .4s ease 1100ms forwards; }
.cp-loader-barra span { display: block; width: 40%; height: 100%; border-radius: 2px; background: #6D28D9; animation: cp-carga-barra 1.1s ease-in-out infinite; }
.cp-loader-msg { margin: 14px 0 0; min-height: 20px; font-size: 13px; color: #46629C; opacity: 0; animation: cp-carga-sube .4s ease 1200ms forwards; }
.cp-loader-pie { position: absolute; bottom: calc(44px + env(safe-area-inset-bottom)); margin: 0; font-size: 12px; color: #6B7688; }
@keyframes cp-carga-s { 0% { opacity: 0; transform: scale(.82) rotate(-8deg); } 100% { opacity: 1; transform: none; } }
@keyframes cp-carga-sq { 0% { opacity: 0; transform: translate(60%, -80%) scale(.3); } 70% { opacity: 1; transform: translate(0, 0) scale(1.1); } 100% { opacity: 1; transform: none; } }
@keyframes cp-carga-pulso { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes cp-carga-sube { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes cp-carga-barra { 0% { transform: translateX(-110%); } 100% { transform: translateX(260%); } }
@media (prefers-reduced-motion: reduce) {
  .cp-loader-s, .cp-loader-sq, .cp-loader-marca, .cp-loader-barra, .cp-loader-msg { animation: cp-carga-fundido .2s ease forwards; }
  .cp-loader-barra span { animation: none; }
  #cp-loader.cp-loader-saliendo .cp-loader-centro { transform: none; }
}
@keyframes cp-carga-fundido { from { opacity: 0; } to { opacity: 1; } }

/* ---- Barra inferior (diseño móvil 27/9/2026) ----
   < 720 px: reemplaza al menú lateral y a la barra de arriba. 64 px más el
   área segura; pestaña activa en violeta con la marca turquesa arriba. */
.cp-tabbar { display: none; }
@media (max-width: 719px) {
  .cp-shell { background: #F5F8FF; }
  .cp-sidebar, .cp-sidebar-fondo, .cp-topbar { display: none !important; }
  /* overflow-x: clip: lo que entra deslizándose de costado (la lista de
     Documentos) no abre un scroll horizontal mientras se mueve. clip, y no
     hidden, para no volver a .cp-main un contenedor con scroll. */
  /* --aire-natural: 0px: aca el padding de abajo NO es aire, es el lugar de
     la barra fija. Achicarlo dejaria contenido tapado sin forma de llegar. */
  .cp-main { --aire-natural: 0px; padding: 20px 20px calc(88px + env(safe-area-inset-bottom)); overflow-x: clip; }
  /* Columnas automáticas, una por pestaña que se VE (12/10/2026): sin
     empresa activa se esconden Documentos e Impuestos, y con cinco columnas
     fijas quedaban dos huecos a la derecha. Con las cinco a la vista mide
     lo mismo que antes. */
  .cp-tabbar {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    height: calc(64px + env(safe-area-inset-bottom)); padding: 0 6px env(safe-area-inset-bottom);
    background: #FFFFFF; border-top: 1px solid #EDF0F5;
  }
}
.cp-tab {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 44px; color: #6B7688; font-size: 11px; font-weight: 600; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.cp-tab svg { width: 24px; height: 24px; stroke-width: 1.8; }
.cp-tab[aria-current="page"] { color: var(--cp-violeta-600); font-weight: 800; }
.cp-tab[aria-current="page"] svg { stroke-width: 2.2; }
.cp-tab[aria-current="page"]::before {
  content: ""; position: absolute; top: 0; left: 50%; width: 20px; height: 3px; margin-left: -10px;
  border-radius: 0 0 3px 3px; background: var(--cp-turquesa);
}
.cp-tab:focus-visible { outline: 2px solid #7137E8; outline-offset: -4px; border-radius: 10px; }
/* La rayita que se desliza (20/10/2026): una sola pieza, con la curva del
   indicador del menú lateral, un poco más larga porque recorre más. El
   color del ícono acompaña. Quieta al cargar y al cambiar de tamaño, y sin
   movimiento si el teléfono pide reducirlo. */
.cp-tab { transition: color 200ms ease; }
.cp-tab-rayita {
  display: none; position: absolute; top: 0; left: 0; width: 20px; height: 3px;
  border-radius: 0 0 3px 3px; background: var(--cp-turquesa); pointer-events: none;
  transform: translateX(var(--cp-rayita-x, 0px));
  transition: transform 340ms cubic-bezier(.3, .7, .3, 1);
}
.cp-tabbar[data-rayita="si"] .cp-tab-rayita { display: block; }
.cp-tabbar[data-rayita="si"] .cp-tab[aria-current="page"]::before { content: none; }
.cp-tab-rayita.cp-tab-rayita-quieta { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .cp-tab, .cp-tab-rayita { transition: none; }
}
/* ---- Asesor (con IA desde el 28/10/2026, asesor.js) ----
   Alto fijo: la conversación corre por dentro y el campo queda siempre a la
   vista. En el PC, una columna de lectura cómoda, centrada. */
.cp-asesor { display: flex; flex-direction: column; height: calc(100dvh - var(--cp-topbar-alto) - 72px); min-height: 420px; background: #F5F8FF; border-radius: 16px; overflow: hidden; }
@media (min-width: 720px) {
  .cp-asesor { max-width: 860px; margin: 0 auto; border: 1px solid #DCE5F6; }
  .cp-asesor .cp-burbuja { max-width: 72%; }
}
.cp-asesor-cab { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #FFFFFF; border-bottom: 1px solid #EDF0F5; }
.cp-asesor-avatar {
  position: relative; flex: none; width: 44px; height: 44px; border-radius: 14px; background: #F5F3FF; color: #5B21B6;
  font-size: 15px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
/* SIIA: la S de la marca, a color sobre blanco. */
.cp-asesor-avatar-siia { background: #FFFFFF; border: 1px solid #EDF0F5; }
.cp-asesor-avatar-siia img { display: block; width: 28px; height: 28px; object-fit: contain; }
.cp-asesor-estado { position: absolute; right: -2px; bottom: -2px; width: 12px; height: 12px; border-radius: 4px; background: #16B8B2; border: 2px solid #FFFFFF; }
.cp-asesor-quien { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cp-asesor-quien b { font-size: 16px; color: #0A1338; }
.cp-asesor-quien span { font-size: 13px; color: #6B7688; }
.cp-asesor-hilo { flex: 1; overflow-y: auto; padding: 16px 16px 12px; display: flex; flex-direction: column; gap: 10px; }
.cp-asesor-dia { align-self: center; font-size: 12px; font-weight: 600; color: #6B7688; padding: 4px 10px; border-radius: 8px; background: #E9EEF8; }
.cp-burbuja { max-width: 78%; padding: 12px 14px; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-wrap; }
.cp-burbuja-entra { align-self: flex-start; border-radius: 18px 18px 18px 6px; background: #FFFFFF; border: 1px solid #DCE5F6; color: #0A1338; }
.cp-burbuja-sale { align-self: flex-end; border-radius: 18px 18px 6px 18px; background: #6D28D9; color: #FFFFFF; }
.cp-asesor-leido { align-self: flex-end; font-size: 12px; color: #6B7688; }
.cp-asesor-escribir { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: #F5F8FF; }
.cp-asesor-escribir input {
  flex: 1; min-width: 0; height: 44px; border-radius: 14px; border: 1px solid #DCE5F6; background: #FFFFFF;
  padding: 0 14px; font: inherit; font-size: 15px; color: #0A1338; outline: none;
}
.cp-asesor-escribir input:focus { border-color: #7137E8; box-shadow: 0 0 0 4px #F1ECFC; }
.cp-asesor-enviar {
  flex: none; width: 44px; height: 44px; border: 0; border-radius: 14px; background: #6D28D9; color: #FFFFFF;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.cp-asesor-enviar:active { background: #5B21B6; }
.cp-asesor-enviar:disabled { background: #C4B5FD; cursor: default; }
.cp-asesor-escribir input:disabled { background: #F1F4FA; color: #6B7688; }
/* El WhatsApp del equipo: otra cosa, al costado. */
.cp-asesor-equipo {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 12px;
  border: 1px solid #DCE5F6; background: #FFFFFF; color: #46629C; font-size: 13px; font-weight: 700; text-decoration: none;
}
.cp-asesor-equipo:hover { border-color: #CBD3E6; color: #0A1338; }
.cp-asesor-equipo:focus-visible, .cp-asesor-sugerencia:focus-visible { outline: 2px solid #7137E8; outline-offset: 2px; }
/* La respuesta trae forma (párrafos, listas, negrita): ya no es texto tal cual. */
.cp-burbuja-ia { white-space: normal; }
.cp-burbuja-ia > * { margin: 0; }
.cp-burbuja-ia > * + * { margin-top: 8px; }
.cp-burbuja-ia ul, .cp-burbuja-ia ol { padding-left: 20px; }
.cp-burbuja-ia li + li { margin-top: 4px; }
.cp-burbuja-ia b { font-weight: 700; }
.cp-asesor-nota { align-self: center; margin: 0; max-width: 90%; font-size: 13px; line-height: 1.4; color: #6B7688; text-align: center; }
.cp-asesor-sugerencias { display: flex; flex-wrap: wrap; gap: 8px; }
.cp-asesor-sugerencia {
  border: 1px solid #DCE5F6; background: #FFFFFF; color: #5B21B6; border-radius: 999px; padding: 8px 12px;
  font: inherit; font-size: 14px; font-weight: 600; line-height: 1.3; text-align: left; cursor: pointer;
}
.cp-asesor-sugerencia:hover { border-color: #C4B5FD; background: #F5F3FF; }
/* Escribiendo: tres puntos tenues que respiran (lo único que queda en
   movimiento mientras se espera). */
.cp-asesor-escribiendo { display: inline-flex; align-items: center; gap: 5px; padding: 15px 16px; }
.cp-asesor-escribiendo i { width: 7px; height: 7px; border-radius: 50%; background: #8B95A7; opacity: .35; animation: cp-asesor-punto 1.2s ease-in-out infinite; }
.cp-asesor-escribiendo i:nth-of-type(2) { animation-delay: .15s; }
.cp-asesor-escribiendo i:nth-of-type(3) { animation-delay: .3s; }
@keyframes cp-asesor-punto { 0%, 100% { opacity: .35; transform: none; } 40% { opacity: .85; transform: translateY(-2px); } }
/* Lo nuevo entra subiendo un poco y frena al llegar: la respuesta (la
   protagonista) un poco más lenta que la pregunta. Lo de antes, quieto. */
.cp-burbuja-nueva { animation: cp-asesor-entra 480ms cubic-bezier(0.05, 0.7, 0.1, 1) both; }
.cp-burbuja-sale.cp-burbuja-nueva { animation-duration: 400ms; }
@keyframes cp-asesor-entra { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  .cp-burbuja-nueva, .cp-asesor-escribiendo i { animation: none; }
  .cp-asesor-escribiendo i { opacity: .6; }
}
@media (max-width: 719px) {
  #cp-view-asesor { margin: -20px -20px 0; }
  .cp-asesor { border-radius: 0; height: calc(100dvh - 64px - env(safe-area-inset-bottom)); min-height: 360px; }
  .cp-asesor .cp-burbuja-ia { max-width: 88%; }
}

/* ---- Alta en 2 pasos (diseño móvil 27/9/2026) ----
   Pasos Cuenta → SII: barra de 6 px y etiqueta con un cuadrado de 8 px
   (hecho turquesa, actual violeta, pendiente gris). */
.cp-alta-pasos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 10px 0 24px; padding: 0; }
.cp-alta-paso { display: flex; flex-direction: column; gap: 8px; }
.cp-alta-barra { height: 6px; border-radius: 3px; background: #DCE5F6; }
.cp-alta-etiqueta { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #6B7688; }
.cp-alta-cuadro { width: 8px; height: 8px; border-radius: 2.5px; background: #DCE5F6; }
.cp-alta-paso-hecho .cp-alta-barra, .cp-alta-paso-hecho .cp-alta-cuadro { background: var(--cp-turquesa); }
.cp-alta-paso-hecho .cp-alta-etiqueta { color: #146C4E; }
.cp-alta-paso-actual .cp-alta-barra, .cp-alta-paso-actual .cp-alta-cuadro { background: var(--cp-violeta-600); }
.cp-alta-paso-actual .cp-alta-etiqueta { color: var(--cp-violeta-700); }
.cp-alta-terminos a { font-weight: 600; color: var(--cp-violeta-600); }
.cp-sii-confirmo input[type="checkbox"] { accent-color: var(--cp-violeta-600); width: 20px; height: 20px; flex: none; }
.cp-activar-input-wrap.cp-entrada-error input, .cp-activar-input-wrap.cp-entrada-error input:focus { border-color: #D64550; box-shadow: none; }
.cp-sii-coinciden { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 12px; font-weight: 600; color: #146C4E; }
.cp-sii-coinciden span { width: 12px; height: 12px; border-radius: 3.5px; background: var(--cp-turquesa); }

/* Conectando: el logo animado de la carga (88 px) y las etapas reales con
   las marcas del diseño (hecho = cuadrado turquesa con tick, en curso =
   cuadrado violeta de 14 px girando, pendiente = cuadrado vacío). */
.cp-sii-anillo-wrap { width: 88px; height: 89px; }
.cp-conectando-logo { width: 88px; height: 89px; }
.cp-sii-paso-marca { width: 24px; height: 24px; border-radius: 7px; border: 2px solid #DCE5F6; background: #fff; }
.cp-paso-hecho .cp-sii-paso-marca { background: var(--cp-turquesa); border-color: var(--cp-turquesa); }
/* En curso (20/10/2026): el mismo cuadrado de 24 px que los otros, con el
   borde violeta, y adentro un cuadrado violeta chico que gira (antes era el
   cuadrado chico solo, girando, y se veía más chico y torcido). */
.cp-paso-curso .cp-sii-paso-marca { border-color: var(--cp-violeta-600); background: #fff; animation: none; }
.cp-paso-curso .cp-sii-paso-marca::before {
  content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--cp-violeta-600);
  animation: cp-girar 1.2s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .cp-paso-curso .cp-sii-paso-marca::before { animation: none; }
}

/* DE UN PASO AL SIGUIENTE (20/10/2026, pedido del dueño: "cuando carga solo
   pasa al siguiente, que no se vea tan tosco"). Solo cuando cambia en vivo
   (.cp-paso-recien, vincular-sii.js), con la curva de entrada de la pantalla
   y en cascada corta (~0,7 s): el cuadrado que termina se llena y traza su
   tick, la línea baja hasta el siguiente y el siguiente se enciende. Todo
   parte de un "from" que se mantiene antes de empezar: sin movimiento, cada
   marca se ve completa en su estado final. */
.cp-sii-paso b, .cp-sii-paso span { transition: color 300ms ease; }
.cp-sii-paso-marca path { stroke-dasharray: 22; }
.cp-paso-recien.cp-paso-hecho .cp-sii-paso-marca { animation: cp-paso-se-llena 420ms cubic-bezier(.3, .7, .3, 1) both; }
.cp-paso-recien.cp-paso-hecho .cp-sii-paso-marca path { animation: cp-paso-tick 360ms cubic-bezier(.3, .7, .3, 1) 120ms both; }
.cp-sii-paso.cp-paso-recien.cp-paso-hecho::after { transform-origin: top center; animation: cp-paso-linea 420ms cubic-bezier(.3, .7, .3, 1) 160ms both; }
.cp-paso-recien.cp-paso-curso .cp-sii-paso-marca { animation: cp-paso-se-enciende 360ms cubic-bezier(.3, .7, .3, 1) 300ms both; }
.cp-paso-recien.cp-paso-curso .cp-sii-paso-marca::before {
  animation: cp-paso-cuadro 420ms cubic-bezier(.3, .7, .3, 1) 340ms both, cp-girar 1.2s linear 760ms infinite;
}
@keyframes cp-paso-se-llena { from { background: #fff; border-color: var(--cp-violeta-600); transform: scale(.88); } }
@keyframes cp-paso-tick { from { stroke-dashoffset: 22; } to { stroke-dashoffset: 0; } }
@keyframes cp-paso-linea { from { transform: translateX(-50%) scaleY(0); } to { transform: translateX(-50%) scaleY(1); } }
@keyframes cp-paso-se-enciende { from { border-color: #DCE5F6; } }
/* La entrada usa `scale` y no `transform`: el giro (cp-girar) es un transform,
   y con los dos sobre la misma propiedad la entrada terminada lo dejaba
   quieto (solo giraba el primer paso, que no entra). */
@keyframes cp-paso-cuadro { from { opacity: 0; scale: .3; } to { opacity: 1; scale: 1; } }
@media (prefers-reduced-motion: reduce) {
  .cp-sii-paso b, .cp-sii-paso span { transition: none; }
  .cp-paso-recien.cp-paso-hecho .cp-sii-paso-marca,
  .cp-paso-recien.cp-paso-hecho .cp-sii-paso-marca path,
  .cp-sii-paso.cp-paso-recien.cp-paso-hecho::after,
  .cp-paso-recien.cp-paso-curso .cp-sii-paso-marca,
  .cp-paso-recien.cp-paso-curso .cp-sii-paso-marca::before { animation: none; }
}

/* VENTANAS BAJAS (7/10/2026). La tarjeta de "Preparando tu espacio" crece con
   lo que muestra, y en una ventana de menos de 900 px de alto (un notebook, o
   el navegador con la barra de favoritos) el final quedaba fuera de la vista.
   Se le saca aire -márgenes, relleno y el tamaño del logo-, nunca contenido.
   Solo en el diseño de escritorio: el de celular (max-width: 719px) tiene sus
   propias medidas y se desplaza con el dedo. */
@media (min-width: 720px) and (max-height: 960px) {
  .cp-activar-wrap { padding: 20px 24px; }
  .cp-activar-form { padding: 30px 40px; }
  .cp-activar-lado { padding: 30px 32px; }
  .cp-sii-estado-sub { margin-bottom: 14px; }
  .cp-sii-aviso { padding: 10px 14px; margin-bottom: 12px; }
  .cp-sii-anillo-wrap, .cp-conectando-logo { width: 68px; height: 69px; }
  .cp-sii-anillo-wrap { margin-bottom: 10px; }
  .cp-sii-paso-actual { margin-bottom: 14px; }
  .cp-sii-pasos { margin-bottom: 14px; --cp-sii-gap: 12px; }
  .cp-sii-historial { margin-bottom: 14px; padding-top: 14px; }
}
/* Más bajo todavía (un notebook de 768 px con el navegador encima). */
@media (min-width: 720px) and (max-height: 720px) {
  .cp-activar-wrap { padding: 12px 24px; }
  .cp-activar-form { padding: 22px 36px; }
  .cp-activar-lado { padding: 24px 30px; }
  .cp-sii-estado-titulo { font-size: 1.35rem; }
  .cp-sii-anillo-wrap, .cp-conectando-logo { width: 52px; height: 53px; }
  .cp-sii-paso-actual { margin-bottom: 10px; }
  .cp-sii-pasos { --cp-sii-gap: 9px; }
}

@media (max-width: 719px) {
  .cp-activar-wrap { padding: 0; background: #FFFFFF; align-items: stretch; }
  .cp-activar-card { display: block; max-width: none; min-height: 100dvh; border-radius: 0; box-shadow: none; }
  .cp-activar-lado { display: none; }
  .cp-activar-form {
    position: relative; min-height: 100dvh;
    padding: calc(22px + env(safe-area-inset-top)) 24px calc(42px + env(safe-area-inset-bottom));
  }
  .cp-activar-paso-chip {
    order: -2; align-self: flex-end; padding: 0; background: none; border-radius: 0;
    font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #46629C;
  }
  .cp-activar-titulo { margin: 8px 0 0; font-size: 26px; font-weight: 800; color: #0A1338; }
  .cp-activar-sub { margin: 8px 0 22px; font-size: 15px; line-height: 1.5; color: #46629C; }
  .cp-activar-pasos.cp-alta-pasos { order: -1; margin: 10px 0 18px; }
  .cp-activar-campo label { font-size: 13px; font-weight: 600; color: #46629C; }
  .cp-activar-input-wrap input { height: 52px; border: 1.5px solid #DCE5F6; border-radius: 12px; font-size: 16px; }
  .cp-activar-input-wrap input:focus { border-color: #7137E8; box-shadow: 0 0 0 4px #F1ECFC; }
  #cp-accept-form, #cp-sii-form { display: flex; flex-direction: column; flex: 1; }
  .cp-activar-boton { margin-top: auto; }
  .cp-activar-boton .cp-boton-sombra, .cp-activar-boton .cp-boton-borde { display: none; }
  .cp-activar-boton .cp-boton-cara {
    height: 54px; border-radius: 14px; background: var(--cp-violeta-600); transform: none; justify-content: center;
    font-size: 16px; font-weight: 700;
  }
  .cp-activar-boton:active .cp-boton-cara { background: var(--cp-violeta-700); }
  .cp-activar-pie { display: none; }
}

/* ---- Pantallas del diseño móvil (movil.js, 27/9/2026) ----
   Inicio, Notificaciones, Perfil, Impuestos y Documentos en celular.
   Medidas del handoff: filas ≥ 60 px, toques ≥ 44 px, tarjetas radio 16,
   la tarjeta del mes radio 22 en navy con los cuadrados turquesa. */
.cp-m-pantalla { display: flex; flex-direction: column; gap: 20px; color: #0A1338; font-variant-numeric: tabular-nums; }
.cp-m-titulo { margin: 10px 0 0; font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: #0A1338; }
.cp-m-card { background: #FFFFFF; border: 1px solid #DCE5F6; border-radius: 16px; padding: 16px; }
.cp-m-cargando { min-height: 180px; background: linear-gradient(90deg, #EEF2FA 25%, #F7F9FD 50%, #EEF2FA 75%); background-size: 200% 100%; animation: cp-m-brillo 1.2s linear infinite; }
@keyframes cp-m-brillo { to { background-position: -200% 0; } }
.cp-m-error { display: flex; flex-direction: column; gap: 4px; border-color: #F3C9CD; }
.cp-m-error span { font-size: 13px; color: #6B7688; }
.cp-m-seccion { display: flex; flex-direction: column; gap: 10px; }
.cp-m-seccion h2 { margin: 0; font-size: 17px; font-weight: 800; }
.cp-m-lista { background: #FFFFFF; border: 1px solid #DCE5F6; border-radius: 16px; overflow: hidden; }
.cp-m-lista > * + * { border-top: 1px solid #EDF0F5; }
.cp-m-fila, .cp-m-notif {
  display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 12px 14px;
  color: inherit; text-decoration: none; background: none;
}
a.cp-m-fila:active, a.cp-m-notif:active { background: #F5F8FF; }
.cp-m-fila-icono { flex: none; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.cp-m-tono-violeta { background: #F5F3FF; color: var(--cp-violeta-600); }
.cp-m-tono-aviso { background: #FFF3DF; color: #8A5C05; }
.cp-m-tono-turquesa { background: #E6F7F6; color: #0E7C78; }
.cp-m-tono-ok { background: #E7F8EF; color: #146C4E; }
.cp-m-tono-gris { background: #F5F8FF; color: #46629C; }
/* Rojo, el del chip "corte": la fila de deudas por pagar (23/10/2026). */
.cp-m-tono-corte { background: #FDECEC; color: #B42318; }
.cp-m-fila-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cp-m-fila-txt b { font-size: 15px; font-weight: 700; color: #0A1338; line-height: 1.35; }
.cp-m-fila-txt span { font-size: 13px; color: #6B7688; line-height: 1.4; }
.cp-m-fila-flecha { color: #B0BFDC; display: flex; }
.cp-m-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
.cp-m-chip i { width: 7px; height: 7px; border-radius: 2px; background: #1E9E6B; }
.cp-m-chip-ok { background: #E7F8EF; color: #146C4E; }
.cp-m-chip-aviso { background: #FFF3DF; color: #8A5C05; }
.cp-m-chip-gris { background: #EEF2FA; color: #46629C; }
.cp-m-chip-corte { background: #FDECEC; color: #B42318; }
/* Aviso del plan en el Inicio (27/9/2026): prueba terminada (rojo) o sin
   plan (ámbar), con la forma de contratar. */
.cp-m-aviso-plan {
  display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 16px;
  background: #FFF8EC; border: 1px solid #F5DDB0;
}
.cp-m-aviso-plan b { font-size: 15px; color: #0A1338; }
.cp-m-aviso-plan span { font-size: 14px; line-height: 1.45; color: #46629C; }
.cp-m-aviso-corte { background: #FEF3F2; border-color: #F7C9C4; }
.cp-m-aviso-corte b { color: #B42318; }
.cp-m-aviso-accion { align-self: flex-start; margin-top: 6px; font-size: 14px; font-weight: 700; color: var(--cp-violeta-700); text-decoration: none; }
/* "Datos hasta" (24/10/2026): en una línea, con la acción al final. Si no
   cabe, la acción baja sola, sin cortar el texto. */
.cp-m-aviso-linea { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 12px; padding: 11px 14px; }
.cp-m-aviso-linea .cp-m-aviso-accion { margin: 0 0 0 auto; }
/* "Cargando 7 meses más" (24/10/2026): no es un aviso de nada que hacer; va
   en blanco, con el borde de las tarjetas. */
.cp-m-aviso-cargando { background: #FFFFFF; border-color: #DCE5F6; }
.cp-m-aviso-cargando b { font-size: 14px; font-weight: 650; color: #46629C; }

/* Inicio */
.cp-m-fila-empresa { display: flex; align-items: center; gap: 10px; min-height: 48px; }
.cp-m-empresa {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 12px 0 6px;
  border: 1px solid #DCE5F6; border-radius: 14px; background: #FFFFFF; color: #6B7688; text-align: left; font: inherit; cursor: pointer;
}
.cp-m-empresa:disabled { cursor: default; opacity: 1; }
.cp-m-iniciales { flex: none; width: 34px; height: 34px; border-radius: 10px; background: #F5F3FF; color: var(--cp-violeta-700); font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.cp-m-empresa-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cp-m-empresa-txt b { font-size: 14px; color: #0A1338; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-m-empresa-txt span { font-size: 12px; color: #6B7688; }
.cp-m-campana {
  position: relative; flex: none; width: 48px; height: 48px; border: 1px solid #DCE5F6; border-radius: 14px; background: #FFFFFF;
  color: #0A1338; display: flex; align-items: center; justify-content: center;
}
.cp-m-badge { position: absolute; top: 11px; right: 12px; width: 9px; height: 9px; border-radius: 3px; background: var(--cp-turquesa); border: 2px solid #FFFFFF; }
.cp-m-saludo { display: flex; flex-direction: column; gap: 2px; }
.cp-m-saludo span { font-size: 15px; color: #46629C; }
.cp-m-saludo h1 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: #0A1338; }
.cp-m-hero {
  position: relative; display: block; padding: 20px; border-radius: 22px; background: #0A1338; color: #FFFFFF;
  text-decoration: none; overflow: hidden;
}
.cp-m-hero.cp-m-cargando { min-height: 190px; background: #0A1338; opacity: .85; animation: none; }
/* Al tocarla se hunde apenas, con la curva del portal, antes de abrirse. */
.cp-m-hero { transition: transform 160ms cubic-bezier(.3, .7, .3, 1); }
.cp-m-hero:active { transform: scale(.98); }
@media (prefers-reduced-motion: reduce) { .cp-m-hero { transition: none; } }

.cp-m-hero-cuadros i { position: absolute; background: var(--cp-turquesa); }
.cp-m-hero-cuadros i:nth-child(1) { right: 20px; top: 18px; width: 22px; height: 22px; border-radius: 6px; }
.cp-m-hero-cuadros i:nth-child(2) { right: 48px; top: 24px; width: 11px; height: 11px; border-radius: 3.5px; opacity: .75; }
.cp-m-hero-cuadros i:nth-child(3) { right: 38px; top: 44px; width: 16px; height: 16px; border-radius: 5px; opacity: .9; }
.cp-m-hero-etiqueta { display: block; font-size: 13px; font-weight: 600; color: #B0BFDC; }
.cp-m-hero-monto { display: block; margin-top: 6px; font-size: 34px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.cp-m-hero-sub { display: block; margin-top: 2px; font-size: 13px; color: #B0BFDC; }
.cp-m-hero-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .12); }
.cp-m-hero-duo > span { display: flex; flex-direction: column; gap: 2px; }
.cp-m-hero-duo small { font-size: 12px; color: #B0BFDC; }
.cp-m-hero-duo b { font-size: 16px; }
.cp-m-hero-leido { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 12px; color: #B8EDEB; }
.cp-m-hero-leido i { width: 7px; height: 7px; border-radius: 2px; background: var(--cp-turquesa); }
.cp-m-rueda { position: relative; display: inline-block; overflow: hidden; height: 1.15em; vertical-align: top; }
.cp-m-rueda-sale { position: absolute; left: 0; top: 0; animation: cp-m-rueda-sale .6s cubic-bezier(.45, 0, .2, 1) forwards; }
.cp-m-rueda-entra { display: inline-block; animation: cp-m-rueda-entra .6s cubic-bezier(.45, 0, .2, 1) both; }
@keyframes cp-m-rueda-sale { from { transform: none; opacity: 1; } to { transform: translateY(100%); opacity: 0; } }
@keyframes cp-m-rueda-entra { from { transform: translateY(-100%); opacity: 0; } to { transform: none; opacity: 1; } }

/* Notificaciones (apilada) */
body[data-cp-vista="notificaciones"] .cp-tabbar { display: none; }
.cp-m-cabecera { display: flex; align-items: center; min-height: 44px; margin: 0 -10px; }
.cp-m-cabecera b { flex: 1; font-size: 17px; }
.cp-m-volver { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: #0A1338; }
.cp-m-enlace { border: 0; background: none; padding: 0 10px; min-height: 44px; font: inherit; font-size: 14px; font-weight: 700; color: var(--cp-violeta-600); cursor: pointer; }
.cp-m-notif-grupo { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.cp-m-notif-titulo { font-size: 13px; font-weight: 700; color: #46629C; padding: 6px 2px 0; }
.cp-m-notif { align-items: flex-start; padding: 14px; }
.cp-m-notif-nueva { background: #FBFAFF; }
.cp-m-notif-meta { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; font-size: 12px; color: #6B7688; }
.cp-m-notif-meta i { width: 8px; height: 8px; border-radius: 2.5px; }
.cp-m-notif-nueva .cp-m-notif-meta i { background: var(--cp-violeta-600); }

/* Perfil */
.cp-m-usuario { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 18px; background: #FFFFFF; border: 1px solid #DCE5F6; }
.cp-m-avatar { flex: none; width: 56px; height: 56px; border-radius: 16px; background: #0A1338; color: #FFFFFF; font-size: 18px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.cp-m-usuario .cp-m-fila-txt b { font-size: 17px; }
.cp-m-grupo { background: #FFFFFF; border: 1px solid #DCE5F6; border-radius: 16px; overflow: hidden; }
.cp-m-grupo > * + * { border-top: 1px solid #EDF0F5; }
.cp-m-item {
  width: 100%; display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 14px;
  border: 0; background: none; font: inherit; color: #B0BFDC; text-align: left; text-decoration: none; cursor: pointer;
}
.cp-m-item-txt { flex: 1; display: flex; flex-direction: column; }
.cp-m-item-txt b { font-size: 15px; font-weight: 700; color: #0A1338; }
.cp-m-item-txt span { font-size: 13px; color: #6B7688; }
.cp-m-interruptor { position: relative; width: 48px; height: 28px; border-radius: 9px; background: #DCE5F6; transition: background .2s; }
.cp-m-interruptor i { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 7px; background: #FFFFFF; box-shadow: 0 1px 3px rgba(10, 19, 56, .25); transition: left .2s; }
.cp-m-item[aria-checked="true"] .cp-m-interruptor { background: var(--cp-violeta-600); }
.cp-m-item[aria-checked="true"] .cp-m-interruptor i { left: 23px; }
.cp-m-salir { height: 52px; border: 1.5px solid #F3C9CD; border-radius: 14px; background: #FFFFFF; color: #B4232F; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.cp-m-eliminar { align-self: center; padding: 6px; border: 0; background: none; font: inherit; font-size: 13px; color: #6B7688; text-decoration: none; cursor: pointer; }
/* Perfil entero en la pantalla, con la barra de abajo y "Eliminar mi
   cuenta" a la vista (27/9/2026; medido a 390x844 y 400x862): filas de
   54 px sólo acá, 14 px entre bloques y los documentos legales como enlaces
   chicos al pie, junto a "Eliminar mi cuenta". */
.cp-m-perfil { gap: 14px; }
button.cp-m-usuario { width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.cp-m-perfil .cp-m-usuario { gap: 12px; padding: 12px 14px; }
/* Un correo largo termina en "…" en vez de cortarse a mitad. */
.cp-m-usuario .cp-m-fila-txt { min-width: 0; }
.cp-m-usuario .cp-m-fila-txt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.cp-m-usuario:active { background: #F5F8FF; }
.cp-m-perfil .cp-m-avatar { width: 48px; height: 48px; border-radius: 14px; font-size: 16px; }
/* Con aire arriba y abajo: "Mi plan" con la prueba ocupa dos líneas. */
.cp-m-perfil .cp-m-item { min-height: 54px; padding-top: 8px; padding-bottom: 8px; }
.cp-m-perfil .cp-m-item-txt { gap: 1px; }
.cp-m-item-apagado { cursor: default; }
.cp-m-item-apagado .cp-m-item-txt b { color: #6B7688; }
.cp-m-perfil .cp-m-salir { height: 48px; }
.cp-m-perfil-pie { display: flex; flex-direction: column; align-items: center; margin-top: -6px; }
.cp-m-legal { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; color: #B0BFDC; font-size: 13px; }
.cp-m-legal a, .cp-m-perfil-pie .cp-m-eliminar { display: inline-flex; align-items: center; min-height: 36px; padding: 0 8px; font-size: 13px; color: #6B7688; text-decoration: none; }
.cp-m-legal a:active, .cp-m-perfil-pie .cp-m-eliminar:active { color: #0A1338; }

/* Hojas desde abajo (27/9/2026): cambiar de empresa y la cuenta en Perfil.
   Cabecera con el título y un botón para cerrar; también se cierran
   tocando el fondo o con Escape (movil.js). */
.cp-m-hoja-fondo { position: fixed; inset: 0; z-index: 900; background: rgba(10, 19, 56, .4); display: flex; align-items: flex-end; }
.cp-m-hoja {
  width: 100%; max-height: 88dvh; overflow-y: auto; overscroll-behavior: contain; background: #FFFFFF; border-radius: 22px 22px 0 0;
  padding: 10px 16px calc(16px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 6px;
  animation: cp-m-hoja-sube .25s cubic-bezier(.2, .8, .2, 1);
}
@keyframes cp-m-hoja-sube { from { transform: translateY(100%); } to { transform: none; } }
.cp-m-hoja-tirador { flex: none; align-self: center; width: 40px; height: 5px; border-radius: 3px; background: #DCE5F6; margin-bottom: 2px; }
.cp-m-hoja-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 -8px 2px 4px; }
.cp-m-hoja-titulo { margin: 0; font-size: 17px; font-weight: 800; color: #0A1338; }
.cp-m-hoja-titulo-peligro { color: #B4232F; }
.cp-m-hoja-cerrar {
  flex: none; width: 44px; height: 44px; border: 0; border-radius: 12px; background: none; color: #46629C;
  display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.cp-m-hoja-cerrar:active { background: #F5F8FF; }
.cp-m-hoja-cerrar:focus-visible { outline: 2px solid #7137E8; outline-offset: -2px; }

/* Las piezas de "Mi cuenta" (account.js) montadas en una hoja: las mismas
   filas, con los botones del diseño móvil (48 px, radio 14, primario
   violeta) en vez de los del escritorio. */
.cp-m-hoja-cuenta { display: flex; flex-direction: column; color: #0A1338; }
.cp-m-hoja-cuenta > .cp-cuenta-fila:first-child { border-top: 0; padding-top: 4px; }
.cp-m-hoja-cuenta .cp-cuenta-fila { padding: 14px 0; border-top-color: #EDF0F5; gap: 10px; }
.cp-m-hoja-cuenta .cp-cuenta-fila:last-child { padding-bottom: 4px; }
.cp-m-hoja-cuenta .cp-cuenta-etiqueta { font-size: 13px; color: #6B7688; }
.cp-m-hoja-cuenta .cp-cuenta-valor, .cp-m-hoja-cuenta .cp-cuenta-fila-titulo { font-size: 15px; font-weight: 700; color: #0A1338; }
.cp-m-hoja-cuenta .cp-cuenta-nota { font-size: 13px; color: #6B7688; }
/* El nombre: el dato a la izquierda y "Editar" a la derecha, como una fila
   de la app; al editar, el formulario ocupa el ancho. */
.cp-m-hoja-cuenta #cp-cuenta-fila-nombre { flex-direction: row; align-items: center; }
.cp-m-hoja-cuenta #cp-cuenta-fila-nombre > .cp-btn { width: auto; flex: none; }
.cp-m-hoja-cuenta .cp-cuenta-editor { max-width: none; }
.cp-m-hoja-cuenta :is(.cp-btn, .cp-btn-primario, .cp-btn-contorno, .cp-btn-peligro, .cp-btn-ghost) {
  min-height: 48px; margin-top: 0; padding: 0 18px; border-radius: 14px; font-family: inherit; font-size: 15px; font-weight: 700;
}
.cp-m-hoja-cuenta :is(.cp-btn, .cp-btn-ghost) { border: 1.5px solid #DCE5F6; background: #FFFFFF; color: #0A1338; }
.cp-m-hoja-cuenta .cp-btn-primario { background: var(--cp-violeta-600); }
.cp-m-hoja-cuenta .cp-btn-primario:hover:not(:disabled) { background: var(--cp-violeta-700); }
.cp-m-hoja-cuenta .cp-btn-contorno { border: 1.5px solid #DCE5F6; color: #46629C; background: #FFFFFF; }
.cp-m-hoja-cuenta .cp-btn-chico { min-height: 44px; font-size: 14px; }
.cp-m-hoja-cuenta .cp-cuenta-editor-acciones { flex-wrap: nowrap; }
.cp-m-hoja-cuenta .cp-cuenta-editor-acciones > button, .cp-m-hoja-cuenta .cp-eliminar-acciones > button { flex: 1 1 0; }
/* "Guardar contraseña" y "Sí, eliminar mi cuenta" no caben en media fila:
   ahí la acción va arriba a lo ancho y "Cancelar" debajo. */
.cp-m-hoja-cuenta .cp-cuenta-panel .cp-cuenta-editor-acciones, .cp-m-hoja-cuenta .cp-eliminar-acciones { flex-direction: column; align-items: stretch; }
.cp-m-hoja-cuenta .cp-cuenta-panel .cp-cuenta-editor-acciones > button, .cp-m-hoja-cuenta .cp-eliminar-acciones > button { flex: none; }
.cp-m-hoja-cuenta .cp-cuenta-2p-corta { gap: 2px; }
.cp-m-hoja-cuenta .cp-cuenta-2p-corta .cp-cuenta-zona-cab { align-items: center; }
.cp-m-hoja-cuenta .cp-cuenta-panel { max-width: none; padding: 0 0 14px; }
.cp-m-hoja-cuenta .cp-cuenta-ok { margin: 0 0 12px; }
.cp-m-hoja-cuenta .cp-cuenta-dispositivo { border-color: #DCE5F6; border-radius: 14px; background: #FFFFFF; }
.cp-m-hoja-cuenta .cp-cuenta-borrado-resumen { margin: 0 0 6px; font-size: 14px; color: #46629C; }
.cp-m-hoja-cuenta .cp-eliminar-aviso { margin: 14px 0 0; font-size: 14px; color: #0A1338; }
.cp-m-hoja-cuenta .cp-eliminar-campo { max-width: none; margin-top: 10px; }
.cp-m-hoja-cuenta .cp-eliminar-acciones { gap: 10px; }
.cp-m-hoja-cuenta .cp-error { font-size: 13px; }
.cp-m-hoja-empresa {
  display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 0 12px 0 6px; border: 1px solid #DCE5F6; border-radius: 14px;
  background: #FFFFFF; font: inherit; text-align: left; cursor: pointer; color: var(--cp-violeta-600);
}
.cp-m-hoja-empresa.cp-m-activa { border: 2px solid var(--cp-violeta-600); background: #F5F3FF; }
/* Entre "Todas mis empresas" y las empresas una por una (movil.js,
   cpMAbrirEmpresas): una línea, para distinguir el conjunto de cada una. */
.cp-m-hoja-separador { flex: none; height: 1px; margin: 5px 4px; background: #DCE5F6; }
/* La lista de la hoja va en una caja propia para repintarla con la hoja
   abierta (movil.js, cpMRepintarHojaEmpresas): sin forma, las empresas
   siguen siendo hijas de la hoja para el espaciado. */
.cp-m-hoja-lista { display: contents; }

/* Impuestos */
.cp-m-periodo {
  display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 2px;
  border: 1px solid #DCE5F6; border-radius: 14px; background: #FFFFFF;
}
.cp-m-periodo b { font-size: 15px; }
.cp-m-periodo button { width: 44px; height: 44px; border: 0; background: none; color: #46629C; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.cp-m-periodo button:disabled { color: #DCE5F6; cursor: default; }
.cp-m-pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cp-m-paso { display: flex; flex-direction: column; gap: 8px; }
.cp-m-paso span { height: 6px; border-radius: 3px; background: #DCE5F6; }
.cp-m-paso b { font-size: 12px; font-weight: 600; color: #6B7688; }
.cp-m-paso-hecho span { background: var(--cp-turquesa); }
.cp-m-paso-hecho b { font-weight: 700; color: #146C4E; }
.cp-m-paso-actual span { background: var(--cp-violeta-600); }
.cp-m-paso-actual b { font-weight: 700; color: var(--cp-violeta-700); }
.cp-m-nota { margin: 12px 0 0; font-size: 13px; line-height: 1.45; color: #46629C; }
.cp-m-desglose { padding: 6px 16px; }
.cp-m-desglose > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 46px; font-size: 15px; }
.cp-m-desglose > div + div { border-top: 1px solid #EDF0F5; }
.cp-m-desglose > div span:first-child { color: #46629C; }
.cp-m-desglose > div span:last-child { font-weight: 600; }
.cp-m-desglose .cp-m-total { min-height: calc(46px + 10px); }
.cp-m-desglose .cp-m-total b:first-child { font-size: 16px; }
.cp-m-desglose .cp-m-total b:last-child { font-size: 20px; }
.cp-m-primario {
  display: flex; align-items: center; justify-content: center; gap: 10px; height: 54px; border: 0; border-radius: 14px;
  background: var(--cp-violeta-600); color: #FFFFFF; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
}
.cp-m-primario:disabled { background: #B9A6EE; cursor: not-allowed; }
.cp-m-pronto { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; background: rgba(255, 255, 255, .22); }
/* Pegada a lo que acompaña (el botón de pagar o el desglose): 4 px más
   arriba (20/10/2026, pedido del dueño) para que "Vence el..." entre justo
   sobre la barra de abajo sin tocarla. */
.cp-m-nota-centro { margin: -10px 0 0; text-align: center; font-size: 13px; color: #6B7688; }

/* El plan pausado (21/10/2026): los montos del mes, sin el desarrollo; lo
   que no se abre, con candado. */
.cp-m-fila-bloqueada { cursor: default; }
.cp-m-fila-bloqueada .cp-m-fila-icono,
.cp-m-fila-bloqueada .cp-m-fila-txt b { opacity: .55; }
.cp-m-fila-bloqueada .cp-m-fila-flecha { color: #8A94A6; }
.cp-m-pausado-mes { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 24px 18px; text-align: center; }
.cp-m-pausado-rotulo { font-size: 13px; font-weight: 600; color: #46629C; }
.cp-m-pausado-monto { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; color: #0A1338; }
.cp-m-pausado-estado { font-size: 14px; color: #46629C; }
.cp-m-pausado-valor { margin-left: auto; font-size: 15px; color: #0A1338; white-space: nowrap; }
.cp-m-candado-nota { display: flex; align-items: flex-start; justify-content: center; gap: 6px; margin: 4px 8px 0; font-size: 13px; line-height: 1.45; color: #6B7688; text-align: left; }
.cp-m-candado-nota svg { flex: none; margin-top: 2px; }
.cp-pausado-card p { margin: 0 0 6px; }

/* Deslizar entre meses: el gesto horizontal es de la pantalla; el scroll
   vertical sigue siendo del navegador. */
.cp-m-desliza { touch-action: pan-y; }
.cp-m-mes {
  width: 100%; display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 14px;
  border: 0; background: none; font: inherit; text-align: left; cursor: pointer; color: #0A1338;
}
.cp-m-mes b { flex: 1; font-size: 15px; font-weight: 600; }
.cp-m-mes span:not(.cp-m-chip) { font-size: 15px; }
/* Los formularios presentados (7/10/2026): una fila por mes que descarga el
   PDF, y el botón del mes que se está mirando. Son enlaces: sin subrayado y
   con el alto mínimo de un dedo. */
.cp-m-formulario {
  display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px 14px;
  color: #0A1338; text-decoration: none;
}
.cp-m-formulario:active { background: #F5F8FF; }
.cp-m-formulario .cp-m-fila-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* El mes y el total declarado en un renglón, la fecha debajo: con el total
   al costado, en 375 px el nombre del mes se partía en dos líneas. */
.cp-m-formulario-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cp-m-formulario-cab b { font-size: 15px; font-weight: 600; color: #0A1338; white-space: nowrap; }
.cp-m-formulario-cab b:last-child { font-weight: 700; }
.cp-m-formulario .cp-m-fila-txt > span:not(.cp-m-formulario-cab) { font-size: 12.5px; color: #6B7688; }
.cp-m-formulario-der { flex: none; display: flex; align-items: center; color: var(--cp-violeta-600); }
a.cp-m-bajar { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 0; text-decoration: none; color: var(--cp-violeta-700); }
.cp-m-formularios-mas { margin-top: 0; }

/* Documentos */
.cp-m-buscar {
  display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px; border: 1px solid #DCE5F6; border-radius: 14px;
  background: #FFFFFF; color: #6B7688;
}
.cp-m-buscar input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; font: inherit; font-size: 15px; color: #0A1338; }
.cp-m-buscar:focus-within { border-color: #7137E8; box-shadow: 0 0 0 4px #F1ECFC; }
/* Compras / Ventas / Boletas (27/9/2026): la pestaña elegida la marca UNA
   píldora blanca que se desliza (transform, 250 ms) hasta la nueva. Tres
   columnas iguales con 4 px de borde y de separación: cada paso mide su
   propio ancho más 4 px. La posición sale de data-cp-m-seg-activo. */
.cp-m-segmentos { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 14px; background: #E9EEF8; }
.cp-m-seg-pildora {
  position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 16px) / 3); border-radius: 10px;
  background: #FFFFFF; box-shadow: 0 1px 3px rgba(10, 19, 56, .12); transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}
/* Con el plan sin Compras quedan dos (Ventas y Boletas, 20/10/2026). */
.cp-m-segmentos[data-cp-m-segs="2"] { grid-template-columns: repeat(2, 1fr); }
.cp-m-segmentos[data-cp-m-segs="2"] .cp-m-seg-pildora { width: calc((100% - 12px) / 2); }
.cp-m-segmentos[data-cp-m-seg-activo="1"] .cp-m-seg-pildora { transform: translateX(calc(100% + 4px)); }
.cp-m-segmentos[data-cp-m-seg-activo="2"] .cp-m-seg-pildora { transform: translateX(calc(200% + 8px)); }
.cp-m-segmentos button {
  position: relative; height: 40px; border: 0; border-radius: 10px; background: transparent; color: #46629C;
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: color .25s; -webkit-tap-highlight-color: transparent;
}
.cp-m-segmentos button[aria-selected="true"] { color: #0A1338; }
.cp-m-segmentos button:focus-visible { outline: 2px solid #7137E8; outline-offset: -2px; }
/* La lista nueva entra con un desliz y un fundido cortos desde el lado del
   cambio; la anterior, mientras carga, queda apagada y sin tocarse. */
#cp-m-docs-cuerpo.cp-m-docs-saliendo { opacity: .45; pointer-events: none; transition: opacity .15s; }
#cp-m-docs-cuerpo.cp-m-entra-der { animation: cp-m-entra-der .22s cubic-bezier(.2, .8, .2, 1); }
#cp-m-docs-cuerpo.cp-m-entra-izq { animation: cp-m-entra-izq .22s cubic-bezier(.2, .8, .2, 1); }
@keyframes cp-m-entra-der { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
@keyframes cp-m-entra-izq { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: none; } }
/* Un título por día y una tarjeta con sus documentos, 16 px entre días. */
.cp-m-docs-dias { display: flex; flex-direction: column; gap: 16px; }
.cp-m-docs-dia { display: flex; flex-direction: column; gap: 8px; }
.cp-m-docs-dia-titulo { margin: 0; padding: 0 2px; font-size: 13px; font-weight: 700; color: #46629C; }
.cp-m-docs-mas .cp-m-secundario { margin-top: 0; }
.cp-m-docs-mas-error { margin: 8px 0 0; font-size: 13px; color: #B4232F; text-align: center; }
.cp-m-docs-mas-error:empty { display: none; }
.cp-m-docs-resumen { display: flex; justify-content: space-between; gap: 12px; margin: -6px 0 10px; font-size: 13px; color: #46629C; }
.cp-m-docs-resumen b { color: #0A1338; }
.cp-m-doc { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 12px 14px; }
.cp-m-doc-tipo { flex: none; width: 40px; height: 40px; border-radius: 12px; background: #F5F8FF; color: #46629C; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.cp-m-doc .cp-m-fila-txt b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-m-doc-der { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.cp-m-doc-der b { font-size: 15px; }
.cp-m-secundario { margin-top: 12px; width: 100%; height: 48px; border: 1.5px solid #DCE5F6; border-radius: 14px; background: #FFFFFF; font: inherit; font-size: 15px; font-weight: 700; color: #0A1338; cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
  .cp-m-rueda-sale, .cp-m-rueda-entra, .cp-m-hoja, .cp-m-cargando { animation: none; }
  /* La píldora salta a su lugar y la lista aparece, sin recorrido. */
  .cp-m-seg-pildora, .cp-m-segmentos button, #cp-m-docs-cuerpo.cp-m-docs-saliendo { transition: none; }
  #cp-m-docs-cuerpo.cp-m-entra-der, #cp-m-docs-cuerpo.cp-m-entra-izq { animation: none; }
}
/* Los cuerpos que se pintan después de cargar también van en columna con
   el mismo aire entre tarjetas. */
#cp-m-inicio-cuerpo, #cp-m-f29-cuerpo, #cp-m-docs-cuerpo, #cp-m-notif-cuerpo { display: flex; flex-direction: column; gap: 16px; }
#cp-m-inicio-cuerpo { gap: 20px; }
#cp-m-notif-cuerpo { gap: 0; }

/* Registro libre (27/9/2026): "¿Ya tienes cuenta? Inicia sesión" bajo el formulario. */
.cp-activar-ya-tengo { margin: 16px 0 0; text-align: center; font-size: 0.9rem; color: var(--cp-muted); }
.cp-activar-ya-tengo a { font-weight: 700; color: var(--cp-violeta-600); text-decoration: none; }
/* "Revisa tu correo" (14/10/2026): lo que queda en la tarjeta después de
   llenar el registro, mientras la persona abre el enlace que le llegó. */
.cp-reg-revisa { margin-top: 18px; padding: 18px; border-radius: 14px; background: var(--cp-violeta-50); border: 1px solid var(--cp-violeta-200); }
.cp-reg-revisa-texto { margin: 0 0 8px; font-size: 0.95rem; line-height: 1.55; color: #101828; overflow-wrap: anywhere; }
.cp-reg-revisa-nota { margin: 0 0 14px; font-size: 0.84rem; line-height: 1.5; color: var(--cp-muted); }
.cp-reg-revisa-acciones { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cp-reg-otro { padding: 0; border: none; background: none; font-family: inherit; font-size: 0.875rem; font-weight: 650; color: var(--cp-violeta-600); text-decoration: underline; cursor: pointer; }
.cp-reg-revisa-estado { margin: 12px 0 0; font-size: 0.84rem; line-height: 1.5; color: #344054; }
.cp-reg-revisa-estado:empty { display: none; }

/* Mi cuenta: términos y política de privacidad (27/9/2026). */
.cp-cuenta-legal { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.cp-cuenta-legal a { font-size: 0.875rem; font-weight: 650; color: var(--cp-primary); }

/* Documentos en celular (27/9/2026): la fila se toca para ver el detalle,
   que sale como hoja desde abajo por encima de la barra inferior. */
button.cp-m-doc { width: 100%; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
button.cp-m-doc:active { background: var(--cp-page); }
.cp-m-boletas { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
/* Boletas dentro de Ventas y la pestaña BHE (20/10/2026). */
.cp-m-doc-nota { font-size: 12px; color: var(--cp-gris); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cp-m-doc-boletas .cp-m-fila-txt span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-m-doc.es-anulada .cp-m-doc-der b { color: var(--cp-gris); text-decoration: line-through; }
.cp-m-boletas-rotulo { font-size: 13px; color: var(--cp-gris); }
.cp-m-boletas-total { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--cp-tinta); }
.cp-m-boletas-datos { margin: 8px 0 0; display: grid; gap: 6px; }
.cp-m-boletas-datos div { display: flex; justify-content: space-between; font-size: 14px; }
.cp-m-boletas-datos dt { color: var(--cp-gris); }
.cp-m-boletas-datos dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--cp-tinta); }
@media (max-width: 719px) {
  .cp-rcv-detalle { z-index: 900; align-items: flex-end; justify-content: stretch; }
  .cp-rcv-detalle-panel {
    width: 100%; max-width: none; height: auto; max-height: 88dvh; border-radius: 22px 22px 0 0; overflow: hidden;
    padding-bottom: env(safe-area-inset-bottom); animation: cp-m-hoja-sube .25s cubic-bezier(.2, .8, .2, 1);
  }
  .cp-rcv-detalle-cabecera { border-radius: 22px 22px 0 0; }
  .cp-rcv-detalle-cerrar { width: 44px; height: 44px; }
}

/* EL SIMULADOR DE SUELDOS (7/10/2026, sueldos.js). A la izquierda el
   formulario y a la derecha el resultado; en una pantalla angosta, uno
   debajo del otro. El resultado abre con la tarjeta azul marino del Inicio
   del celular (el líquido en grande) y sigue con el desglose en filas.

   QUE ENTRE SIN BAJAR (pedido del usuario el mismo día: "no me gusta que se
   agrande hacia abajo ya que tengo que scrolear"). En una pantalla ancha
   "Más opciones" se abre hacia el lado -una segunda columna del formulario-
   y los tres bloques del resultado se reparten en las columnas que entren. */
.cp-sueldos-volver { display: none; }
.cp-sueldos-bajada { margin: -8px 0 18px; font-size: 0.875rem; color: var(--cp-gris); max-width: 720px; }
.cp-sueldos { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: start; max-width: 1680px; }

/* El formulario son tres piezas: los campos de siempre, "Más opciones" y el
   pie con el botón. Apiladas, salvo en la pantalla ancha (más abajo). */
.cp-sueldos-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; width: 420px; margin-bottom: 0; border-radius: 16px; }
.cp-sueldos-form-principal, .cp-sueldos-form-mas, .cp-sueldos-form-pie { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
/* Debajo del botón "Más opciones" el título sobra; al lado, hace falta. */
.cp-sueldos-form-mas > .cp-sueldos-subtitulo { display: none; }
.cp-sueldos-campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cp-sueldos-campo > label, .cp-sueldos-etiqueta { font-size: 0.8125rem; font-weight: 650; color: var(--cp-tinta); }
.cp-sueldos-fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.cp-sueldos-ayuda { margin: 0; font-size: 0.8125rem; line-height: 1.45; color: var(--cp-gris); }

/* "Cuánto recibe" / "Cuánto pactar": dos radios con forma de pestaña. El
   radio queda en el DOM (teclado y lector de pantalla), fuera de la vista. */
.cp-sueldos-modos { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 1px solid var(--cp-linea); border-radius: 12px; background: var(--cp-page); }
.cp-sueldos-modo { position: relative; display: block; cursor: pointer; }
.cp-sueldos-modo input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cp-sueldos-modo span { display: grid; place-items: center; height: 38px; border-radius: 9px; font-size: 0.875rem; font-weight: 650; color: var(--cp-gris); }
.cp-sueldos-modo input:checked + span { background: #fff; color: var(--cp-violeta-700); box-shadow: 0 1px 2px rgba(7, 27, 53, 0.12); }
.cp-sueldos-modo input:focus-visible + span { outline: 3px solid var(--cp-foco); outline-offset: 1px; }
/* Un solo año en la Renta (24/10/2026): el dibujo del elegido, sin cursor. */
.cp-sueldos-modos.es-uno { grid-template-columns: 1fr; }
.cp-sueldos-modo.es-fijo { cursor: default; }
.cp-sueldos-modo.es-fijo > span { background: #fff; color: var(--cp-violeta-700); box-shadow: 0 1px 2px rgba(7, 27, 53, 0.12); }

.cp-sueldos-entrada {
  display: flex; align-items: center; gap: 6px; height: 42px; padding: 0 12px;
  border: 1px solid var(--cp-linea); border-radius: 10px; background: #fff;
  font-size: 0.875rem; font-weight: 650; color: var(--cp-gris);
}
.cp-sueldos-entrada:focus-within { outline: 3px solid var(--cp-foco); outline-offset: 1px; }
.cp-sueldos-entrada input {
  flex: 1; min-width: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none;
  font: inherit; font-size: 0.9375rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--cp-tinta);
}
/* El anillo lo dibuja la caja entera (focus-within), no el campo de adentro. */
.cp-sueldos-entrada input:focus-visible { outline: none; }
/* El mínimo del mes como referencia dentro del campo: gris y más liviano que
   un monto escrito, para que no parezca puesto. 4,6:1 sobre blanco. */
.cp-sueldos-entrada input::placeholder { color: #6B7688; font-weight: 500; opacity: 1; }
/* El (i) del monto, al final de la caja. La tarjeta que abre es la del (i)
   del F29 (cp-f29-info-caja). */
.cp-sueldos-info { width: 24px; height: 24px; margin-right: -4px; }
.cp-sueldos-info svg { width: 17px; height: 17px; }
.cp-sueldos-campo select {
  width: 100%; min-width: 0; height: 42px; padding: 0 10px;
  border: 1px solid var(--cp-linea); border-radius: 10px; background: #fff;
  font: inherit; font-size: 0.9375rem; font-weight: 600; color: var(--cp-tinta);
}
/* El campo que hay que corregir: la caja en rojo. */
.cp-sueldos-entrada.es-invalido, .cp-sueldos-campo select.es-invalido { border-color: var(--cp-danger); box-shadow: 0 0 0 1px var(--cp-danger); }
/* El monto principal y su mes, un poco más altos que el resto. */
.cp-sueldos-fila-principal .cp-sueldos-entrada, .cp-sueldos-fila-principal select { height: 48px; }
.cp-sueldos-fila-principal .cp-sueldos-entrada input { font-size: 1.125rem; font-weight: 750; }
.cp-sueldos-fila-principal .cp-sueldos-entrada input::placeholder { font-weight: 500; }
.cp-sueldos-casilla { display: flex; align-items: center; gap: 10px; min-height: 28px; font-size: 0.875rem; color: var(--cp-tinta); cursor: pointer; }
.cp-sueldos-casilla input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--cp-violeta-600); }
.cp-sueldos-subtitulo { margin: 6px 0 -2px; font-size: 0.75rem; font-weight: 750; text-transform: uppercase; letter-spacing: 0.05em; color: var(--cp-gris); }
.cp-sueldos-mas-boton {
  display: flex; align-items: center; gap: 6px; align-self: flex-start; padding: 6px 8px 6px 2px;
  border: 0; border-radius: 8px; background: none;
  font: inherit; font-size: 0.875rem; font-weight: 650; color: var(--cp-violeta-600); cursor: pointer;
}
.cp-sueldos-mas-boton svg { width: 16px; height: 16px; flex: none; transition: transform 0.15s; }
.cp-sueldos-mas-boton[aria-expanded="true"] svg { transform: rotate(90deg); }
.cp-sueldos-mas-boton small { font-size: 0.75rem; font-weight: 600; color: var(--cp-gris); }
.cp-sueldos-mas-boton small:empty { display: none; }
.cp-sueldos-form .cp-error { margin: 0; }
/* El motivo del rechazo, debajo del campo en rojo (cuando el rojo solo no lo
   explica: un número fuera de rango, un mes sin indicadores). */
.cp-sueldos-campo-error { font-size: 0.8125rem; line-height: 1.4; }
.cp-sueldos-calcular { width: 100%; height: 46px; font-size: 1rem; }

.cp-sueldos-resultado { display: flex; flex-direction: column; gap: 14px; min-width: 0; font-variant-numeric: tabular-nums; scroll-margin-top: 80px; }
.cp-sueldos-resultado .cp-card { margin-bottom: 0; border-radius: 16px; }
.cp-sueldos-vacio { display: grid; justify-items: center; gap: 6px; padding: 44px 24px; text-align: center; color: var(--cp-gris); }
.cp-sueldos-vacio p { margin: 0; font-size: 0.875rem; max-width: 320px; }
.cp-sueldos-vacio b { font-size: 1rem; color: var(--cp-tinta); }
.cp-sueldos-vacio-icono { width: 36px; height: 36px; margin-bottom: 6px; color: var(--cp-violeta-600); }
.cp-sueldos-propuesta {
  display: flex; flex-direction: column; gap: 2px; padding: 14px 18px;
  background: #fff; border: 1px solid var(--cp-linea); border-left: 4px solid var(--cp-violeta-600); border-radius: 14px;
}
.cp-sueldos-propuesta span { font-size: 0.8125rem; font-weight: 650; color: var(--cp-gris); }
.cp-sueldos-propuesta b { font-size: 1.5rem; line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; color: var(--cp-tinta); }
.cp-sueldos-propuesta small { font-size: 0.8125rem; color: var(--cp-gris); }
/* El líquido a la izquierda y los dos totales a la derecha, en un renglón;
   si no entran, los totales bajan solos. */
.cp-sueldos-hero { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 32px; padding: 18px 22px; border-radius: 18px; background: #0A1338; color: #FFFFFF; }
.cp-sueldos-hero-principal { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cp-sueldos-hero-principal span { font-size: 0.8125rem; font-weight: 600; color: #B0BFDC; }
.cp-sueldos-hero-principal b { font-size: 2.25rem; line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; }
.cp-sueldos-hero-duo { display: flex; gap: 32px; }
.cp-sueldos-hero-duo > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cp-sueldos-hero-duo small { font-size: 0.75rem; color: #B0BFDC; }
.cp-sueldos-hero-duo b { font-size: 1.0625rem; font-weight: 750; }
.cp-sueldos-aviso { margin: 0; padding: 12px 14px; border-radius: 11px; font-size: 0.875rem; line-height: 1.5; color: var(--cp-tinta); background: var(--cp-aviso-suave); border: 1px solid var(--cp-aviso-borde); }
.cp-sueldos-aviso[hidden] { display: none; }
/* Los tres bloques, en las columnas que entren (de 300px para arriba): tres
   con el resultado ancho, dos con "Más opciones" abierto, una en el celular.
   El navegador reparte los bloques para que las columnas queden parejas. */
.cp-sueldos-bloques { columns: 300px; column-gap: 14px; margin-bottom: -14px; }
.cp-sueldos-bloques > .cp-card { break-inside: avoid; margin-bottom: 14px; padding: 16px 18px; }
.cp-card.cp-sueldos-bloque h2 { margin: 0 0 4px; font-size: 1rem; font-weight: 800; letter-spacing: -0.01em; color: var(--cp-tinta); }
.cp-sueldos-linea { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 0.875rem; color: var(--cp-tinta); }
.cp-sueldos-linea + .cp-sueldos-linea { border-top: 1px solid #EDF0F5; }
.cp-sueldos-linea b { font-weight: 650; white-space: nowrap; }
.cp-sueldos-linea.es-total span { font-weight: 750; }
.cp-sueldos-linea.es-total b { font-weight: 800; }
.cp-sueldos-pie { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: var(--cp-gris); }
.cp-modulo-abrir { font-size: 0.875rem; font-weight: 650; color: var(--cp-violeta-600); }

/* PANTALLA ANCHA: "Más opciones" al lado de los campos, no debajo. El
   formulario se ensancha hacia la derecha y conserva su alto; el botón de
   calcular queda donde estaba, al pie de la primera columna. Desde 1360px
   (entra un notebook de 1366): con el menú desplegado, al resultado le
   quedan unos 310px, una columna. */
@media (min-width: 1360px) {
  .cp-sueldos-form[data-mas="abierto"] { width: 724px; grid-template-columns: 380px 304px; column-gap: 0; }
  .cp-sueldos-form[data-mas="abierto"] .cp-sueldos-form-mas { grid-column: 2; grid-row: 1 / span 2; margin-left: 24px; padding-left: 24px; border-left: 1px solid #EDF0F5; }
  .cp-sueldos-form[data-mas="abierto"] .cp-sueldos-form-pie { grid-column: 1; grid-row: 2; align-self: end; }
  .cp-sueldos-form[data-mas="abierto"] .cp-sueldos-form-mas > .cp-sueldos-subtitulo { display: block; margin-top: 0; }
  .cp-sueldos-form[data-mas="abierto"] .cp-sueldos-form-mas .cp-sueldos-fila { grid-template-columns: minmax(0, 1fr); }
  .cp-sueldos-form[data-mas="abierto"] .cp-sueldos-mas-boton svg { transform: rotate(180deg); }
}
@media (max-width: 1100px) {
  .cp-sueldos { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
  .cp-sueldos-form { width: auto; }
}
/* En el celular: el enlace para volver a Inicio (la sección no está en la
   barra de abajo), campos del alto de un dedo y la letra de 16px, que es la
   que evita que el teléfono acerque la pantalla al tocar un campo. */
@media (max-width: 719px) {
  .cp-sueldos-volver { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; margin: 0 0 2px -6px; padding: 0 6px; font-size: 15px; font-weight: 700; color: var(--cp-violeta-700); text-decoration: none; }
  .cp-sueldos-entrada, .cp-sueldos-campo select { height: 48px; }
  .cp-sueldos-entrada input, .cp-sueldos-campo select { font-size: 16px; }
  /* Las listas, una por renglón: de a dos, "Septiembre 2026" o el nombre de
     la AFP con su porcentaje quedaban cortados. Los montos siguen de a dos. */
  .cp-sueldos-fila-principal, .cp-sueldos-fila-listas { grid-template-columns: minmax(0, 1fr); }
  .cp-sueldos-modo span { height: 42px; }
  .cp-sueldos-casilla { min-height: 44px; }
  .cp-sueldos-info { width: 36px; height: 36px; margin-right: -8px; }
  .cp-sueldos-mas-boton { min-height: 44px; }
  .cp-sueldos-calcular { height: 50px; }
  .cp-sueldos-hero-principal b { font-size: 2rem; }
  .cp-sueldos-hero-duo { width: 100%; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .12); }
  .cp-sueldos-hero-duo > span { flex: 1; }
  .cp-sueldos-linea { padding: 9px 0; font-size: 15px; }
}

/* LA RENTA ANUAL PRO PYME (7/10/2026, renta.js). La pantalla está hecha con
   las piezas del simulador de sueldos (cp-sueldos-*: el formulario a la
   izquierda, la tarjeta azul y los bloques en columnas). Acá va solo lo
   propio: el dato que llega del SII, el régimen, el estado del guardado y la
   tabla de meses. */
.cp-renta-auto {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; padding: 4px 12px;
  border: 1px solid var(--cp-linea); border-radius: 10px; background: var(--cp-page);
  font-size: 0.875rem; color: var(--cp-tinta);
}
/* El dato y de dónde salió, en un renglón: con tres datos leídos solos
   (compras, honorarios y la pérdida) el formulario tiene que seguir entrando. */
.cp-renta-auto span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; font-weight: 650; }
.cp-renta-auto small { font-size: 0.75rem; font-weight: 500; color: var(--cp-gris); }
.cp-renta-autos { display: grid; gap: 5px; }
/* Un poco más apretado que el simulador: con los datos leídos solos son más
   renglones, y tiene que entrar igual. */
.cp-renta-form { gap: 12px; }
/* El ✓ de cada monto, en celular (renta.js, cpRentaPintarOk): violeta si
   falta guardar, gris cuando quedó guardado. Sin animación: es un estado. */
.cp-renta-ok {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; margin-right: -7px;
  padding: 0; border: 0; border-radius: 9px; cursor: pointer;
  background: var(--cp-violeta-600); color: #fff;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.cp-renta-ok svg { width: 18px; height: 18px; }
.cp-renta-ok[data-estado="guardado"] { background: #EAECF0; color: #98A2B3; cursor: default; }
.cp-renta-ok:disabled { opacity: 0.6; }
.cp-renta-ok:focus-visible { outline: 3px solid var(--cp-foco); outline-offset: 2px; }
/* En el celular, un monto por renglón (23/10/2026): de a dos, con el ✓
   adentro, "200.000.000" no cabía y se cortaba ("00.000.000"). En la Renta
   los montos llegan a los cientos de millones; el simulador sigue de a dos. */
@media (max-width: 719px) {
  .cp-renta-form .cp-sueldos-fila { grid-template-columns: minmax(0, 1fr); }
}
.cp-renta-cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cp-renta-auto b { font-size: 0.9375rem; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cp-renta-regimen { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; font-size: 0.8125rem; color: var(--cp-gris); }
.cp-renta-regimen b { font-weight: 650; color: var(--cp-tinta); text-align: right; }
.cp-renta-estado { margin: 0; font-size: 0.75rem; line-height: 1.4; text-align: right; color: var(--cp-gris); }
.cp-renta-estado.es-error { color: var(--cp-danger); }
.cp-renta-form input:disabled, .cp-renta-form select:disabled { color: var(--cp-gris); cursor: not-allowed; }
.cp-renta-meses { width: 100%; border-collapse: collapse; font-size: 0.8125rem; font-variant-numeric: tabular-nums; color: var(--cp-tinta); }
.cp-renta-meses th, .cp-renta-meses td { padding: 5px 0 5px 8px; text-align: right; font-weight: 500; white-space: nowrap; }
.cp-renta-meses th:first-child { padding-left: 0; text-align: left; text-transform: capitalize; }
.cp-renta-meses tbody tr { border-top: 1px solid #EDF0F5; }
.cp-renta-meses thead th { font-size: 0.6875rem; font-weight: 750; text-transform: uppercase; letter-spacing: 0.05em; color: var(--cp-gris); }
.cp-renta-meses td.es-vacio { color: var(--cp-gris); }
.cp-renta-no-aplica { max-width: 640px; }

/* LA RENTA EN EL CELULAR (25/10/2026, propuesta 1b del dueño; renta.js,
   cpRentaMovilHtml). La cabecera (volver, el estado, "Renta" y su año, la
   tarjeta azul y las pestañas) se queda arriba mientras la pestaña se
   desplaza debajo; mientras se escribe deja de quedar fija (con el teclado
   abierto taparía el campo). Sin animaciones: cambiar de pestaña es un
   estado. Solo se arma en el teléfono. */
.cp-renta-m-cabecera { position: sticky; top: 0; z-index: 6; margin: -20px -20px 0; padding: 6px 20px 12px; background: var(--cp-page); }
.cp-renta-m.es-escribiendo .cp-renta-m-cabecera { position: static; }
.cp-renta-m-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cp-renta-m-fila .cp-sueldos-volver { margin-bottom: 0; }
.cp-renta-m-fila .cp-renta-estado { font-size: 12px; color: #46629C; }
.cp-renta-m-fila .cp-renta-estado.es-error { color: var(--cp-danger); }
.cp-renta-m-titulo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.cp-renta-m-titulo h1 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: var(--cp-tinta); }
.cp-renta-m-anio { font-size: 13px; font-weight: 650; color: #46629C; }
.cp-renta-m-anio select { height: 36px; padding: 0 8px; border: 1px solid #DCE5F6; border-radius: 10px; background: #fff; font: inherit; font-size: 16px; color: var(--cp-tinta); }
.cp-renta-m .cp-sueldos-hero { padding: 18px 20px; border-radius: 18px; }
.cp-renta-m .cp-sueldos-hero-principal b { font-size: 34px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cp-renta-m .cp-sueldos-hero-duo { width: 100%; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .12); }
.cp-renta-m .cp-sueldos-hero-duo > span { flex: 1; }
.cp-renta-m .cp-sueldos-hero-duo small { font-size: 12px; }
.cp-renta-m .cp-sueldos-hero-duo b { font-size: 16px; font-weight: 750; }
.cp-renta-m-pestanas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-top: 12px; padding: 4px; border: 1px solid #DCE5F6; border-radius: 12px; background: #fff; }
.cp-renta-m-pestanas button { height: 40px; padding: 0 4px; border: 0; border-radius: 9px; background: transparent; font: inherit; font-size: 14px; font-weight: 700; color: #46629C; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cp-renta-m-pestanas button[aria-selected="true"] { background: #F1EDFE; color: #5B21B6; }
.cp-renta-m-pestanas button:focus-visible { outline: 3px solid var(--cp-foco); outline-offset: 1px; }
.cp-renta-m-contenido { display: grid; grid-auto-rows: max-content; gap: 12px; padding-top: 12px; }
.cp-renta-m-avisos { display: grid; gap: 8px; }
.cp-renta-m-avisos:empty { display: none; }
.cp-renta-m-panel { display: grid; grid-auto-rows: max-content; gap: 12px; }
.cp-renta-m-panel[hidden] { display: none; }
.cp-renta-m-tarjeta { padding: 16px; border: 1px solid #DCE5F6; border-radius: 16px; background: #fff; }
.cp-renta-m-tarjeta .cp-sueldos-subtitulo { margin: 0 0 4px; font-size: 12px; }
.cp-renta-m-siis + .cp-sueldos-subtitulo { margin-top: 16px; }
.cp-renta-m-sii { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 0; font-size: 14px; color: var(--cp-tinta); }
.cp-renta-m-sii + .cp-renta-m-sii { border-top: 1px solid #EDF0F5; }
.cp-renta-m-sii span { font-weight: 600; }
.cp-renta-m-sii b { font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cp-renta-m-datos .cp-sueldos-campo + .cp-renta-m-campos { margin-top: 12px; }
.cp-renta-m-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 4px; }
/* Las etiquetas alineadas abajo y con alto mínimo: las dos columnas calzan
   aunque una ocupe dos líneas. */
.cp-renta-m-campos .cp-sueldos-campo { gap: 4px; }
.cp-renta-m-campos .cp-sueldos-campo > label { display: flex; align-items: flex-end; min-height: 32px; font-size: 12px; font-weight: 650; line-height: 1.3; }
.cp-renta-m-campos .cp-sueldos-entrada { height: 48px; padding: 0 6px 0 12px; border-color: #DCE5F6; border-radius: 12px; }
.cp-renta-m-campos .cp-sueldos-entrada input { font-size: 16px; font-weight: 650; }
.cp-renta-m-campos .cp-sueldos-entrada.es-pendiente { border-color: #7C3AED; }
.cp-renta-m-campos .cp-renta-ok { width: 34px; height: 38px; margin-right: 0; border-radius: 9px; background: #7C3AED; }
.cp-renta-m-cuenta .cp-sueldos-linea { padding: 9px 0; font-size: 15px; }
.cp-renta-m-cuenta .cp-sueldos-linea b { font-weight: 650; font-variant-numeric: tabular-nums; }
.cp-renta-m-cuenta .cp-sueldos-linea.es-total { padding: 12px 0; border-top-color: #DCE5F6; }
.cp-renta-m-cuenta .cp-sueldos-ayuda { margin: 8px 0; }
.cp-renta-m-meses { table-layout: fixed; }
.cp-renta-m-meses th:first-child { width: 44px; }
.cp-renta-m-meses th, .cp-renta-m-meses td { padding: 7px 0 7px 6px; }
.cp-renta-m-meses thead th, .cp-renta-m-meses thead th:first-child { font-size: 11px; text-transform: uppercase; }
.cp-renta-m-meses tbody th { font-weight: 650; }
.cp-renta-no-aplica p { margin: 0 0 6px; font-size: 0.9375rem; color: var(--cp-tinta); }

/* DEUDAS (23/10/2026, deudas.js). Una pantalla para el computador y el
   celular: un bloque por fuente (.cp-card) con las filas de la tarjeta Pagos
   del Inicio (.cp-fecha-item). Lo que no suma va en gris; una fecha vencida,
   en rojo y dicha en palabras. El dato corto va pegado al título. Sin
   movimiento propio: en el celular entra con la transición de las pantallas
   enteras (movil.js), que ya respeta "reducir movimiento". */
.cp-page-head > .cp-deudas-dato { margin: 0 auto 0 0; font-size: 0.875rem; font-weight: 650; color: var(--cp-gris); }
.cp-page-head > .cp-deudas-dato.es-deuda { color: var(--cp-tinta); }
.cp-deudas { display: grid; gap: 16px; max-width: 1360px; }
.cp-deudas-bloque { margin: 0; }
.cp-deudas-cab { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 12px; }
.cp-card .cp-deudas-cab h2 { margin: 0; font-size: 1.0625rem; font-weight: 750; color: var(--cp-tinta); }
.cp-deudas-ir {
  margin-left: auto; display: inline-flex; align-items: center; gap: 2px; min-height: 32px;
  font-size: 0.8125rem; font-weight: 750; color: var(--cp-violeta-700); text-decoration: none;
}
.cp-deudas-ir svg { width: 14px; height: 14px; flex: none; }
.cp-deudas-aviso { margin-bottom: 10px; }
.cp-deudas-texto { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cp-deudas-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.cp-deudas-titulo b { font-size: 0.875rem; font-weight: 650; color: var(--cp-tinta); }
.cp-deudas-detalle { font-size: 0.8125rem; line-height: 1.4; color: var(--cp-gris); }
.cp-deudas-fila.es-vencido .cp-deudas-detalle { color: var(--cp-danger); }
.cp-deudas-monto { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.cp-deudas-monto b { font-size: 0.875rem; font-weight: 750; color: var(--cp-tinta); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cp-deudas-monto small { display: inline-flex; align-items: center; gap: 4px; font-size: 0.75rem; color: var(--cp-gris); white-space: nowrap; }
.cp-deudas-fila.es-gris { background: #FFFFFF; }
.cp-deudas-fila.es-gris .cp-fecha-icono,
.cp-deudas-fila.es-gris .cp-deudas-titulo b,
.cp-deudas-fila.es-gris .cp-deudas-monto b { color: var(--cp-gris); }
/* El (i): el mismo círculo de Mi plan; la explicación abre debajo de la
   fila, a lo ancho. Sin animación: es un estado. */
.cp-deudas-info {
  position: relative; display: inline-grid; place-items: center; width: 18px; height: 18px; padding: 0;
  border: 1px solid var(--cp-linea); border-radius: 50%; background: transparent; color: var(--cp-gris);
  font-family: inherit; font-size: 11px; font-weight: 700; font-style: italic; line-height: 1; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.cp-deudas-info::after { content: ""; position: absolute; inset: -11px; }
.cp-deudas-info[aria-expanded="true"] { border-color: var(--cp-violeta-600); color: var(--cp-violeta-600); }
@media (hover: hover) { .cp-deudas-info:hover { border-color: var(--cp-violeta-600); color: var(--cp-violeta-600); } }
.cp-deudas-info:focus-visible { outline: 3px solid var(--cp-foco); outline-offset: 2px; }
.cp-deudas-info-texto {
  grid-column: 1 / -1; padding: 10px 12px; border: 1px solid var(--cp-linea); border-radius: 10px; background: #FFFFFF;
  font-size: 0.8125rem; line-height: 1.45; color: var(--cp-tinta);
}
.cp-deudas-info-texto[hidden] { display: none; }
/* LA TARJETA F29 (24/10/2026, deudas.js: diseño "3a" del dueño). Los 36
   meses en una grilla meses × años, los tres datos clave arriba y el
   detalle del mes elegido a la derecha (380 px). Si no cabe, el detalle
   pasa bajo la grilla: lo decide el ancho de la tarjeta (container query),
   que cambia con el menú lateral abierto o plegado; comparando con el año
   anterior, cada celda lleva 50 px más y el corte es más ancho. Los colores
   de estado son los de la especificación (el rojo es el del chip "corte"
   del celular) con la regla del dueño (24/10/2026): verde = declarado
   (pagado o no), amarillo = con observación, rojo = SOLO no declarado. Lo
   que no se sabe va en gris, nunca en verde ni en rojo, y lo declarado sin
   pagar nunca en rojo (tampoco "Por pagar hoy" ni su línea "Sin pagar").
   Las variables viven también en la hoja del celular, que cuelga del
   <body>. Sin animación: elegir un mes es un estado. */
.cp-deudas-otros { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 16px; align-items: start; }
/* Ninguna columna se ensancha por un aviso de una línea (su motivo se
   recorta): en el celular, el de PreviRed empujaba el bloque fuera de la
   pantalla. */
.cp-deudas-otros > * { min-width: 0; }
/* PreviRed (27/10/2026): conectar la cuenta, sus meses y "Revisar". */
.cp-prv-conectar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; }
.cp-prv-conectar p { flex: 1 1 220px; margin: 0; font-size: 0.8125rem; line-height: 1.45; color: var(--cp-gris); }
.cp-prv-form { display: grid; gap: 12px; margin-top: 12px; padding: 14px; border: 1px solid var(--cp-linea); border-radius: 12px; background: var(--cp-page); }
.cp-prv-form .cp-sueldos-entrada input { font-variant-numeric: normal; }
.cp-prv-ojo { display: grid; place-items: center; width: 32px; height: 32px; margin-right: -6px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--cp-gris); cursor: pointer; }
.cp-prv-ojo svg { width: 18px; height: 18px; }
.cp-prv-ojo[aria-pressed="true"] { color: var(--cp-primary); }
.cp-prv-ojo:focus-visible { outline: 3px solid var(--cp-foco); outline-offset: 1px; }
.cp-prv-error { margin: 0; font-size: 0.8125rem; line-height: 1.4; color: var(--cp-danger); }
.cp-prv-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.cp-prv-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 12px; font-size: 0.8125rem; color: var(--cp-tinta); }
.cp-prv-pie small { font-size: 0.75rem; color: var(--cp-gris); }
.cp-prv-pie + .cp-prv-error { margin-top: 8px; }
.cp-prv-enlace { padding: 0; border: 0; background: none; font: inherit; font-size: 0.8125rem; font-weight: 650; color: var(--cp-primary); cursor: pointer; }
.cp-prv-enlace.es-peligro, .cp-prv-peligro { color: var(--cp-danger); }
.cp-prv-enlace:focus-visible { outline: 3px solid var(--cp-foco); outline-offset: 2px; border-radius: 4px; }
@media (hover: hover) { .cp-prv-enlace:hover { text-decoration: underline; } }
.cp-dt, .cp-dt-hoja {
  --dt-declarado-fondo: #E9F6EE; --dt-declarado-tinta: #0B5A35; --dt-declarado-borde: #BFE6D5;
  --dt-observacion-fondo: #FDF5D9; --dt-observacion-tinta: #7A5200; --dt-observacion-borde: #F0DCB4;
  --dt-no-declarado-fondo: #FDECEC; --dt-no-declarado-tinta: #B42318; --dt-no-declarado-borde: #F6C8C3;
  --dt-curso-fondo: #F7F5FF; --dt-curso-tinta: #4F2BD9; --dt-curso-borde: #DCD3FB;
  --dt-sin-fondo: #F1F3F8; --dt-sin-tinta: #5A5F86; --dt-sin-borde: #DCE0EA;
  --dt-elegida: #F2EEFF; --dt-morado: #4F2BD9;
  --dt-baja: oklch(0.52 0.12 150); --dt-sube: oklch(0.52 0.12 28);
}
.cp-dt { container: cp-dt / inline-size; }
.cp-dt-cab { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 16px; }
.cp-card .cp-dt-cab h2 { margin: 0; font-size: 1.25rem; font-weight: 750; color: var(--cp-tinta); }
.cp-dt-revisado { font-size: 0.9375rem; color: var(--cp-gris); }
.cp-dt-cab-der { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.cp-dt-cab-der .cp-deudas-ir { margin-left: 0; font-size: 0.9375rem; color: var(--dt-morado); }
/* EL INTERRUPTOR DE CLAVE TRIBUTARIA (24/10/2026, el dueño: "esto tiene que
   ser como el de Clave Tributaria"): el mismo dibujo que la app interna
   (public/styles/app.css, "INTERRUPTORES: UN SOLO ESTILO PARA TODO EL
   SISTEMA"): pista gris que se pone verde, círculo blanco con el tilde verde
   al prender y la rayita blanca que lo acompaña. El movimiento es el del
   portal (una sola curva, sin rebote) y se queda quieto con reducir
   movimiento. */
.cp-dt-comparar {
  display: inline-flex; align-items: center; gap: 10px; min-height: 32px; padding: 0; border: 0; background: none;
  font: inherit; font-size: 0.9375rem; font-weight: 600; color: var(--cp-tinta); cursor: pointer;
}
.cp-dt-comparar .cp-m-interruptor {
  --sw-ancho: 46px; --sw-alto: 24px; --sw-circulo: 18px; --sw-borde: 3px; --sw-raya: 9px;
  --sw-curva: 200ms cubic-bezier(0.05, 0.7, 0.1, 1);
  flex: none; width: var(--sw-ancho); height: var(--sw-alto); border-radius: 999px;
  background: rgb(131, 131, 131); transition: background var(--sw-curva);
}
.cp-dt-comparar .cp-m-interruptor::before {
  content: ""; position: absolute; top: 50%; transform: translateY(-50%);
  left: calc(var(--sw-borde) + var(--sw-raya) / 2); width: var(--sw-raya); height: calc(var(--sw-raya) / 2 - 1px);
  border-radius: 1px; background: #fff; transition: left var(--sw-curva);
}
.cp-dt-comparar .cp-m-interruptor i {
  z-index: 1; top: var(--sw-borde); left: var(--sw-borde); width: var(--sw-circulo); height: var(--sw-circulo); border-radius: 50%;
  background: #fff center / 10px no-repeat; box-shadow: 1px 1px 2px rgba(146, 146, 146, 0.45); transition: left var(--sw-curva);
}
.cp-dt-comparar[aria-checked="true"] .cp-m-interruptor { background: rgb(0, 218, 80); }
.cp-dt-comparar[aria-checked="true"] .cp-m-interruptor::before { left: calc(100% - var(--sw-raya) * 1.5 - var(--sw-borde)); }
.cp-dt-comparar[aria-checked="true"] .cp-m-interruptor i {
  left: calc(100% - var(--sw-circulo) - var(--sw-borde));
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300da50' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><path d='m5 13 4 4 10-10'/></svg>");
  box-shadow: -1px 1px 2px rgba(163, 163, 163, 0.45);
}
@media (prefers-reduced-motion: reduce) {
  .cp-dt-comparar .cp-m-interruptor, .cp-dt-comparar .cp-m-interruptor::before, .cp-dt-comparar .cp-m-interruptor i { transition: none; }
}
.cp-dt-comparar:focus-visible { outline: 3px solid var(--cp-foco); outline-offset: 3px; border-radius: 8px; }

/* Los tres datos clave. En cero, sin color de alarma. "Por pagar hoy" va
   en la tinta de siempre: suma sobre todo meses declarados (verdes), y el
   rojo es solo de lo no declarado. */
.cp-dt-datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.cp-dt-dato { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 14px 16px; border: 1px solid var(--cp-linea); border-radius: 14px; background: #FFFFFF; }
.cp-dt-dato-titulo { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--cp-gris); }
.cp-dt-dato-valor { font-size: 1.625rem; font-weight: 750; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--cp-tinta); }
.cp-dt-dato-valor small { display: inline-block; margin-left: 4px; font-size: 0.875rem; font-weight: 650; white-space: nowrap; }
.cp-dt-dato-sub { font-size: 0.8125rem; line-height: 1.35; color: var(--cp-gris); }
.cp-dt-dato.es-observacion .cp-dt-dato-valor { color: var(--dt-observacion-tinta); }
.cp-dt-dato.es-proximo .cp-dt-dato-valor { color: var(--dt-morado); }
.cp-dt-dato.es-cero .cp-dt-dato-valor { color: var(--cp-tinta); }
.cp-dt-dato.es-sin .cp-dt-dato-valor { color: var(--dt-sin-tinta); }

/* El detalle va a la derecha cuando la grilla igual cabe con los montos
   enteros (ver .cp-dt-tabla): 340 px en una tarjeta mediana (un portátil de
   1366 con el menú abierto) y los 380 px de la especificación desde 1040.
   Comparando, cada celda lleva 56 px más: a la derecha solo desde 1280. */
.cp-dt-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
@container cp-dt (min-width: 1000px) {
  .cp-dt-cuerpo { grid-template-columns: minmax(0, 1fr) 340px; }
}
@container cp-dt (min-width: 1040px) {
  .cp-dt-cuerpo { grid-template-columns: minmax(0, 1fr) 380px; }
}
@container cp-dt (min-width: 1000px) and (max-width: 1279px) {
  .cp-dt.es-comparando .cp-dt-cuerpo { grid-template-columns: minmax(0, 1fr); }
}
@container cp-dt (max-width: 640px) {
  .cp-dt-datos { grid-template-columns: minmax(0, 1fr); }
}

/* La grilla: filas = meses, columnas = años y el promedio. Celdas de 34 px
   con el monto entero; la elegida, con fondo morado claro y borde de 2 px
   (por dentro: no mueve nada). Si en una pantalla angosta no cabe, se
   desplaza la grilla, nunca la página, y nunca se corta el monto: el ancho
   mínimo de la tabla deja en cada celda "$14.250.000 est." (y, comparando,
   además la flecha y el %), revisión del 24/10/2026: con 760 px se cortaban
   35 de 36 montos en una tablet. */
.cp-dt-grilla { min-width: 0; margin-inline: -6px; overflow-x: auto; }
.cp-dt-tabla { width: 100%; min-width: 650px; border-collapse: separate; border-spacing: 6px 5px; table-layout: fixed; }
.cp-dt-tabla th.cp-dt-mes { width: 90px; }
.cp-dt-tabla th.cp-dt-prom { width: 52px; }
.cp-dt.es-comparando .cp-dt-tabla { min-width: 880px; }
.cp-dt-tabla thead th { padding: 0 0 2px; font-size: 0.875rem; font-weight: 700; color: var(--dt-morado); text-align: center; }
.cp-dt-tabla thead th.cp-dt-prom { font-size: 0.6875rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--cp-gris); text-align: right; }
.cp-dt-tabla abbr { text-decoration: none; }
.cp-dt-tabla tbody th { padding: 0; font-size: 0.9375rem; font-weight: 600; color: var(--cp-tinta); text-align: left; white-space: nowrap; }
.cp-dt-tabla td { padding: 0; }
.cp-dt-tabla td.cp-dt-prom { font-size: 0.75rem; color: var(--cp-gris); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cp-dt-celda {
  display: flex; align-items: center; gap: 6px; width: 100%; height: 34px; padding: 0 8px; border: 0; border-radius: 6px;
  background: var(--dt-sin-fondo); color: var(--dt-sin-tinta);
  font: inherit; font-size: 0.8125rem; font-weight: 700; font-variant-numeric: tabular-nums; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* El "…" queda solo de último recurso (un monto de 9 cifras en el ancho
   mínimo): con los anchos de arriba no se corta. */
.cp-dt-monto { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-dt-monto small, .cp-dt-det-monto small, .cp-dt-fila-monto small { margin-left: 3px; font-size: 0.6875rem; font-weight: 650; }
.cp-dt-monto small { margin-left: 2px; font-size: 0.625rem; }
.cp-dt-det-monto small { font-size: 0.875rem; }
.cp-dt-sin { font-weight: 600; }
.cp-dt-celda.es-declarado, .cp-dt-fila.es-declarado { background: var(--dt-declarado-fondo); color: var(--dt-declarado-tinta); }
.cp-dt-celda.es-observacion, .cp-dt-fila.es-observacion { background: var(--dt-observacion-fondo); color: var(--dt-observacion-tinta); }
.cp-dt-celda.es-no_declarado, .cp-dt-fila.es-no_declarado { background: var(--dt-no-declarado-fondo); color: var(--dt-no-declarado-tinta); }
.cp-dt-celda.es-en_curso, .cp-dt-fila.es-en_curso { background: var(--dt-curso-fondo); color: var(--dt-curso-tinta); }
.cp-dt-celda[aria-current="true"] { background: var(--dt-elegida); box-shadow: inset 0 0 0 2px var(--dt-morado); }
@media (hover: hover) {
  .cp-dt-celda:hover { box-shadow: inset 0 0 0 1px currentColor; }
  .cp-dt-celda[aria-current="true"]:hover { box-shadow: inset 0 0 0 2px var(--dt-morado); }
}
.cp-dt-celda:focus-visible, .cp-dt-fila:focus-visible { outline: 3px solid var(--cp-foco); outline-offset: 2px; }
/* Comparar con el año anterior: flecha a la izquierda y % a la derecha, en
   una columna fija de 50 px. El color exacto lo pone deudas.js
   (cpDtPintarColores); este es el de respaldo. */
.cp-dt-var { flex: none; display: flex; align-items: center; justify-content: space-between; width: 50px; margin-left: auto; font-size: 11px; font-weight: 700; }
.cp-dt-var i { font-style: normal; font-size: 10px; }
.cp-dt-var.es-baja { color: var(--dt-baja); }
.cp-dt-var.es-sube { color: var(--dt-sube); }
.cp-dt-var.es-igual { justify-content: flex-end; color: var(--cp-gris); }

.cp-dt-leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0; padding: 0 6px; list-style: none; font-size: 0.8125rem; color: var(--cp-gris); }
.cp-dt-leyenda li { display: inline-flex; align-items: center; gap: 6px; }
.cp-dt-muestra { flex: none; width: 12px; height: 12px; border: 1.5px solid; border-radius: 3px; }
.cp-dt-muestra.es-declarado { background: var(--dt-declarado-fondo); border-color: var(--dt-declarado-tinta); }
.cp-dt-muestra.es-observacion { background: var(--dt-observacion-fondo); border-color: #C99A1A; }
.cp-dt-muestra.es-no_declarado { background: var(--dt-no-declarado-fondo); border-color: var(--dt-no-declarado-tinta); }
.cp-dt-muestra.es-en_curso { background: var(--dt-curso-fondo); border-color: var(--dt-curso-tinta); }
.cp-dt-muestra.es-sin_datos { background: var(--dt-sin-fondo); border-color: var(--dt-sin-tinta); }
.cp-dt-flechas { display: inline-flex; gap: 2px; font-size: 10px; }
.cp-dt-flechas i { font-style: normal; }
.cp-dt-flechas .es-baja { color: var(--dt-baja); }
.cp-dt-flechas .es-sube { color: var(--dt-sube); }

/* El detalle del mes: solo deuda. Un mes sin pagar dice, bajo el monto, que
   está sujeto a multas e intereses (no se calculan: decisión del dueño): en
   la tinta de siempre si está declarado, en rojo solo si no lo está. La
   observación del equipo, en una línea ámbar con su icono. */
.cp-dt-detalle { min-width: 0; padding: 20px; border: 1px solid var(--cp-linea); border-radius: 14px; background: var(--cp-superficie); }
/* Bajo la grilla y con ancho (menú abierto y comparando, o una pantalla
   mediana), el detalle va en dos columnas: qué es y qué hacer. */
@container cp-dt (min-width: 720px) and (max-width: 999px) {
  .cp-dt-detalle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; align-items: start; }
  .cp-dt-det-hacer > :first-child { margin-top: 0; }
}
@container cp-dt (min-width: 1000px) and (max-width: 1279px) {
  .cp-dt.es-comparando .cp-dt-detalle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; align-items: start; }
  .cp-dt.es-comparando .cp-dt-det-hacer > :first-child { margin-top: 0; }
}
.cp-dt-det-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.cp-dt-det-cab h3 { margin: 0; font-size: 1.25rem; font-weight: 750; color: var(--cp-tinta); }
.cp-pastilla-dt-declarado { background: var(--dt-declarado-fondo); border-color: var(--dt-declarado-borde); color: var(--dt-declarado-tinta); }
.cp-pastilla-dt-observacion { background: var(--dt-observacion-fondo); border-color: var(--dt-observacion-borde); color: var(--dt-observacion-tinta); }
.cp-pastilla-dt-no_declarado { background: var(--dt-no-declarado-fondo); border-color: var(--dt-no-declarado-borde); color: var(--dt-no-declarado-tinta); }
.cp-pastilla-dt-en_curso { background: var(--dt-curso-fondo); border-color: var(--dt-curso-borde); color: var(--dt-curso-tinta); }
.cp-pastilla-dt-sin_datos { background: var(--dt-sin-fondo); border-color: var(--dt-sin-borde); color: var(--dt-sin-tinta); }
.cp-dt-det-monto { margin: 14px 0 0; font-size: 2rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; color: var(--cp-tinta); }
.cp-dt-det-monto.es-declarado { color: var(--dt-declarado-tinta); }
.cp-dt-det-monto.es-observacion { color: var(--dt-observacion-tinta); }
.cp-dt-det-monto.es-no_declarado { color: var(--dt-no-declarado-tinta); }
.cp-dt-det-monto.es-en_curso { color: var(--dt-curso-tinta); }
.cp-dt-det-monto.es-sin_datos, .cp-dt-det-monto .cp-dt-sin { color: var(--dt-sin-tinta); }
.cp-dt-det-monto .cp-dt-sin { font-size: 1.375rem; font-weight: 700; }
.cp-dt-sujeto { margin: 6px 0 0; font-size: 0.875rem; font-weight: 650; color: var(--cp-tinta); }
.cp-dt-sujeto.es-no_declarado { color: var(--dt-no-declarado-tinta); }
.cp-dt-det-nota { margin: 4px 0 0; font-size: 0.875rem; line-height: 1.4; color: var(--cp-gris); }
.cp-dt-obs { display: flex; align-items: flex-start; gap: 6px; margin: 10px 0 0; font-size: 0.875rem; font-weight: 650; line-height: 1.4; color: var(--dt-observacion-tinta); }
.cp-dt-obs svg { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.cp-dt-caja { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: var(--dt-observacion-fondo); color: var(--dt-observacion-tinta); }
.cp-dt-caja-titulo { margin: 0 0 4px; font-size: 0.8125rem; font-weight: 750; }
.cp-dt-caja-fila { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: 0.875rem; }
.cp-dt-caja-fila b { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cp-dt-caja-fila.es-total { margin-top: 4px; padding-top: 7px; border-top: 1px solid var(--dt-observacion-borde); font-weight: 750; }
.cp-dt-cobro { margin-top: 14px; padding: 9px 14px; border: 1px solid var(--cp-linea); border-radius: 10px; background: #FFFFFF; color: var(--cp-tinta); }
.cp-dt-pagado { display: flex; align-items: center; gap: 6px; margin: 14px 0 0; font-size: 0.875rem; font-weight: 650; color: var(--dt-declarado-tinta); }
.cp-dt-pagado svg { flex: none; width: 16px; height: 16px; }
.cp-dt-linea { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 14px 0 0; font-size: 0.8125rem; color: var(--cp-gris); }
.cp-dt-detalle .cp-deudas-info-texto, .cp-dt-hoja .cp-deudas-info-texto { display: block; margin-top: 8px; }
.cp-dt-detalle .cp-deudas-info-texto[hidden], .cp-dt-hoja .cp-deudas-info-texto[hidden] { display: none; }
.cp-dt-detalle .cp-m-primario, .cp-dt-hoja .cp-m-primario { width: 100%; height: 48px; margin-top: 16px; border-radius: 12px; font-size: 0.9375rem; text-decoration: none; }
.cp-dt-detalle a.cp-m-primario:focus-visible, .cp-dt-hoja a.cp-m-primario:focus-visible, .cp-dt-ver:focus-visible { outline: 3px solid var(--cp-foco); outline-offset: 2px; }
.cp-dt-ver { display: flex; align-items: center; justify-content: center; gap: 2px; min-height: 40px; margin-top: 10px; font-size: 0.9375rem; font-weight: 700; color: var(--dt-morado); text-decoration: none; }
.cp-dt-ver svg { flex: none; width: 14px; height: 14px; }

/* El celular: los tres datos apilados y compactos, chips de año y la lista
   de los meses de ese año con el color de su estado. Tocar un mes abre su
   detalle en la hoja de abajo (.cp-dt-hoja). */
.cp-dt.es-movil .cp-dt-cab { margin-bottom: 12px; }
.cp-dt.es-movil .cp-dt-datos { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 16px; }
.cp-dt.es-movil .cp-dt-dato { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 10px; padding: 10px 12px; border-radius: 12px; }
.cp-dt.es-movil .cp-dt-dato-titulo { grid-column: 1; grid-row: 1; }
.cp-dt.es-movil .cp-dt-dato-valor { grid-column: 2; grid-row: 1; font-size: 1.125rem; text-align: right; white-space: nowrap; }
/* "+ 1 sin declarar" va bajo el monto: al lado apretaba el título. */
.cp-dt.es-movil .cp-dt-dato-valor small { display: block; margin: 2px 0 0; font-size: 0.75rem; }
.cp-dt.es-movil .cp-dt-dato-sub { grid-column: 1 / -1; font-size: 0.75rem; }
.cp-dt-anios { display: flex; gap: 8px; margin: 0 0 12px; overflow-x: auto; }
.cp-dt-anio { flex: none; min-height: 36px; background: #FFFFFF; border-color: var(--cp-linea); color: var(--cp-gris); }
.cp-dt-anio[aria-pressed="true"] { background: var(--dt-elegida); border-color: var(--dt-morado); color: var(--dt-morado); }
/* El año que no está todo verde, en rojo (25/10/2026); elegido, con el borde rojo. */
.cp-dt-anio.es-rojo { background: #FDECEC; border-color: #F5C2C0; color: #B42318; }
.cp-dt-anio.es-rojo[aria-pressed="true"] { background: #FDECEC; border-color: #B42318; color: #B42318; }
.cp-dt-anio:focus-visible { outline: 3px solid var(--cp-foco); outline-offset: 2px; }
.cp-dt-lista { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cp-dt-fila {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 8px 12px; border: 0; border-radius: 10px;
  background: var(--dt-sin-fondo); color: var(--dt-sin-tinta); font: inherit; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.cp-dt-fila-mes { flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cp-dt-fila-mes b { font-size: 0.9375rem; font-weight: 700; color: var(--cp-tinta); }
.cp-dt-fila-mes span { font-size: 0.75rem; font-weight: 650; }
.cp-dt-fila-monto { font-size: 0.9375rem; font-weight: 750; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cp-dt-fila-ir { flex: none; width: 16px; height: 16px; }
.cp-dt-hoja { padding-bottom: 8px; }
.cp-dt-hoja .cp-dt-det-monto { margin-top: 8px; }
@media (max-width: 719px) {
  .cp-deudas { gap: 14px; }
  .cp-deudas-bloque { padding: 16px; border-radius: 16px; }
  .cp-deudas-fila { gap: 10px; padding: 10px 12px; }
  .cp-deudas-titulo b { font-size: 0.9375rem; }
}

/* RR.HH.: LAS PESTAÑAS Y EL PERSONAL (7/10/2026, personal.js). RR.HH. tiene
   dos subsecciones en pestañas (Personal y Simulador de sueldos). Personal
   usa el armado del simulador: a la izquierda se sube el archivo, a la
   derecha va lo detectado para revisar o el personal ya guardado. */
.cp-rrhh-tabs { display: flex; gap: 4px; margin: -4px 0 16px; border-bottom: 1px solid var(--cp-linea); }
.cp-rrhh-tab { margin-bottom: -1px; padding: 9px 14px; border-bottom: 2px solid transparent; font-size: 0.9375rem; font-weight: 650; color: var(--cp-gris); text-decoration: none; }
.cp-rrhh-tab:hover { color: var(--cp-tinta); }
.cp-rrhh-tab[aria-current="page"] { color: var(--cp-violeta-700); border-bottom-color: var(--cp-violeta-600); }
.cp-banner-enlace { display: inline-block; margin-top: 6px; font-size: 0.875rem; font-weight: 650; color: var(--cp-violeta-600); }
.cp-personal-titulo { margin: 0; font-size: 1.0625rem; font-weight: 800; letter-spacing: -0.01em; color: var(--cp-tinta); }
.cp-personal-titulo small { margin-left: 6px; font-size: 0.8125rem; font-weight: 500; color: var(--cp-gris); }
/* Donde se suelta o se elige el archivo. Es la etiqueta del campo de
   archivo, que queda fuera de la vista: el foco del teclado se dibuja acá. */
.cp-personal-zona {
  display: grid; justify-items: center; gap: 4px; padding: 26px 16px; text-align: center; cursor: pointer;
  border: 2px dashed var(--cp-linea); border-radius: 14px; background: var(--cp-page); color: var(--cp-gris);
}
.cp-personal-zona:hover, .cp-personal-zona.es-encima { border-color: var(--cp-violeta-600); background: var(--cp-violeta-50); }
.cp-personal-subir:has(#cp-personal-archivo:focus-visible) .cp-personal-zona { outline: 3px solid var(--cp-foco); outline-offset: 2px; }
/* Mientras se lee un archivo no se puede elegir otro: el campo queda
   deshabilitado y lo que se suelte se descarta. SIN pointer-events: none: la
   zona tiene que seguir recibiendo el archivo soltado para atajarlo; si no,
   el navegador lo abre y saca a la persona del portal. */
.cp-personal-zona.es-leyendo { opacity: 0.55; cursor: progress; border-color: var(--cp-linea); background: var(--cp-page); }
.cp-personal-zona b { font-size: 0.9375rem; color: var(--cp-tinta); }
.cp-personal-zona small { font-size: 0.8125rem; }
.cp-personal-zona-icono { width: 32px; height: 32px; margin-bottom: 4px; color: var(--cp-violeta-600); }
/* Mientras se lee el archivo: va donde después aparece lo detectado, con la
   barra de la pantalla de carga del portal (cp-carga-barra), más ancha. Sin
   porcentaje: el servidor no avisa cuánto lleva. */
.cp-personal-leyendo { animation: cp-carga-fundido 180ms ease-out; }
.cp-personal-leyendo .cp-personal-leyendo-nombre { max-width: min(420px, 100%); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-personal-barra { width: min(260px, 100%); height: 6px; margin-top: 14px; border-radius: 99px; background: #EDEFF8; overflow: hidden; }
.cp-personal-barra span { display: block; width: 40%; height: 100%; border-radius: inherit; background: var(--cp-violeta-600); animation: cp-carga-barra 1.1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .cp-personal-leyendo { animation: none; }
  .cp-personal-barra span { width: 100%; animation: cp-carga-pulso 1.6s ease-in-out infinite; }
}
.cp-personal-cargas { list-style: none; margin: 0; padding: 0; }
.cp-personal-cargas li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid #EDF0F5; font-size: 0.8125rem; color: var(--cp-tinta); }
.cp-personal-cargas span { display: flex; flex-direction: column; min-width: 0; }
.cp-personal-cargas span:last-child { flex: none; text-align: right; }
.cp-personal-cargas b { font-weight: 650; }
.cp-personal-cargas small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cp-gris); }
.cp-personal-revisar, .cp-personal-lista { display: flex; flex-direction: column; gap: 14px; }
/* La tabla de personas se desplaza adentro de su caja: con cuarenta
   personas la página no se estira. */
.cp-personal-tabla-caja { max-height: 392px; overflow: auto; border: 1px solid #EDF0F5; border-radius: 10px; }
.cp-personal-tabla { width: 100%; border-collapse: collapse; font-size: 0.875rem; font-variant-numeric: tabular-nums; color: var(--cp-tinta); }
.cp-personal-tabla th, .cp-personal-tabla td { padding: 8px 12px; text-align: left; font-weight: 500; }
.cp-personal-tabla th:last-child, .cp-personal-tabla td:last-child { text-align: right; white-space: nowrap; }
.cp-personal-tabla thead th { position: sticky; top: 0; background: #fff; font-size: 0.6875rem; font-weight: 750; text-transform: uppercase; letter-spacing: 0.05em; color: var(--cp-gris); }
.cp-personal-tabla tbody tr { border-top: 1px solid #EDF0F5; }
.cp-personal-tabla tbody th { font-weight: 600; }
.cp-personal-tabla td small { display: block; font-size: 0.75rem; color: var(--cp-gris); }
.cp-personal-tabla td.es-vacio { color: var(--cp-gris); }
.cp-personal-acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.cp-personal-nota { margin: 0; padding: 12px 14px; border-radius: 11px; font-size: 0.875rem; line-height: 1.5; color: #085D3A; background: #ECFDF3; border: 1px solid #ABEFC6; }
.cp-personal-revisar select.es-invalido { border-color: var(--cp-danger); box-shadow: 0 0 0 1px var(--cp-danger); }
/* El mensaje emergente: "este archivo no parece ser de tu empresa". */
.cp-dialogo { width: min(440px, calc(100vw - 32px)); padding: 22px; border: 0; border-radius: 16px; color: var(--cp-tinta); background: #fff; box-shadow: 0 24px 60px rgba(7, 27, 53, 0.28); }
.cp-dialogo::backdrop { background: rgba(10, 19, 56, 0.5); }
.cp-dialogo h2 { margin: 0 0 8px; font-size: 1.125rem; line-height: 1.3; font-weight: 800; }
.cp-dialogo p { margin: 0 0 18px; font-size: 0.9375rem; line-height: 1.5; color: var(--cp-gris); }
@media (max-width: 719px) {
  .cp-rrhh-tab { padding: 12px 10px; font-size: 15px; }
  .cp-personal-acciones > * { flex: 1 1 100%; min-height: 48px; }
}

/* AGREGAR OTRA EMPRESA (7/10/2026, vincular-sii.js). Es la pantalla de
   conexión con el SII de siempre; al entrar a agregar, la barra de pasos
   "Cuenta / SII" sobra: es del alta de una cuenta nueva. */
#cp-activar-shell[data-modo="agregar"] .cp-activar-pasos { display: none; }
.cp-m-hoja-agregar { margin-top: 10px; }

/* LA TARJETA DE CONEXIÓN SE AJUSTA SOLA A LA VENTANA (7/10/2026, ver
   cpAjustarAltoSii en vincular-sii.js). El navegador mide la pantalla y,
   mientras sea más alta que la ventana, suma el nivel siguiente. Cada nivel
   compacta un poco más; ninguno saca el aviso del plan ni las salidas. Van
   con el id del armazón para ganarle a las reglas por alto de ventana. */
/* 1: menos aire. */
#cp-activar-shell.cp-sii-ajuste-1 { padding: 12px 24px; }
#cp-activar-shell.cp-sii-ajuste-1 .cp-activar-form { padding: 22px 36px; }
#cp-activar-shell.cp-sii-ajuste-1 .cp-activar-lado { padding: 24px 30px; }
#cp-activar-shell.cp-sii-ajuste-1 .cp-sii-estado-sub { margin-bottom: 10px; }
#cp-activar-shell.cp-sii-ajuste-1 .cp-sii-aviso { padding: 9px 14px; margin-bottom: 10px; }
#cp-activar-shell.cp-sii-ajuste-1 .cp-sii-anillo-wrap,
#cp-activar-shell.cp-sii-ajuste-1 .cp-conectando-logo { width: 52px; height: 53px; }
#cp-activar-shell.cp-sii-ajuste-1 .cp-sii-anillo-wrap { margin-bottom: 8px; }
#cp-activar-shell.cp-sii-ajuste-1 .cp-sii-paso-actual { margin-bottom: 10px; }
#cp-activar-shell.cp-sii-ajuste-1 .cp-sii-pasos { --cp-sii-gap: 9px; margin-bottom: 12px; }
#cp-activar-shell.cp-sii-ajuste-1 .cp-sii-historial { margin-bottom: 10px; padding-top: 12px; }
#cp-activar-shell.cp-sii-ajuste-1 .cp-activar-pie { margin-top: 10px; }
#cp-activar-shell.cp-sii-ajuste-1 .cp-sii-salidas { margin-top: 8px; gap: 2px; }
/* 2: sin el detalle de cada paso ni el pie. */
#cp-activar-shell.cp-sii-ajuste-2 .cp-sii-paso > div > span { display: none; }
#cp-activar-shell.cp-sii-ajuste-2 .cp-activar-pie { display: none; }
/* 3: de los pasos, solo el que está corriendo (plegados ya son un renglón). */
#cp-activar-shell.cp-sii-ajuste-3 .cp-sii-pasos:not(.cp-sii-pasos-plegados) .cp-sii-paso:not(.cp-paso-curso) { display: none; }
#cp-activar-shell.cp-sii-ajuste-3 .cp-sii-paso::after { content: none; }
/* 4: el historial más junto: menos aire arriba y el mensaje pegado a la barra. */
#cp-activar-shell.cp-sii-ajuste-4 .cp-sii-historial { padding-top: 8px; margin-bottom: 8px; }
#cp-activar-shell.cp-sii-ajuste-4 .cp-sii-historial-mensaje { margin-top: 8px; }
#cp-activar-shell.cp-sii-ajuste-4 .cp-sii-historial-mensaje:has(.cp-sii-todo-al-dia) { margin-top: 14px; }
/* 5: sin la lista de pasos: el que corre ya lo nombra el renglón del logo. */
#cp-activar-shell.cp-sii-ajuste-5 .cp-sii-pasos { display: none; }
/* 6: sin el logo. */
#cp-activar-shell.cp-sii-ajuste-6 .cp-sii-anillo-wrap { display: none; }

/* =====================================================================
   El tablero "Mis empresas" (empresas.js, 12/10/2026)

   Es "Inicio" cuando hay varias empresas y ninguna elegida: contadores que
   filtran, un buscador y una fila por empresa que entra a ella. Está hecho
   con lo que el portal ya tenía -la franja de cifras, la tarjeta de la
   tabla de documentos con su buscador, las pastillas, los chips y, en el
   celular, la lista de tarjetas-; acá va sólo lo propio, con el prefijo
   cp-tablero-.

   Tabla en escritorio y tarjetas en el celular (< 720 px): la forma la
   elige empresas.js con el mismo corte que el resto del diseño móvil.
   ===================================================================== */

/* La bajada va en la fila del título, a la derecha: no suma una línea. */
.cp-tablero-bajada { margin: 0; font-size: 0.875rem; color: var(--cp-gris); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---- los contadores, que filtran ----
   Son las celdas de la franja de cifras, hechas botón. Siempre cuatro en
   una fila (o dos y dos): con el auto-fit de la franja, a 720 px quedaban
   tres arriba y uno suelto abajo. */
.cp-tablero-contadores { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cp-tablero-contador {
  display: block; width: 100%; min-height: 0; border: none; border-radius: 0;
  background: none; font: inherit; text-align: left; color: inherit; cursor: pointer;
}
.cp-tablero-contador > span { display: block; }
.cp-tablero-contador .cp-franja-rotulo { display: flex; align-items: center; gap: 7px; }
.cp-tablero-contador:hover:not(:disabled) { background: var(--cp-page); }
/* El que está puesto se marca con una barra abajo, además del color y de
   aria-pressed: el color no puede ser el único indicador. */
.cp-tablero-contador[aria-pressed="true"] {
  background: var(--cp-violeta-50);
  box-shadow: -1px 0 0 var(--cp-separador), 0 -1px 0 var(--cp-separador), inset 0 -3px 0 var(--cp-violeta-600);
}
.cp-tablero-contador[aria-pressed="true"] .cp-franja-rotulo { color: var(--cp-violeta-700); }
.cp-tablero-contador:disabled { cursor: default; }
/* El anillo de foco hacia adentro: la franja recorta lo que se sale. */
.cp-tablero-contador:focus-visible { outline-offset: -3px; }
.cp-tablero-punto-info { background: var(--cp-info-tinta); }

/* Las barras de carga, del ancho de lo que reemplazan. */
.cp-tablero-barra { width: 72%; max-width: 104px; }
.cp-tablero-contador .cp-tablero-barra { width: 44px; }
.cp-tablero-tabla .cp-money .cp-tablero-barra { margin-left: auto; }

/* ---- la tabla ----
   NO puede desbordar la tarjeta en un escritorio angosto (1024 px con el
   menú abierto deja 716 px, y 720 px con el menú hecho cajón, 688): las
   columnas son fijas y en porcentaje, el nombre se recorta con elipsis (su
   `title` lo dice entero) y lo demás baja de línea. Con min-width 640 la
   caja nunca llega a scrollear en esos anchos; queda como red. */
.cp-tablero-card .cp-rcv-buscar input { width: 280px; }
.cp-tablero-tabla { width: 100%; min-width: 640px; table-layout: fixed; border-collapse: collapse; font-size: 0.8125rem; color: var(--cp-tinta); }
.cp-tablero-tabla :is(th, td) { text-align: left; vertical-align: top; }
.cp-tablero-tabla thead th { padding: 8px 12px; background: var(--cp-superficie-tabla); border-bottom: 1px solid var(--cp-linea); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--cp-gris); }
.cp-tablero-tabla tbody :is(th, td) { padding: 11px 12px; border-bottom: 1px solid var(--cp-separador); font-weight: 400; overflow-wrap: anywhere; }
.cp-tablero-tabla tbody tr:last-child :is(th, td) { border-bottom: none; }
.cp-tablero-tabla .cp-money { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cp-tablero-col-empresa { width: 26%; }
.cp-tablero-col-monto { width: 12%; }
.cp-tablero-col-f29 { width: 17%; }
.cp-tablero-col-vence { width: 18%; }
/* 15 % desde el 24/10/2026 (antes 13 %, y cada monto 13 %): a 1280 px
   "Cargando 7 meses" (y "Cargando 10 meses") cabe en un renglón, como
   "Datos al 24 oct". Medido a 1280 px, cada monto sigue teniendo 92 px
   ("$124.420.000" ocupa ~85) y el nombre no cambia. */
.cp-tablero-col-sii { width: 15%; }
/* La fila entera entra a la empresa (data-cp-empresa). */
.cp-tablero-fila { cursor: pointer; }
.cp-tablero-fila:hover, .cp-tablero-fila:focus-within { background: var(--cp-hover-fila); }

.cp-tablero-empresa { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cp-tablero-empresa-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; }
/* El nombre es el botón de verdad de la fila: el que se alcanza con Tab. */
.cp-tablero-entrar {
  display: block; max-width: 100%; padding: 0; border: none; border-radius: 4px; background: none;
  font: inherit; font-weight: 700; text-align: left; color: var(--cp-tinta); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cp-tablero-fila:hover .cp-tablero-entrar { color: var(--cp-violeta-700); }
.cp-tablero-rut { font-size: 0.75rem; color: var(--cp-gris); white-space: nowrap; font-variant-numeric: tabular-nums; }

.cp-tablero-fuerte { display: block; font-weight: 700; color: var(--cp-tinta); font-variant-numeric: tabular-nums; }
/* "Hoy" y "Vencido" se dicen con la palabra; el color acompaña. El rojo es
   el de los chips de corte (6,6:1 sobre blanco): el --cp-danger no llega a
   AA en letra de este tamaño. */
.cp-tablero-fuerte.es-hoy { color: var(--cp-aviso-tinta); }
.cp-tablero-fuerte.es-vencido { color: #B42318; }
.cp-tablero-sub { display: block; margin-top: 2px; font-size: 0.75rem; line-height: 1.4; color: var(--cp-gris); }
/* Una pastilla larga ("Pago sin confirmar · septiembre") baja de línea en
   vez de ensanchar la columna. */
.cp-tablero-pastilla { margin-top: 5px; border-radius: 10px; white-space: normal; text-align: left; }
.cp-tablero-chip { white-space: normal; }
.cp-tablero-aviso { font-weight: 600; color: var(--cp-gris); }
/* Cuánto lleva la empresa que se está conectando (24/10/2026): una barra
   corta, la de la pantalla de conexión en chico, y "Conectando · 40%" al
   lado, en una línea. La barra corre con la curva de entrada del portal;
   quieta si el sistema lo pide (el ancho ya dice cuánto lleva). */
.cp-tablero-avance { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; white-space: nowrap; }
.cp-tablero-avance-barra { flex: none; width: 96px; height: 6px; border-radius: 999px; background: #EEF2F8; overflow: hidden; }
.cp-tablero-avance-barra > span {
  display: block; height: 100%; background: linear-gradient(90deg, var(--cp-violeta-600), var(--cp-turquesa));
  transform: scaleX(0); transform-origin: left center; transition: transform 600ms cubic-bezier(0.05, 0.7, 0.1, 1);
}
.cp-tablero-avance-txt { font-variant-numeric: tabular-nums; }
.cp-mp-linea .cp-tablero-avance { gap: 8px; }
.cp-mp-linea .cp-tablero-avance-barra { width: 56px; height: 5px; }
@media (prefers-reduced-motion: reduce) {
  .cp-tablero-avance-barra > span { transition: none; }
}
.cp-tablero-raya { color: var(--cp-gris); }

/* ---- error, vacío y pie ---- */
.cp-tablero-error { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; padding: 12px 16px; background: #FEF3F2; border-bottom: 1px solid #F7C9C4; }
.cp-tablero-error p { margin: 0; font-size: 0.875rem; color: var(--cp-tinta); }
.cp-tablero-error p span { color: var(--cp-gris); }
.cp-tablero-vacio { display: flex; flex-direction: column; align-items: center; padding: 6px 16px 22px; }
.cp-tablero-vacio .cp-empty { padding: 16px 0 10px; }
.cp-tablero-pie { margin: 0; padding: 10px 16px; border-top: 1px solid var(--cp-separador); background: var(--cp-superficie); font-size: 0.75rem; color: var(--cp-gris); }

@media (max-width: 899px) {
  .cp-tablero-contadores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- celular: tarjetas ----
   Cada empresa es una tarjeta de la lista (cp-m-lista) y la tarjeta entera
   es el botón. Medidas del diseño móvil: toques de 44 px o más, radio 16. */
.cp-tablero-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; }
.cp-tablero-movil .cp-tablero-bajada { font-size: 13px; color: #6B7688; }
/* "Mis empresas" del celular: cuánto pagar y cuándo (20/10/2026). */
.cp-mp-resumen { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; background: #FFFFFF; border: 1px solid #DCE5F6; border-radius: 16px; }
.cp-mp-resumen-rotulo { font-size: 12px; font-weight: 600; color: #6B7688; }
.cp-mp-resumen-total { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; color: var(--cp-tinta, #0F172A); font-variant-numeric: tabular-nums; }
.cp-mp-resumen-linea { font-size: 13px; font-weight: 600; color: #6B7688; }
.cp-mp-resumen-linea.es-rojo { color: #B42318; }
.cp-mp-resumen-nota { font-size: 12px; color: #8A94A6; }
.cp-tablero-item.cp-mp-fila { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.cp-mp-fila.es-rojo { border-color: #F3C9CD; }
.cp-mp-fila.es-ambar { border-color: #F5DDB0; }
.cp-mp-iniciales.es-rojo { background: #FEECEC; color: #B42318; }
.cp-mp-iniciales.es-ambar { background: #FFF4E5; color: #B45309; }
.cp-mp-iniciales.es-verde { background: #E8F7EF; color: #157F4F; }
.cp-mp-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; }
.cp-mp-cuerpo b { font-size: 15px; font-weight: 700; color: var(--cp-tinta, #0F172A); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-mp-cuerpo span { font-size: 12.5px; color: #6B7688; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-mp-derecha { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.cp-mp-derecha b { font-size: 15px; font-weight: 800; color: var(--cp-tinta, #0F172A); font-variant-numeric: tabular-nums; }
.cp-mp-derecha span { font-size: 12.5px; font-weight: 600; color: #6B7688; }
.cp-mp-derecha .es-rojo { color: #B42318; }
.cp-mp-derecha .es-ambar { color: #B45309; }
.cp-mp-derecha .es-verde { color: #157F4F; }
.cp-mp-sin-monto { font-size: 12.5px; font-weight: 600; color: #6B7688; }
.cp-tablero-movil .cp-tablero-contadores { margin: 0; border-color: #DCE5F6; border-radius: 16px; box-shadow: none; }
.cp-tablero-movil .cp-tablero-contador { padding: 12px 14px; }
.cp-tablero-movil .cp-franja-rotulo { font-size: 11px; letter-spacing: .04em; }
.cp-tablero-movil .cp-franja-cifra { font-size: 22px; }
.cp-tablero-movil #cp-tablero-cuerpo { display: flex; flex-direction: column; gap: 12px; }
.cp-tablero-movil .cp-tablero-error { border: 1px solid #F3C9CD; border-radius: 16px; }
.cp-tablero-movil .cp-tablero-error .cp-btn { min-height: 44px; }
.cp-tablero-movil .cp-tablero-vacio { background: #FFFFFF; border: 1px solid #DCE5F6; border-radius: 16px; }
.cp-tablero-movil .cp-tablero-pie { padding: 0 4px; border: none; background: none; font-size: 12px; color: #6B7688; }
.cp-tablero-item {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px 12px;
  width: 100%; min-height: 68px; padding: 12px 14px;
  border: none; background: none; font: inherit; text-align: left; color: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cp-tablero-item:active { background: #F5F8FF; }
.cp-tablero-item:focus-visible { outline-offset: -3px; }
/* LA TARJETA, COMPACTA (pedido del usuario, 13/10/2026: "esto está muy mal
   optimizado visualmente"). Medía unos 300 px: el detalle iba metido en la
   columna del nombre (60 px perdidos a la izquierda y la flecha a la
   derecha), el Formulario 29 bajaba a su propio renglón y el vencimiento
   ocupaba tres. Ahora el nombre va arriba con las iniciales y la flecha, y
   el detalle ocupa TODO el ancho debajo (el cuerpo no hace caja:
   `display: contents`). */
.cp-tablero-item .cp-m-iniciales { grid-column: 1; grid-row: 1; }
.cp-tablero-item .cp-m-empresa-txt { grid-column: 2; grid-row: 1; }
.cp-tablero-item .cp-m-fila-flecha { grid-column: 3; grid-row: 1; align-self: center; }
.cp-tablero-item-cuerpo { display: contents; }
/* En una lista para elegir, el nombre se lee: hasta dos renglones. */
.cp-tablero-item .cp-m-empresa-txt b {
  font-size: 14px; line-height: 1.25; white-space: normal;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.cp-tablero-item-detalle {
  grid-column: 1 / -1; grid-row: 2; container-type: inline-size;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 7px 10px;
}
.cp-tablero-item-detalle:empty, .cp-tablero-item-linea:empty { display: none; }
/* Las tres cifras en una fila, en su propia banda. La letra se ajusta al
   ancho para que un monto de nueve dígitos no se parta ni se corte. */
.cp-tablero-item-cifras {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 9px 4px; border-radius: 12px; background: #F6F8FD;
}
.cp-tablero-item-dato { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 0 7px; }
.cp-tablero-item-dato + .cp-tablero-item-dato { box-shadow: -1px 0 0 #E1E7F3; }
.cp-tablero-item-dato small { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #6B7688; }
.cp-tablero-item-dato b { font-size: clamp(12px, 3.95cqw, 15px); font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; color: #0A1338; }
/* En un celular muy angosto las tres no entran: dos arriba y el Formulario
   29 debajo, como antes. */
@container (max-width: 300px) {
  .cp-tablero-item-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 8px; }
  .cp-tablero-item-dato.es-ancho { grid-column: 1 / -1; box-shadow: none; }
  .cp-tablero-item-dato b { font-size: 14px; }
}
.cp-tablero-item-linea { display: block; grid-column: 1 / -1; min-width: 0; }
/* El próximo vencimiento, en un renglón corrido: "Hoy · 13 oct ·
   Cotizaciones previsionales · Septiembre 2026 · En PreviRed, hasta las
   13:45" (antes, tres renglones). */
.cp-tablero-item-linea.es-proximo { grid-row: 2; font-size: 13px; line-height: 1.45; }
.cp-tablero-item-linea.es-proximo .cp-tablero-fuerte,
.cp-tablero-item-linea.es-proximo .cp-tablero-sub { display: inline; margin: 0; font-size: 13px; line-height: inherit; }
.cp-tablero-item-linea.es-proximo .cp-tablero-sub::before { content: " · "; }
.cp-tablero-item-linea.es-proximo > .cp-tablero-sub:first-child::before { content: none; }
/* Al pie, chico: el estado del Formulario 29 y cuándo se leyó el SII. */
.cp-tablero-item-linea.es-estado { grid-column: 1; grid-row: 3; }
.cp-tablero-item-linea.es-sii { grid-column: 2; grid-row: 3; text-align: right; }
.cp-tablero-item-linea.es-estado .cp-tablero-sub, .cp-tablero-item-linea.es-sii .cp-tablero-sub { margin: 0; font-size: 12px; }
.cp-tablero-item-linea .cp-tablero-pastilla { margin-top: 0; font-size: 11px; padding: 2px 8px; }
.cp-tablero-item-linea .cp-tablero-chip { margin-right: 8px; }
.cp-tablero-item .cp-tablero-sub, .cp-tablero-item .cp-tablero-aviso { font-size: 13px; color: #6B7688; }
.cp-tablero-item .cp-tablero-barra { width: 80%; max-width: none; height: 14px; }

/* Al cerrar sesión (y si el navegador restaura una copia de "atrás"), la
   página se tapa entera mientras se va al login: no queda nada de la sesión
   a la vista (14/10/2026). */
html.cp-saliendo body { visibility: hidden; }

/* Edge dibuja su propio ojo en los campos de contraseña y quedaban dos
   (14/10/2026, pedido del dueño: "tengo 2 ojos, deja el morado"). Queda
   solo el nuestro. */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear { display: none; }

/* =====================================================================
   Mi plan: los planes y la compra (mi-plan.js, 14/10/2026)
   La maqueta aprobada (planes-siimplifica/index.html) con los tokens del
   portal. Lo que el portal no tenía va acá, con nombre propio.
   Movimiento: una sola curva de entrada (--cp-mp-llega); el plan destacado
   entra primero y la cascada completa dura menos de medio segundo; lo que
   queda moviéndose es solo el plan destacado, que respira apenas. Con
   prefers-reduced-motion todo queda quieto y completo: lo que empieza
   invisible solo lo es dentro de la animación.
   ===================================================================== */
.cp-mp {
  --cp-mp-apagado: #5F6B7D;
  --cp-mp-morado: var(--cp-violeta-600);
  --cp-mp-morado-hondo: var(--cp-violeta-700);
  --cp-mp-morado-suave: var(--cp-hover-fila);
  --cp-mp-turquesa-fondo: #E6FAF8;
  --cp-mp-turquesa-tinta: #0E7C78;
  --cp-mp-borde: #E4E8F2;
  /* Una sola curva para entrar, otra para lo que ya está en pantalla y otra para salir. */
  --cp-mp-llega: cubic-bezier(0.05, 0.7, 0.1, 1);
  --cp-mp-mueve: cubic-bezier(0.2, 0, 0, 1);
  --cp-mp-sale: cubic-bezier(0.3, 0, 1, 1);
  color: var(--cp-tinta);
}
/* Con :where, como en la maqueta: el "font: inherit" no le gana al peso ni
   al tamaño que pone cada clase. */
:where(.cp-mp) button, :where(.cp-mp) input, :where(.cp-mp) select { font: inherit; }
.cp-mp a { color: var(--cp-mp-morado); }
.cp-mp-paso-de { font-size: 13px; font-weight: 600; color: var(--cp-mp-apagado); }
/* El estado de la empresa activa en la fila del título (prueba terminada,
   suspendida): el aviso de una línea del portal, pero sin enlace, así que
   no cambia al pasar el mouse. */
.cp-aviso-linea.cp-mp-estado:hover { background: #fff; border-color: var(--cp-aviso-borde); }
/* En el celular "Paso 1 de 3" sigue al lado del título y el aviso baja a su
   propio renglón, a todo el ancho. */
@media (max-width: 719px) { .cp-mp-estado-caja { order: 1; flex-basis: 100%; } }
/* El panel que entra de lado (28 px) no abre una barra de desplazamiento
   horizontal en ningún ancho. clip y no hidden: no vuelve a .cp-main un
   contenedor con scroll (lo sticky sigue andando), como bajo 720 px. */
body[data-cp-vista="modulos"] .cp-main { overflow-x: clip; }

/* ── El paso a paso ── */
.cp-mp-pasos { max-width: 540px; margin: 8px auto 0; padding: 0 20px; display: flex; align-items: center; }
.cp-mp-paso {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--cp-mp-apagado); white-space: nowrap;
  background: none; border: 0; padding: 0; cursor: default;
}
.cp-mp-paso[data-se-puede="si"] { cursor: pointer; }
.cp-mp-num {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px;
  background: var(--cp-card); border: 1.5px solid var(--cp-linea); color: var(--cp-mp-apagado);
  transition: background-color .2s var(--cp-mp-mueve), border-color .2s var(--cp-mp-mueve), color .2s var(--cp-mp-mueve);
}
.cp-mp-num svg { display: none; }
.cp-mp-paso.cp-mp-activo { color: var(--cp-tinta); }
.cp-mp-paso.cp-mp-activo .cp-mp-num { background: var(--cp-mp-morado); border-color: var(--cp-mp-morado); color: #fff; }
.cp-mp-paso.cp-mp-hecho .cp-mp-num { background: var(--cp-mp-morado-suave); border-color: var(--cp-mp-morado-suave); color: var(--cp-mp-morado); }
.cp-mp-paso.cp-mp-hecho .cp-mp-num span { display: none; }
.cp-mp-paso.cp-mp-hecho .cp-mp-num svg { display: block; }
.cp-mp-paso.cp-mp-hecho .cp-mp-num path { stroke-dasharray: 14; stroke-dashoffset: 14; animation: cp-mp-dibuja .3s var(--cp-mp-mueve) .1s forwards; }
.cp-mp-tramo { flex: 1; height: 2px; margin: 0 12px; background: var(--cp-linea); border-radius: 2px; overflow: hidden; }
.cp-mp-tramo i { display: block; height: 100%; background: var(--cp-mp-morado); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--cp-mp-mueve); }
.cp-mp-tramo.cp-mp-lleno i { transform: scaleX(1); }

/* Las tarjetas pasan a una columna cuando el contenido (no la ventana) se
   angosta: con el menú abierto el espacio es menor que en la maqueta. */
.cp-mp-paneles { container-type: inline-size; }
.cp-mp-panel[hidden] { display: none; }

/* ── Paso 1: el plan ── */
.cp-mp-titulo h2 {
  margin: 30px 0 10px; text-align: center; color: var(--cp-tinta);
  font-size: 34px; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em;
}
.cp-mp-titulo h2 em { font-style: normal; color: var(--cp-mp-morado); }
.cp-mp-titulo p { margin: 0; text-align: center; color: var(--cp-gris); font-size: 16px; }

.cp-mp-periodo { display: flex; justify-content: center; margin: 26px 0 34px; }
.cp-mp-selector {
  position: relative; display: inline-flex; padding: 4px;
  background: var(--cp-card); border: 1px solid var(--cp-mp-borde); border-radius: 999px;
  box-shadow: 0 1px 2px rgba(10, 19, 56, .04);
}
.cp-mp-selector button {
  position: relative; z-index: 1; border: 0; background: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 20px; border-radius: 999px;
  font-size: 14px; font-weight: 600; color: var(--cp-gris);
  transition: color .18s var(--cp-mp-mueve);
}
.cp-mp-selector button[aria-pressed="true"] { color: #fff; }
.cp-mp-pastilla {
  position: absolute; top: 4px; bottom: 4px; left: 0; width: 0;
  border-radius: 999px; background: var(--cp-mp-morado);
  transition: transform .22s var(--cp-mp-mueve), width .22s var(--cp-mp-mueve);
}
.cp-mp-ahorro {
  font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
  background: var(--cp-mp-turquesa-fondo); color: var(--cp-mp-turquesa-tinta);
  transition: background-color .18s var(--cp-mp-mueve), color .18s var(--cp-mp-mueve);
}
.cp-mp-selector button[aria-pressed="true"] .cp-mp-ahorro { background: rgba(255, 255, 255, .2); color: #fff; }

.cp-mp-planes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.cp-mp-plan {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--cp-card); border: 1px solid var(--cp-mp-borde); border-radius: 20px;
  padding: 28px 26px 26px;
  box-shadow: 0 1px 2px rgba(10, 19, 56, .04);
  transition: transform .15s var(--cp-mp-mueve), box-shadow .25s var(--cp-mp-mueve), border-color .25s var(--cp-mp-mueve);
}
.cp-mp-plan:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(10, 19, 56, .08); }
.cp-mp-plan.cp-mp-destacado {
  border: 2px solid var(--cp-mp-morado); padding: 27px 25px 25px;
  box-shadow: 0 18px 40px rgba(109, 40, 217, .14);
}
/* "Más elegido" está en todas las tarjetas y solo se ve en la destacada,
   que cambia con el período (lo dice el catálogo). */
.cp-mp-insignia {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  padding: 5px 12px; border-radius: 999px; white-space: nowrap;
  background: var(--cp-mp-morado); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .02em;
  opacity: 0; visibility: hidden;
}
.cp-mp-plan.cp-mp-destacado .cp-mp-insignia { opacity: 1; visibility: visible; }
.cp-mp-plan.cp-mp-destacado.cp-mp-asoma .cp-mp-insignia { animation: cp-mp-asoma .3s var(--cp-mp-llega) var(--demora-insignia, 0s) both; }
.cp-mp-plan h3 { margin: 0; font-size: 20px; font-weight: 700; color: var(--cp-tinta); }
/* El plan que la cuenta ya tiene: "Tu plan" junto al nombre y el botón
   apagado (no se vuelve a comprar). */
.cp-mp-tu-plan {
  display: inline-block; margin-left: 8px; padding: 3px 9px; border-radius: 999px; vertical-align: 3px;
  font-size: 12px; font-weight: 700; letter-spacing: .01em;
  background: var(--cp-mp-turquesa-fondo); color: var(--cp-mp-turquesa-tinta);
}
/* Su plan, pero en el otro período ("Tienes el mensual" mirando Anual):
   en gris, para no confundirlo con el que tiene. */
.cp-mp-tu-plan.cp-mp-tu-plan-otro { background: #EEF2F8; color: #46629C; }
/* Lo que se ahorra, bajo el precio y solo en Anual: la línea se abre
   suave (no salta) y se cierra más rápido de lo que se abre. */
.cp-mp-ahorro-anual {
  display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden;
  transition: grid-template-rows .16s var(--cp-mp-sale), opacity .12s var(--cp-mp-sale), visibility 0s .16s;
}
.cp-mp-ahorro-anual > span { min-height: 0; overflow: hidden; font-size: 13px; font-weight: 700; color: var(--cp-mp-turquesa-tinta); }
.cp-mp[data-periodo="anual"] .cp-mp-ahorro-anual {
  grid-template-rows: 1fr; opacity: 1; visibility: visible;
  transition: grid-template-rows .24s var(--cp-mp-mueve), opacity .22s var(--cp-mp-llega) .06s, visibility 0s;
}
.cp-mp-lema { margin: 6px 0 0; min-height: 42px; color: var(--cp-gris); font-size: 14px; line-height: 1.5; }
.cp-mp-precio { margin: 20px 0 2px; display: flex; align-items: baseline; gap: 4px; height: 48px; overflow: hidden; }
.cp-mp-monto { display: inline-block; font-size: 38px; font-weight: 700; letter-spacing: -0.02em; color: var(--cp-tinta); }
.cp-mp-por { font-size: 15px; font-weight: 600; color: var(--cp-mp-apagado); }
.cp-mp-elegir {
  margin-top: 22px; width: 100%; padding: 13px 16px; border-radius: 12px; cursor: pointer;
  font-size: 15px; font-weight: 700;
  border: 1.5px solid var(--cp-mp-morado); color: var(--cp-mp-morado); background: var(--cp-card);
  transition: background-color .12s var(--cp-mp-mueve), color .12s var(--cp-mp-mueve), transform .1s var(--cp-mp-mueve);
}
.cp-mp-elegir:hover { background: var(--cp-mp-morado-suave); }
.cp-mp-elegir:active { transform: scale(.98); }
.cp-mp-destacado .cp-mp-elegir { background: var(--cp-mp-morado); color: #fff; }
.cp-mp-destacado .cp-mp-elegir:hover { background: var(--cp-mp-morado-hondo); }
.cp-mp-elegir:disabled, .cp-mp-elegir:disabled:hover, .cp-mp-destacado .cp-mp-elegir:disabled {
  cursor: default; transform: none;
  background: var(--cp-page); border-color: var(--cp-mp-borde); color: var(--cp-mp-apagado);
}
.cp-mp-incluye {
  list-style: none; margin: 22px 0 0; padding: 20px 0 0; border-top: 1px solid var(--cp-separador);
  display: grid; gap: 11px; font-size: 14px; line-height: 1.45;
}
.cp-mp-incluye li { display: flex; gap: 10px; align-items: flex-start; }
.cp-mp-incluye li svg { flex: none; margin-top: 1px; }
.cp-mp-incluye li.cp-mp-sobre { font-weight: 700; }
/* El (i) de un renglón (mi-plan.js, cpMpRenglonHtml; migración 148): un
   círculo chico pegado a la última palabra; la burbuja abre debajo del
   renglón, de su ancho. Sin animación: es un estado. */
.cp-mp-incluye li.cp-mp-con-info { position: relative; }
.cp-mp-pegado { white-space: nowrap; }
.cp-mp-info {
  position: relative; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 2px; padding: 0;
  vertical-align: -3px; border: 1px solid var(--cp-mp-borde); border-radius: 50%; background: transparent; color: var(--cp-gris);
  font-family: inherit; font-size: 11px; font-weight: 700; font-style: italic; line-height: 1; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
/* El toque cómodo en el celular sin agrandar el círculo. */
.cp-mp-info::after { content: ""; position: absolute; inset: -11px; }
.cp-mp-info[aria-expanded="true"] { border-color: var(--cp-mp-morado); color: var(--cp-mp-morado); }
@media (hover: hover) { .cp-mp-info:hover { border-color: var(--cp-mp-morado); color: var(--cp-mp-morado); } }
.cp-mp-info:focus-visible { outline: 3px solid var(--cp-foco); outline-offset: 2px; }
.cp-mp-info-texto {
  position: absolute; z-index: 3; left: 0; right: 0; top: calc(100% + 6px);
  padding: 10px 12px; border: 1px solid var(--cp-mp-borde); border-radius: 10px; background: #FFFFFF;
  color: var(--cp-tinta); font-size: 13px; font-weight: 400; line-height: 1.45; white-space: normal;
  box-shadow: 0 12px 28px rgba(10, 19, 56, .12);
}
.cp-mp-info-texto[hidden] { display: none; }

.cp-mp-notas {
  margin: 30px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px;
  font-size: 13px; color: var(--cp-gris);
}
.cp-mp-notas span { display: inline-flex; align-items: center; gap: 7px; }
.cp-mp-modulos { margin-top: 34px; }

/* ── Pasos 2 y 3 ── */
.cp-mp-hoja {
  max-width: 560px; margin: 34px auto 0; padding: 28px;
  background: var(--cp-card); border: 1px solid var(--cp-mp-borde); border-radius: 20px;
  box-shadow: 0 1px 2px rgba(10, 19, 56, .04);
}
.cp-mp-hoja h2 { margin: 0 0 6px; font-size: 24px; font-weight: 700; letter-spacing: -0.01em; color: var(--cp-tinta); }
.cp-mp-sub { margin: 0 0 22px; color: var(--cp-gris); font-size: 15px; }
.cp-mp-elegido {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: 14px; background: var(--cp-mp-morado-suave);
  font-size: 14px; margin-bottom: 22px;
}
.cp-mp-elegido b { font-weight: 700; }
.cp-mp-elegido button { border: 0; background: none; color: var(--cp-mp-morado); font-weight: 700; cursor: pointer; padding: 0; }
.cp-mp-campo { margin-bottom: 18px; }
.cp-mp-campo[hidden] { display: none; }
.cp-mp-campo label, .cp-mp-rotulo { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 700; color: var(--cp-tinta); }
.cp-mp-campo select, .cp-mp-campo input[type="email"] {
  width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--cp-mp-borde);
  background: var(--cp-card); color: var(--cp-tinta); font-size: 15px;
  transition: border-color .12s var(--cp-mp-mueve), box-shadow .12s var(--cp-mp-mueve);
}
.cp-mp-campo select:focus, .cp-mp-campo input:focus { outline: none; border-color: var(--cp-mp-morado); box-shadow: 0 0 0 3px rgba(109, 40, 217, .15); }
.cp-mp-ayuda { margin: 6px 0 0; font-size: 12px; color: var(--cp-mp-apagado); }
.cp-mp-campo input.cp-mp-invalido { border-color: var(--cp-danger); box-shadow: 0 0 0 3px rgba(214, 69, 80, .14); }
.cp-mp-error { margin: 6px 0 0; font-size: 12px; font-weight: 600; color: #B42318; }
.cp-mp-error[hidden] { display: none; }
/* Un correo inválido sacude el campo una vez, corto y sin exagerar. */
@keyframes cp-mp-tiembla { 0%, 100% { transform: none; } 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
.cp-mp-tiembla { animation: cp-mp-tiembla .3s var(--cp-mp-mueve); }
/* Qué empresas cubre el plan (17/10/2026): una casilla por empresa. */
.cp-mp-cubre { display: grid; gap: 8px; }
/* Con .cp-mp-campo delante: le gana a ".cp-mp-campo label" (bloque y negrita). */
.cp-mp-campo .cp-mp-cubre-op {
  display: flex; align-items: center; gap: 12px; margin: 0; padding: 11px 14px; border-radius: 12px; cursor: pointer; font-weight: 500;
  border: 1.5px solid var(--cp-mp-borde); background: var(--cp-card); color: var(--cp-tinta);
  transition: border-color .12s var(--cp-mp-mueve), background-color .12s var(--cp-mp-mueve);
}
.cp-mp-cubre-op:has(input:checked) { border-color: var(--cp-mp-morado); background: var(--cp-mp-morado-suave); }
.cp-mp-cubre-op:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.cp-mp-cubre-op input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--cp-mp-morado); }
.cp-mp-cubre-op b { display: block; font-size: 14px; font-weight: 700; }
.cp-mp-cubre-op small { display: block; margin-top: 1px; font-size: 12px; color: var(--cp-mp-apagado); }
.cp-mp-opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cp-mp-opciones button {
  padding: 12px; border-radius: 12px; cursor: pointer; text-align: left;
  border: 1.5px solid var(--cp-mp-borde); background: var(--cp-card); color: var(--cp-tinta);
  font-size: 14px; font-weight: 700;
  transition: border-color .12s var(--cp-mp-mueve), background-color .12s var(--cp-mp-mueve);
}
.cp-mp-opciones button:disabled { opacity: .5; cursor: not-allowed; }
.cp-mp-opciones button small { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--cp-mp-apagado); }
.cp-mp-opciones button[aria-pressed="true"] { border-color: var(--cp-mp-morado); background: var(--cp-mp-morado-suave); }
.cp-mp-acciones { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; }
.cp-mp-boton {
  padding: 13px 22px; border-radius: 12px; cursor: pointer; font-size: 15px; font-weight: 700;
  border: 1.5px solid var(--cp-mp-morado); background: var(--cp-mp-morado); color: #fff;
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  transition: background-color .12s var(--cp-mp-mueve), transform .1s var(--cp-mp-mueve), opacity .12s var(--cp-mp-mueve);
}
.cp-mp-boton:hover { background: var(--cp-mp-morado-hondo); border-color: var(--cp-mp-morado-hondo); }
.cp-mp-boton:active { transform: scale(.98); }
.cp-mp-boton:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.cp-mp-boton.cp-mp-secundario { background: var(--cp-card); color: var(--cp-gris); border-color: var(--cp-mp-borde); }
.cp-mp-boton.cp-mp-secundario:hover { background: var(--cp-page); }

.cp-mp-resumen { margin: 0; display: grid; gap: 0; }
.cp-mp-resumen div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--cp-separador); font-size: 14px; }
.cp-mp-resumen dt { color: var(--cp-mp-apagado); }
.cp-mp-resumen dd { margin: 0; font-weight: 600; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.cp-mp-total { display: flex; justify-content: space-between; align-items: baseline; margin: 18px 0 4px; }
.cp-mp-total span { font-size: 15px; font-weight: 700; }
.cp-mp-total strong { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; }
.cp-mp-total-nota { margin: 0 0 18px; font-size: 13px; color: var(--cp-mp-apagado); text-align: right; }
.cp-mp-acepto { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--cp-gris); }
.cp-mp-acepto input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--cp-mp-morado); }
.cp-mp-flow-nota { margin: 14px 0 0; font-size: 12px; color: var(--cp-mp-apagado); text-align: center; line-height: 1.5; }

/* El aviso en una línea, del ancho de su texto. */
.cp-mp-aviso {
  position: fixed; left: 50%; bottom: 24px; z-index: 70;
  transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  width: max-content; max-width: calc(100% - 32px); padding: 13px 18px; border-radius: 14px;
  background: var(--cp-tinta); color: #fff; font-size: 14px; font-weight: 600;
  box-shadow: 0 12px 30px rgba(10, 19, 56, .25); visibility: hidden;
  transition: transform .2s var(--cp-mp-sale), opacity .2s var(--cp-mp-sale), visibility 0s .2s;
}
.cp-mp-aviso.cp-mp-ver { transform: translate(-50%, 0); opacity: 1; visibility: visible; transition: transform .3s var(--cp-mp-llega), opacity .3s var(--cp-mp-llega), visibility 0s; }

/* ── Movimiento ──
   Entrada: el plan destacado llega primero y los otros dos detrás (80 ms),
   todo en menos de medio segundo. Después solo cambios cortos: el precio
   al pasar a Anual, el paso a paso, y el plan destacado que respira apenas. */
@keyframes cp-mp-sube { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes cp-mp-asoma { from { opacity: 0; transform: translateX(-50%) scale(.85); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
@keyframes cp-mp-respira { 0%, 100% { box-shadow: 0 18px 40px rgba(109, 40, 217, .12); } 50% { box-shadow: 0 20px 46px rgba(109, 40, 217, .22); } }
@keyframes cp-mp-dibuja { to { stroke-dashoffset: 0; } }
@keyframes cp-mp-precio-sale { to { opacity: 0; transform: translateY(-10px); } }
@keyframes cp-mp-precio-entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes cp-mp-entra-der { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes cp-mp-entra-izq { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes cp-mp-sale-izq { to { opacity: 0; transform: translateX(-20px); } }
@keyframes cp-mp-sale-der { to { opacity: 0; transform: translateX(20px); } }

/* "backwards" y no "both": al terminar la entrada, la tarjeta vuelve a
   poder levantarse con el mouse. */
.cp-mp-aparece { animation: cp-mp-sube .5s var(--cp-mp-llega) backwards; animation-delay: var(--d, 0ms); }
.cp-mp-plan.cp-mp-destacado { animation: cp-mp-respira 6s ease-in-out .3s infinite; }
.cp-mp-plan.cp-mp-destacado.cp-mp-aparece { animation: cp-mp-sube .5s var(--cp-mp-llega) backwards, cp-mp-respira 6s ease-in-out 1s infinite; animation-delay: var(--d, 0ms), 1s; }
.cp-mp-monto.cp-mp-sale { animation: cp-mp-precio-sale .12s var(--cp-mp-sale) forwards; }
.cp-mp-monto.cp-mp-entra { animation: cp-mp-precio-entra .26s var(--cp-mp-llega) both; }
.cp-mp-panel.cp-mp-entra-der { animation: cp-mp-entra-der .35s var(--cp-mp-llega) both; }
.cp-mp-panel.cp-mp-entra-izq { animation: cp-mp-entra-izq .35s var(--cp-mp-llega) both; }
.cp-mp-panel.cp-mp-sale-izq { animation: cp-mp-sale-izq .18s var(--cp-mp-sale) forwards; }
.cp-mp-panel.cp-mp-sale-der { animation: cp-mp-sale-der .18s var(--cp-mp-sale) forwards; }
.cp-mp-panel.cp-mp-sale-izq, .cp-mp-panel.cp-mp-sale-der { pointer-events: none; }
/* El título de cada paso recibe el foco al llegar (para el teclado y el
   lector de pantalla), sin marco. */
.cp-mp h2[tabindex="-1"]:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
  .cp-mp *, .cp-mp *::before, .cp-mp *::after { animation: none !important; transition: none !important; }
  .cp-mp-paso.cp-mp-hecho .cp-mp-num path { stroke-dashoffset: 0; }
}

/* ── Angosto ── */
@container (max-width: 820px) {
  .cp-mp-planes { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; gap: 26px; }
  .cp-mp-lema { min-height: 0; }
}
@media (max-width: 520px) {
  .cp-mp-titulo h2 { font-size: 27px; margin-top: 28px; }
  .cp-mp-titulo p { font-size: 15px; }
  .cp-mp-pasos { margin-top: 4px; }
  .cp-mp-paso { font-size: 13px; }
  .cp-mp-paso:not(.cp-mp-activo) .cp-mp-paso-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .cp-mp-tramo { margin: 0 8px; }
  .cp-mp-hoja { padding: 22px 18px; margin-top: 26px; }
  .cp-mp-opciones { grid-template-columns: 1fr; }
  .cp-mp-acciones { flex-direction: column-reverse; }
  .cp-mp-acciones .cp-mp-boton { width: 100%; }
}
/* Donde está la barra inferior del portal (< 720 px), el aviso va arriba:
   abajo tapaba Documentos, Impuestos y Asesor. */
@media (max-width: 719px) {
  .cp-mp-aviso { top: 16px; bottom: auto; transform: translate(-50%, -16px); }
}
/* En los teléfonos más angostos (360 px) el aviso sigue en una línea. */
@media (max-width: 400px) {
  .cp-mp-aviso { font-size: 13px; padding: 12px 14px; }
}
.cp-mp-linea span { font-size: 12.5px; font-weight: 600; color: #6B7688; }
/* "Cargando 7 meses", debajo del pago, en la fila del celular. */
.cp-mp-cuerpo .cp-mp-cargando { font-size: 12px; color: #46629C; }
.cp-mp-linea .es-rojo { color: #B42318; }
.cp-mp-linea .es-ambar { color: #B45309; }

/* "Espera a que termine de conectarse X" (client-router.js, cpAvisoUnaALaVez):
   una línea abajo al centro, que se va sola. Sin animación. */
.cp-aviso-flotante {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  z-index: 1000; max-width: min(92vw, 520px); padding: 10px 16px; border-radius: 12px;
  background: #0A1338; color: #FFFFFF; font-size: 0.875rem; line-height: 1.4; text-align: center;
  box-shadow: 0 12px 28px rgba(10, 19, 56, .25);
}
.cp-aviso-flotante[hidden] { display: none; }
@media (max-width: 719px) { .cp-aviso-flotante { bottom: calc(88px + env(safe-area-inset-bottom)); } }