/*
  Ajustes de Greentic sobre la plantilla Dastone:
  - Tipografía Poppins (Light para texto, Bold para títulos y datos
    relevantes), un poco más compacta que el ajuste anterior.
  - Fuente autoalojada (sin depender de internet para verla bien).
*/

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/poppins-300.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/poppins-400.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/poppins-700.woff2") format("woff2");
}

:root {
  --bs-body-font-size: 1rem;
  --bs-body-font-family: "Poppins", sans-serif;

  /* Bordes más redondeados en toda la plataforma (tarjetas, botones,
     inputs, modales, badges, dropdowns — todo el tema Dastone toma el
     radio de estas mismas variables), buscando un estilo más suave,
     "Apple", que el original bastante cuadrado del tema. */
  --bs-border-radius-sm: 0.6rem;
  --bs-border-radius: 0.85rem;
  --bs-border-radius-lg: 1rem;
  --bs-border-radius-xl: 1.25rem;
  --bs-border-radius-xxl: 1.5rem;
}

/* El tema trae --bs-border-color casi del mismo tono que el fondo de las
   tarjetas (#1c202b contra #1e2436) — las líneas divisorias (border-top/
   bottom, hr, filas de tabla, separadores dentro de tarjetas como "Ahorro
   del mes") quedan casi invisibles en toda la plataforma. El propio tema
   ya usa un blanco translúcido correcto en --bs-border-color-translucent
   (rgba 255,255,255,0.15) para algunos componentes puntuales — se adopta
   ese mismo tono acá como el --bs-border-color general. Se repite el
   selector exacto del tema (html[data-bs-theme=dark]) porque un :root
   solo pierde por especificidad y no lo alcanza a pisar.
   --bs-border-style también se sube de "solid" a "dotted" a pedido —
   Bootstrap solo usa esta variable en las utilidades .border/.border-top/
   .border-bottom/.border-start/.border-end (las líneas separadoras de
   verdad), así que las tarjetas, inputs, botones y modales (que traen su
   borde sólido hardcodeado aparte, no por esta variable) no se tocan. */
html[data-bs-theme="dark"] {
  --bs-border-color: rgba(255, 255, 255, 0.15);
  --bs-border-style: dotted;
}

html {
  font-size: 16px;
}

/* El tema trae fs-11/fs-12/fs-13 (usadas en toda la plataforma para
   badges, fechas, etiquetas y texto secundario) en pixeles fijos, muy
   chicos — no escalan con el font-size de arriba. Se suben 1px cada
   una mantenimiento el mismo orden relativo entre ellas. */
.fs-11 { font-size: 12px !important; }
.fs-12 { font-size: 13px !important; }
.fs-13 { font-size: 14px !important; }

body,
.form-control,
.form-select,
.btn,
table {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
}

h1, h2, h3, h4, h5, h6,
.card-title,
.page-title,
.form-label,
.num,
strong, b {
  font-family: "Poppins", sans-serif;
  font-weight: 700 !important;
}

/* Los checkbox de "chulito" (Gastos, Pagos a Julián, Suscripciones)
   quedaban casi invisibles sobre el tema oscuro con el borde tenue
   que trae Bootstrap por defecto. */
.form-check-input {
  border-color: rgba(255, 255, 255, 0.55);
}
.form-check-input:checked {
  border-color: var(--bs-success);
}

/* El fondo de página (#0f111a) y el de las tarjetas (#131621, valor de
   fábrica del tema) casi no se distinguen entre sí. Un primer intento
   (#1a1e2c) resultó insuficiente — la usuaria lo siguió viendo plano.
   Ahora se aclara bastante más el gris de las tarjetas, se le suma un
   borde claro tenue (que el tema no trae en dark) y se reactiva/reforza
   la sombra (el tema la trae definida pero apagada, .card{box-shadow:none}),
   para que cada módulo quede claramente separado del fondo. */
.card {
  background-color: #1e2436;
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

/* Selector de días de la semana (Tareas — repetición "Cada semana"),
   estilo popup como el de Google Calendar: círculos L M X J V S D que
   se resaltan al elegirlos. Reutilizado en el quick-add del dashboard
   y en el formulario de editar tarea. */
.dias-semana-popup {
  display: none;
  position: absolute;
  z-index: 20;
  background-color: #1a1e2c;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--bs-border-radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  padding: 0.75rem;
}
.dia-semana-toggle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background-color: transparent;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.dia-semana-toggle.active {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
}

/* Cuadrícula tipo "widgets" (como el widget gallery de Apple) para el
   resumen de negocio del dashboard: tarjetas de distinto tamaño que se
   acomodan juntas en vez de filas parejas por sección — se siente más
   organizado que una fila tras otra del mismo tamaño. */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-flow: dense;
  grid-auto-rows: minmax(110px, auto);
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.bento-grid > * {
  grid-column: span 12;
}
.bento-grid .card {
  height: 100%;
  margin-bottom: 0;
}
.bento-grid .card-body {
  height: 100%;
  display: flex;
  flex-direction: column;
}
@media (min-width: 576px) {
  .bento-sm { grid-column: span 6; }
  .bento-md { grid-column: span 6; }
}
@media (min-width: 992px) {
  .bento-sm { grid-column: span 3; }
  .bento-md { grid-column: span 6; }
  .bento-lg { grid-column: span 6; grid-row: span 2; }
  .bento-wide { grid-column: span 12; }
}

/* Selector de estado (Clientes mensuales) que cambia solo al elegir una
   opción — reemplaza al badge estático de antes, pero se pinta igual
   según el estado para no perder esa señal visual de un vistazo. */
.estado-select {
  border: none;
  font-weight: 700;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}
.estado-select-activo {
  background-color: rgba(34, 183, 131, 0.15);
  color: var(--bs-success);
}
.estado-select-pausado {
  background-color: rgba(255, 184, 34, 0.15);
  color: var(--bs-warning);
}
.estado-select-retirado {
  background-color: rgba(149, 153, 173, 0.15);
  color: #9599ad;
}
.estado-select-en_desarrollo {
  background-color: rgba(255, 184, 34, 0.15);
  color: var(--bs-warning);
}
.estado-select-pagado {
  background-color: rgba(34, 183, 131, 0.15);
  color: var(--bs-success);
}

/* Tom Select (buscador de cliente) — reskin sobre el tema Bootstrap5 claro
   de la librería para que combine con el tema oscuro de la plataforma.
   Se apoya en las mismas variables CSS que ya usa Bootstrap, para no tener
   que mantener colores hardcodeados aparte. */
.ts-wrapper.form-select {
  padding: 0;
}
.ts-wrapper .ts-control {
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
  box-shadow: none;
}
.ts-wrapper.focus .ts-control {
  border-color: #6f6af8;
  box-shadow: 0 0 0 0.15rem rgba(111, 106, 248, 0.25);
}
.ts-control input {
  color: var(--bs-body-color) !important;
}
.ts-control .item {
  color: var(--bs-body-color);
}
.ts-dropdown {
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
  z-index: 1075;
}
.ts-dropdown .option {
  color: var(--bs-body-color);
}
.ts-dropdown .option.active {
  background-color: rgba(111, 106, 248, 0.18);
  color: var(--bs-body-color);
}
.ts-dropdown .no-results {
  color: #9599ad;
  padding: 0.5rem 0.75rem;
}
.ts-dropdown-content {
  background-color: var(--bs-body-bg);
}
#tareas .tarea-check {
  border-radius: 50%;
}
#tareas .tarea-lista-chip {
  white-space: nowrap;
}
#tareas .tarea-lista-chip.active {
  box-shadow: inset 0 0 0 2px currentColor;
}