/* =====================================================================
   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;
}
/* Variante para el logo: a diferencia de una foto (persona/vehículo/producto),
   el logo NO debe recortarse -- "object-fit: contain" lo muestra completo,
   sin deformarlo, centrado dentro del recuadro sea cual sea su proporción. */
.foto-preview-logo {
  width: 100%; max-width: 260px; height: 180px; object-fit: contain; object-position: center; border-radius: .6rem; background:#e9edf1; border:1px solid #dfe4ea; padding: 10px;
}

/* ---------- Login ----------
   Fondo blanco en toda la pantalla (antes degradado azul oscuro con
   encabezado dorado). En pantallas grandes, si se configuró una foto de
   fondo (Configuración -> Imagen de Fondo del Login), se arma un layout de
   2 columnas al estilo de otros sistemas de referencia: foto a la izquierda
   con overlay oscuro (marca arriba, eslogan grande abajo) y el formulario a
   la derecha sobre blanco. Sin esa foto configurada, o en el celular
   (siempre, tenga foto o no), se ve solo el formulario centrado. */
.login-wrapper {
  min-height: 100vh;
  background: #fff;
  display: flex;
}
.login-wrapper.login-sin-imagen { justify-content: center; }

.login-panel-imagen {
  flex: 1 1 55%;
  min-height: 100vh;
  background-size: cover;
  background-position: center;
  background-color: #0b1520; /* se ve mientras carga la foto */
  position: relative;
  color: #fff;
  flex-direction: column;
  justify-content: space-between;
  padding: 2.25rem 2.5rem;
}
.login-panel-imagen::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,20,35,.60) 0%, rgba(6,20,35,.20) 38%, rgba(6,20,35,.72) 100%);
}
.login-panel-imagen-marca, .login-panel-imagen-eslogan { position: relative; z-index: 1; }
.login-panel-imagen-marca { display: flex; align-items: center; gap: .75rem; }
.login-panel-imagen-marca img {
  width: 52px; height: 52px; object-fit: contain; background: #fff; border-radius: .6rem; padding: 6px; flex-shrink: 0;
}
.login-panel-imagen-marca-icono {
  width: 52px; height: 52px; border-radius: .6rem; background: #fff; color: var(--muelmi-azul);
  display: flex; align-items: center; justify-content: center; font-size: 1.6rem; flex-shrink: 0;
}
.login-panel-imagen-eslogan { font-size: 1.7rem; font-weight: 800; line-height: 1.25; max-width: 30rem; }

.login-panel-form {
  flex: 1 1 45%;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
}
.login-sin-imagen .login-panel-form { flex: 1 1 100%; }

.login-card { max-width: 400px; width: 100%; border-radius: 1rem; }
.login-logo { height: 180px; max-width: 320px; padding: 10px 18px; }
.login-nombre-empresa { color: var(--muelmi-azul); font-size: 1.4rem; }
.login-eslogan-empresa { color: var(--muelmi-azul); opacity: .68; }

/* ---------- 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; }

/* Panel visual del mecánico/trabajador (Mis Órdenes + Panel de la Orden) --
   pensado para uso táctil rápido en el escáner Launch, el celular o la PC. */
.tarjeta-orden-mecanico .card { transition: box-shadow .12s, transform .12s; border: 1px solid #e9edf1; }
.tarjeta-orden-mecanico:hover .card, .tarjeta-orden-mecanico:active .card { box-shadow: 0 4px 14px rgba(11,61,99,.12); transform: translateY(-1px); }
.tarjeta-orden-tarea-asignada .card { border-style: dashed; border-color: #8fb8d9; }

.panel-progreso-cabecera { background: var(--muelmi-azul); color: #fff; border-radius: .75rem; padding: 1rem 1.15rem; }
.panel-progreso-barra { height: 8px; border-radius: 4px; background: rgba(255,255,255,.22); overflow: hidden; }
.panel-progreso-barra > div { height: 100%; background: #fff; transition: width .25s; }

.panel-seccion .accordion-button { font-weight: 600; }
.panel-seccion .accordion-button:not(.collapsed) { background-color: rgba(11,61,99,.06); color: var(--muelmi-azul); box-shadow: none; }
.panel-seccion .accordion-button:focus { box-shadow: none; }
.panel-estado-icono { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: .95rem; }
.panel-estado-icono.completo { background: #2f8f5b; color: #fff; }
.panel-estado-icono.pendiente { background: #e4e7ec; color: #9aa4b2; }
.panel-estado-icono.actual { background: var(--muelmi-naranja); color: #fff; }

.panel-btn-continuar { position: sticky; bottom: 12px; z-index: 5; }

/* Rediseño táctil del interior de las 3 páginas de fase (Informe de
   Ingreso / Trabajo / Informe Final) para mecánico/trabajador -- mismo
   lenguaje visual que el Panel de la orden (25/09/2026, follow-up 5). */
.tarea-tarjeta { background: #f8f9fa; border: 1px solid #e9ecef; transition: border-color .15s, background-color .15s; }
.tarea-tarjeta[data-estado="completado"] { border-color: #a3d9b1; background: #f2faf4; }