/*
 * Identidad visual del sistema — se aplica a TODAS las pantallas (2026-09-19).
 *
 * Antes: la plantilla AdminLTE tal cual salió de la caja. Azul brillante de demo, todo el cuerpo
 * en MAYÚSCULAS (la clase `letras` iba en el <body>), un bloque gris con un icono repetido delante
 * de cada campo, y cada pantalla con su propio criterio.
 *
 * Ahora: "piedra y hoja" —el verde granito de una lápida pulida y el verde vivo de un jardín—.
 * Es un sistema funerario: se lee serio y tranquilo, nunca festivo ni de alarma. La identidad la
 * dan el color, el aire y las reglas finas; no una tipografía nueva, que en el celular de un
 * cobrador se paga en datos.
 *
 * Los tokens viven aquí y los usan también `customer-account.css` e `installments.css`.
 */

:root {
  --flf-granito: #1f3d34;        /* primario: verde granito, 9.8:1 sobre blanco */
  --flf-granito-hondo: #162c26;
  --flf-granito-claro: #2f5a4c;
  --flf-hoja: #3e6b52;           /* al día, correcto */
  --flf-ladrillo: #9a3b2e;       /* debe, peligro: ladrillo apagado, no rojo de alarma */
  --flf-ladrillo-suave: #f6ecea;
  --flf-ambar: #8a6516;          /* aviso, sobrio */
  --flf-papel: #f4f6f4;          /* fondo: hueso frío con tinte verde, nunca crema tibia */
  --flf-superficie: #ffffff;
  --flf-linea: #dde3de;
  --flf-tinta: #1a211e;
  --flf-tinta-suave: #5b6660;
}

/*=============================================
1. SE ACABAN LAS MAYÚSCULAS
   `letras` estaba en el <body>: nombres de clientes, etiquetas, botones y tablas, todo gritando.
   Un nombre propio se lee mejor como se escribió.
=============================================*/

body.letras {
  text-transform: none;
}

body {
  background: var(--flf-papel);
  color: var(--flf-tinta);
}

/*=============================================
2. FORMULARIOS
   El icono delante de cada campo era un bloque gris idéntico en todos: ruido, no información.
   Se queda como una marca discreta dentro de la misma caja del campo.
=============================================*/

label,
.col-form-label {
  font-weight: 600;
  color: var(--flf-tinta);
  margin-bottom: 0.3rem;
}

.form-control,
.custom-select,
select.form-control {
  min-height: 40px;
  border-color: var(--flf-linea);
  border-radius: 3px;
  color: var(--flf-tinta);
}

.form-control::placeholder {
  color: #9aa5a0;
}

.form-control:focus,
.custom-select:focus,
select.form-control:focus {
  border-color: var(--flf-granito);
  box-shadow: 0 0 0 2px rgba(31, 61, 52, 0.15);
}

.form-control:disabled,
.form-control[readonly] {
  background: var(--flf-papel);
  color: var(--flf-tinta-suave);
}

.input-group-text {
  background: var(--flf-superficie);
  border-color: var(--flf-linea);
  color: #9aa5a0;
  min-height: 40px;
}

.input-group > .input-group-prepend > .input-group-text {
  border-right: 0;
}

.input-group > .input-group-append > .input-group-text {
  border-left: 0;
}

.input-group:focus-within .input-group-text {
  border-color: var(--flf-granito);
  color: var(--flf-granito);
}

.form-group {
  margin-bottom: 1rem;
}

.form-text,
small.text-muted {
  color: var(--flf-tinta-suave) !important;
}

/*=============================================
3. BOTONES
   Un solo primario, el de la casa. Los semánticos se apagan a la paleta: en una funeraria
   nada debe verse como una alarma de incendios.
=============================================*/

.btn {
  border-radius: 3px;
  font-weight: 600;
}

.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--flf-granito);
  border-color: var(--flf-granito);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--flf-granito-hondo);
  border-color: var(--flf-granito-hondo);
}

.btn-primary:focus,
.btn-outline-primary:focus,
.btn-success:focus,
.btn-danger:focus {
  box-shadow: 0 0 0 2px rgba(31, 61, 52, 0.25);
}

