/* =========================================================
   BlancoPlus CRM — estilos de marca
   ========================================================= */

:root {
  /* Colores oficiales */
  --azul: #0A4FA3;
  --dorado: #F5B400;
  --azul-claro: #2FA4FF;
  --blanco: #FFFFFF;
  --pizarra: #5F7691; /* aprobado solo para textos secundarios */

  /* Colores DERIVADOS (no oficiales) */
  --azul-oscuro: #142B60;      /* derivado: traje de la mascota. Texto sobre dorado y texto principal */
  --azul-marino: #0B1F4A;      /* derivado: fondo del modo oscuro (nunca negro) */
  --azul-marino-panel: #12295C;/* derivado: paneles en modo oscuro */
  --rojo-alerta: #B42318;      /* funcional: errores y tareas vencidas */
  --verde-exito: #1E7A46;      /* funcional: confirmaciones */

  --degradado-marca: linear-gradient(90deg, #0A4FA3 0%, #2FA4FF 50%, #F5B400 100%);

  /* Asignación por uso */
  --fondo: var(--blanco);
  --panel: var(--blanco);
  --texto: var(--azul-oscuro);
  --texto-secundario: var(--pizarra);
  --borde: rgba(10, 79, 163, 0.18);
  --enlace: var(--azul);
  --foco: var(--dorado);

  --radio: 14px;
  --sombra: 0 4px 18px rgba(10, 79, 163, 0.10);
  font-size: 16px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fondo: var(--azul-marino);
    --panel: var(--azul-marino-panel);
    --texto: var(--blanco);
    --texto-secundario: rgba(255, 255, 255, 0.78);
    --borde: rgba(47, 164, 255, 0.28);
    --enlace: var(--azul-claro);
    --sombra: none;
  }
}
:root[data-tema="oscuro"] {
    --fondo: var(--azul-marino);
    --panel: var(--azul-marino-panel);
    --texto: var(--blanco);
    --texto-secundario: rgba(255, 255, 255, 0.78);
    --borde: rgba(47, 164, 255, 0.28);
    --enlace: var(--azul-claro);
    --sombra: none;
  }

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.55;
  color: var(--texto);
  background: var(--fondo);
}

h1, h2, h3 { font-weight: 700; line-height: 1.25; color: var(--azul); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) h1, :root:not([data-tema="claro"]) h2, :root:not([data-tema="claro"]) h3 { color: var(--blanco); }
}
:root[data-tema="oscuro"] h1, :root[data-tema="oscuro"] h2, :root[data-tema="oscuro"] h3 { color: var(--blanco); }
h1 { font-size: 1.6rem; margin: 0 0 1rem; }
h2 { font-size: 1.15rem; font-weight: 600; margin: 0 0 .6rem; }

a { color: var(--enlace); }
code { font-family: ui-monospace, Consolas, monospace; }

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

/* ---------- Formularios ---------- */
.formulario { display: grid; gap: .35rem; margin: 1rem 0; }
.formulario label { font-weight: 600; margin-top: .6rem; }
.formulario input {
  font: inherit;
  padding: .8rem .9rem;
  min-height: 48px;
  border: 1.5px solid var(--borde);
  border-radius: 10px;
  background: var(--panel);
  color: var(--texto);
  width: 100%;
}
.formulario input:focus { border-color: var(--azul); }
.entrada-codigo { font-size: 1.4rem !important; letter-spacing: .25em; text-align: center; }
.ayuda, .nota { color: var(--texto-secundario); font-size: .9rem; margin: .2rem 0 .6rem; }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-weight: 600;
  min-height: 48px; padding: .7rem 1.3rem;
  border-radius: 10px; border: 2px solid transparent;
  cursor: pointer; text-decoration: none; margin-top: .8rem;
}
.boton-primario { background: var(--azul); color: var(--blanco); }
.boton-primario:hover { background: var(--azul-oscuro); }
/* Botón dorado: texto azul oscuro, nunca blanco */
.boton-dorado { background: var(--dorado); color: var(--azul-oscuro); }
.boton-dorado:hover { filter: brightness(1.05); }
.boton-secundario { background: transparent; color: var(--enlace); border-color: currentColor; }
.boton-texto { background: none; border: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; padding: .5rem; }

