/* ===================================================
   FACTURAMELO — custom_styles.css
   Carga después de admin_styles.css → override final
   =================================================== */

/* ---- Variables de marca ---- */
:root {
  --fm-blue:       #2446e8;
  --fm-blue-dark:  #1a35c0;
  --fm-navy:       #0e3068;
  --fm-bg:         #f2f4fa;
  --fm-border:     #E0E6F7;
  --fm-text:       #66789C;
  --fm-text-dark:  #1e293b;
  --fm-success:    #10b981;
  --fm-danger:     #ef4444;
  --fm-warning:    #f59e0b;
  --fm-purple:     #8b5cf6;
}

/* ---- Base ---- */
body { background: var(--fm-bg) !important; }
*, *::before, *::after { box-sizing: border-box; }

/* ================================================
   HEADER
   ================================================ */
.header {
  background: #fff !important;
  border-bottom: 1px solid var(--fm-border) !important;
  box-shadow: 0 1px 8px rgba(36,70,232,.06) !important;
  height: 58px !important;
}
.header .logo-container .logo img { height: 36px !important; }

/* ================================================
   SIDEBAR
   ================================================ */
html.fixed.sidebar-white .sidebar-left,
html.fixed.sidebar-white .sidebar-header,
html.fixed.sidebar-white .sidebar-left .nano {
  background: #fff !important;
  border-right: 1px solid var(--fm-border) !important;
  box-shadow: none !important;
}

ul.nav-main > li > a {
  border-radius: 8px !important;
  margin: 2px 8px !important;
  transition: all .15s ease !important;
  font-size: 13px !important;
}
ul.nav-main > li.nav-active:not(.nav-parent) > a,
ul.nav-main li .nav-children li.nav-active > a {
  background: linear-gradient(135deg, var(--fm-blue) 0%, var(--fm-blue-dark) 100%) !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(36,70,232,.3) !important;
}

/* ================================================
   PAGE HEADER
   ================================================ */
.page-header {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 16px 0 8px !important;
}
.page-header h2 {
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  color: var(--fm-navy) !important;
  margin: 0 !important;
}

/* ================================================
   CARDS
   ================================================ */
.card {
  border-radius: 14px !important;
  border: 1px solid var(--fm-border) !important;
  box-shadow: 0 1px 6px rgba(36,70,232,.05) !important;
  overflow: hidden;
}
.card-body {
  background: #fff !important;
  border-radius: 14px !important;
  border: none !important;
  margin: 0 !important;
  padding: 1.25rem !important;
}
.card-header {
  background: #fff !important;
  border-bottom: 1px solid var(--fm-border) !important;
  border-radius: 14px 14px 0 0 !important;
  margin: 0 !important;
  padding: .875rem 1.25rem !important;
}

/* ================================================
   TABLA PRINCIPAL
   ================================================ */
.table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
.table thead th {
  background: var(--fm-bg) !important;
  color: var(--fm-text) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .6px !important;
  text-transform: uppercase !important;
  border-bottom: 2px solid var(--fm-border) !important;
  padding: .75rem .625rem !important;
  white-space: nowrap;
}
.table tbody tr {
  transition: background .12s ease, box-shadow .12s ease;
}
.table tbody tr:hover {
  background: #f0f4ff !important;
}
.table tbody td {
  vertical-align: middle !important;
  padding: .6rem .625rem !important;
  border-top: 1px solid #f1f5fb !important;
  color: var(--fm-text-dark) !important;
  font-size: 13px !important;
}
.table tbody tr:last-child td { border-bottom: none !important; }

/* Número de guía / factura */
.table tbody td a {
  font-weight: 600;
  color: var(--fm-blue) !important;
}

/* ================================================
   BADGES DE ESTADO — override importante
   ================================================ */
/* Aceptado */
span.badge.text-white.bg-success,
span.badge.bg-secondary.text-white.bg-success,
.badge-success {
  background: rgba(16,185,129,.12) !important;
  color: #059669 !important;
  border: 1px solid rgba(16,185,129,.25) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  padding: .4em .75em !important;
  border-radius: 20px !important;
  letter-spacing: .2px;
}
span.badge.text-white.bg-success::before { content: '✓ '; }

/* Rechazado */
span.badge.bg-danger.text-white,
.badge-danger {
  background: rgba(239,68,68,.12) !important;
  color: #dc2626 !important;
  border: 1px solid rgba(239,68,68,.25) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  padding: .4em .75em !important;
  border-radius: 20px !important;
}
span.badge.bg-danger.text-white::before { content: '✕ '; }

