/* =====================================================================
   MUELMI ERP - Estilos personalizados
   Multiservicios El Milagro
   ===================================================================== */

:root {
  --muelmi-azul: #0b3d63;
  --muelmi-azul-osc: #082a45;
  --muelmi-naranja: #a8790a;
  --muelmi-naranja-osc: #8a6308;
  --muelmi-gris-fondo: #f4f6f9;
  --muelmi-sidebar-w: 250px;
}

body {
  background-color: var(--muelmi-gris-fondo);
  font-size: 0.925rem;
}

a { text-decoration: none; }

/* ---------- Botones / acentos con la marca ---------- */
.btn-primary {
  --bs-btn-bg: var(--muelmi-azul);
  --bs-btn-border-color: var(--muelmi-azul);
  --bs-btn-hover-bg: var(--muelmi-azul-osc);
  --bs-btn-hover-border-color: var(--muelmi-azul-osc);
  --bs-btn-active-bg: var(--muelmi-azul-osc);
}
.btn-acento {
  background-color: var(--muelmi-naranja);
  border-color: var(--muelmi-naranja);
  color: #fff;
}
.btn-acento:hover { background-color: var(--muelmi-naranja-osc); border-color: var(--muelmi-naranja-osc); color: #fff; }
.text-acento { color: var(--muelmi-naranja) !important; }
.link-plain { color: inherit; }

/* ---------- Barra superior ---------- */
.topbar {
  background: linear-gradient(90deg, var(--muelmi-azul) 0%, var(--muelmi-azul-osc) 100%);
  color: #fff;
  height: 58px;
  position: sticky;
  top: 0;
  z-index: 1030;
}
.topbar .navbar-brand { color: #fff; font-weight: 700; letter-spacing: .3px; }
.topbar .navbar-brand small { font-weight: 400; opacity: .8; }
.topbar .btn-icon { color: #fff; background: transparent; border: none; }
.topbar .btn-icon:hover { color: var(--muelmi-naranja); }
.navbar-logo {
  height: 34px;
  max-width: 170px;
  width: auto;
  object-fit: contain;
  background: #fff;
  border-radius: .35rem;
  padding: 3px 7px;
}
.login-logo {
  height: 64px;
  max-width: 220px;
  width: auto;
  object-fit: contain;
  background: #fff;
  border-radius: .5rem;
  padding: 8px 14px;
}
.offcanvas-logo {
  height: 28px;
  max-width: 140px;
  width: auto;
  object-fit: contain;
  background: #fff;
  border-radius: .3rem;
  padding: 2px 6px;
}

/* ---------- Sidebar ---------- */
.sidebar {
  width: var(--muelmi-sidebar-w);
  min-height: calc(100vh - 58px);
  background-color: #0f2033;
  color: #cfd8e3;
}
.sidebar .nav-link {
  color: #cfd8e3;
  border-radius: .4rem;
  padding: .55rem .8rem;
  margin: .1rem .6rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .89rem;
}
.sidebar .nav-link i { font-size: 1.05rem; width: 20px; text-align: center; }
.sidebar .nav-link:hover { background-color: rgba(255,255,255,.08); color: #fff; }
.sidebar .nav-link.active { background-color: var(--muelmi-naranja); color: #fff; font-weight: 600; }
.sidebar .nav-section-title {
  color: #6c8199;
  text-transform: uppercase;
  font-size: .68rem;
  letter-spacing: .06em;
  padding: .9rem 1rem .25rem;
  font-weight: 700;
}
.sidebar-offcanvas { background-color: #0f2033; color: #cfd8e3; width: 270px !important; }
.sidebar-offcanvas .nav-link { color: #cfd8e3; }
.sidebar-offcanvas .nav-link.active { background-color: var(--muelmi-naranja); color: #fff; }
.sidebar-offcanvas .btn-close { filter: invert(1); }

.contenido-principal { min-height: calc(100vh - 58px); }

/* ---------- Tarjetas KPI del dashboard ---------- */
.kpi-card {
  border: none;
  border-radius: .75rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  border-left: 4px solid var(--muelmi-azul);
}
.kpi-card.acento { border-left-color: var(--muelmi-naranja); }
.kpi-card .kpi-valor { font-size: 1.55rem; font-weight: 700; }
.kpi-card .kpi-icono {
  width: 46px; height: 46px; border-radius: .6rem;
  display: flex; align-items: center; justify-content: center;
  background: rgba(11,61,99,.08); color: var(--muelmi-azul); font-size: 1.3rem;
}

.card { border: none; border-radius: .75rem; box-shadow: 0 1px 3px rgba(0,0,0,.07); }
.card-header { background-color: #fff; border-bottom: 1px solid #eef1f5; font-weight: 600; }

/* ---------- Tarjetas KPI con degradado (Caja, Dashboard) ---------- */
.kpi-gradiente {
  border-radius: .75rem; padding: 1.1rem 1.25rem; color: #fff; position: relative; overflow: hidden;
  min-height: 96px; box-shadow: 0 4px 10px rgba(0,0,0,.1);
}
.kpi-grad-titulo { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; opacity: .92; }
.kpi-grad-valor { font-size: 1.6rem; font-weight: 800; margin: .15rem 0; }
.kpi-grad-sub { font-size: .74rem; opacity: .85; }
.kpi-grad-verde  { background: linear-gradient(135deg, #12b886 0%, #0ca678 100%); }
.kpi-grad-rojo   { background: linear-gradient(135deg, #ff6b6b 0%, #e03131 100%); }
.kpi-grad-azul   { background: linear-gradient(135deg, #5c7cfa 0%, #3b5bdb 100%); }
.kpi-grad-morado { background: linear-gradient(135deg, #cc5de8 0%, #9c36b5 100%); }
.kpi-grad-naranja{ background: linear-gradient(135deg, var(--muelmi-naranja) 0%, var(--muelmi-naranja-osc) 100%); }
.kpi-grad-celeste{ background: linear-gradient(135deg, #22b8cf 0%, #1098ad 100%); }

.table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: #64748b; border-bottom-width: 1px; }
.table td, .table th { vertical-align: middle; }

.badge { font-weight: 500; }

/* Barra de progreso de meta mensual */
.progreso-meta { height: 10px; border-radius: 10px; }

/* ---------- Miniaturas de fotos ---------- */
.foto-mini {
  width: 56px; height: 56px; object-fit: cover; border-radius: .5rem; background:#e9edf1;
}
.foto-preview {
  width: 100%; max-width: 260px; height: 180px; object-fit: cover; border-radius: .6rem; background:#e9edf1; border:1px solid #dfe4ea;
}

/* ---------- Login ---------- */
.login-wrapper {
  min-height: 100vh;
  background: linear-gradient(135deg, var(--muelmi-azul) 0%, var(--muelmi-azul-osc) 55%, #061b2c 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
}
.login-card { max-width: 400px; width: 100%; border-radius: 1rem; overflow: hidden; }
.login-card .card-header {
  background: var(--muelmi-naranja); color: #fff; text-align: center; padding: 1.75rem 1.5rem 1.25rem;
}

/* ---------- Utilidades ---------- */
.cursor-pointer { cursor: pointer; }
.fw-600 { font-weight: 600; }
.text-truncate-2 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- Ítems dinámicos de detalle (cotización / orden) ---------- */
.fila-detalle .form-select, .fila-detalle .form-control { font-size: .85rem; }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
  .kpi-card .kpi-valor { font-size: 1.3rem; }
}

/* ---------- Calendario de Citas ---------- */
.tabla-calendario th { padding: .5rem; background: #f8f9fb; }
.tabla-calendario td.celda-calendario { height: 108px; vertical-align: top; padding: .35rem; width: 14.28%; overflow: hidden; }
.tabla-calendario td.celda-vacia { background: #fafbfc; }
.tabla-calendario td.celda-hoy { background: #fff8f0; }
.dia-numero { font-size: .82rem; font-weight: 600; margin-bottom: .2rem; }
.evento-calendario {
  font-size: .68rem; padding: .12rem .4rem; border-radius: .25rem; color: #fff;
  margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600;
}
.evento-clickeable { cursor: pointer; }
.evento-clickeable:hover { opacity: .85; }
.evento-clickeable-factura { cursor: pointer; }
.evento-clickeable-factura:hover { opacity: .85; }
.evento-naranja { background: #A67B30; }
.evento-azul    { background: #4F7EB0; }
.evento-verde   { background: #4AA570; }
.evento-rojo    { background: #B65749; }
.evento-morado  { background: #734FB0; }
.evento-factura-pagar  { background: #9F5738; }
.evento-factura-cobrar { background: #479E96; }
.evento-gasto-fijo     { background: #6E5945; }
.punto-leyenda { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
@media (max-width: 767.98px) {
  .tabla-calendario td.celda-calendario { height: 90px; font-size: .75rem; }
  .evento-calendario { font-size: .6rem; }
}

/* Quita las flechas de subir/bajar en los campos numéricos, en todo el
   sistema, para todos los usuarios -- se escribe el número directamente. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}

/* Lista de vehículos estilo "Vista de contenido" -- cada fila ocupa el
   ancho completo, con un ícono/miniatura a la izquierda y el detalle
   apilado al centro, como en el explorador de archivos. */
.fila-vehiculo { border-bottom: 1px solid #eee; transition: background-color .12s; }
.fila-vehiculo:last-child { border-bottom: none; }
.fila-vehiculo:hover { background-color: #f8f9fb; }
.icono-vehiculo {
  width: 44px; height: 44px; border-radius: 10px; background: #eef1f6;
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: var(--muelmi-azul);
}
.icono-vehiculo-foto { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; }
.min-w-0 { min-width: 0; }