/* =============================================================
   MiContadorIA — panel de la aplicación y administración
   Misma identidad que el sitio público: papel frío, tinta
   contable, verde registro. Tipos Space Grotesk / IBM Plex.
   ============================================================= */

:root {
  --tinta: #0e2a3a;
  --tinta-suave: #4a6472;
  --fondo: #f5f8f9;
  --panel: #ffffff;
  --borde: #d8e2e6;
  --marca: #1f7a5c;
  --marca-clara: #2a9873;
  --azul: #14507a;
  --ambar: #e8a13d;
  --bueno: #1f7a5c;
  --malo: #c62828;
  --aviso: #ef6c00;

  --display: "Space Grotesk", sans-serif;
  --cuerpo: "IBM Plex Sans", sans-serif;
  --mono: "IBM Plex Mono", monospace;

  --sombra: 0 10px 30px rgba(14, 42, 58, 0.08);
  --sombra-suave: 0 3px 12px rgba(14, 42, 58, 0.05);
  --radio: 14px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--cuerpo);
  font-size: 16px;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--fondo);
}

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

:focus-visible {
  outline: 3px solid var(--ambar);
  outline-offset: 2px;
}

.contenido {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 22px;
}

h1, h2 { font-family: var(--display); letter-spacing: -0.02em; }

/* --- Cinta de ambiente ------------------------------------- */

.cinta-ambiente {
  background: var(--ambar);
  color: var(--tinta);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.5px;
  padding: 6px 12px;
}

/* --- Barra superior --------------------------------------- */
/*  Misma barra del sitio público: fondo translúcido con
    desenfoque, marca con la cifra y menú plegable en móvil. */

.barra {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(245, 248, 249, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--borde);
}

.barra .contenido {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
  gap: 20px;
}

.marca {
  font-family: var(--display);
  font-weight: 700;
  font-size: 21px;
  color: var(--tinta);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.marca-cifra {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--tinta);
  color: var(--ambar);
  font-family: var(--mono);
  font-size: 17px;
}

.nav-enlaces {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-enlaces a {
  text-decoration: none;
  color: var(--tinta-suave);
  font-size: 15.5px;
  padding: 8px 12px;
  border-radius: 8px;
}

.nav-enlaces a:hover {
  color: var(--tinta);
  background: var(--panel);
}

.nav-enlaces a.activo {
  color: var(--tinta);
  font-weight: 600;
}

.nav-conmutador, .nav-boton { display: none; }

/* --- Franja de cabecera ------------------------------------- */
/*  Banda de tinta con degradado sobre la que "flotan" las
    tarjetas de la página. Es lo que le da aire de producto. */

.franja {
  background:
    radial-gradient(
      900px 300px at 85% -40%,
      rgba(42, 152, 115, 0.35),
      transparent 60%
    ),
    linear-gradient(118deg, var(--tinta) 20%, var(--azul) 100%);
  color: #fff;
  padding: 40px 0 96px;
}

.franja h1 {
  margin: 0 0 4px;
  font-size: 30px;
  color: #fff;
}

.franja .tenue { color: rgba(255, 255, 255, 0.72); }

.franja .etiqueta { vertical-align: 1px; }

.franja-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.franja-acciones { display: flex; gap: 10px; flex-wrap: wrap; }

/* El plan, como una etiqueta discreta que lleva a los planes. */
.etiqueta-plan {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  vertical-align: 1px;
}
.etiqueta-plan:hover { background: rgba(255, 255, 255, 0.28); }

/* Subir de plan, siempre a la vista junto a la etiqueta. */
.enlace-plan {
  color: rgba(255, 255, 255, 0.9);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  margin-left: 4px;
  white-space: nowrap;
}
.enlace-plan:hover { color: #fff; text-decoration: underline; }

/* Importar: un botón claro sobre la franja oscura, distinto del
   verde de "Agregar". Borde y texto blancos para que se lea. */
.importar-boton {
  background: rgba(255, 255, 255, 0.16) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  color: #fff !important;
}
.importar-boton:hover {
  background: rgba(255, 255, 255, 0.3) !important;
}

/*  Contenido que se monta sobre la franja. */
.flotante { margin-top: -64px; padding-bottom: 46px; }

/*  Pestañas del administrador, sobre la franja. */
.franja-nav {
  display: flex;
  gap: 4px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 4px;
}

.franja-nav a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 8px;
}

.franja-nav a:hover { color: #fff; }

.franja-nav a.activo {
  background: #fff;
  color: var(--tinta);
}

/* --- Botones ----------------------------------------------- */

.boton {
  display: inline-block;
  background: var(--marca);
  color: #fff !important;
  border: 0;
  border-radius: 10px;
  padding: 13px 26px;
  font-size: 16px;
  font-weight: 600;
  font-family: var(--cuerpo);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

.boton:hover { background: var(--marca-clara); }
.boton:active { transform: translateY(1px); }
.boton.pequeno { padding: 8px 16px; font-size: 14px; }
.boton.ancho { width: 100%; text-align: center; }

.boton.ambar {
  background: var(--ambar);
  color: var(--tinta) !important;
}

.boton.ambar:hover { background: #f0b055; }

.boton.secundario {
  background: transparent;
  color: var(--tinta) !important;
  border: 1.5px solid var(--borde);
}

.boton.secundario:hover { background: var(--fondo); }
.boton.peligro { background: var(--malo); }

/* --- Formularios ------------------------------------------- */

.caja {
  max-width: 460px;
  margin: 54px auto;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 34px;
  box-shadow: var(--sombra-suave);
}

.caja.ancha { max-width: 100%; margin: 30px 0; }

.caja h1 { font-size: 24px; margin: 0 0 6px; }
.caja p.bajada { color: var(--tinta-suave); margin: 0 0 24px; }

label {
  display: block;
  margin: 16px 0 6px;
  font-weight: 600;
  font-size: 14px;
}

input[type=text],
input[type=email],
input[type=password],
input[type=number],
input[type=search],
select,
textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--borde);
  border-radius: 9px;
  font-size: 15px;
  font-family: var(--cuerpo);
  background: #fff;
  color: var(--tinta);
}

input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--marca-clara);
  outline-offset: -1px;
}