.btn-outline-primary {
  color: var(--flf-granito);
  border-color: var(--flf-granito);
}

.btn-outline-primary:hover {
  background-color: var(--flf-granito);
  border-color: var(--flf-granito);
}

.btn-success {
  background-color: var(--flf-hoja);
  border-color: var(--flf-hoja);
}

.btn-success:hover,
.btn-success:focus {
  background-color: #35593f;
  border-color: #35593f;
}

.btn-danger {
  background-color: var(--flf-ladrillo);
  border-color: var(--flf-ladrillo);
}

.btn-danger:hover,
.btn-danger:focus {
  background-color: #7f3026;
  border-color: #7f3026;
}

.btn-warning {
  background-color: var(--flf-ambar);
  border-color: var(--flf-ambar);
  color: #fff;
}

.btn-warning:hover,
.btn-warning:focus {
  background-color: #6f5112;
  border-color: #6f5112;
  color: #fff;
}

.btn-info {
  background-color: var(--flf-granito-claro);
  border-color: var(--flf-granito-claro);
}

.btn-info:hover,
.btn-info:focus {
  background-color: var(--flf-granito-hondo);
  border-color: var(--flf-granito-hondo);
}

.btn-link {
  color: var(--flf-granito);
}

/* El secundario se leia como texto suelto: "Cerrar" no parecia un boton. */
.btn-default,
.btn-light,
.btn-secondary {
  background: var(--flf-superficie);
  border: 1px solid var(--flf-linea);
  color: var(--flf-tinta);
}

.btn-default:hover,
.btn-light:hover,
.btn-secondary:hover,
.btn-default:focus,
.btn-light:focus,
.btn-secondary:focus {
  background: var(--flf-papel);
  border-color: var(--flf-granito);
  color: var(--flf-granito);
}

/* El nombre de quien entro se cortaba a media palabra en la barra lateral. */
.user-panel .info {
  min-width: 0;
  overflow: hidden;
}

.user-panel .info a {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

a {
  color: var(--flf-granito);
}

a:hover {
  color: var(--flf-granito-hondo);
}

/*=============================================
4. TARJETAS Y VENTANAS
   Planas, con una regla arriba que dice de qué color es la casa. Nada de sombras grises iguales.
=============================================*/

.card {
  border: 1px solid var(--flf-linea);
  border-radius: 3px;
  box-shadow: none;
}

.card.card-primary.card-outline,
.card.card-outline {
  border-top: 3px solid var(--flf-granito);
}

.card-header {
  background: var(--flf-superficie);
  border-bottom: 1px solid var(--flf-linea);
}

.card-title {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--flf-tinta);
}

.modal-content {
  border: 0;
  border-top: 3px solid var(--flf-granito);
  border-radius: 3px;
}

.modal-header {
  border-bottom: 1px solid var(--flf-linea);
  align-items: flex-start;
}

.modal-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--flf-tinta);
}

.modal-footer {
  border-top: 1px solid var(--flf-linea);
}

/* Un pie de tarjeta vacio se veia como una franja gris sin sentido (pantalla de reportes:
   el boton aparece despues, por JS). Mientras no tenga nada dentro, no se dibuja. */
.card-footer {
  background: var(--flf-superficie);
  border-top: 1px solid var(--flf-linea);
}

.card-footer:not(:has(*:not(:empty))) {
  display: none;
}

/* En las tablas, editar es una accion neutra: una fila de bloques ambar competia con el dato.
   Solo lo destructivo se pinta, y en ladrillo apagado. */
.table .btn-warning,
table .btn-warning {
  background: var(--flf-superficie);
  border-color: var(--flf-linea);
  color: var(--flf-tinta-suave);
}

.table .btn-warning:hover,
table .btn-warning:hover,
.table .btn-warning:focus,
table .btn-warning:focus {
  background: var(--flf-papel);
  border-color: var(--flf-granito);
  color: var(--flf-granito);
}

/* El atajo "Crear cliente +" dentro de la venta era una pastilla verde suelta:
   se alinea con el campo como accion secundaria. */