/* ---------- Mensajes ---------- */
.mensaje { padding: .8rem 1rem; border-radius: 10px; border-left: 5px solid; margin: 1rem 0; }
.mensaje-error { border-color: var(--rojo-alerta); background: rgba(180, 35, 24, .08); color: var(--rojo-alerta); }
.mensaje-exito { border-color: var(--verde-exito); background: rgba(30, 122, 70, .08); }
.mensaje-aviso { border-color: var(--dorado); background: rgba(245, 180, 0, .12); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .mensaje-error { color: #FFB4AB; }
}
:root[data-tema="oscuro"] .mensaje-error { color: #FFB4AB; }

/* ---------- Páginas públicas (login, MFA, instalación) ---------- */
.publico { min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; padding: 1.5rem 1rem; }
.tarjeta-publica {
  position: relative; width: 100%; max-width: 440px;
  background: var(--panel); border-radius: var(--radio); box-shadow: var(--sombra);
  border: 1px solid var(--borde); padding: 2rem 1.5rem 1.5rem; overflow: hidden;
}
.franja-marca { position: absolute; inset: 0 0 auto 0; height: 8px; background: var(--degradado-marca); }
.logo-publico { display: block; width: 180px; height: auto; margin: 0 auto .5rem; border-radius: 12px; }
.tarjeta-publica h1 { text-align: center; }
.tarjeta-publica .boton { width: 100%; }
.pasos { padding-left: 1.2rem; }
.pasos li { margin-bottom: .8rem; }
.qr { text-align: center; margin: .8rem 0; }
.qr img { background: var(--blanco); padding: 6px; border-radius: 10px; max-width: 100%; height: auto; }
.clave-manual code { font-size: 1.05rem; word-break: break-all; }
.codigos-recuperacion { columns: 2; padding-left: 1.6rem; font-size: 1.05rem; }
.codigos-recuperacion li { margin-bottom: .4rem; }

/* ---------- Área interna: barra lateral (computadora) / menú inferior (celular) ---------- */
.app { min-height: 100vh; }
.navegacion { background: var(--azul); color: var(--blanco); }
.navegacion a { color: var(--blanco); text-decoration: none; }
.navegacion ul { list-style: none; margin: 0; padding: 0; }
.navegacion-marca { display: flex; align-items: center; gap: .6rem; font-weight: 700; }
.navegacion-marca img { border-radius: 50%; }
.navegacion-marca small { color: var(--dorado); font-weight: 600; }
.contenido { padding: 1.2rem 1rem 6rem; max-width: 1100px; }
.panel {
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra); padding: 1.2rem; margin-bottom: 1rem;
}
.saludo { font-size: 1.05rem; }

/* Celular: menú inferior con botones grandes */
@media (max-width: 799px) {
  .navegacion-marca, .navegacion-salir { display: none; }
  .navegacion { position: fixed; inset: auto 0 0 0; z-index: 10; border-top: 4px solid var(--dorado); }
  .navegacion ul { display: flex; }
  .navegacion li { flex: 1; }
  .navegacion a { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 64px; font-size: .8rem; font-weight: 600; }
  .navegacion a .icono { font-size: 1.3rem; }
  .navegacion a.activo { background: var(--azul-oscuro); color: var(--dorado); }
  .contenido::after { content: ''; display: block; height: 1px; }
}

/* Computadora: barra lateral */
@media (min-width: 800px) {
  .app { display: grid; grid-template-columns: 268px 1fr; }
  .navegacion { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 1.2rem 1rem; }
  .navegacion::before { content: ''; display: block; height: 6px; margin: -1.2rem -1rem 1.2rem; background: var(--degradado-marca); }
  .navegacion-marca { margin-bottom: 1.5rem; font-size: 1.1rem; }
  .navegacion a { display: flex; gap: .7rem; align-items: center; padding: .75rem .9rem; border-radius: 10px; font-weight: 600; }
  .navegacion a:hover { background: rgba(255, 255, 255, .12); }
  .navegacion a.activo { background: var(--blanco); color: var(--azul); }
  .navegacion-salir { margin-top: auto; }
  .contenido { padding: 2rem 2.5rem; }
}

/* ---------- Tablas adaptables ---------- */
.tabla-adaptable table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabla-adaptable th { text-align: left; color: var(--azul); border-bottom: 2px solid var(--azul); padding: .5rem; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .tabla-adaptable th { color: var(--azul-claro); border-color: var(--azul-claro); }
}
:root[data-tema="oscuro"] .tabla-adaptable th { color: var(--azul-claro); border-color: var(--azul-claro); }
.tabla-adaptable td { border-bottom: 1px solid var(--borde); padding: .5rem; vertical-align: top; word-break: break-word; }
@media (max-width: 799px) {
  .tabla-adaptable thead { display: none; }
  .tabla-adaptable tr { display: block; border: 1px solid var(--borde); border-radius: 10px; margin-bottom: .7rem; padding: .4rem; background: var(--panel); }
  .tabla-adaptable td { display: grid; grid-template-columns: 6rem 1fr; gap: .5rem; border: 0; padding: .25rem .4rem; }
  .tabla-adaptable td::before { content: attr(data-titulo); font-weight: 600; color: var(--texto-secundario); }
}
.paginacion { display: flex; gap: .8rem; flex-wrap: wrap; }

/* ---------- Componentes de módulos ---------- */
.formulario select, .formulario textarea, .filtros input, .filtros select {
  font: inherit; padding: .7rem .8rem; min-height: 48px; width: 100%;
  border: 1.5px solid var(--borde); border-radius: 10px; background: var(--panel); color: var(--texto);
}
.formulario textarea { min-height: 8rem; resize: vertical; }
.barra-acciones { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; }
.barra-acciones .boton { margin-top: 0; }
.filtros { display: grid; gap: .7rem; background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1rem; margin-bottom: 1rem; }
.filtros label span { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .2rem; }
.filtros-botones { display: flex; gap: .6rem; flex-wrap: wrap; }
.filtros-botones .boton { margin-top: 0; }
@media (min-width: 800px) {
  .filtros { grid-template-columns: 2fr 1fr 1fr 1fr; align-items: end; }
  .filtro-busqueda { grid-column: 1 / -1; }
}
.casilla { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; font-weight: 400; }
.casilla input { width: 22px; height: 22px; min-height: 0; accent-color: var(--azul); }
.casillas { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; }
fieldset { border: 0; padding: 0; margin: 0; }
legend { font-weight: 600; margin-top: .6rem; }
.formulario-columnas .campo { display: grid; gap: .35rem; }
@media (min-width: 800px) {
  .formulario-columnas { grid-template-columns: 1fr 1fr; column-gap: 1.2rem; }
  .campo-ancho { grid-column: 1 / -1; }
}
.acciones-formulario { display: flex; gap: .6rem; flex-wrap: wrap; }
.formulario-en-linea { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin: 0; }
.formulario-en-linea select { width: auto; flex: 1 1 10rem; }
.formulario-en-linea .boton { margin-top: 0; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.rejilla-ficha { display: grid; gap: 1rem; }
.rejilla-ficha .panel { margin-bottom: 0; }
@media (min-width: 1000px) { .rejilla-ficha { grid-template-columns: 1fr 1fr; } .panel-ancho { grid-column: 1 / -1; } }
.datos { display: grid; grid-template-columns: 8rem 1fr; gap: .4rem .8rem; margin: 0; }
.datos dt { font-weight: 600; color: var(--texto-secundario); }
.datos dd { margin: 0; word-break: break-word; }
.notas { white-space: pre-wrap; word-break: break-word; margin: 0; }
.historial { list-style: none; padding: 0; margin: 0; }
.historial li { padding: .5rem 0; border-bottom: 1px solid var(--borde); display: flex; flex-wrap: wrap; gap: .2rem .7rem; }
.historial time { color: var(--texto-secundario); font-size: .88rem; min-width: 11rem; }
.historial small { color: var(--texto-secundario); }
.aviso-sensible { margin-top: 0; }

/* Etiquetas de etapa: solo colores de marca (y verde funcional para "Completado") */
.etiqueta { display: inline-block; padding: .15rem .6rem; border-radius: 999px; font-size: .82rem; font-weight: 600; white-space: nowrap; border: 1.5px solid transparent; }
.etapa-nuevo { background: var(--dorado); color: var(--azul-oscuro); }
.etapa-contactado, .etapa-consulta { background: rgba(47, 164, 255, .16); color: var(--azul); border-color: rgba(47, 164, 255, .5); }
.etapa-contrato, .etapa-en_servicio { background: var(--azul); color: var(--blanco); }
.etapa-completado { background: rgba(30, 122, 70, .12); color: var(--verde-exito); border-color: var(--verde-exito); }
.etapa-perdido { background: transparent; color: var(--pizarra); border-color: var(--pizarra); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .etapa-contactado, :root:not([data-tema="claro"]) .etapa-consulta { color: var(--blanco); }
  :root:not([data-tema="claro"]) .etapa-completado { color: #8FE0B0; border-color: #8FE0B0; }
  :root:not([data-tema="claro"]) .etapa-perdido { color: rgba(255,255,255,.75); border-color: rgba(255,255,255,.5); }
}
:root[data-tema="oscuro"] .etapa-contactado, :root[data-tema="oscuro"] .etapa-consulta { color: var(--blanco); }
  :root[data-tema="oscuro"] .etapa-completado { color: #8FE0B0; border-color: #8FE0B0; }
  :root[data-tema="oscuro"] .etapa-perdido { color: rgba(255,255,255,.75); border-color: rgba(255,255,255,.5); }
.navegacion a .icono { width: 1.2em; text-align: center; }
@media (max-width: 799px) { .navegacion a { font-size: .72rem; } }
/* Nombre corto en la barra del celular (por ejemplo "Docs" en lugar de "Documentos"). */
.navegacion .nombre-corto { display: none; }
@media (max-width: 799px) { .navegacion .nombre-largo { display: none; } .navegacion .nombre-corto { display: inline; } }
/* Celulares angostos: 8 botones caben sin que los nombres se toquen. */
@media (max-width: 430px) { .navegacion a { font-size: .62rem; letter-spacing: -.01em; } .navegacion a .icono { font-size: 1.15rem; } }

/* ---------- Embudo: tablero en computadora, lista agrupada en celular ---------- */
.tablero { display: grid; gap: 1rem; }
.columna-embudo { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: .9rem; }
.columna-embudo header { border-bottom: 3px solid var(--azul-claro); margin-bottom: .6rem; padding-bottom: .4rem; }
.columna-embudo h2 { margin: 0 0 .3rem; font-size: 1rem; }
.columna-embudo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.resumen-etapa { margin: 0; font-size: .9rem; color: var(--texto-secundario); }
.tarjeta-cliente { border: 1px solid var(--borde); border-left: 4px solid var(--azul); border-radius: 10px; padding: .6rem .7rem; display: grid; gap: .15rem; background: var(--fondo); }
.tarjeta-cliente .detalle { font-size: .85rem; color: var(--texto-secundario); }
.tarjeta-cliente .mover { margin-top: .4rem; }
.tarjeta-cliente .mover select { min-height: 44px; padding: .4rem; font-size: .9rem; }
.tarjeta-cliente .mover .boton { min-height: 44px; padding: .4rem .8rem; font-size: .9rem; }
.vacio { margin: .3rem 0; }
@media (min-width: 800px) {
  .tablero { grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); overflow-x: auto; padding-bottom: .6rem; align-items: start; }
}
/* ---------- Tareas ---------- */
.pestanas { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.pestanas a { padding: .6rem 1rem; min-height: 44px; display: inline-flex; align-items: center; gap: .4rem; border-radius: 999px; border: 1.5px solid var(--borde); text-decoration: none; font-weight: 600; color: var(--enlace); }
.pestanas a.activo { background: var(--azul); color: var(--blanco); border-color: var(--azul); }
.contador { background: var(--dorado); color: var(--azul-oscuro); border-radius: 999px; padding: 0 .5rem; font-size: .8rem; }
.contador-alerta { background: var(--rojo-alerta); color: var(--blanco); }
.lista-tareas { list-style: none; margin: 0 0 .5rem; padding: 0; display: grid; gap: .6rem; }
.tarea { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem; padding: .7rem .8rem; border: 1px solid var(--borde); border-left: 5px solid var(--azul-claro); border-radius: 10px; }
.tarea.prioridad-alta { border-left-color: var(--dorado); }
.tarea.prioridad-baja { border-left-color: var(--pizarra); }
.tarea-texto { display: grid; gap: .15rem; flex: 1 1 16rem; }
.tarea .detalle { font-size: .88rem; color: var(--texto-secundario); }
.tarea-acciones { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.tarea-acciones .boton { margin-top: 0; min-height: 44px; padding: .4rem .9rem; }
.tarea-vencida { border-color: var(--rojo-alerta); border-left-color: var(--rojo-alerta); background: rgba(180, 35, 24, .06); }
.marca-vencida { color: var(--rojo-alerta); font-weight: 700; }
.tarea-completada strong { text-decoration: line-through; opacity: .75; }
.panel-alerta { border-color: var(--rojo-alerta); }
.panel-alerta h2 { color: var(--rojo-alerta); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .marca-vencida, :root:not([data-tema="claro"]) .panel-alerta h2 { color: #FFB4AB; }
  :root:not([data-tema="claro"]) .tarea-vencida { border-color: #FFB4AB; border-left-color: #FFB4AB; }
}
:root[data-tema="oscuro"] .marca-vencida, :root[data-tema="oscuro"] .panel-alerta h2 { color: #FFB4AB; }
  :root[data-tema="oscuro"] .tarea-vencida { border-color: #FFB4AB; border-left-color: #FFB4AB; }
/* ---------- Agenda ---------- */
.semana { display: grid; gap: .8rem; }
.dia { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: .8rem; }
.dia h2 { font-size: .95rem; margin-bottom: .5rem; }
.dia h2::first-letter { text-transform: uppercase; }
.dia-hoy { border: 2px solid var(--dorado); }
@media (min-width: 1000px) { .semana { grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: start; } }
.lista-citas { list-style: none; margin: 0 0 .5rem; padding: 0; display: grid; gap: .5rem; }
.cita { display: flex; flex-wrap: wrap; gap: .4rem .7rem; align-items: flex-start; border: 1px solid var(--borde); border-left: 4px solid var(--azul); border-radius: 10px; padding: .55rem .65rem; }
.cita-hora { font-weight: 700; color: var(--azul); display: grid; min-width: 4.5rem; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .cita-hora { color: var(--azul-claro); }
}
:root[data-tema="oscuro"] .cita-hora { color: var(--azul-claro); }
.cita-hora small { font-weight: 400; color: var(--texto-secundario); }
.cita-texto { display: grid; gap: .1rem; flex: 1 1 10rem; min-width: 0; }
.cita .detalle { font-size: .85rem; color: var(--texto-secundario); }
.cita .boton { margin-top: 0; min-height: 40px; padding: .3rem .8rem; font-size: .88rem; }
@media (min-width: 1000px) { .semana .cita { flex-direction: column; } .semana .cita-hora { min-width: 0; } }
.enlace-agregar { display: inline-block; padding: .5rem 0; font-weight: 600; }
.navegacion-semana { flex-wrap: nowrap; }
.navegacion-semana .boton { flex: 1 1 0; padding-left: .5rem; padding-right: .5rem; white-space: nowrap; }
/* ---------- Consentimientos ---------- */
.estado-consentimientos { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.estado-consentimientos li { border: 1px solid var(--borde); border-radius: 10px; padding: .6rem .7rem; display: grid; gap: .1rem; }
.estado-consentimientos small { color: var(--texto-secundario); font-size: .8rem; }
.consentimiento-alta { border-left: 5px solid var(--verde-exito) !important; }
.consentimiento-baja { border-left: 5px solid var(--rojo-alerta) !important; }
.consentimiento-ninguno { border-left: 5px solid var(--pizarra) !important; }
.registrar-consentimiento summary { cursor: pointer; font-weight: 600; color: var(--enlace); min-height: 44px; display: flex; align-items: center; }
h3 { font-size: 1rem; margin: 1rem 0 .5rem; }
/* ---------- Hoy ---------- */
.resumen-hoy { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
@media (min-width: 800px) { .resumen-hoy { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.resumen-hoy a { display: grid; gap: .1rem; padding: .8rem; min-height: 72px; border-radius: var(--radio); background: var(--azul); color: var(--blanco); text-decoration: none; font-weight: 600; font-size: .9rem; }
.resumen-hoy strong { font-size: 1.6rem; line-height: 1.1; }
.resumen-hoy .resumen-alerta a { background: var(--rojo-alerta); }
.resumen-hoy .resumen-aviso a { background: var(--dorado); color: var(--azul-oscuro); }
.rejilla-hoy { display: grid; gap: 1rem; grid-auto-flow: row dense; }
.rejilla-hoy .panel { margin-bottom: 0; }
@media (min-width: 1000px) { .rejilla-hoy { grid-template-columns: 1fr 1fr; } .rejilla-hoy .panel-alerta { grid-column: 1 / -1; } }
.panel-aviso { border-color: var(--dorado); border-width: 2px; }
.lista-leads { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.lista-leads li { display: grid; gap: .1rem; border-left: 4px solid var(--dorado); padding: .3rem .6rem; }
.lista-leads .detalle { font-size: .85rem; color: var(--texto-secundario); }
.conteo-embudo { list-style: none; padding: 0; margin: 0 0 .5rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.conteo-embudo a { display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; color: inherit; padding: .3rem .4rem; min-height: 44px; }
/* Códigos de recuperación: una sola columna en pantallas angostas */
@media (max-width: 420px) { .codigos-recuperacion { columns: 1; } }

/* =========================================================
   Capa visual "estilo del sitio web" (aprobada por la dueña, 2026-10-15)
   Copia del sitio blancoplusservices.com: degradado azul en barra y encabezados,
   botones en píldora, tarjetas con esquinas asimétricas, ceja dorada y animaciones suaves.
   Solo cambia la apariencia: no toca formularios, seguridad ni funciones.
   ========================================================= */
:root {
  /* Degradado azul del sitio web (aprobado por la dueña para barra y encabezados) */
  --degradado-azul: linear-gradient(120deg, #0A4FA3 0%, #0A4FA3 45%, #2FA4FF 100%);
  --radio-tarjeta: 26px 8px 26px 8px;   /* esquinas asimétricas del sitio */
  --sombra-suave: 0 10px 30px rgba(10, 79, 163, .12);
  --fondo-suave: #F3F8FF;               /* derivado: banda clara del sitio */
  --ceja: #8A6400;                      /* derivado: dorado oscurecido para leerse sobre fondo claro (AA) */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) { --sombra-suave: 0 10px 30px rgba(0, 0, 0, .25); --fondo-suave: var(--azul-marino); --ceja: var(--dorado); }
}
:root[data-tema="oscuro"] { --sombra-suave: 0 10px 30px rgba(0, 0, 0, .25); --fondo-suave: var(--azul-marino); --ceja: var(--dorado); }

body { background: var(--fondo-suave); }
h1 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); font-weight: 700; letter-spacing: -.02em; }
h2 { font-weight: 700; letter-spacing: -.01em; }

/* Ceja en mayúsculas sobre los títulos (como "SOLUCIONES QUE SUMAN" en la web) */
.ceja { color: var(--ceja); font-weight: 700; letter-spacing: .12em; font-size: .78rem; text-transform: uppercase; margin-bottom: .2rem; }

/* ---------- Botones en píldora ---------- */
.boton { border-radius: 999px; padding: .7rem 1.4rem; font-weight: 700; transition: transform .2s, box-shadow .2s, background .2s, color .2s; }
.boton:hover { transform: translateY(-2px); }
.boton-dorado:hover, .boton-primario:hover { box-shadow: 0 8px 20px rgba(245, 180, 0, .35); }
/* Botón principal dorado con texto azul oscuro, como "Quiero encontrar mi norte" */
.boton-primario { background: var(--dorado); color: var(--azul-oscuro); border-color: var(--dorado); }
.boton-primario:hover { background: var(--dorado); color: var(--azul-oscuro); filter: brightness(1.05); }
.boton-secundario { border-width: 2px; }
.boton-secundario:hover { background: var(--azul); color: var(--blanco); border-color: var(--azul); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .boton-secundario:hover { background: var(--blanco); color: var(--azul); border-color: var(--blanco); }
}
:root[data-tema="oscuro"] .boton-secundario:hover { background: var(--blanco); color: var(--azul); border-color: var(--blanco); }

/* ---------- Campos ---------- */
.formulario input, .formulario select, .formulario textarea, .filtros input, .filtros select {
  border-radius: 12px; transition: border-color .2s, box-shadow .2s;
}
.formulario input:focus, .formulario select:focus, .formulario textarea:focus, .filtros input:focus, .filtros select:focus {
  border-color: var(--azul); box-shadow: 0 0 0 3px rgba(47, 164, 255, .25);
}

/* ---------- Tarjetas con esquinas asimétricas y detalle de color ---------- */
.panel, .filtros, .columna-embudo, .dia, .tarjeta-publica {
  border-radius: var(--radio-tarjeta); box-shadow: var(--sombra-suave); position: relative;
}
.panel { padding: 1.4rem; overflow: hidden; transition: transform .25s, border-color .25s; }
.panel::after {
  content: ""; position: absolute; right: -26px; top: -26px; width: 80px; height: 80px; border-radius: 50%;
  background: var(--degradado-marca); opacity: .14; transition: transform .4s, opacity .4s; pointer-events: none;
}
.panel:hover { transform: translateY(-3px); border-color: var(--azul); }
.panel:hover::after { transform: scale(1.8); opacity: .22; }
.panel h2 { padding-right: 2.5rem; }
.tarjeta-cliente, .tarea, .cita, .estado-consentimientos li { border-radius: 14px 6px 14px 6px; }

/* ---------- Barra lateral (computadora) y barras del celular ---------- */
.navegacion { background: var(--degradado-azul); }
.navegacion-marca { flex-direction: column; align-items: center; gap: .25rem; text-align: center; }
.navegacion-marca img { border-radius: 0; width: 190px; height: auto; }
.navegacion-marca small { letter-spacing: .3em; font-size: .74rem; padding-left: .3em; }
.barra-movil { display: none; }
@media (min-width: 800px) {
  .navegacion { box-shadow: 4px 0 24px rgba(10, 79, 163, .18); }
  .navegacion a { border-radius: 999px; transition: background .2s, color .2s, transform .2s; }
  .navegacion a:hover { transform: translateX(3px); }
  .navegacion a.activo { background: var(--dorado); color: var(--azul-oscuro); box-shadow: 0 6px 16px rgba(245, 180, 0, .35); }
}
@media (max-width: 799px) {
  /* Franja superior con el logo, como el encabezado del sitio */
  .barra-movil {
    display: flex; align-items: center; gap: .5rem; position: sticky; top: 0; z-index: 9;
    padding: .55rem 1rem; background: var(--degradado-azul); color: var(--blanco);
    box-shadow: inset 0 -4px 0 var(--dorado);
  }
  .barra-movil img { width: 108px; height: auto; display: block; }
  .barra-movil small { color: var(--dorado); font-weight: 700; letter-spacing: .25em; font-size: .7rem; }
  /* Menú inferior blanco con botones grandes, como los botones fijos del sitio */
  .navegacion { background: var(--blanco); border-top: 0; box-shadow: 0 -6px 18px rgba(10, 79, 163, .14); padding: .3rem .3rem calc(.3rem + env(safe-area-inset-bottom, 0px)); }
  .navegacion a { color: var(--azul); border-radius: 16px; min-height: 60px; }
  .navegacion a.activo { background: var(--azul); color: var(--blanco); }
  .navegacion a.activo .icono { color: var(--dorado); }
  .contenido { padding-top: 1rem; }
}
@media (max-width: 799px) and (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .navegacion { background: var(--azul-marino-panel); }
  :root:not([data-tema="claro"]) .navegacion a { color: var(--blanco); }
}
@media (max-width: 799px) {
  :root[data-tema="oscuro"] .navegacion { background: var(--azul-marino-panel); }
  :root[data-tema="oscuro"] .navegacion a { color: var(--blanco); }
}

/* ---------- Pantalla "Hoy": bienvenida con Mr. Blanco ---------- */
.bienvenida {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--degradado-azul); color: var(--blanco); border-radius: var(--radio-tarjeta);
  padding: 1.2rem 1.4rem 0; margin-bottom: 1rem; overflow: hidden; position: relative; box-shadow: var(--sombra-suave);
}
.bienvenida::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--degradado-marca); }
.bienvenida .saludo { color: var(--blanco); font-size: 1.1rem; margin: 0 0 .3rem; }
.bienvenida .saludo strong { color: var(--dorado); }
.bienvenida-lema { margin: 0 0 1.2rem; opacity: .9; font-size: .95rem; }
.bienvenida-mascota { width: 96px; height: auto; align-self: flex-end; flex: none; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .3)); animation: flotar 6s ease-in-out infinite; }
@media (min-width: 800px) { .bienvenida-mascota { width: 130px; } }
.resumen-hoy a { background: var(--degradado-azul); border-radius: 22px 6px 22px 6px; box-shadow: var(--sombra-suave); transition: transform .2s; }
.resumen-hoy a:hover { transform: translateY(-3px); }
.resumen-hoy strong { font-size: 2rem; color: var(--dorado); }
.resumen-hoy .resumen-alerta a { background: var(--rojo-alerta); }
.resumen-hoy .resumen-alerta strong { color: var(--blanco); }
.resumen-hoy .resumen-aviso a { background: var(--dorado); }
.resumen-hoy .resumen-aviso strong { color: var(--azul-oscuro); }

/* ---------- Pantallas públicas (entrada, verificación, instalación) ---------- */
.publico { background: var(--degradado-azul); align-items: center; }
.escena-publica { display: flex; align-items: flex-end; justify-content: center; width: 100%; max-width: 900px; }
.mascota-publica { display: none; }
/* La imagen de Mr. Blanco termina en un difuminado blanco a la cintura: se desvanece suavemente (igual que en la web) */
.bienvenida-mascota { -webkit-mask-image: linear-gradient(#000 78%, transparent 97%); mask-image: linear-gradient(#000 78%, transparent 97%); }
/* Mr. Blanco de cuerpo entero junto a la tarjeta, señalándola (con luz de fondo y sombra en el piso para que no parezca pegado) */
@media (min-width: 900px) {
  .mascota-publica { display: block; position: relative; z-index: 3; width: 240px; margin: 3.2rem 18px -6px 0; align-self: flex-end; animation: entrar-mascota .8s cubic-bezier(.2, .8, .2, 1) both; }
  .mascota-publica::before { content: ""; position: absolute; z-index: -1; inset: 8% -35% 12%; background: radial-gradient(closest-side, rgba(47, 164, 255, .45), rgba(47, 164, 255, 0)); }
  .mascota-publica::after { content: ""; position: absolute; z-index: -1; left: 4%; right: 4%; bottom: -8px; height: 26px; background: radial-gradient(closest-side, rgba(5, 20, 60, .55), rgba(5, 20, 60, 0)); animation: sombra-mascota 5s ease-in-out infinite; }
  .mascota-publica img { display: block; width: 100%; height: auto; transform-origin: 50% 100%; filter: drop-shadow(0 0 14px rgba(47, 164, 255, .5)); animation: respirar-mascota 5s ease-in-out infinite; }
  .mascota-burbuja { position: absolute; bottom: calc(100% + 6px); left: 38%; z-index: 3; white-space: nowrap; padding: .55rem .95rem; border-radius: 18px 18px 18px 4px; background: var(--blanco); color: var(--azul-oscuro); font-weight: 700; font-size: .92rem; box-shadow: 0 10px 24px rgba(5, 20, 60, .35); animation: aparecer-burbuja .5s .8s ease both; }
  .mascota-flecha { display: inline-block; animation: senalar 1.6s 1.4s ease-in-out infinite; }
}
@keyframes entrar-mascota { from { opacity: 0; transform: translateX(-40px); } }
@keyframes respirar-mascota { 50% { transform: scale(1.012) translateY(-3px); } }
@keyframes sombra-mascota { 50% { transform: scaleX(.92); opacity: .8; } }
@keyframes aparecer-burbuja { from { opacity: 0; transform: translateY(8px) scale(.9); } }
@keyframes senalar { 50% { transform: translateX(4px); } }
.tarjeta-publica { z-index: 2; border: 0; padding-top: 2.4rem; overflow: hidden; }
.logo-publico { width: 200px; border-radius: 0; }
/* En modo oscuro la tarjeta es azul marino: va el logo blanco (sin recuadro), igual que en la barra lateral. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .logo-publico { width: 230px; }
}
:root[data-tema="oscuro"] .logo-publico { width: 230px; }

/* ---------- Pestañas ---------- */
.pestanas a { transition: background .2s, color .2s, transform .2s; }
.pestanas a:hover { transform: translateY(-2px); }
.pestanas a.activo { background: var(--dorado); color: var(--azul-oscuro); border-color: var(--dorado); }

/* ---------- Animaciones suaves (solo CSS; se apagan con "reducir movimiento") ---------- */
@keyframes subir { from { opacity: 0; transform: translateY(14px); } }
@keyframes flotar { 50% { transform: translateY(-8px); } }
.contenido > *, .rejilla-hoy > *, .rejilla-ficha > *, .resumen-hoy > li, .tablero > *, .semana > * { animation: subir .5s ease both; }
.rejilla-hoy > :nth-child(2), .rejilla-ficha > :nth-child(2), .resumen-hoy > li:nth-child(2), .tablero > :nth-child(2), .semana > :nth-child(2) { animation-delay: .06s; }
.rejilla-hoy > :nth-child(3), .rejilla-ficha > :nth-child(3), .resumen-hoy > li:nth-child(3), .tablero > :nth-child(3), .semana > :nth-child(3) { animation-delay: .12s; }
.rejilla-hoy > :nth-child(n+4), .rejilla-ficha > :nth-child(n+4), .resumen-hoy > li:nth-child(4), .tablero > :nth-child(n+4), .semana > :nth-child(n+4) { animation-delay: .18s; }
.tarjeta-publica { animation: subir .6s ease both; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Bandeja de entrada: texto del correo (siempre como texto, nunca HTML) ---------- */
.texto-correo { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 60vh; overflow-y: auto; padding: 1rem; border-radius: 12px; background: var(--fondo-suave); border: 1px solid rgba(10, 79, 163, .15); }
.navegacion a .contador { margin-left: .3rem; }
@media (min-width: 800px) { .navegacion a.activo .contador { background: var(--azul-oscuro); color: var(--blanco); } }
/* Bandeja: diferencia lo que apartó el CRM solo (aviso de empresa) de lo que apartó la usuaria */
.etiqueta-aviso { background: rgba(47, 164, 255, .14); border-color: var(--azul-claro); color: var(--azul); white-space: normal; }
.etiqueta-persona { background: rgba(245, 180, 0, .14); border-color: var(--dorado); color: var(--azul-oscuro); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .etiqueta-aviso { color: var(--blanco); }
  :root:not([data-tema="claro"]) .etiqueta-persona { color: var(--blanco); }
}
:root[data-tema="oscuro"] .etiqueta-aviso { color: var(--blanco); }
  :root[data-tema="oscuro"] .etiqueta-persona { color: var(--blanco); }

/* =========================================================
   Agenda: calendario con mes, semana, día y lista
   Leyenda de prioridad: urgente (rojo), alta (dorado), media (azul claro), baja (pizarra); citas en azul.
   ========================================================= */
.agregar-agenda { flex-wrap: wrap; gap: .5rem; }
.agregar-agenda .boton { padding: .55rem 1rem; }
.leyenda { padding: .8rem 1.2rem; }
.leyenda summary { cursor: pointer; font-weight: 700; color: var(--azul); }
.leyenda-contenido { margin-top: .6rem; }
.leyenda-niveles { list-style: none; padding: 0; margin: 0 0 .4rem; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.leyenda-niveles li { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; }
.punto { display: inline-block; width: 14px; height: 14px; border-radius: 50%; }
.filtros-agenda { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.nivel-urgente { --nivel: var(--rojo-alerta); }
.nivel-alta { --nivel: var(--dorado); }
.nivel-media { --nivel: var(--azul-claro); }
.nivel-baja { --nivel: var(--pizarra); }
.nivel-cita { --nivel: var(--azul); }
.punto.nivel-urgente, .punto.nivel-alta, .punto.nivel-media, .punto.nivel-baja, .punto.nivel-cita { background: var(--nivel); }

/* Barra para cambiar de mes */
.barra-navegacion-calendario { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .8rem 0; }
.barra-navegacion-calendario .boton { min-height: 44px; padding: .4rem 1rem; }
.titulo-mes { margin: 0 .4rem; font-size: 1.3rem; min-width: 10ch; text-align: center; }
.ir-a-mes { display: flex; gap: .4rem; align-items: center; margin-left: auto; }
.ir-a-mes input { min-height: 44px; border-radius: 12px; border: 1px solid var(--borde); padding: .3rem .6rem; background: var(--panel); color: var(--texto); font: inherit; }

/* Cuadrícula del mes */
.mes { border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); overflow: hidden; background: var(--panel); box-shadow: var(--sombra-suave); }
.mes-cabecera, .mes-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.mes-cabecera div { padding: .5rem; text-align: center; font-weight: 700; font-size: .85rem; color: var(--blanco); background: var(--degradado-azul); }
.mes-dia { min-height: 110px; padding: .35rem; border-top: 1px solid var(--borde); border-left: 1px solid var(--borde); min-width: 0; }
.mes-semana .mes-dia:first-child { border-left: 0; }
.fuera-de-mes { background: rgba(95, 118, 145, .08); }
.fuera-de-mes .mes-numero { opacity: .55; }
.mes-dia.dia-hoy { box-shadow: inset 0 0 0 3px var(--dorado); }
.mes-numero { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; border-radius: 999px; font-weight: 700; text-decoration: none; color: var(--texto); }
.mes-numero:hover, .mes-numero:focus-visible { background: var(--dorado); color: var(--azul-oscuro); }
.dia-hoy .mes-numero { background: var(--dorado); color: var(--azul-oscuro); }
.mes-chips { list-style: none; margin: .2rem 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .2rem; min-width: 0; }
.mes-chips li { min-width: 0; overflow: hidden; }
.chip { display: block; padding: .15rem .4rem; border-radius: 8px 3px 8px 3px; font-size: .78rem; line-height: 1.3; text-decoration: none; color: var(--texto);
  background: color-mix(in srgb, var(--nivel, var(--azul)) 16%, transparent); border-left: 4px solid var(--nivel, var(--azul));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip.cal-hecho { opacity: .55; text-decoration: line-through; }
.mes-mas { font-size: .78rem; font-weight: 700; }
@media (max-width: 799px) {
  /* En el celular: el día muestra solo los íconos; al tocarlo se abre la vista del día */
  .mes-dia { min-height: 64px; padding: .2rem; }
  .mes-numero { min-width: 28px; min-height: 28px; font-size: .85rem; }
  .mes-chips { display: flex; flex-wrap: wrap; gap: .1rem; }
  .chip { padding: 0 .15rem; border-left-width: 3px; font-size: .75rem; }
  .chip-texto { display: none; }
  .mes-mas { font-size: .7rem; }
  .ir-a-mes { margin-left: 0; width: 100%; }
  .titulo-mes { font-size: 1.1rem; min-width: 0; }
}

/* Elementos de día, semana, lista, Hoy y ficha */
.cal-item { display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: flex-start; justify-content: space-between;
  border: 1px solid var(--borde); border-left: 5px solid var(--nivel, var(--azul)); border-radius: 14px 6px 14px 6px; padding: .55rem .7rem; }
.cal-item-texto { display: grid; gap: .1rem; min-width: 0; flex: 1 1 220px; }
.cal-item-texto strong { overflow-wrap: anywhere; }
.cal-item .detalle { font-size: .85rem; color: var(--texto-secundario); overflow-wrap: anywhere; }
.cal-item .cuando { font-weight: 700; color: var(--texto); }
.cal-item-acciones { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.cal-item-acciones form { margin: 0; }
.cal-item-acciones .boton { min-height: 40px; padding: .3rem .9rem; font-size: .88rem; margin: 0; }
.cal-hecho { opacity: .6; }
.cal-hecho .cal-item-texto strong { text-decoration: line-through; }
.alerta-logro { background: color-mix(in srgb, var(--verde-exito) 7%, transparent); }
.alerta-problema { background: color-mix(in srgb, var(--rojo-alerta) 7%, transparent); }
.dia-lista { margin: 1rem 0 .4rem; font-size: 1rem; }
.dia-lista::first-letter, .dia h2 a::first-letter { text-transform: uppercase; }
.acciones-evento { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.acciones-evento form { margin: 0; }
.panel-alertas { border-top: 4px solid var(--dorado); }
.leyenda-fija { margin: .8rem 0; font-size: .9rem; }
@media (max-width: 799px) {
  /* En el celular los botones de agregar ocupan menos, para que el mes se vea primero */
  .agregar-agenda { gap: .35rem; }
  .agregar-agenda .boton { padding: .35rem .8rem; font-size: .85rem; min-height: 40px; }
}
@media (max-width: 799px) {
  .barra-navegacion-calendario { gap: .35rem; }
  .barra-navegacion-calendario > .boton { padding: .3rem .75rem; min-height: 40px; }
  .barra-navegacion-calendario .titulo-mes { flex: 1; margin: 0; font-size: 1rem; }
  .ir-a-mes input { flex: 1; min-height: 40px; }
  .ir-a-mes .boton { min-height: 40px; padding: .3rem .9rem; }
}
/* Enlaces para agendar (Agenda) e invitación desde la ficha */
.enlaces-agendar summary { cursor: pointer; font-weight: 700; color: var(--azul); }
.lista-enlaces { list-style: none; padding: 0; margin: .6rem 0 0; display: grid; gap: .7rem; }
.lista-enlaces label { display: block; font-weight: 700; margin-bottom: .2rem; }
.fila-enlace { display: flex; gap: .4rem; align-items: center; }
.fila-enlace input { flex: 1; min-width: 0; min-height: 44px; border-radius: 12px; border: 1px solid var(--borde); padding: .3rem .7rem; font: inherit; background: var(--fondo-suave); color: var(--texto); }
.fila-enlace .boton { min-height: 44px; padding: .3rem 1rem; margin: 0; }
.invitar-cliente { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .4rem; }
.invitar-cliente .boton { min-height: 44px; }

/* Hoy: de dónde llegan los clientes (barras en azul claro, color de gráficos de la marca) */
.barras-origen { list-style: none; padding: 0; margin: 0 0 .5rem; display: grid; gap: .55rem; }
.barras-origen a { display: grid; grid-template-columns: minmax(0, 8rem) 1fr; gap: .2rem .6rem; align-items: center; text-decoration: none; color: var(--texto); }
.barra-nombre { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra { height: 12px; border-radius: 999px; background: rgba(47, 164, 255, .15); overflow: hidden; }
.barra-relleno { display: block; height: 100%; border-radius: 999px; background: var(--azul-claro); }
.barra-cifras { grid-column: 2; font-size: .82rem; color: var(--texto-secundario); }
.ancho-0 { width: 2%; }
.ancho-5 { width: 5%; }
.ancho-10 { width: 10%; }
.ancho-15 { width: 15%; }
.ancho-20 { width: 20%; }
.ancho-25 { width: 25%; }
.ancho-30 { width: 30%; }
.ancho-35 { width: 35%; }
.ancho-40 { width: 40%; }
.ancho-45 { width: 45%; }
.ancho-50 { width: 50%; }
.ancho-55 { width: 55%; }
.ancho-60 { width: 60%; }
.ancho-65 { width: 65%; }
.ancho-70 { width: 70%; }
.ancho-75 { width: 75%; }
.ancho-80 { width: 80%; }
.ancho-85 { width: 85%; }
.ancho-90 { width: 90%; }
.ancho-95 { width: 95%; }
.ancho-100 { width: 100%; }
.etiqueta-mensaje { font-weight: 600 !important; font-size: .85rem; color: var(--texto-secundario); margin-top: .45rem; }
.fila-mensaje { align-items: flex-start; }
.fila-mensaje textarea { flex: 1; min-width: 0; border-radius: 12px; border: 1px solid var(--borde); padding: .5rem .7rem; font: inherit; font-size: .9rem; background: var(--fondo-suave); color: var(--texto); resize: vertical; }

/* Bóveda de documentos */
.consentimiento-documentos { text-align: left; background: var(--fondo-suave); border-radius: 14px 6px 14px 6px; padding: .9rem 1.1rem; margin: .8rem 0; }
.consentimiento-documentos h2 { font-size: 1.05rem; margin: 0 0 .5rem; }
.consentimiento-documentos ol { margin: 0; padding-left: 1.2rem; display: grid; gap: .45rem; font-size: .92rem; }
.estado-subida { list-style: none; padding: 0; margin: .8rem 0; display: grid; gap: .35rem; text-align: left; }
.estado-subida li { padding: .45rem .7rem; border-radius: 10px; background: var(--fondo-suave); overflow-wrap: anywhere; }
.estado-subida .ok { border-left: 4px solid var(--verde-exito); }
.estado-subida .error { border-left: 4px solid var(--rojo-alerta); }
.pedir-documentos { flex-wrap: wrap; gap: .6rem; align-items: center; }
.borrar-documento { display: inline-block; margin-left: .4rem; }
.borrar-documento summary { cursor: pointer; color: var(--rojo-alerta); font-weight: 600; }
.borrar-documento form { display: grid; gap: .4rem; margin-top: .4rem; }
.lista-enlaces-docs { padding-left: 1.1rem; display: grid; gap: .3rem; }
form.en-linea { display: inline; }

/* Documentos con código personal (bloqueados / abiertos) y visor */
.documentos-bloqueados { padding: 1rem 1.1rem; border-radius: 26px 8px 26px 8px; background: var(--fondo-suave); border-left: 5px solid var(--azul); margin: .8rem 0; }
.codigo-documentos { align-items: end; flex-wrap: wrap; gap: .6rem; }
.codigo-documentos input { max-width: 11rem; font-size: 1.3rem; letter-spacing: .35em; text-align: center; }
.documentos-abiertos { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; justify-content: space-between; margin: .6rem 0; }
.visor-imagen { display: block; max-width: 100%; max-height: 75vh; height: auto; margin: 1rem auto; border-radius: 12px; box-shadow: 0 6px 24px rgba(10, 79, 163, .15); }

/* Documentos enviados al cliente */
.campo-codigo { font-size: 1.5rem; letter-spacing: .4em; text-align: center; max-width: 14rem; }
.lista-mis-documentos { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .6rem; text-align: left; }
.lista-mis-documentos li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; padding: .7rem .9rem; border-radius: 14px 6px 14px 6px; background: var(--fondo-suave); overflow-wrap: anywhere; }
.enviar-documentos { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: .6rem 0; }
.casilla-doc { width: 1.3rem; height: 1.3rem; vertical-align: middle; }

/* Mensajes rápidos de la ficha */
.opciones-rapidas { display: flex; flex-wrap: wrap; gap: .6rem; }
.opcion-rapida { display: grid; gap: .25rem; font-weight: 600; font-size: .9rem; }
.opcion-rapida[hidden], .aviso-promocion[hidden] { display: none; }
.aviso-corchetes[hidden] { display: none; }

/* Horario de citas del sitio web */
.horario-semana { display: grid; gap: .5rem; margin-bottom: .4rem; }
.horario-dia { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.horario-dia .casilla { min-width: 8.5rem; margin: 0; }
.horario-dia select { width: auto; min-width: 7.5rem; }
.horario-duraciones { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 12rem); gap: .5rem 1rem; align-items: center; margin-bottom: 1rem; }
.horario-duraciones label { margin: 0; }
.con-unidad { display: flex; align-items: center; gap: .5rem; }
.con-unidad input { max-width: 6rem; }
.lista-bloqueos { list-style: none; padding: 0; display: grid; gap: .5rem; }
.lista-bloqueos li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; padding: .6rem .9rem; border-radius: 14px 6px 14px 6px; background: var(--fondo-suave); }
.nuevo-bloqueo summary { display: inline-flex; list-style: none; cursor: pointer; margin-top: .6rem; }
.nuevo-bloqueo summary::-webkit-details-marker { display: none; }
@media (max-width: 600px) { .horario-duraciones { grid-template-columns: minmax(0, 1fr); } }

/* Aviso antes de cerrar la sesión por inactividad */
.aviso-sesion { position: fixed; z-index: 50; left: 50%; top: 1rem; transform: translateX(-50%); width: min(92vw, 32rem); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; padding: .9rem 1.1rem; border-radius: 22px 6px 22px 6px; background: var(--azul); color: #fff; box-shadow: 0 12px 30px rgba(10, 79, 163, .35); border: 2px solid var(--dorado); animation: aparecer-aviso .3s ease-out; }
.aviso-sesion[hidden] { display: none; }
.aviso-sesion p { margin: 0; flex: 1 1 14rem; }
@keyframes aparecer-aviso { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .aviso-sesion { animation: none; } }

/* Citas sin confirmar y pantalla Confirmar cita */
.cita-pendiente { border-left: 4px solid var(--dorado); }
.etiqueta-pendiente { display: inline-block; align-self: flex-start; width: fit-content; margin-bottom: .2rem; padding: .1rem .55rem; border-radius: 999px; background: #FFF4CC; color: #142B60; font-size: .78rem; font-weight: 700; }
.etiqueta-confirmada { display: inline-block; padding: .1rem .55rem; border-radius: 999px; background: #E3F5EA; color: #145A32; font-size: .78rem; font-weight: 700; }
.cita-acciones { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.datos-cita { list-style: none; padding: 0; margin: .5rem 0 1rem; display: grid; gap: .35rem; }
.opciones-correo { display: grid; gap: .35rem; margin-bottom: .6rem; }
.opciones-correo .casilla { margin: 0; overflow-wrap: anywhere; }

/* ---------- Botón de modo de color (☀️ claro / 🌙 oscuro / 🌓 automático) ---------- */
:root[data-tema="oscuro"] { color-scheme: dark; }
:root[data-tema="claro"] { color-scheme: light; }
.boton-tema { font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; border-radius: 999px; padding: .35rem .8rem; border: 1px solid rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .12); color: var(--blanco); transition: background .2s, transform .2s; }
.boton-tema:hover { background: rgba(255, 255, 255, .25); transform: translateY(-1px); }
.boton-tema-menu { align-self: flex-start; margin: 1rem 0 .4rem 1rem; }
.boton-tema-publico { position: fixed; top: 1rem; right: 1rem; z-index: 5; }
.barra-movil .boton-tema { margin-left: auto; }
@media (max-width: 799px) { .boton-tema-menu { display: none; } }
@media (min-width: 800px) { .barra-movil .boton-tema { display: none; } }
/* Logo del inicio de sesión: a color en modo claro, blanco en modo oscuro. */
.logo-oscuro { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .logo-claro { display: none; } :root:not([data-tema="claro"]) .logo-oscuro { display: block; } }
:root[data-tema="oscuro"] .logo-claro { display: none; }
:root[data-tema="oscuro"] .logo-oscuro { display: block; }

/* ---------- Pantallas grandes: el contenido usa todo el ancho (en celular no cambia nada) ---------- */
@media (min-width: 1200px) {
  .contenido { max-width: 1680px; width: 100%; }
}
@media (min-width: 1400px) {
  /* Hoy: tres columnas; las alertas, en dos columnas dentro de su panel. */
  .rejilla-hoy { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row dense; }
  .panel-alertas .lista-citas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Ficha del cliente: tres columnas. */
  .rejilla-ficha { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 2300px) {
  .panel-alertas .lista-citas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Mural de "Hoy": frases y noticias oficiales que cambian solas ---------- */
.mural { position: relative; margin: .4rem 0 1.1rem; max-width: 46rem; min-height: 5.6rem; }
.mural-item[hidden] { display: none; }
.mural-item.activo { animation: mural-entrar .7s ease both; }
.mural-etiqueta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: .35rem; padding: .15rem .65rem; border-radius: 999px; background: rgba(255, 255, 255, .14); color: var(--blanco); font-size: .78rem; font-weight: 600; letter-spacing: .02em; }
.mural-destacada { padding: .05rem .5rem; border-radius: 999px; background: var(--dorado); color: var(--azul-oscuro); font-weight: 700; }
.mural-texto { display: block; margin: 0; color: var(--blanco); font-size: 1.08rem; font-weight: 600; line-height: 1.45; text-decoration: none; }
a.mural-texto:hover { text-decoration: underline; text-decoration-color: var(--dorado); }
.mural-texto small { font-weight: 500; opacity: .8; }
.mural-controles { display: flex; align-items: center; gap: .5rem; margin-top: .55rem; }
.mural-boton { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .1); color: var(--blanco); font-size: 1.1rem; line-height: 1; cursor: pointer; transition: background .2s; }
.mural-boton:hover { background: rgba(255, 255, 255, .25); }
.mural-cuenta { font-size: .75rem; color: rgba(255, 255, 255, .75); }
@keyframes mural-entrar { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Secciones plegables de la ficha (Documentos, Consentimientos, Historial) ---------- */
.plegable > summary { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem; list-style: none; cursor: pointer; margin: -.2rem 0; padding-right: 4rem; position: relative; }
.plegable > summary::-webkit-details-marker { display: none; }
.plegable > summary h2 { margin: 0; }
.plegable > summary::after { content: "⌄"; position: absolute; right: 2.2rem; top: 50%; transform: translateY(-60%); font-size: 1.4rem; line-height: 1; color: var(--dorado); transition: transform .25s; }
.plegable[open] > summary::after { transform: translateY(-35%) rotate(180deg); }
.plegable > summary:hover h2 { text-decoration: underline; text-decoration-color: var(--dorado); text-underline-offset: 4px; }
.plegable-resumen { font-size: .85rem; color: var(--texto-secundario); }
.plegable[open] > summary { margin-bottom: .8rem; }
.plegable[open] > :not(summary) { animation: subir .35s ease both; }

/* ---------- Notas privadas: el cuadro no se estira y la casilla se resalta al llegar desde "Escribir nota" ---------- */
.panel-notas { align-self: start; }
.panel-notas .boton { margin-top: .4rem; }
#notas:target { outline: 3px solid var(--dorado); outline-offset: 3px; scroll-margin-top: 6rem; }
.panel.borrar-documento { display: block; margin: 0 0 1rem; }

/* Bandeja: selección de varios (casillas y "Seleccionar todo") */
.lote-barra { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0 0 .8rem; }
.lote-todo { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; cursor: pointer; }
.lote-barra .borrar-documento { margin-left: 0; }
.lote-barra .borrar-documento[open] { display: grid; gap: .4rem; }
.lote input[type="checkbox"] { width: 1.25rem; height: 1.25rem; accent-color: var(--azul); cursor: pointer; }
.col-marca { width: 2.6rem; text-align: center; }
.lote button[disabled] { opacity: .5; cursor: not-allowed; }
@media (max-width: 799px) {
  .lote input[type="checkbox"] { width: 1.6rem; height: 1.6rem; }
  .tabla-adaptable td.col-marca { text-align: left; }
  .tabla-adaptable th.col-marca { display: none; }
}
.lote-barra .borrar-documento { order: 3; } /* va primero en el código para que Enter en "BORRAR" borre, no devuelva */
.lote [data-contador]:not(:empty) { margin-left: .3em; }

/* Ajustes → Copias de seguridad */
.plegable-simple { margin: .6rem 0; }
.plegable-simple summary { cursor: pointer; font-weight: 600; color: var(--azul); }
.plegable-simple[open] summary { margin-bottom: .5rem; }
.boton-enlace { background: none; border: 0; padding: 0; color: var(--pizarra); text-decoration: underline; cursor: pointer; font: inherit; font-size: .9rem; }
:root[data-tema="oscuro"] .plegable-simple summary { color: #8FC8FF; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .plegable-simple summary { color: #8FC8FF; } }

/* =========================================================
   Ficha del cliente: encabezado, servicios y pestañas (2026-10-24)
   ========================================================= */
.cabecera-ficha { position: relative; background: var(--degradado-azul); color: var(--blanco); border-radius: 26px 8px 26px 8px; padding: 1.3rem 1.4rem 1.6rem; display: grid; gap: 1rem; margin-bottom: 1rem; z-index: 5; }
.cabecera-ficha::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--degradado-marca); border-radius: 0 0 26px 8px; }
.cabecera-ficha .quien { display: flex; gap: 1rem; align-items: center; }
.avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--dorado); color: var(--azul-oscuro); display: grid; place-items: center; font-weight: 700; font-size: 1.4rem; flex: none; box-shadow: 0 0 0 4px rgba(255, 255, 255, .25); }
.cabecera-ficha h2 { color: var(--blanco); margin: 0; font-size: 1.45rem; }
.cabecera-ficha .sub { margin: .2rem 0 0; font-size: .88rem; opacity: .92; overflow-wrap: anywhere; }
.cabecera-ficha .chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .55rem; align-items: center; }
.chip-claro { display: inline-flex; align-items: center; gap: .3rem; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .4); color: var(--blanco); border-radius: 999px; padding: .2rem .7rem; font-size: .8rem; font-weight: 600; text-decoration: none; }
a.chip-claro:hover { background: rgba(255, 255, 255, .28); color: var(--blanco); }
.chip-etapa, a.chip-etapa:hover { background: var(--dorado); color: var(--azul-oscuro); border-color: var(--dorado); }
.menu-servicios { position: relative; display: inline-block; }
.chip-servicios { list-style: none; cursor: pointer; background: var(--blanco); color: var(--azul); border-color: var(--blanco); }
.chip-servicios::-webkit-details-marker { display: none; }
.chip-servicios:hover { background: #EAF4FF; } /* derivado: azul muy claro */
.menu-servicios .flecha { display: inline-block; transition: transform .2s; }
.menu-servicios[open] .flecha { transform: rotate(180deg); }
.desplegable { position: absolute; top: calc(100% + .5rem); left: 0; width: min(560px, 86vw); background: var(--panel); color: var(--texto); border: 2px solid var(--azul); border-radius: 22px 6px 22px 6px; box-shadow: 0 18px 40px rgba(10, 79, 163, .28); padding: .8rem .7rem .6rem; z-index: 30; }
@media (max-width: 600px) { .desplegable { left: -110px; } }
.desplegable-titulo { margin: 0 .3rem .5rem; font-weight: 700; color: var(--azul); font-size: .92rem; }
.desplegable-nota { margin: .6rem .3rem 0; font-size: .78rem; color: var(--texto-secundario); }
.lista-servicios { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.lista-servicios a, .servicio-sin { display: grid; grid-template-columns: auto 1fr auto; gap: .7rem; align-items: center; padding: .55rem .75rem; border-radius: 12px; text-decoration: none; color: var(--texto); border: 1px solid var(--borde); }
.lista-servicios a:hover { background: rgba(47, 164, 255, .08); }
.lista-servicios .elegido a { border: 2px solid var(--dorado); background: rgba(245, 180, 0, .1); }
.lista-servicios small { display: block; color: var(--texto-secundario); font-size: .8rem; }
.lista-servicios .sin .servicio-sin { border-style: dashed; }
.lista-servicios .retomar { margin: .2rem 0 0 2.6rem; }
.ico-serv { font-size: 1.3rem; }
.estado-serv { border-radius: 999px; padding: .15rem .6rem; font-size: .75rem; font-weight: 700; white-space: nowrap; border: 1.5px solid transparent; }
.agregar { color: var(--azul); font-weight: 700; font-size: .85rem; white-space: nowrap; }
.graficas { display: flex; gap: 1.2rem; align-items: flex-end; }
.grafica { margin: 0; text-align: center; font-size: .72rem; }
.grafica figcaption { margin-top: .35rem; opacity: .95; }
.barras { display: flex; align-items: flex-end; gap: 5px; height: 64px; padding: 0 .3rem; border-bottom: 2px solid rgba(255, 255, 255, .5); }
.barras span { width: 14px; border-radius: 4px 4px 0 0; background: var(--azul-claro); }
.barras span.hoy { background: var(--dorado); }
.barras .alto-10 { height: 10%; }
.barras .alto-20 { height: 20%; }
.barras .alto-30 { height: 30%; }
.barras .alto-40 { height: 40%; }
.barras .alto-50 { height: 50%; }
.barras .alto-60 { height: 60%; }
.barras .alto-70 { height: 70%; }
.barras .alto-80 { height: 80%; }
.barras .alto-90 { height: 90%; }
.barras .alto-100 { height: 100%; }
.dona { width: 70px; height: 70px; border-radius: 50%; background: conic-gradient(var(--dorado) var(--avance, 0%), rgba(255, 255, 255, .22) 0); display: grid; place-items: center; margin: 0 auto; }
.dona span { width: 48px; height: 48px; border-radius: 50%; background: #0D57AE; display: grid; place-items: center; font-weight: 700; font-size: .85rem; } /* derivado: tono del degradado azul */
.dona.avance-0 { --avance: 0%; }
.dona.avance-5 { --avance: 5%; }
.dona.avance-10 { --avance: 10%; }
.dona.avance-15 { --avance: 15%; }
.dona.avance-20 { --avance: 20%; }
.dona.avance-25 { --avance: 25%; }
.dona.avance-30 { --avance: 30%; }
.dona.avance-35 { --avance: 35%; }
.dona.avance-40 { --avance: 40%; }
.dona.avance-45 { --avance: 45%; }
.dona.avance-50 { --avance: 50%; }
.dona.avance-55 { --avance: 55%; }
.dona.avance-60 { --avance: 60%; }
.dona.avance-65 { --avance: 65%; }
.dona.avance-70 { --avance: 70%; }
.dona.avance-75 { --avance: 75%; }
.dona.avance-80 { --avance: 80%; }
.dona.avance-85 { --avance: 85%; }
.dona.avance-90 { --avance: 90%; }
.dona.avance-95 { --avance: 95%; }
.dona.avance-100 { --avance: 100%; }
.acciones-rapidas { display: flex; flex-wrap: wrap; gap: .5rem; }
.acciones-rapidas a { display: inline-flex; align-items: center; gap: .35rem; background: rgba(255, 255, 255, .14); border: 1.5px solid rgba(255, 255, 255, .45); color: var(--blanco); text-decoration: none; padding: .5rem .95rem; border-radius: 999px; font-weight: 600; font-size: .88rem; }
.acciones-rapidas a:hover { background: rgba(255, 255, 255, .26); }
.acciones-rapidas a.principal { background: var(--dorado); color: var(--azul-oscuro); border-color: var(--dorado); }
@media (min-width: 1000px) { .cabecera-ficha { grid-template-columns: 1fr auto; align-items: center; } .cabecera-ficha .acciones-rapidas { grid-column: 1 / -1; } }
.resumen-ficha strong { font-size: 1.6rem; }
.contenido, .ficha-pestanas { min-width: 0; max-width: 100%; }
/* Las pestañas usan el estilo de siempre (.pestanas); en el celular se deslizan de lado. */
.barra-pestanas { flex-wrap: nowrap; overflow-x: auto; padding: .2rem .1rem .7rem; scrollbar-width: thin; }
@media (min-width: 1000px) { .barra-pestanas { flex-wrap: wrap; overflow: visible; } }
.barra-pestanas a { flex: none; white-space: nowrap; font-size: .9rem; }
.barra-pestanas a small { background: rgba(47, 164, 255, .16); color: var(--azul); border-radius: 999px; padding: 0 .45rem; margin-left: .25rem; font-size: .75rem; }
.barra-pestanas a.futuro { border-style: dashed; color: var(--texto-secundario); }
.barra-pestanas a.activo small { background: rgba(20, 43, 96, .15); color: var(--azul-oscuro); }
.con-pestanas .pestana-panel { display: none; }
.con-pestanas .pestana-panel.activa { display: block; }
.con-pestanas .pestana-panel.rejilla-ficha.activa { display: grid; }
.pestana-panel { margin-bottom: 1rem; }
.oportunidad { display: block; border: 1px solid var(--borde); border-radius: 22px 6px 22px 6px; padding: .9rem 1rem; margin-bottom: .7rem; color: var(--texto); text-decoration: none; }
.oportunidad:hover { border-color: var(--azul-claro); }
.oportunidad-cabeza { display: flex; justify-content: space-between; gap: .5rem; }
.oportunidad .valor { font-weight: 700; color: var(--azul); }
.camino { display: flex; gap: 4px; margin: .6rem 0 .4rem; }
.camino span { flex: 1; height: 8px; border-radius: 99px; background: rgba(10, 79, 163, .12); }
.camino span.hecho { background: var(--azul-claro); }
.camino span.actual { background: var(--dorado); }
.camino-nombres { display: flex; justify-content: space-between; font-size: .7rem; color: var(--texto-secundario); gap: 2px; }
@media (max-width: 600px) { .camino-nombres { display: none; } }
.vista-servicio { border-top: 6px solid var(--dorado); }
.vista-servicio-cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem; align-items: flex-start; }
.vista-servicio h2 { margin: 0; }
.vista-servicio h3 { margin: 1rem 0 .5rem; font-size: 1rem; color: var(--azul); }
.rejilla-servicio { margin-top: .5rem; }
.linea-tiempo { list-style: none; padding: 0; margin: 0; border-left: 3px solid var(--azul-claro); }
.linea-tiempo li { position: relative; padding: 0 0 .9rem 1rem; overflow-wrap: anywhere; }
.linea-tiempo li::before { content: ""; position: absolute; left: -8px; top: .25rem; width: 13px; height: 13px; border-radius: 50%; background: var(--panel); border: 3px solid var(--azul); }
.linea-tiempo time { display: block; font-size: .78rem; color: var(--texto-secundario); }
.linea-tiempo small { color: var(--texto-secundario); }
.proximamente { text-align: center; padding: 1.6rem 1rem; border: 2px dashed var(--borde); border-radius: 22px 6px 22px 6px; color: var(--texto-secundario); }
.proximamente strong { display: block; color: var(--azul); font-size: 1.05rem; margin-bottom: .3rem; }
/* Ficha, paso 2: llamadas y libreta de notas */
.nota-llamada, .texto-nota { display: block; white-space: pre-wrap; margin: .25rem 0; }
.nota-llamada { color: var(--texto-secundario); font-style: italic; }

/* =========================================================
   Firma electrónica: editor, página del firmante y avisos (2026-10-24)
   ========================================================= */
.color-0 { --color-firmante: #F5B400; }
.color-1 { --color-firmante: #2FA4FF; }
.color-2 { --color-firmante: #0A4FA3; }
.color-3 { --color-firmante: #1E7A46; } /* funcional: verde de confirmación */
.color-4 { --color-firmante: #B42318; } /* funcional: rojo de alerta */
.color-5 { --color-firmante: #5F7691; }
.lista-firmantes { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .45rem; }
.lista-firmantes li { display: grid; grid-template-columns: auto 1fr auto; gap: .7rem; align-items: center; padding: .55rem .75rem; border: 1px solid var(--borde); border-radius: 12px; }
.lista-firmantes small { display: block; color: var(--texto-secundario); }
.punto-firmante { width: 14px; height: 14px; border-radius: 50%; background: var(--color-firmante); }
.barra-editor { position: sticky; top: 0; z-index: 4; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .6rem; margin-bottom: .8rem; background: var(--panel); border: 1px solid var(--borde); border-radius: 14px; box-shadow: var(--sombra); }
.grupo-editor { display: flex; flex-wrap: wrap; gap: .3rem; }
.chip-editor { display: inline-flex; align-items: center; gap: .3rem; padding: .35rem .7rem; border-radius: 999px; border: 2px solid var(--color-firmante, var(--borde)); font-weight: 600; font-size: .85rem; cursor: pointer; }
.chip-editor input { accent-color: var(--azul); }
.editor-pdf, .documento-firmar { display: grid; justify-items: center; gap: .3rem; }
.rotulo-pagina { font-size: .78rem; color: var(--texto-secundario); margin-top: .6rem; }
.pagina-pdf { position: relative; max-width: 100%; box-shadow: 0 6px 22px rgba(10, 79, 163, .18); background: #fff; }
.pagina-pdf canvas { display: block; max-width: 100%; height: auto; }
.capa-campos { position: absolute; inset: 0; cursor: crosshair; }
.documento-firmar .capa-campos { cursor: default; }
.campo-firma { position: absolute; border: 2px dashed var(--color-firmante); background: color-mix(in srgb, var(--color-firmante) 18%, transparent); border-radius: 6px; cursor: move; display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 700; color: var(--azul-oscuro); touch-action: none; overflow: hidden; }
.campo-firma span { pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 1.2rem 0 .3rem; }
.quitar-campo { position: absolute; top: 0; right: 0; width: 1.3rem; height: 1.3rem; border: 0; border-radius: 0 4px 0 6px; background: var(--azul-oscuro); color: #fff; font-weight: 700; cursor: pointer; line-height: 1; }
.campo-firmar { position: absolute; border: 2px solid #F5B400; background: rgba(245, 180, 0, .28); border-radius: 6px; color: #142B60; font-weight: 700; font-size: .72rem; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; }
button.campo-firmar { cursor: pointer; animation: latido-firma 1.6s ease-in-out infinite; font-family: inherit; }
button.campo-firmar::before { content: "👉 "; }
.campo-firmar.firmado { animation: none; background: transparent; border-style: dashed; }
.campo-firmar.firmado::before { content: ""; }
.campo-firmar img { max-width: 100%; max-height: 100%; }
.campo-firmar.tipo-fecha, .campo-firmar.tipo-nombre { border-style: dashed; background: rgba(245, 180, 0, .12); font-weight: 600; }
@keyframes latido-firma { 0%, 100% { box-shadow: 0 0 0 0 rgba(245, 180, 0, .6); } 50% { box-shadow: 0 0 0 8px rgba(245, 180, 0, 0); } }
@media (prefers-reduced-motion: reduce) { button.campo-firmar { animation: none; } }
.resaltado-firma { background: rgba(245, 180, 0, .35); padding: 0 .3rem; border-radius: 4px; }
.barra-firmante { position: sticky; top: 0; z-index: 4; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; padding: .55rem .7rem; margin: .6rem 0; background: var(--panel); border: 2px solid var(--dorado); border-radius: 14px; font-weight: 600; }
.panel-firma { margin-top: 1rem; padding: 1rem; border: 2px solid var(--azul); border-radius: 22px 6px 22px 6px; background: var(--panel); }
.panel-firma .pestanas { margin-bottom: .6rem; }
.panel-firma .boton.activo { background: var(--dorado); color: var(--azul-oscuro); border-color: var(--dorado); }
#lienzo-firma { width: 100%; height: auto; aspect-ratio: 700 / 220; border: 2px dashed var(--borde); border-radius: 12px; background: #fff; touch-action: none; display: block; }
.tarjeta-publica:has(.firma-publica) { max-width: 940px; }
.tarjeta-enlace-firma { border: 1px solid var(--borde); border-radius: 22px 6px 22px 6px; padding: 1rem; margin-bottom: .8rem; }
.tarjeta-enlace-firma h3 { margin-top: 0; }
.codigo-grande { font-size: 2rem; font-weight: 700; letter-spacing: .3em; color: var(--azul); margin: .3rem 0 .6rem; }
.campo-copiar { width: 100%; font-size: .85rem; }
.huella { font-size: .72rem; overflow-wrap: anywhere; }
.boton-enviar { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; background: var(--blanco); color: var(--azul); border: 1.5px solid var(--blanco); padding: .5rem .95rem; border-radius: 999px; font-weight: 700; font-size: .88rem; }
.boton-enviar::-webkit-details-marker { display: none; }
.menu-enviar[open] .flecha { transform: rotate(180deg); }
.menu-enviar .lista-servicios a { grid-template-columns: auto 1fr; }
.acciones-rapidas .desplegable a { display: grid; background: transparent; color: var(--texto); border: 1px solid var(--borde); border-radius: 12px; padding: .55rem .75rem; font-weight: 400; font-size: .92rem; }
.acciones-rapidas .desplegable a:hover { background: rgba(47, 164, 255, .08); }
.campo-firmar { white-space: nowrap; font-size: clamp(.55rem, 2.4vw, .78rem); line-height: 1; }
.campo-copiar { display: block; padding: .6rem .8rem; border: 1.5px solid var(--borde); border-radius: 12px; background: var(--panel); color: var(--texto); font: inherit; font-size: .85rem; margin: .3rem 0 .7rem; }
.detalle-tecnico { font-size: .68rem; opacity: .75; overflow-wrap: anywhere; margin-top: .8rem; }
/* Firma: vista previa antes de enviar (se ve como quedará el PDF, sin marcas) */
.campo-firmar.firmado { border-color: transparent; background: transparent; box-shadow: none; }
.campo-firmar .texto-puesto { color: #142B60; font-family: Arial, Helvetica, sans-serif; font-weight: 400; font-size: clamp(.55rem, 2.6vw, .9rem); white-space: nowrap; }
.confirmar-firma { position: sticky; bottom: .5rem; z-index: 5; margin-top: 1rem; padding: 1rem; background: var(--panel); border: 2px solid var(--dorado); border-radius: 22px 6px 22px 6px; box-shadow: 0 -6px 24px rgba(10, 79, 163, .2); }
.confirmar-firma p { margin: 0 0 .6rem; }
.vista-firma-plan-b { margin: .4rem 0 .8rem; padding: .6rem; border: 1px dashed var(--borde); border-radius: 12px; background: #fff; color: #142B60; }
.vista-firma-plan-b img { max-width: 100%; max-height: 90px; display: block; }
@media (max-width: 600px) { .confirmar-firma { position: static; } }
/* Pie para el cliente: contacto y redes (mismos iconos y forma que el sitio web) */
.pie-cliente { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--borde); text-align: center; }
.pie-cliente a { color: var(--enlace); font-weight: 600; }
.redes-cliente { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: .7rem; }
.redes-cliente .so { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50% 50% 50% 10px; background: var(--azul); color: var(--blanco); border: 2px solid var(--azul); transition: transform .3s, background .3s, color .3s; animation: flotar-red 4s ease-in-out infinite; }
.redes-cliente .so:nth-child(2n) { animation-delay: -2s; }
.redes-cliente .so:hover, .redes-cliente .so:focus-visible { background: var(--dorado); color: var(--azul-oscuro); border-color: var(--dorado); transform: translateY(-5px) rotate(-6deg); }
@keyframes flotar-red { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .redes-cliente .so { animation: none; transition: none; } }
/* Pie para el cliente, versión 2: contacto con su icono delante y redes destacadas (pedido del dueño) */
.pie-cliente .pie-titulo { margin: .9rem 0 .45rem; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--azul-claro); }
.contacto-cliente { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.contacto-cliente a { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .85rem .3rem .3rem; border: 2px solid var(--dorado); border-radius: 999px; background: var(--panel); color: var(--azul); font-weight: 700; font-size: .84rem; text-decoration: none; box-shadow: 0 4px 14px rgba(245, 180, 0, .22); transition: transform .25s, background .25s; overflow-wrap: anywhere; }
.contacto-cliente a:hover, .contacto-cliente a:focus-visible { background: var(--dorado); color: var(--azul-oscuro); transform: translateY(-2px); }
.icono-flotante { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50% 50% 50% 10px; background: var(--azul); color: var(--blanco); animation: flotar-red 3.5s ease-in-out infinite; }
.icono-flotante svg { width: 18px; height: 18px; }
.contacto-cliente li:nth-child(2) .icono-flotante { animation-delay: -1.2s; }
.contacto-cliente li:nth-child(3) .icono-flotante { animation-delay: -2.4s; }
.redes-cliente { gap: .8rem; margin-top: .2rem; }
.redes-cliente .so { width: 50px; height: 50px; border: 3px solid var(--dorado); box-shadow: 0 0 0 4px rgba(245, 180, 0, .18), 0 8px 18px rgba(10, 79, 163, .25); }
.redes-cliente .so svg { width: 24px; height: 24px; }
.redes-cliente .so:hover, .redes-cliente .so:focus-visible { box-shadow: 0 0 0 6px rgba(245, 180, 0, .3), 0 10px 22px rgba(10, 79, 163, .3); }
@media (prefers-reduced-motion: reduce) { .icono-flotante { animation: none; } }

/* ===== Precios, calculadora y presupuestos (2026-11-01) ===== */
.lista-reglas-precios { margin: .6rem 0 0; padding-left: 1.2rem; }
.lista-reglas-precios li { margin-bottom: .3rem; }
.pestanas-precios { margin: 0 0 1rem; }
.tabla-precios td:nth-child(4) { white-space: nowrap; }

.calculadora { display: block; }
.calculadora .panel { margin-bottom: 1rem; }
.hoja-cliente .formulario-en-linea { margin: 0; }
.hoja-cliente .formulario-en-linea label { margin: 0; }
.hoja-cliente .formulario-en-linea select { flex: 1 1 14rem; }
.hoja-cliente .mensaje { margin: .8rem 0 0; }

/* Hoja de cálculo: como la tabla de Excel del dueño. */
.hoja-calculo table { font-size: .9rem; }
.hoja-calculo th.num, .hoja-calculo td.num { text-align: right; white-space: nowrap; }
.hoja-calculo .col-marca { width: 2.2rem; text-align: center; }
.hoja-calculo .col-marca input { width: 22px; height: 22px; min-height: 0; accent-color: var(--azul); }
.hoja-calculo .fila-grupo th { background: rgba(10, 79, 163, .10); color: var(--azul); text-align: left; padding: .45rem .6rem; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; border-bottom: 2px solid var(--dorado); }
.hoja-calculo .fila-hoja { transition: background .2s; }
.hoja-calculo .fila-hoja.marcada { background: rgba(245, 180, 0, .14); }
.hoja-calculo td input[type="number"] { width: 4.2rem; min-height: 38px; text-align: center; padding: .25rem; }
.hoja-calculo td input[inputmode="decimal"] { width: 6.5rem; min-height: 38px; text-align: right; padding: .25rem .4rem; }
.hoja-calculo .fila-extra td input[maxlength] { width: 100%; min-height: 38px; }
.hoja-calculo small { color: var(--texto-secundario); }
@media (max-width: 799px) {
  .hoja-calculo .fila-grupo { display: block; border: 0; background: none; padding: 0; margin: 1rem 0 .4rem; }
  .hoja-calculo .fila-grupo th { display: block; border-radius: 8px; }
  .hoja-calculo td.num { text-align: left; }
  .hoja-calculo .col-marca { width: auto; text-align: left; }
}

.hoja-resumen-columnas { display: grid; gap: 1.2rem; }
@media (min-width: 900px) { .hoja-resumen-columnas { grid-template-columns: 1fr 1fr; align-items: start; } }
.hoja-resumen .formulario { margin: 0; }
.hoja-resumen textarea { width: 100%; min-height: 4.5rem; }
.totales { margin: 0 0 1rem; }
.totales div { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; border-bottom: 1px dashed var(--borde); }
.totales dt { color: var(--texto-secundario); }
.totales dd { margin: 0; font-weight: 700; text-align: right; }
.totales dt { flex: 1 1 auto; min-width: 0; }
.totales dd { flex: 0 1 auto; }
.totales .ahorro dd { color: var(--verde-exito); }
.totales .total-final { border-bottom: 0; border-top: 2px solid var(--dorado); margin-top: .3rem; padding-top: .6rem; font-size: 1.25rem; }
.totales .total-final dt { color: var(--texto); font-weight: 700; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .totales .ahorro dd { color: #7BE0A4; } }
:root[data-tema="oscuro"] .totales .ahorro dd { color: #7BE0A4; }

/* ===== Presupuesto y factura con la marca BLANCOPLUS (doc-bp, 2026-11-01) =====
   Siempre en fondo blanco (también en modo oscuro), así se ve igual en el CRM, en el enlace del cliente y al imprimir. */
.doc-bp { --doc-texto: #142B60; --doc-suave: #5F7691; --doc-linea: rgba(10, 79, 163, .16);
  position: relative; background: #FFFFFF; color: var(--doc-texto); max-width: 880px; margin: 0 auto 1.2rem;
  border-radius: 26px 8px 26px 8px; overflow: hidden; box-shadow: 0 12px 40px rgba(10, 79, 163, .18); }
.doc-bp-banda { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.4rem 1.8rem; background: linear-gradient(120deg, #0A4FA3 0%, #0A4FA3 45%, #2FA4FF 100%); color: #FFFFFF; }
.doc-bp-logo { width: 190px; height: auto; display: block; }
.doc-bp-titulo { text-align: right; }
.doc-bp-titulo p { margin: 0; }
.doc-bp-tipo { font-size: 2rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.1; }
.doc-bp-numero { font-size: 1.15rem; font-weight: 700; color: #F5B400; letter-spacing: .04em; }
.doc-bp-area { display: inline-block; margin-top: .4rem !important; padding: .15rem .7rem; border-radius: 999px; background: rgba(255, 255, 255, .16); font-size: .82rem; font-weight: 600; }
.doc-bp-franja { height: 6px; background: linear-gradient(90deg, #0A4FA3 0%, #2FA4FF 50%, #F5B400 100%); }
.doc-bp .sello-anulada { position: absolute; top: 9rem; right: 2rem; z-index: 1; background: rgba(255, 255, 255, .85); }
.doc-bp .ceja { color: #2FA4FF; margin: 0 0 .3rem; }
.doc-bp-info { display: grid; gap: .8rem; padding: 1.4rem 1.8rem .4rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.doc-bp-caja { display: flex; flex-direction: column; gap: .1rem; padding: .9rem 1rem; border-radius: 18px 6px 18px 6px; background: #F4F8FD; border-left: 4px solid #F5B400; font-size: .9rem; min-width: 0; }
.doc-bp-caja > span { overflow-wrap: anywhere; }
.doc-bp-caja strong { color: #0A4FA3; font-size: 1rem; }
.doc-bp-datos { margin: 0; display: grid; gap: .15rem; }
.doc-bp-datos div { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; }
.doc-bp-datos dt { white-space: nowrap; }
.doc-bp-datos dt { color: var(--doc-suave); }
.doc-bp-datos dd { margin: 0; font-weight: 600; text-align: right; font-size: .85rem; }
.doc-bp-tabla { padding: 1rem 1.8rem 0; }
.doc-bp-tabla table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .92rem; }
.doc-bp-tabla th { background: #0A4FA3; color: #FFFFFF; border: 0; padding: .6rem .7rem; text-align: left; }
.doc-bp-tabla th:first-child { border-radius: 12px 0 0 0; }
.doc-bp-tabla th:last-child { border-radius: 0 4px 0 0; }
.doc-bp-tabla .num { text-align: right; white-space: nowrap; }
.doc-bp-tabla td { color: var(--doc-texto); border-bottom: 1px solid var(--doc-linea); padding: .6rem .7rem; }
.doc-bp-tabla tbody tr:nth-child(even) td { background: #F7FAFE; }
.doc-bp-tabla small { color: var(--doc-suave); }
.doc-bp-cierre { display: grid; gap: 1.2rem; padding: 1.2rem 1.8rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .doc-bp-cierre { grid-template-columns: 1fr 320px; align-items: start; } }
.doc-bp-pago { font-size: .9rem; }
.doc-bp-pago p { margin: 0 0 .5rem; }
.doc-bp-metodo { font-size: 1.05rem; }
.doc-bp-precios-doble { padding: .6rem .8rem; border-radius: 10px; background: rgba(245, 180, 0, .12); border: 1px dashed #F5B400; }
.doc-bp-totales { margin: 0; padding: .8rem 1rem; border-radius: 18px 6px 18px 6px; background: #F4F8FD; }
.doc-bp-totales div { border-bottom: 1px dashed var(--doc-linea); }
.doc-bp-totales dt { color: var(--doc-suave); }
.doc-bp-totales dd { color: var(--doc-texto); }
.doc-bp-totales .doc-bp-total { margin: .6rem -1rem -.8rem; padding: .8rem 1rem; border: 0; border-radius: 0 0 18px 6px; background: #F5B400; font-size: 1.25rem; }
.doc-bp-totales .doc-bp-total dt, .doc-bp-totales .doc-bp-total dd { color: #142B60; font-weight: 700; }
.doc-bp-gracias { display: flex; align-items: center; gap: 1rem; margin: 0 1.8rem; padding: 1rem 1.2rem; border-radius: 18px 6px 18px 6px; background: linear-gradient(120deg, rgba(10, 79, 163, .07), rgba(47, 164, 255, .10)); }
.doc-bp-gracias img { width: 46px; height: auto; flex: none; }
.doc-bp-gracias p { margin: 0; font-size: .9rem; }
.doc-bp-gracias-titulo { color: #0A4FA3; font-weight: 700; font-size: 1.05rem !important; margin-bottom: .2rem !important; }
.doc-bp-legal { padding: 1rem 1.8rem .6rem; font-size: .78rem; color: var(--doc-suave); }
.doc-bp-legal p { margin: 0 0 .4rem; }
.doc-bp-legal strong { color: var(--doc-texto); }
.doc-bp-pie { padding: .7rem 1.8rem; background: #0A4FA3; color: #FFFFFF; font-size: .8rem; font-weight: 600; text-align: center; letter-spacing: .03em; }
.doc-bp .etiqueta.etiqueta-aviso { color: #0A4FA3; background: rgba(47, 164, 255, .14); border-color: #2FA4FF; }
.doc-bp .etiqueta.etiqueta-confirmada { color: var(--verde-exito); }
@media (max-width: 799px) {
  .doc-bp-tabla tr { background: #FFFFFF; border-color: var(--doc-linea); }
  .doc-bp-tabla td { color: var(--doc-texto); border: 0; padding: .25rem .4rem; text-align: left; }
  .doc-bp-tabla td::before { color: var(--doc-suave); }
  .doc-bp-tabla tbody tr:nth-child(even) td { background: none; }
}
@media (max-width: 600px) {
  .doc-bp-banda { padding: 1.1rem 1rem; }
  .doc-bp-logo { width: 150px; }
  .doc-bp-tipo { font-size: 1.5rem; }
  .doc-bp-info, .doc-bp-tabla, .doc-bp-cierre, .doc-bp-legal { padding-left: 1rem; padding-right: 1rem; }
  .doc-bp-gracias { margin: 0 1rem; }
}
.sello-anulada { display: inline-block; margin: .3rem 0 0; padding: .2rem .8rem; border: 3px solid var(--rojo-alerta); color: var(--rojo-alerta); font-weight: 700; letter-spacing: .2em; border-radius: 6px; transform: rotate(-4deg); }

/* El presupuesto o la factura en línea para el cliente. */
body.publico-documento { background: #EEF4FC; min-height: 100vh; margin: 0; }
.publico-documento-contenido { max-width: 920px; margin: 0 auto; padding: 1.2rem 16px 2rem; }
.publico-documento-contenido .barra-acciones { justify-content: flex-end; }
.emitir-factura .formulario { max-width: 420px; }

@media print {
  @page { size: letter; margin: 10mm; }
  .navegacion, .barra-movil, .no-imprimir, .contenido > .ceja, .contenido > h1, .aviso-sesion { display: none !important; }
  body, body.app, .contenido, body.publico-documento { background: #FFFFFF !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important; }
  .publico-documento-contenido { padding: 0; max-width: none; }
  .doc-bp { box-shadow: none; max-width: none; margin: 0; border-radius: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .doc-bp * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .doc-bp-tabla thead { display: table-header-group; }
  .doc-bp-tabla tr { display: table-row; border: 0; padding: 0; margin: 0; }
  .doc-bp-tabla td { display: table-cell; }
  .doc-bp-tabla td::before { content: none; }
  .doc-bp-tabla tr, .doc-bp-cierre, .doc-bp-gracias { break-inside: avoid; }
  .doc-bp-cierre { grid-template-columns: 1fr 260px; }
  /* Una sola hoja carta: letra más pequeña y espacios más cortos. */
  .doc-bp { font-size: 11px; }
  .doc-bp-banda { padding: 14px 22px; }
  .doc-bp-logo { width: 150px; }
  .doc-bp-tipo { font-size: 24px; }
  .doc-bp-info { padding: 14px 22px 4px; gap: 10px; grid-template-columns: repeat(3, 1fr); }
  .doc-bp-caja { font-size: 10.5px; padding: 8px 10px; }
  .doc-bp-caja strong { font-size: 11.5px; }
  .doc-bp-datos dd { font-size: 10px; }
  .doc-bp-tabla { padding: 10px 22px 0; }
  .doc-bp-tabla table { font-size: 10.5px; border-collapse: collapse; }
  .doc-bp-tabla th, .doc-bp-tabla td { padding: 5px 7px; }
  .doc-bp-tabla th:first-child, .doc-bp-tabla th:last-child { border-radius: 0; }
  .doc-bp-cierre { padding: 10px 22px; gap: 14px; }
  .doc-bp-totales .doc-bp-total { font-size: 15px; }
  .doc-bp-gracias { margin: 0 22px; padding: 8px 12px; }
  .doc-bp-gracias img { width: 34px; }
  .doc-bp-legal { padding: 8px 22px 4px; font-size: 9px; }
  .doc-bp-pie { padding: 7px 22px; font-size: 9.5px; }
  .doc-bp .ceja { font-size: 8.5px; }
  .doc-bp-area { font-size: 9px; }
  .doc-bp .etiqueta { font-size: 9px; padding: 1px 6px; }
  .doc-bp-pago, .doc-bp-gracias p { font-size: 10.5px; }
  .doc-bp-pago p { margin-bottom: 5px; }
  .doc-bp-metodo { font-size: 12px; }
  .doc-bp-precios-doble { padding: 5px 8px; }
  .doc-bp-totales { padding: 6px 10px; font-size: 10.5px; }
  .doc-bp-totales .doc-bp-total { margin: 6px -10px -6px; padding: 8px 10px; }
  .doc-bp-gracias-titulo { font-size: 12.5px !important; }
}

/* El QR de Zelle en Precios → Datos de la empresa (lo usará la plataforma de pago). */
.doc-bp-logo-impreso { display: none !important; }
.qr-zelle-ajuste { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; margin-top: 1rem; }
.qr-zelle-ajuste img { width: 120px; height: 120px; border-radius: 8px; background: #FFFFFF; padding: 4px; image-rendering: pixelated; }
.qr-zelle-ajuste .formulario { flex: 1 1 260px; margin: 0; }

/* Al imprimir: los mismos colores de la marca, pero sin fondos grandes (gasta poca tinta).
   La versión con fondos se queda para verla en línea y enviarla. */
@media print {
  .doc-bp-logo-pantalla { display: none !important; }
  .doc-bp-logo-impreso { display: block !important; }
  .doc-bp-banda { background: none !important; color: #0A4FA3; padding: 6px 0 10px; border-bottom: 0; }
  .doc-bp-tipo { color: #0A4FA3; }
  .doc-bp-numero { color: #142B60; border-bottom: 3px solid #F5B400; display: inline-block; }
  .doc-bp-area { background: none; border: 1px solid #2FA4FF; color: #0A4FA3; }
  .doc-bp-franja { height: 3px; }
  .doc-bp-info { padding-left: 0; padding-right: 0; }
  .doc-bp-caja { background: none; border: 1px solid rgba(10, 79, 163, .25); border-left: 3px solid #F5B400; }
  .doc-bp-tabla { padding-left: 0; padding-right: 0; }
  .doc-bp-tabla th { background: none !important; color: #0A4FA3; border-bottom: 2px solid #0A4FA3; }
  .doc-bp-tabla tbody tr:nth-child(even) td { background: none; }
  .doc-bp-cierre, .doc-bp-legal { padding-left: 0; padding-right: 0; }
  .doc-bp-precios-doble { background: none; }
  .doc-bp-totales { background: none; border: 1px solid rgba(10, 79, 163, .25); }
  .doc-bp-totales .doc-bp-total { background: none; border-top: 3px solid #F5B400; border-radius: 0; margin: 6px -10px -6px; }
  .doc-bp-totales .doc-bp-total dt, .doc-bp-totales .doc-bp-total dd { color: #0A4FA3; }
  .doc-bp-gracias { background: none; border: 1px dashed rgba(10, 79, 163, .3); margin: 0; }
  .doc-bp-pie { background: none; color: #0A4FA3; border-top: 2px solid #0A4FA3; padding: 6px 0 0; }
}

/* Cobros: pagos del presupuesto, página de pago del cliente y Hoy (2026-11-01). */
.cobro-resumen { max-width: 360px; }
.aviso-pago p { margin: 0 0 .5rem; }
.aviso-pago .barra-acciones { margin: 0; }
tr.fila-vencida td { background: rgba(180, 35, 24, .07); }
.lista-cobros { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.lista-cobros a { display: block; padding: .55rem .7rem; border-radius: 10px; border: 1px solid var(--borde); text-decoration: none; color: var(--texto); }
.lista-cobros .cobro-vencido a { border-color: var(--rojo-alerta); }
.lista-cobros .cobro-aviso a { border: 2px solid var(--dorado); }
.pagar-cuerpo { padding: 1.4rem 1.8rem; }
.pagar-saludo { font-size: 1.1rem; margin-top: 0; }
.pagar-proximo { text-align: center; padding: 1rem; border-radius: 18px 6px 18px 6px; border: 2px solid #F5B400; margin-bottom: 1.2rem; }
.pagar-proximo p { margin: .2rem 0; }
.pagar-monto { font-size: 2.2rem; font-weight: 700; color: #0A4FA3; }
.pagar-forma { padding: 1rem 1.1rem; border-radius: 18px 6px 18px 6px; background: #F4F8FD; margin-bottom: 1rem; }
.pagar-forma h2 { margin: 0 0 .6rem; color: #0A4FA3; font-size: 1.1rem; }
.pagar-forma p { margin: 0 0 .4rem; }
.pagar-zelle { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.pagar-zelle img { width: 180px; height: 180px; background: #FFFFFF; padding: 6px; border-radius: 10px; image-rendering: pixelated; }
.pagar-zelle > div { flex: 1 1 220px; }
.pagar-aviso { margin: .8rem 0 0; }
.pagar-pronto { opacity: .75; }
.pagar-titulo-tabla { color: #0A4FA3; font-size: 1.1rem; margin: 1.2rem 0 .5rem; }
.pagar-tabla { padding: 0; }
.pagar-saldo { max-width: 320px; margin: 1rem 0 0 auto; }
@media (max-width: 600px) { .pagar-cuerpo { padding: 1rem; } .pagar-zelle img { width: 160px; height: 160px; } }

/* Enlaces para copiar (presupuesto, pago, factura, recibo): el campo ocupa todo el ancho junto a "Copiar". */
div.campo-copiar { display: flex; gap: .6rem; align-items: center; }
div.campo-copiar input { flex: 1 1 auto; min-width: 0; padding: .45rem .6rem; border: 1px solid var(--borde); border-radius: 8px; background: transparent; color: var(--texto); font: inherit; font-size: .85rem; }
div.campo-copiar .boton { margin: 0; flex: none; }
/* En el celular las tablas del documento son tarjetas: los montos van alineados como el resto. */
@media (max-width: 799px) { .doc-bp-tabla td.num { text-align: left; } }