.pista { color: var(--tinta-suave); font-size: 13px; margin: 6px 0 0; }

.pie-formulario {
  margin-top: 22px;
  text-align: center;
  color: var(--tinta-suave);
  font-size: 14px;
}

/* --- Avisos ------------------------------------------------- */

.aviso {
  padding: 13px 16px;
  border-radius: 10px;
  margin: 0 0 20px;
  border-left: 4px solid var(--tinta-suave);
  background: #eaf0f2;
  font-size: 15px;
}

.aviso ul { margin: 0; padding-left: 20px; }
.aviso.bueno { background: #e3f1eb; border-color: var(--bueno); }
.aviso.malo { background: #ffebee; border-color: var(--malo); }
.aviso.amarillo { background: #fdf3e3; border-color: var(--aviso); }

/* --- Etiquetas ---------------------------------------------- */

.etiqueta {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.etiqueta.bueno { background: #e3f1eb; color: var(--bueno); }
.etiqueta.malo { background: #ffebee; color: var(--malo); }
.etiqueta.aviso { background: #fdf3e3; color: var(--aviso); }
.etiqueta.neutro { background: #e6edf0; color: var(--tinta-suave); }

/* --- Marcadores (tarjetas de cifras) ------------------------- */

.marcadores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
  margin-bottom: 26px;
}

.marcador {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--sombra);
}

.marcador-icono {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  margin-bottom: 14px;
  background: #e9f0f3;
  color: var(--azul);
}

.marcador .numero {
  font-family: var(--mono);
  font-size: 38px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}

.marcador .rotulo {
  color: var(--tinta-suave);
  font-size: 14px;
  margin-top: 4px;
}

.marcador.principal {
  background: linear-gradient(150deg, #124a38, var(--marca));
  border-color: transparent;
}

.marcador.principal .numero,
.marcador.principal .rotulo { color: #fff; }

.marcador.principal .rotulo { opacity: 0.85; }

.marcador.principal .marcador-icono {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.marcador-enlace {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  color: inherit;
}

.marcador.principal .marcador-enlace { color: #ffd9a0; }
.marcador-enlace:hover { text-decoration: underline; }

.marcador-nota {
  margin-top: 12px;
  font-size: 13px;
  color: var(--tinta-suave);
}

/*  Paquete elegido desde la página de planes. */
.marcador.seleccionado {
  position: relative;
  border: 2px solid var(--marca);
  box-shadow: 0 14px 34px rgba(31, 122, 92, 0.18);
}

.marcador-sello {
  position: absolute;
  top: -12px;
  left: 22px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 3px 12px;
  border-radius: 20px;
  background: var(--marca);
  color: #fff;
}

/* --- Regla de cobro ------------------------------------------ */

.regla-cobro {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}

.regla-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 16px 18px;
  box-shadow: var(--sombra-suave);
}

.regla-item strong {
  display: block;
  font-size: 14px;
  margin-bottom: 2px;
}

.regla-item span:last-child:not(.regla-icono) {
  font-size: 13px;
  color: var(--tinta-suave);
  line-height: 1.45;
}

.regla-icono {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}

.bueno-fondo { background: #e3f1eb; color: var(--bueno); }
.malo-fondo { background: #ffebee; color: var(--malo); }
.neutro-fondo { background: #e6edf0; color: var(--tinta-suave); }

/* --- Estado vacío -------------------------------------------- */

.vacio {
  background: var(--panel);
  border: 1px dashed var(--borde);
  border-radius: var(--radio);
  padding: 40px 24px;
  text-align: center;
}

.vacio p { margin: 0 0 4px; }

.vacio-icono {
  display: block;
  font-size: 30px;
  color: var(--tinta-suave);
  margin-bottom: 10px;
}

/* --- Tablas ------------------------------------------------- */

.envoltorio-tabla {
  overflow-x: auto;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--panel);
  box-shadow: var(--sombra-suave);
}

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--panel);
  font-size: 14px;
}

th, td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid #e8eef1;
  vertical-align: middle;
}

th {
  color: var(--tinta-suave);
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  white-space: nowrap;
  background: #f8fafb;
}

td.numero, th.numero {
  text-align: right;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

tr:last-child td { border-bottom: 0; }

tbody tr:hover td { background: #fafcfc; }

.suma { color: var(--bueno); font-weight: 600; }
.resta { color: var(--malo); font-weight: 600; }

/* --- Personas (avatar con inicial) --------------------------- */

.persona {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 220px;
}

.persona-avatar {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  background: linear-gradient(135deg, var(--azul), var(--marca));
}

.persona-datos { line-height: 1.35; }

.persona-datos strong { font-size: 14px; }

.persona-datos .tenue { font-size: 12.5px; }

/* --- Checkout enfocado (comprar.php) ------------------------- */

.caja.comprar { max-width: 520px; }

.opciones-plan {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 6px 0 18px;
}

.opcion-plan {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 14px 16px;
  border: 1.5px solid var(--borde);
  border-radius: 10px;
  cursor: pointer;
  font-weight: 400;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.opcion-plan:hover { background: var(--fondo); }

.opcion-plan input {
  width: auto;
  accent-color: var(--marca);
}

.opcion-plan:has(input:checked) {
  border-color: var(--marca);
  background: #eef7f3;
}

.opcion-creditos {
  font-weight: 600;
  flex: 1;
}

.opcion-precio {
  font-family: var(--mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* --- Alta de cuentas (admin) --------------------------------- */

.forma-crear {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}

.forma-crear > div { flex: 1 1 200px; }

.forma-crear label { margin-top: 0; }

.forma-crear .casilla {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
  font-size: 14px;
  color: var(--tinta-suave);
  margin: 0 0 12px;
}

.forma-crear .casilla input { width: auto; }

.forma-crear .boton { margin-bottom: 1px; }

/* --- Formularios en línea (tabla del admin) ------------------ */

.forma-inline {
  display: flex;
  gap: 6px;
  align-items: center;
  margin: 0;
}

.forma-inline input[type=number] { width: 76px; padding: 8px 10px; }
.forma-inline select { width: auto; padding: 8px 10px; }

/* --- Cabecera del panel (respaldo sin franja) ---------------- */

.panel-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.panel-cabecera h1 { font-size: 28px; }

/* --- Pie ---------------------------------------------------- */

.pie {
  border-top: 1px solid var(--borde);
  background: var(--panel);
  margin-top: 60px;
  padding: 26px 0;
}

.pie .contenido {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 14px;
}

.marca-pie {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  color: var(--tinta);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pie-enlaces {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.pie-enlaces a {
  color: var(--tinta-suave);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 7px;
}

.pie-enlaces a:hover {
  color: var(--tinta);
  background: var(--fondo);
}

.tenue { color: var(--tinta-suave); }

/* --- Adaptación a móvil ------------------------------------- */

@media (max-width: 760px) {

  /*  Menú plegable, igual que en el sitio público. */
  .barra .contenido { position: relative; flex-wrap: wrap; }

  .nav-boton {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    cursor: pointer;
    border-radius: 8px;
  }

  .nav-boton span {
    width: 24px;
    height: 2.5px;
    background: var(--tinta);
    border-radius: 2px;
  }

  .nav-enlaces {
    display: none;
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--panel);
    border-bottom: 1px solid var(--borde);
    padding: 14px 0 20px;
    gap: 4px;
    z-index: 60;
  }

  .nav-enlaces a { padding: 12px; }
  .nav-enlaces .boton { text-align: center; margin-top: 8px; }
  .nav-conmutador:checked ~ .nav-enlaces { display: flex; }
}

@media (max-width: 640px) {
  .caja { margin: 24px auto; padding: 24px; }
  .franja { padding: 30px 0 88px; }
  .franja h1 { font-size: 24px; }
  .marcador .numero { font-size: 32px; }
  .panel-cabecera h1 { font-size: 23px; }

  /*  Las acciones en línea de la tabla del admin se apilan
      para no forzar un desplazamiento lateral eterno. */
  .forma-inline { flex-wrap: wrap; }
}


/* =============================================================
   Panel por herramientas
   =============================================================
   El panel deja de ser "el saldo de créditos" y pasa a decir
   qué herramientas tiene el usuario, a cuáles puede entrar ya
   y qué le falta para desbloquear las demás. */

.titulo-herr {
  font-size: 20px;
  margin: 0 0 14px;
}

.herr-rejilla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

@media (max-width: 860px) {
  .herr-rejilla { grid-template-columns: 1fr; }
}

.herr-tarjeta {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 12px;
  box-shadow: var(--sombra);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
}

.herr-cabecera {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.herr-icono {
  font-size: 22px;
  line-height: 1;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 10px 12px;
}

.herr-cabecera h3 {
  margin: 0 0 6px;
  font-size: 17px;
}

.herr-resumen {
  color: var(--tinta-suave);
  font-size: 14.5px;
  margin: 12px 0 0;
}

.herr-cifras {
  display: flex;
  gap: 26px;
  margin: 16px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--borde);
}

.herr-cifras .numero {
  display: block;
  font-family: var(--display);
  font-size: 24px;
  font-weight: 700;
}

.herr-cifras .rotulo {
  font-size: 12.5px;
  color: var(--tinta-suave);
}

.herr-nota {
  font-size: 13.5px;
  color: var(--tinta-suave);
  background: var(--fondo);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 14px 0 0;
}

/* El cupo de la licencia: la cifra que decide si puede seguir
   agregando clientes, con su barra. */
.uso-cupo { margin: 16px 0 0; }

.uso-texto {
  margin: 0 0 6px;
  font-size: 14px;
}

.uso-barra {
  height: 8px;
  background: var(--fondo);
  border-radius: 6px;
  overflow: hidden;
}

.uso-barra span {
  display: block;
  height: 100%;
  background: var(--marca);
  border-radius: 6px;
}

/* Lo que desbloquea cada plan, en miniatura. */
.herr-planes {
  display: grid;
  gap: 6px;
  margin: 16px 0 0;
}

.herr-plan {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  background: var(--fondo);
  border-radius: 8px;
  padding: 8px 12px;
}

.herr-plan span { color: var(--tinta-suave); }

.herr-pronto {
  font-size: 13.5px;
  color: #7a5320;
  background: #fdf3e3;
  border: 1px solid #f0dcbb;
  border-radius: 8px;
  padding: 10px 12px;
  margin: 14px 0 0;
}

.herr-acciones {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 18px;
}

.herr-enlace { font-size: 14px; }


/* =============================================================
   Panel de entrada: una puerta por herramienta
   =============================================================
   La tarjeta ENTERA es el enlace. Grande a propósito: la
   primera decisión del usuario es a cuál herramienta entra, y
   no debe costar puntería. */

.puertas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 860px) {
  .puertas { grid-template-columns: 1fr; }
}

.puerta {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 12px;
  box-shadow: var(--sombra);
  padding: 26px 28px;
  color: inherit;
  text-decoration: none;
  transition: transform 0.12s ease, border-color 0.12s ease;
}

.puerta:hover {
  transform: translateY(-2px);
  border-color: var(--marca);
}

.puerta:focus-visible {
  outline: 3px solid var(--marca);
  outline-offset: 2px;
}

.puerta-resumen {
  color: var(--tinta-suave);
  font-size: 14.5px;
  margin: 14px 0 0;
}

.puerta-dato {
  font-size: 14.5px;
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--borde);
}

.puerta-entrar {
  margin-top: auto;
  padding-top: 18px;
  font-weight: 600;
  color: var(--marca);
}

.puerta:hover .puerta-entrar { text-decoration: underline; }

/* Miga de pan de los paneles por herramienta. */
.miga {
  font-size: 13px;
  margin: 0 0 6px;
}

.franja .miga,
.franja .miga a { color: rgba(255, 255, 255, 0.75); }


/* =============================================================
   Gestión de clientes: la pantalla de trabajo
   ============================================================= */

/* Resumen en una sola línea calma: cuántos, cómo van, cuánto
   falta por cobrar. Nada más — el detalle vive en la lista. */
.tira-resumen {
  display: flex;
  gap: 34px;
  flex-wrap: wrap;
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 15px 22px;
}

.tira-resumen .numero {
  display: block;
  font-family: var(--display);
  font-size: 21px;
  font-weight: 700;
}

.tira-resumen .rotulo {
  font-size: 12.5px;
  color: var(--tinta-suave);
}

.tira-avance { flex: 1 1 220px; min-width: 180px; }
.tira-avance .uso-barra { margin-top: 7px; }

.herramientas-lista {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin: 18px 0 14px;
}

/* Barra de la lista: buscar a la izquierda, actuar a la
   derecha. Una fila con un propósito claro a cada lado. */
.barra-lista {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 6px 0 16px;
}

.buscar-lista { width: 240px; max-width: 100%; }

.forma-inline {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.alta-rapida summary {
  list-style: none;
  cursor: pointer;
}

.alta-rapida summary::-webkit-details-marker {
  display: none;
}

/* La tabla de trabajo: cinco columnas con aire. El contador
   vive en ella, así que se escanea de un vistazo — nombre y
   documento juntos, la fecha con su "en 3 días", y color solo
   en el punto del semáforo. */
.tabla-clientes { width: 100%; border-collapse: collapse; }

.tabla-clientes thead th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--tinta-suave);
  font-weight: 600;
  text-align: left;
  padding: 0 12px 10px;
  border-bottom: 1px solid var(--borde);
  white-space: nowrap;
}

.tabla-clientes thead th.numero { text-align: right; }
.tabla-clientes thead th[data-ordenable] { cursor: pointer; }
.tabla-clientes thead th[data-ordenable]:hover { color: var(--tinta); }

.tabla-clientes tbody td {
  padding: 11px 12px;
  border-bottom: 1px solid #eef2f4;
  vertical-align: middle;
  font-size: 14px;
}

.tabla-clientes .numero { text-align: right; white-space: nowrap; }
.tabla-clientes form { margin: 0; }

/* El nombre es un enlace, pero se lee como texto hasta que se
   pasa por encima: menos azul disperso en la tabla. */
a.exp-nombre { color: var(--tinta); text-decoration: none; }
a.exp-nombre:hover { color: var(--azul); text-decoration: underline; }

/* El estado se cambia en la fila, pero no grita: se ve como
   texto de color y solo al pasar el mouse revela que es un
   menú. Así la columna deja de ser una hilera de cajas. */
.estado-select {
  font-size: 13.5px;
  font-family: inherit;
  font-weight: 600;
  padding: 4px 20px 4px 7px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  max-width: 190px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M2 3.5L5 6.5L8 3.5' stroke='%234a6472' stroke-width='1.4' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 6px center;
}

.estado-select:hover {
  border-color: var(--borde);
  background-color: var(--fondo);
}
.estado-select:focus {
  border-color: var(--azul);
  background-color: var(--panel);
  outline: none;
}

/* Las dos acciones de la fila, juntas y discretas. */
.acciones-col { text-align: right; white-space: nowrap; width: 1%; }

.icono-accion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 7px;
  margin-left: 4px;
  border: 1px solid var(--borde);
  border-radius: 7px;
  background: var(--panel);
  color: var(--tinta-suave);
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}

.icono-accion:hover {
  border-color: var(--marca);
  color: var(--marca);
  background: var(--fondo);
}

/* La ficha del cliente. */
.ficha-rejilla {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 18px;
}

@media (max-width: 900px) {
  .ficha-rejilla { grid-template-columns: 1fr; }
}

.ficha-rejilla label {
  display: block;
  font-size: 13px;
  color: var(--tinta-suave);
  margin: 12px 0 4px;
}

.ficha-rejilla input[type="text"],
.ficha-rejilla input[type="email"],
.ficha-rejilla input[type="number"],
.ficha-rejilla textarea {
  width: 100%;
}

.linea-tiempo {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
}

.linea-tiempo li {
  padding: 7px 0;
  border-bottom: 1px solid var(--borde);
}

.linea-tiempo li:last-child { border-bottom: 0; }

.quitar {
  background: none;
  border: none;
  color: var(--malo);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 6px;
}

.aviso.amarillo {
  background: #fdf3e3;
  border-color: #f0dcbb;
  color: #7a5320;
}


/* --- Vista por mes, abonos en fila y zona delicada -------- */

.grupo-mes { margin-top: 26px; }

/* La cabecera del mes es un botón: pliega y despliega el grupo
   entero. Se ve como texto, no como un control, para no meter
   otra caja en una pantalla que ya se limpió. */
.grupo-cabecera {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
  margin-bottom: 10px;
  padding: 4px 0;
  background: none;
  border: 0;
  border-radius: 8px;
  font-family: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
}

.grupo-cabecera:hover h3 { color: var(--azul); }

.grupo-cabecera h3 {
  margin: 0;
  font-size: 18px;
}

.grupo-flecha {
  color: var(--tinta-suave);
  font-size: 13px;
  line-height: 1;
  align-self: center;
  transition: transform 0.15s ease;
}

.grupo-mes.plegado .grupo-flecha { transform: rotate(-90deg); }
.grupo-mes.plegado .grupo-cuerpo { display: none; }
.grupo-mes.plegado .grupo-cabecera { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .grupo-flecha { transition: none; }
}

.grupo-barra {
  width: 140px;
  align-self: center;
}

.conmutador-vista {
  display: inline-flex;
  border: 1px solid var(--borde);
  border-radius: 8px;
  overflow: hidden;
}

.conmutador-vista a {
  padding: 7px 14px;
  font-size: 14px;
  color: var(--tinta-suave);
  text-decoration: none;
}

.conmutador-vista a.activo {
  background: var(--tinta);
  color: #fff;
}

.progreso-celda { min-width: 170px; }
.progreso-celda .uso-barra { margin-top: 6px; }

/* El abono desde la fila: cerrado es solo un botón; abierto
   despliega el mini formulario. */
.abono-celda summary {
  list-style: none;
  cursor: pointer;
  color: var(--marca);
  font-weight: 600;
  white-space: nowrap;
}

.abono-celda summary::-webkit-details-marker {
  display: none;
}

.abono-celda[open] {
  position: relative;
}

.abono-celda[open] form {
  position: absolute;
  right: 0;
  z-index: 5;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 10px;
  box-shadow: var(--sombra);
  padding: 10px 12px;
  margin-top: 6px;
}

/* Orden de columnas: la flecha dice por dónde va. */
table.ordenable th[data-ordenable] {
  cursor: pointer;
  user-select: none;
}

table.ordenable th.asc::after  { content: " ▲"; }
table.ordenable th.desc::after { content: " ▼"; }

.zona-delicada {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 4px;
  padding: 16px 20px;
  border: 1px solid #e8c4c4;
  border-radius: 12px;
  background: #fdf4f4;
}

.boton.peligro {
  background: var(--malo);
}

.boton.peligro:hover { background: #a51f1f; }


/* --- Modales ---------------------------------------------- */

.modal-fondo {
  position: fixed;
  inset: 0;
  background: rgba(14, 42, 58, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 100;
}

.modal-fondo[hidden] { display: none; }

.modal {
  background: var(--panel);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(14, 42, 58, 0.3);
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px 26px;
  animation: modal-entra 0.16s ease-out;
}

@keyframes modal-entra {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}

.modal-cabeza {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.modal-cabeza h2 { margin: 0; font-size: 19px; }

.modal-cerrar {
  background: none;
  border: none;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: var(--tinta-suave);
  padding: 4px 8px;
}

.modal-cerrar:hover { color: var(--tinta); }

.modal-sub {
  color: var(--tinta-suave);
  margin: 0 0 6px;
  font-size: 14.5px;
}

.modal label {
  display: block;
  font-size: 13px;
  color: var(--tinta-suave);
  margin: 14px 0 4px;
}

.modal input,
.modal select { width: 100%; }

.modal-nota {
  font-size: 13px;
  color: var(--tinta-suave);
  background: var(--fondo);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 16px 0 0;
}

.modal-acciones {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
}

/* El botón de abonar en cada fila. */
.abrir-abono {
  background: none;
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 5px 11px;
  cursor: pointer;
  color: var(--marca);
  font-weight: 600;
  white-space: nowrap;
}

.abrir-abono:hover {
  border-color: var(--marca);
  background: var(--fondo);
}

@media (prefers-reduced-motion: reduce) {
  .modal { animation: none; }
}

/* Campo de WhatsApp con indicativo: + [57] [número]. */
.campo-telefono {
  display: flex;
  align-items: center;
  gap: 6px;
}

.campo-telefono .prefijo-mas {
  color: var(--tinta-suave);
  font-weight: 600;
}

.campo-telefono .indicativo {
  width: 62px;
  text-align: center;
  flex: 0 0 auto;
}

.campo-telefono input[name="whatsapp"] { flex: 1; }


/* Pastillas de filtro por semáforo. */
.pastillas-sem {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0 4px;
}

.pastilla {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  font-size: 13.5px;
  color: var(--tinta-suave);
  text-decoration: none;
  background: var(--panel);
}

.pastilla:hover { border-color: var(--marca); }

.pastilla.activa {
  background: var(--tinta);
  color: #fff;
  border-color: var(--tinta);
}

.pastilla-n {
  font-weight: 700;
  font-family: var(--mono);
  font-size: 12.5px;
}


/* Cola de contacto por WhatsApp. */
.cola { display: flex; flex-direction: column; gap: 8px; }

.cola-item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 12px 16px;
}

.cola-sem { font-size: 16px; flex: 0 0 auto; }
.cola-datos { flex: 1; min-width: 0; }
.cola-datos strong { display: block; }
.cola-datos .tenue { font-size: 13px; }

.cola-hecho-sello {
  display: none;
  color: var(--verde);
  font-weight: 600;
  font-size: 13.5px;
}

.cola-item.hecho {
  background: var(--verde-suave);
  border-color: #bfe0d1;
}

.cola-item.hecho .cola-hecho-sello { display: inline; }
.cola-item.hecho .cola-wa { opacity: 0.6; }

/* -------------------------------------------------------------
   Exportar: pantalla limpia + documento para imprimir/PDF
   ------------------------------------------------------------- */

.exportar { padding-top: 22px; padding-bottom: 40px; }

/* Las dos formas de exportar, como opciones grandes y calmas. */
.exportar-elegir {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 30px;
}

.exportar-opcion {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 18px 20px;
  border: 1px solid var(--borde);
  border-radius: 14px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}

.exportar-opcion:hover {
  border-color: var(--azul);
  box-shadow: 0 6px 18px rgba(20, 80, 122, 0.10);
  transform: translateY(-1px);
}

.exportar-opcion-icono {
  font-size: 22px;
  line-height: 1.2;
  flex: 0 0 auto;
}

.exportar-opcion-texto { display: flex; flex-direction: column; }
.exportar-opcion-texto strong { color: var(--tinta); font-size: 15px; }
.exportar-opcion-texto span {
  color: var(--tinta-suave);
  font-size: 13px;
  margin-top: 3px;
  line-height: 1.4;
}

/* El encabezado del documento solo se ve al imprimir. */
.hoja-cabecera { display: none; }

/* La tabla: aire, líneas finas, y color solo en el semáforo. */
.tabla-export {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.tabla-export thead th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--tinta-suave);
  font-weight: 600;
  text-align: left;
  padding: 0 14px 11px;
  border-bottom: 1px solid var(--borde);
  white-space: nowrap;
}

.tabla-export tbody td {
  padding: 13px 14px;
  border-bottom: 1px solid #eef2f4;
  vertical-align: middle;
}

.tabla-export .numero { text-align: right; white-space: nowrap; }

.exp-cliente { display: flex; align-items: center; gap: 11px; }
.exp-punto {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.exp-nombre { display: block; font-weight: 600; color: var(--tinta); }
.exp-doc { display: block; color: var(--tinta-suave); font-size: 12px; }

.exp-vence-rel {
  display: block;
  color: var(--tinta-suave);
  font-size: 12px;
}
.exp-estado { color: var(--tinta-suave); }
.exp-valor { color: var(--tinta-suave); }
.exp-saldo { font-weight: 600; color: var(--tinta); }
.exp-saldo.cero { font-weight: 400; color: var(--tinta-suave); }

.tabla-export tfoot td {
  padding: 15px 14px;
  border-top: 2px solid var(--tinta);
  font-weight: 600;
  color: var(--tinta);
}

@media (max-width: 620px) {
  .exportar-elegir { grid-template-columns: 1fr; }
}

@media print {
  .barra, .pie, .cinta-ambiente,
  .franja, .no-imprimir { display: none !important; }

  @page { margin: 1.4cm; }

  body { background: #fff; color: #000; font-size: 10.5pt; }

  .contenido, .flotante {
    max-width: none;
    margin: 0;
    padding: 0;
    box-shadow: none;
    background: #fff;
  }

  .hoja-cabecera { display: block; margin-bottom: 18px; }
  .hoja-cabecera h1 { margin: 0 0 3px; font-size: 17pt; color: #000; }
  .hoja-cabecera p { margin: 0; color: #555; font-size: 9.5pt; }

  /* El encabezado de la tabla se repite en cada página. */
  .tabla-export thead { display: table-header-group; }
  .tabla-export tr { break-inside: avoid; page-break-inside: avoid; }

  .tabla-export thead th {
    color: #000;
    border-bottom: 1.5px solid #000;
    padding: 0 8px 6px;
  }
  .tabla-export tbody td { padding: 7px 8px; }
  .tabla-export tfoot td { border-top: 1.5px solid #000; }

  .exp-nombre, .exp-saldo, .tabla-export tfoot td { color: #000; }
  .exp-doc, .exp-vence-rel, .exp-estado, .exp-valor { color: #555; }

  /* Que el punto del semáforo sí salga impreso. */
  .exp-punto {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  a[href] { color: #000; text-decoration: none; }
}

/* -------------------------------------------------------------
   Uso por herramienta en el panel del administrador
   ------------------------------------------------------------- */

.uso-herramientas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}

.uso-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--verde-suave);
  color: var(--tinta);
  border: 1px solid #cfe5da;
  white-space: nowrap;
}

.uso-chip.apagado {
  background: #eef2f4;
  color: var(--tinta-suave);
  border-color: var(--borde);
}

/* -------------------------------------------------------------
   Aviso flotante: la confirmación de lo que se guardó sin
   recargar. Aparece abajo, dice qué pasó y se va solo.
   ------------------------------------------------------------- */

.aviso-flotante {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 60;
  max-width: min(90vw, 460px);
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--tinta);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(14, 42, 58, 0.28);
  animation: aviso-entra .18s ease-out;
}

.aviso-flotante.malo {
  background: var(--malo);
  border-radius: 12px;
  font-weight: 500;
  line-height: 1.45;
}

@keyframes aviso-entra {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .aviso-flotante { animation: none; }
}


/* =============================================================
   Liquidador de renta: la pantalla de datos
   =============================================================
   Una declaración de renta tiene sesenta campos, y por varios
   clientes a la vez son cientos. Puestos uno debajo de otro no
   hay forma de trabajar: no se sabe dónde empieza cada cosa ni
   qué falta por llenar.

   Se resuelve con tres decisiones:

     - cada cliente se pliega, y solo el primero abre;
     - cada sección dice de qué trata y cuánto trae dentro, y
       las que no tienen movimiento vienen cerradas;
     - los campos van en rejilla, no en columna, así que una
       sección entera cabe de un vistazo. */

.liq-cliente {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 12px;
  box-shadow: var(--sombra);
  margin-bottom: 18px;
  overflow: hidden;
}

.liq-cliente[open] { border-color: var(--marca); }

.liq-cliente-cabecera {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  padding: 18px 22px;
  cursor: pointer;
  list-style: none;
  background: var(--fondo-suave, #f7f9fc);
  border-bottom: 1px solid transparent;
}

.liq-cliente[open] .liq-cliente-cabecera {
  border-bottom-color: var(--borde);
}

.liq-cliente-cabecera::-webkit-details-marker { display: none; }

.liq-cliente-cabecera::before {
  content: '▾';
  font-size: 13px;
  color: var(--marca);
  transition: transform 0.12s ease;
}

.liq-cliente:not([open]) .liq-cliente-cabecera::before {
  transform: rotate(-90deg);
}

.liq-cliente-nombre { font-weight: 600; font-size: 17px; }

.liq-cliente-doc { color: var(--tenue); font-size: 14px; }

.liq-cliente-cuerpo { padding: 6px 22px 22px; }

/* --- Secciones dentro de un cliente --- */

.liq-seccion {
  border-bottom: 1px solid var(--borde);
  padding: 4px 0;
}

.liq-seccion:last-child { border-bottom: none; }

.liq-seccion-cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 2px;
  cursor: pointer;
  list-style: none;
}

.liq-seccion-cabecera::-webkit-details-marker { display: none; }

.liq-seccion-titulo {
  font-weight: 600;
  font-size: 15px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.liq-seccion-titulo::before {
  content: '▾';
  font-size: 11px;
  color: var(--tenue);
  transition: transform 0.12s ease;
}

.liq-seccion:not([open]) .liq-seccion-titulo::before {
  transform: rotate(-90deg);
}

/* La cifra del encabezado es lo que permite decidir si vale la
   pena abrir la sección sin abrirla. */
.liq-seccion-cifra {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--texto);
  white-space: nowrap;
}

.liq-seccion-cifra.vacia {
  color: var(--tenue);
  font-style: italic;
}

.liq-seccion-nota {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--tenue);
  max-width: 70ch;
}

/* --- Los campos, en rejilla --- */

.liq-campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px 22px;
  padding: 0 0 18px;
}

.liq-campo { display: flex; flex-direction: column; gap: 5px; }

.liq-campo-titulo {
  font-size: 13.5px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  min-height: 34px;
}

.liq-campo input,
.liq-campo select { width: 100%; margin: 0; }

.liq-campo input[type=number] {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.liq-campo-ayuda {
  font-size: 12px;
  color: var(--tenue);
  line-height: 1.35;
}

/* Distingue de un vistazo lo que ya vino reportado de lo que
   el contador tiene que averiguar. */
.liq-marca {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #eef4ff;
  color: #1f4e9c;
  border: 1px solid #cfe0fb;
  border-radius: 999px;
  padding: 1px 7px;
  font-weight: 600;
  white-space: nowrap;
}

.liq-cerrar { position: sticky; bottom: 12px; }

@media (max-width: 620px) {
  .liq-cliente-cuerpo { padding: 6px 14px 18px; }
  .liq-campos { grid-template-columns: 1fr; }
  .liq-seccion-cabecera { flex-wrap: wrap; }
}

/* -------------------------------------------------------------
   Combo de lanzamiento: la oferta de las dos herramientas
   ------------------------------------------------------------- */

.combo-caja {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.combo-oferta {
  background: var(--panel);
  border: 2px solid var(--marca);
  border-radius: var(--radio);
  padding: 26px 24px;
  text-align: center;
  box-shadow: var(--sombra-suave);
}

.combo-insignia {
  display: inline-block;
  background: var(--marca);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.combo-precio {
  font-family: var(--display);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  margin: 0;
  color: var(--tinta);
}

.combo-despues {
  color: var(--tinta-suave);
  font-size: 13.5px;
  margin: 8px 0 0;
}

.combo-detalle {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 26px 24px;
}

.combo-item {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid #eef2f4;
}

.combo-item:last-of-type { border-bottom: 0; }

.combo-item-icono {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 10px;
  background: var(--fondo);
  font-size: 18px;
}

.combo-item strong { display: block; color: var(--tinta); }
.combo-item p { margin: 4px 0 0; font-size: 13.5px; }

.combo-item-valor {
  display: inline-block;
  margin-top: 2px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tinta-suave);
  text-decoration: line-through;
}

@media (max-width: 760px) {
  .combo-caja { grid-template-columns: 1fr; }
}

/* La tira que anuncia el lanzamiento dentro del panel. */
.combo-tira {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  background: linear-gradient(
      118deg, var(--tinta) 20%, var(--azul) 100%);
  color: #fff;
  border-radius: var(--radio);
  padding: 18px 22px;
  margin-bottom: 22px;
}

.combo-tira h2 {
  margin: 0 0 3px;
  font-size: 19px;
  color: #fff;
}

.combo-tira p { margin: 0; color: rgba(255, 255, 255, 0.82); font-size: 14px; }
.combo-tira .boton { white-space: nowrap; }

.combo-tira-precio {
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
}

.combo-tira-antes {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: line-through;
  font-size: 14px;
  margin-left: 6px;
}

.combo-ahorro {
  margin: 6px 0 0;
  color: var(--marca);
  font-weight: 700;
  font-size: 14.5px;
}