.input-group-text .btn-xs,
.input-group-append .btn-xs {
  background: var(--flf-superficie);
  border: 1px solid var(--flf-linea);
  color: var(--flf-granito);
  min-height: 34px;
  font-weight: 600;
}

.input-group-text .btn-xs:hover,
.input-group-append .btn-xs:hover {
  background: var(--flf-papel);
  border-color: var(--flf-granito);
  color: var(--flf-granito-hondo);
}

/*=============================================
5. CHASIS: BARRA LATERAL, CABECERA Y PIE
=============================================*/

.main-sidebar,
.main-sidebar .sidebar {
  background-color: var(--flf-granito-hondo);
}

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active:hover {
  background-color: var(--flf-granito-claro);
  color: #fff;
  box-shadow: none;
}

.nav-sidebar .nav-link p {
  font-weight: 500;
}

.brand-link {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.main-header.navbar {
  background: var(--flf-superficie);
  border-bottom: 1px solid var(--flf-linea);
}

.content-header h1 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--flf-tinta);
}

.breadcrumb-item.active {
  color: var(--flf-tinta-suave);
}

.main-footer {
  background: var(--flf-superficie);
  border-top: 1px solid var(--flf-linea);
  color: var(--flf-tinta-suave);
}

/*=============================================
6. TABLAS
=============================================*/

.table thead th {
  font-weight: 600;
  color: var(--flf-tinta-suave);
  border-bottom: 1px solid var(--flf-linea);
  border-top: 0;
}

.table td,
.table th {
  border-top-color: var(--flf-linea);
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(31, 61, 52, 0.025);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--flf-granito) !important;
  border-color: var(--flf-granito) !important;
  color: #fff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--flf-papel) !important;
  border-color: var(--flf-linea) !important;
  color: var(--flf-granito) !important;
}

.page-item.active .page-link {
  background-color: var(--flf-granito);
  border-color: var(--flf-granito);
}

/*=============================================
7. ETIQUETAS DE ESTADO
   Con palabra y color, nunca solo color.
=============================================*/

.badge-success,
.bg-success {
  background-color: var(--flf-hoja) !important;
}

.badge-danger,
.bg-danger {
  background-color: var(--flf-ladrillo) !important;
}

.badge-warning,
.bg-warning {
  background-color: var(--flf-ambar) !important;
  color: #fff !important;
}

.badge-primary,
.bg-primary {
  background-color: var(--flf-granito) !important;
}

.badge-info,
.bg-info {
  background-color: var(--flf-granito-claro) !important;
}

.alert-danger {
  background: var(--flf-ladrillo-suave);
  border-color: var(--flf-ladrillo);
  color: #6f2b21;
}

/*=============================================
8. TELÉFONO
=============================================*/

@media (max-width: 575.98px) {
  .form-control,
  .custom-select,
  select.form-control,
  .input-group-text {
    min-height: 44px;
  }

  .modal-footer .btn {
    flex: 1 1 auto;
  }
}

/*=============================================
9. BUSCADOR DE CLIENTES
   Sustituye al <select> con 4.335 opciones de las pantallas de venta y despacho.
   Se escribe, el servidor responde con diez, y lo elegido se lee como un dato, no como un campo.
=============================================*/

.buscador-cliente {
  position: relative;
}

.buscador-cliente__elegido {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 40px;
  padding: 0.35rem 0.5rem 0.35rem 0.75rem;
  border: 1px solid var(--flf-linea);
  border-left: 3px solid var(--flf-granito);
  border-radius: 3px;
  background: var(--flf-superficie);
}

.buscador-cliente__nombre {
  color: var(--flf-tinta);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.buscador-cliente__cambiar {
  border: 1px solid var(--flf-linea);
  background: var(--flf-superficie);
  color: var(--flf-granito);
  border-radius: 3px;
  padding: 0.2rem 0.6rem;
  font-size: 0.8125rem;
  font-weight: 600;
  min-height: 32px;
  white-space: nowrap;
}

.buscador-cliente__cambiar:hover,
.buscador-cliente__cambiar:focus {
  background: var(--flf-papel);
  border-color: var(--flf-granito);
}

.buscador-cliente__lista {
  position: absolute;
  z-index: 1056;           /* por encima de una ventana de Bootstrap */
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  max-height: 17rem;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--flf-superficie);
  border: 1px solid var(--flf-linea);
  border-radius: 3px;
  box-shadow: 0 6px 16px rgba(26, 33, 30, 0.12);
}

