/* Complementos que Tailwind (CDN) no cubre de forma directa. */
/* Paleta del CRM: todos los colores de los estilos salen de aquí (los mismos de tailwind.config.js).
   Para cambiar un color, se cambia solo en esta lista. */
:root {
  --tinta: #15302A; --musgo: #55685F;
  --linea: #D5DED9; --linea-fuerte: #B9C7C0; --linea-suave: #E7ECE9;
  --fondo: #F3F6F4; --fondo-suave: #FAFCFB; --columna: #E9EFEB;
  --verde: #1D7A5B; --verde-claro: #E2F1EA; --verde-medio: #D3EBDF; --verde-oscuro: #14563F; --verde-brillo: #9FE0C4;
  --ambar: #9A6212; --ambar-claro: #FBF0DC;
  --rojo: #B3261E; --rojo-claro: #FBE4E1; --rojo-oscuro: #8E1E18;
}
[hidden] { display: none !important; }
.num { font-variant-numeric: tabular-nums; }
details > summary::-webkit-details-marker { display: none; }
:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }
input, select, textarea { font-size: 16px; } /* evita el zoom automático de iOS */
@media (min-width: 768px) { input, select, textarea { font-size: 14px; } }
.campo { width: 100%; border: 1px solid var(--linea); border-radius: 8px; padding: 10px 12px; background: #fff; }
.campo:focus { border-color: var(--verde); outline: none; box-shadow: 0 0 0 3px var(--verde-claro); }
.etiqueta { display: block; font-size: 13px; font-weight: 500; color: var(--musgo); margin-bottom: 4px; }
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 8px;
         padding: 10px 16px; font-weight: 600; background: var(--verde); color: #fff; }
.boton:hover { background: var(--verde-oscuro); }
.boton-sec { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 8px;
             padding: 9px 14px; font-weight: 500; border: 1px solid var(--linea); background: #fff; color: var(--tinta); }
.boton-sec:hover { border-color: var(--verde); }
.tabla th { font: 500 12px "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .04em; text-transform: uppercase;
            color: var(--musgo); text-align: left; padding: 8px 12px; background: var(--fondo); white-space: nowrap; }
.tabla td { padding: 9px 12px; border-top: 1px solid var(--linea-suave); vertical-align: top; }
/* Celular: botones de al menos 44 px de alto (el tamaño cómodo para el dedo) y campos en 16 px
   aunque la plantilla les ponga letra chica (con menos de 16 px el iPhone hace zoom al tocarlos). */
@media (max-width: 767px) {
  .boton, .boton-sec { min-height: 44px; }
  input.campo, select.campo, textarea.campo { font-size: 16px; }
  input.campo, select.campo { min-height: 44px; }
}
/* Barra de búsqueda y filtros (Actividades, una actividad, Cheques). En la computadora se ve todo;
   en el celular la cartera, las fechas y «Ver terminados» (.plegable) quedan detrás de «Filtrar». */
.barra-herramientas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.boton-filtrar { display: none; }
.boton-filtrar.activo { border-color: var(--verde); color: var(--verde-oscuro); background: var(--verde-claro); }
.boton-filtrar.activo::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--verde); }
@media (max-width: 767px) {
  .barra-herramientas { width: 100%; }
  .barra-herramientas #buscar { width: auto !important; flex: 1 1 8rem; min-width: 0; }
  .barra-herramientas .plegable { order: 5; }
  .barra-herramientas > .plegable:first-child { flex-basis: 100%; }
  .boton-filtrar { display: inline-flex; }
  body:not(.filtros-abiertos) .plegable { display: none !important; }
}

/* Ficha del cliente en el celular: saldo real primero y grande; botón fijo «Registrar gestión»;
   facturas como tarjetas (en una tabla, el neto quedaba escondido a la derecha). */
.acciones-rapidas { display: flex; flex-wrap: wrap; gap: 8px; }
.barra-gestion { display: none; }
@media (max-width: 767px) {
  .saldos-ficha .saldo-real { order: -1; grid-column: 1 / -1; }
  .saldos-ficha .saldo-real dd { font-size: 26px; }
  .acciones-rapidas > a { flex: 1 1 0; }
  .barra-gestion { display: block; position: fixed; left: 0; right: 0; z-index: 20;
                   bottom: calc(62px + env(safe-area-inset-bottom, 0px)); padding: 8px 16px;
                   background: var(--fondo); border-top: 1px solid var(--linea); }
  .barra-gestion[hidden] { display: none; }
  .barra-gestion .boton { width: 100%; min-height: 48px; font-size: 16px; }
  .con-barra-gestion { padding-bottom: 72px; }
  #gestion { scroll-margin-top: 72px; }
  .tabla-movil thead { display: none; }
  .tabla-movil, .tabla-movil tbody { display: block; }
  .tabla-movil tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 10px 16px;
                    border-top: 1px solid var(--linea-suave); }
  .tabla-movil td { border: 0 !important; padding: 0 !important; text-align: left !important; font-size: 13px; }
  .tabla-movil td.f-num { order: 1; flex: 1 1 55%; font-size: 13px; }
  .tabla-movil td.f-neto { order: 2; margin-left: auto; font-size: 15px; }
  .tabla-movil td.f-extra { order: 3; }
  .tabla-movil td.f-extra[data-t]::before { content: attr(data-t) " "; }
  .tabla-movil td.f-neto::before { content: 'Neto '; font-weight: 400; font-size: 12px; color: var(--musgo); }
}
/* Confirmación dentro de la página (CRM.confirmar en comun.js) */
dialog.confirmar { border: 0; border-radius: 14px; padding: 20px; width: min(420px, calc(100vw - 32px)); color: var(--tinta);
                   box-shadow: 0 12px 40px rgba(21, 48, 42, .25); }
dialog.confirmar::backdrop { background: rgba(21, 48, 42, .4); }
dialog.confirmar h2 { font-size: 17px; font-weight: 600; margin: 0 0 6px; line-height: 1.3; }
dialog.confirmar p { font-size: 14px; color: var(--musgo); margin: 0 0 18px; }
dialog.confirmar .botones { display: flex; justify-content: flex-end; gap: 8px; }
dialog.confirmar .boton, dialog.confirmar .boton-sec { min-height: 44px; }
dialog.confirmar .boton.peligro { background: var(--rojo); }
dialog.confirmar .boton.peligro:hover { background: var(--rojo-oscuro); }
@media (max-width: 767px) { dialog.confirmar .botones > * { flex: 1; } }
.pulso { animation: pulso 1.6s ease-out 1; }
@keyframes pulso { from { background: var(--verde-claro); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .pulso { animation: none; } }

/* Ventana del estado de cuenta (ficha del cliente) */
dialog.dialogo-estado p { margin-bottom: 12px; }
.opciones-estado { border: 0; padding: 0; margin: 0 0 12px; }
.opciones-estado label { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: 15px; cursor: pointer; }
.opciones-estado input { width: 18px; height: 18px; accent-color: var(--verde); }
dialog.dialogo-estado .botones { flex-wrap: wrap; }
.envio-wa { display: grid; gap: 4px; margin-bottom: 14px; }
.envio-wa .ayuda-envio { font-size: 12.5px; color: var(--musgo); margin: 0 0 8px; }