/* Enviado / Pendiente */
span.badge.bg-warning,
.badge-warning {
  background: rgba(245,158,11,.12) !important;
  color: #d97706 !important;
  border: 1px solid rgba(245,158,11,.25) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  padding: .4em .75em !important;
  border-radius: 20px !important;
}

/* Info / Azul */
span.badge.bg-secondary.text-white.bg-info,
.badge-info {
  background: rgba(36,70,232,.1) !important;
  color: var(--fm-blue) !important;
  border: 1px solid rgba(36,70,232,.2) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  padding: .4em .75em !important;
  border-radius: 20px !important;
}

/* ================================================
   BOTONES DE ACCIÓN (XML / PDF / CDR)
   ================================================ */
.btn { border-radius: 7px !important; font-size: 12px !important; font-weight: 600 !important; transition: all .15s !important; }
.btn-xs { font-size: 11px !important; padding: 3px 9px !important; }

/* XML - gris azulado */
.btn-info {
  background: rgba(36,70,232,.1) !important;
  color: var(--fm-blue) !important;
  border: 1px solid rgba(36,70,232,.2) !important;
  box-shadow: none !important;
}
.btn-info:hover { background: var(--fm-blue) !important; color: #fff !important; border-color: var(--fm-blue) !important; }

/* PDF - rojo suave */
.btn-danger {
  background: rgba(239,68,68,.1) !important;
  color: #dc2626 !important;
  border: 1px solid rgba(239,68,68,.2) !important;
  box-shadow: none !important;
}
.btn-danger:hover { background: #ef4444 !important; color: #fff !important; border-color: #ef4444 !important; }

/* CDR - verde */
.btn-success,
.btn.text-white.bg-success {
  background: rgba(16,185,129,.1) !important;
  color: #059669 !important;
  border: 1px solid rgba(16,185,129,.2) !important;
  box-shadow: none !important;
}
.btn-success:hover { background: #10b981 !important; color: #fff !important; }

/* Editar - naranja */
.btn-warning {
  background: rgba(245,158,11,.1) !important;
  color: #d97706 !important;
  border: 1px solid rgba(245,158,11,.2) !important;
  box-shadow: none !important;
}
.btn-warning:hover { background: #f59e0b !important; color: #fff !important; }

/* Opciones / Primary */
.btn-primary {
  background: var(--fm-blue) !important;
  border-color: var(--fm-blue) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(36,70,232,.25) !important;
}
.btn-primary:hover { background: var(--fm-blue-dark) !important; border-color: var(--fm-blue-dark) !important; }

/* Botones de cabecera de página (Nuevo / Generar) */
.btn-black, .btn-dark,
button.btn.btn-primary.btn-sm {
  background: var(--fm-navy) !important;
  border-color: var(--fm-navy) !important;
  color: #fff !important;
  padding: 7px 16px !important;
  font-size: 13px !important;
  border-radius: 9px !important;
  box-shadow: 0 2px 8px rgba(14,48,104,.2) !important;
}

/* ================================================
   INPUTS / FILTROS
   ================================================ */
.el-input__inner,
.el-textarea__inner,
.form-control {
  border-radius: 8px !important;
  border: 1.5px solid var(--fm-border) !important;
  font-size: 13px !important;
  transition: border .15s, box-shadow .15s !important;
}
.el-input__inner:focus,
.form-control:focus {
  border-color: var(--fm-blue) !important;
  box-shadow: 0 0 0 3px rgba(36,70,232,.1) !important;
  background: #fff !important;
}

/* ================================================
   PAGINACIÓN
   ================================================ */
.page-item.active .page-link {
  background: var(--fm-blue) !important;
  border-color: var(--fm-blue) !important;
  border-radius: 6px !important;
}
.page-link {
  border-radius: 6px !important;
  color: var(--fm-blue) !important;
  border: 1px solid var(--fm-border) !important;
  margin: 0 2px !important;
}

/* ================================================
   DIÁLOGOS / MODALES
   ================================================ */
.el-dialog {
  border-radius: 16px !important;
  border: 1px solid var(--fm-border) !important;
  box-shadow: 0 8px 40px rgba(36,70,232,.12) !important;
}
.el-dialog__header {
  background: var(--fm-bg) !important;
  border-radius: 16px 16px 0 0 !important;
  padding: 1rem 1.5rem !important;
  border-bottom: 1px solid var(--fm-border) !important;
}
.el-dialog__title { font-weight: 700 !important; color: var(--fm-navy) !important; font-size: 15px !important; }
.el-dialog__wrapper {
  background: rgba(14,48,104,.15) !important;
  backdrop-filter: blur(6px) !important;
}

/* ================================================
   TABS
   ================================================ */
.el-tabs__item.is-active { color: var(--fm-blue) !important; font-weight: 700 !important; }
.el-tabs__active-bar { background-color: var(--fm-blue) !important; border-radius: 4px !important; }
.el-tabs__item:hover { color: var(--fm-blue) !important; }

/* ================================================
   BRANDING WATERMARK FOOTER
   ================================================ */
body::after {
  content: '';
}

/* ================================================
   DASHBOARD — KPI cards (RowTop)
   ================================================ */
.row.top {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
  margin: 0 !important;
  overflow-x: auto !important;
  padding-bottom: 4px;
}
.row.top .col {
  flex: 1 1 140px !important;
  min-width: 130px !important;
  padding: 0 !important;
}
.row.top .card.card-dashboard {
  border-radius: 14px !important;
  border: 1px solid var(--fm-border) !important;
  box-shadow: 0 1px 6px rgba(36,70,232,.05) !important;
  overflow: hidden !important;
  margin: 0 !important;
  height: 100% !important;
  position: relative;
}
.row.top .card.card-dashboard .card-body {
  padding: 1.1rem 1.25rem 1rem !important;
  background: #fff !important;
}
.row.top .card.card-dashboard h3 {
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  color: var(--fm-navy) !important;
  margin: 0 0 4px !important;
  line-height: 1;
}
.row.top .card.card-dashboard small {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .3px !important;
  color: var(--fm-text) !important;
  text-transform: uppercase !important;
}
.row.top .card.card-dashboard i.fas {
  font-size: 38px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  right: 12px !important;
  opacity: .07 !important;
  color: var(--fm-blue) !important;
}
/* Certificado vencimiento - acento de color */
.row.top .card.card-dashboard .card-body .text-success { color: var(--fm-success) !important; }
.row.top .card.card-dashboard .card-body .text-danger  { color: var(--fm-danger) !important; }
.row.top .card.card-dashboard .card-title {
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: .4px !important;
  color: var(--fm-text) !important;
  margin: 0 !important;
}

/* ================================================
   DASHBOARD — header + filtros
   ================================================ */
.dashboard > .card { border-radius: 0 !important; border: none !important; box-shadow: none !important; background: transparent !important; }
.dashboard .card-dashboard.card .card-body.pt-2 {
  background: #fff !important;
  border-radius: 14px !important;
  border: 1px solid var(--fm-border) !important;
  margin-bottom: .75rem !important;
}
.dashboard .border-bottom.mb-2 small {
  font-size: 10px !important;
  letter-spacing: .6px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: var(--fm-text) !important;
}

/* ================================================
   DASHBOARD — chart cards
   ================================================ */
.dashboard .card.card-dashboard {
  border-radius: 14px !important;
  border: 1px solid var(--fm-border) !important;
  box-shadow: 0 1px 8px rgba(36,70,232,.05) !important;
  overflow: hidden !important;
  height: 100%;
}
.dashboard .card.card-dashboard > .card-body:first-of-type {
  padding: 1rem 1.1rem .5rem !important;
  background: #fff !important;
}

/* Chart title label */
.dashboard .widget-summary label,
.dashboard .summary label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .6px !important;
  text-transform: uppercase !important;
  color: var(--fm-text) !important;
  margin-bottom: 6px !important;
  display: block !important;
}

/* Chart canvas max height */
.dashboard canvas { max-height: 175px !important; }

/* Table inside chart cards */
.dashboard .card-dashboard .table.table-sm {
  border-top: 1px solid var(--fm-border) !important;
  margin: 0 !important;
}
.dashboard .card-dashboard .table.table-sm td {
  font-size: 12px !important;
  padding: .5rem .9rem !important;
  color: var(--fm-text-dark) !important;
  border-top: 1px solid #f1f5fb !important;
  vertical-align: middle !important;
}
.dashboard .card-dashboard .table.table-sm tr.text-info td { color: var(--fm-blue) !important; font-weight: 600 !important; }
.dashboard .card-dashboard .table.table-sm tr.text-danger td { color: var(--fm-danger) !important; font-weight: 600 !important; }
.dashboard .card-dashboard .table.table-sm tr.text-bold td { font-weight: 700 !important; }
.dashboard .card-dashboard .table.table-sm td.text-right { font-variant-numeric: tabular-nums; }

/* ================================================
   DASHBOARD — filas de gráficas siempre horizontal
   ================================================ */
.dashboard .card > .row > .col-xl-12 > .row {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  gap: 12px !important;
  margin: 0 0 12px !important;
  padding-bottom: 4px;
}
.dashboard .card > .row > .col-xl-12 > .row > [class*="col-xl-3"] {
  flex: 0 0 calc(25% - 9px) !important;
  max-width: calc(25% - 9px) !important;
  min-width: 220px !important;
  padding: 0 !important;
}
.dashboard .card > .row > .col-xl-12 > .row > [class*="col-xl-6"],
.dashboard .card > .row > .col-xl-12 > .row > [class*="col-md-6"] {
  flex: 0 0 calc(50% - 6px) !important;
  max-width: calc(50% - 6px) !important;
  min-width: 340px !important;
  padding: 0 !important;
}

/* ================================================
   DASHBOARD — page-header "Dashboard"
   ================================================ */
.dashboard .page-header h2 {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: var(--fm-navy) !important;
}

/* ================================================
   RESPONSIVE — mobile / tablet
   ================================================ */

/* Porto usa la clase no-mobile-device para ocultar el contenido
   en móvil. La removemos para que sí sea usable. */
body.no-mobile-device .hide-on-mobile { display: none !important; }

/* Mostrar contenido principal en móvil aunque Porto lo oculte */
@media (max-width: 991px) {
  /* Desactivar el bloqueo de Porto en móviles */
  #mobile-redirect { display: none !important; }

  /* Sidebar colapsa detrás del overlay */
  html.fixed .sidebar-left {
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 1050;
    position: fixed !important;
    top: 0; left: 0;
    height: 100vh;
  }
  html.fixed.sidebar-mobile-open .sidebar-left {
    transform: translateX(0);
    box-shadow: 4px 0 20px rgba(0,0,0,.15) !important;
  }

  /* Contenido principal ocupa todo el ancho */
  html.fixed .page-wrapper {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  /* Header: logo + hamburger */
  .header { padding: 0 12px !important; }
  .header .logo-container { max-width: 120px; }
  .header .logo-container .logo img { height: 28px !important; }

  /* Ocultar textos largos del header en móvil */
  .header .header-right .notifications-menu .label,
  .header .header-right .notifications-menu .number { display: none; }
}

@media (max-width: 767px) {
  /* Tablas: scroll horizontal */
  .table-responsive-fm {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 10px;
  }
  .table-responsive-fm .table { min-width: 600px; }

  /* Hacer todas las tablas con scroll en móvil */
  .card-body .table-responsive,
  .card-body > .table {
    overflow-x: auto;
    display: block;
    width: 100%;
    -webkit-overflow-scrolling: touch;
  }

  /* Botones de acción apilados */
  .btn-group .btn,
  .actions-col .btn { margin: 2px 1px !important; }

  /* Filtros: inputs full width */
  .el-input,
  .el-select,
  .form-group .el-input { width: 100% !important; }

  /* Page header: stack title + buttons */
  .page-header .row {
    flex-direction: column;
    gap: 8px;
  }
  .page-header .pull-right {
    float: none !important;
    margin-top: 8px;
  }
  .page-header .btn { width: 100%; justify-content: center; }

  /* Cards full-width */
  .card { margin-bottom: 12px !important; border-radius: 10px !important; }
  .card-body { padding: .875rem !important; }

  /* Diálogos / modales full screen en móvil */
  .el-dialog {
    width: 96% !important;
    margin: 2vh auto !important;
    border-radius: 12px !important;
    max-height: 94vh;
    overflow-y: auto;
  }
  .el-dialog__body { padding: 1rem !important; }

  /* Paginación compacta */
  .pagination { flex-wrap: wrap; gap: 2px; }
  .page-link { padding: .3rem .55rem !important; font-size: 12px !important; }

  /* Formulario interno: labels encima */
  .el-form-item {
    display: flex;
    flex-direction: column;
  }
  .el-form-item__label { width: 100% !important; text-align: left !important; }
  .el-form-item__content { margin-left: 0 !important; }

  /* Tipografía ligera */
  .table tbody td { font-size: 12px !important; }
  .page-header h2 { font-size: 1rem !important; }
}

@media (max-width: 480px) {
  /* Extra small: chips de acción más pequeños */
  .btn-xs { font-size: 10px !important; padding: 2px 6px !important; }
  .badge { font-size: 10px !important; }
  .header { height: 50px !important; }
}