.buscador-cliente__opcion {
  padding: 0.55rem 0.75rem;
  cursor: pointer;
  border-bottom: 1px solid var(--flf-linea);
}

.buscador-cliente__opcion:last-child {
  border-bottom: 0;
}

.buscador-cliente__opcion:hover,
.buscador-cliente__opcion.is-marcada {
  background: var(--flf-papel);
  box-shadow: inset 3px 0 0 var(--flf-granito);
}

.buscador-cliente__opcion-nombre {
  display: block;
  color: var(--flf-tinta);
}

.buscador-cliente__opcion-detalle {
  display: block;
  font-size: 0.8125rem;
  color: var(--flf-tinta-suave);
}

.buscador-cliente__vacio {
  padding: 0.7rem 0.75rem;
  color: var(--flf-tinta-suave);
}

@media (max-width: 575.98px) {
  .buscador-cliente__elegido,
  .buscador-cliente__campo {
    min-height: 44px;
  }
}

/* El buscador ocupa el ancho del campo dentro de un input-group. */
.input-group > .buscador-cliente {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}

.input-group > .buscador-cliente .buscador-cliente__campo,
.input-group > .buscador-cliente .buscador-cliente__elegido {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* Buscador que suma varios (filtros de los reportes). */
.buscador-cliente--varios .buscador-cliente__campo {
  margin-top: 0.35rem;
}

.buscador-cliente__fichas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.buscador-cliente__fichas:empty {
  display: none;
}

.ficha-cliente {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--flf-papel);
  border: 1px solid var(--flf-linea);
  border-left: 3px solid var(--flf-granito);
  border-radius: 3px;
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  color: var(--flf-tinta);
}

.ficha-cliente__quitar {
  border: 0;
  background: transparent;
  color: var(--flf-tinta-suave);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 0.15rem;
}

.ficha-cliente__quitar:hover,
.ficha-cliente__quitar:focus {
  color: var(--flf-ladrillo);
}

.buscador-cliente__opcion.is-puesta {
  opacity: 0.55;
}

/*=============================================
10. FILTROS DE LA PANTALLA DE VENTAS
    Una sola línea: cliente, desde, hasta y buscar. Debajo, los rangos de uso diario.
    Antes había un selector de modo y dos listas de AÑOS desde 1950 que no filtraban nada.
=============================================*/

.filtros-ventas {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--flf-linea);
}

.filtros-ventas__campo {
  display: flex;
  flex-direction: column;
  flex: 0 1 11rem;
  min-width: 0;
}

.filtros-ventas__campo--ancho {
  flex: 1 1 18rem;
}

.filtros-ventas__campo label {
  font-size: 0.8125rem;
  margin-bottom: 0.25rem;
}

.filtros-ventas__acciones {
  display: flex;
  gap: 0.5rem;
}

.filtros-ventas__atajos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  flex: 1 1 100%;
}

.atajo-rango {
  border: 1px solid var(--flf-linea);
  background: var(--flf-superficie);
  color: var(--flf-granito);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  min-height: 36px;
  font-size: 0.875rem;
  font-weight: 600;
}

.atajo-rango:hover,
.atajo-rango:focus {
  background: var(--flf-papel);
  border-color: var(--flf-granito);
}

.atajo-rango.is-activo {
  background: var(--flf-granito);
  border-color: var(--flf-granito);
  color: #fff;
}

.filtros-ventas__resumen {
  margin: 0.75rem 0 0;
  color: var(--flf-tinta-suave);
}

.filtros-ventas__resumen:empty {
  display: none;
}

@media (max-width: 575.98px) {
  .filtros-ventas__campo,
  .filtros-ventas__campo--ancho,
  .filtros-ventas__acciones {
    flex: 1 1 100%;
  }

  .filtros-ventas__acciones .btn {
    width: 100%;
  }

  .atajo-rango {
    flex: 1 1 auto;
    min-height: 44px;
  }
}