/* ==========================================================================
   UI MITTA - Inkubera Firma (misma hoja que DYC-RBK, adaptada a MITTA)
   Misma linea visual que Renta Gestor (tipografia Inter, paleta Slate/Indigo,
   modo oscuro) adaptada a AdminLTE 2 + Bootstrap 3.
   Va despues de AdminLTE.css, _all-skins.css y gama_leasing.css en
   templates/fij_encabezado.html, y despues de assets/css/style.css en
   templates/login.html. Cada cambio de este archivo exige subir el ?v= de
   ambos <link> (Apache en QA no manda Cache-Control). Solo ASCII: las
   plantillas pasan por utf8_encode.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* --------------------------------------------------------------------------
   1. VARIABLES
   -------------------------------------------------------------------------- */
:root {
  --ink-primary: #4f46e5;
  --ink-primary-dark: #3730a3;
  --ink-primary-hover: #4338ca;
  --ink-accent: #6366f1;
  --ink-accent-soft: #818cf8;
  --ink-sidebar-bg: #1e293b;
  --ink-sidebar-dark: #0f172a;
  --ink-success: #10b981;
  --ink-success-dark: #059669;
  --ink-warning: #f59e0b;
  --ink-warning-dark: #d97706;
  --ink-danger: #ef4444;
  --ink-danger-dark: #dc2626;
  --ink-info: #3b82f6;
  --ink-surface: #f8fafc;
  --ink-surface-alt: #f1f5f9;
  --ink-card: #ffffff;
  --ink-input: #ffffff;
  --ink-input-border: #cbd5e1;
  --ink-disabled: #f1f5f9;
  --ink-border: #e2e8f0;
  --ink-border-light: #f1f5f9;
  --ink-text: #334155;
  --ink-text-heading: #1e293b;
  --ink-text-muted: #64748b;
  --ink-text-faint: #94a3b8;
  --ink-text-label: #475569;
  --ink-font: 'Inter', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* --------------------------------------------------------------------------
   2. TIPOGRAFIA Y BASE
   -------------------------------------------------------------------------- */
body {
  font-family: var(--ink-font) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--ink-text);
  font-size: 14px;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.btn, .form-control, .tooltip, .popover {
  font-family: var(--ink-font);
}

a {
  color: var(--ink-primary);
}

a:hover,
a:focus {
  color: var(--ink-primary-hover);
}

.text-primary {
  color: var(--ink-primary) !important;
}

/* --------------------------------------------------------------------------
   3. LOGO Y BARRA SUPERIOR (.main-header)
   -------------------------------------------------------------------------- */
.main-header .logo {
  background-color: var(--ink-sidebar-dark) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.04);
}

.main-header .logo:hover {
  background-color: var(--ink-sidebar-bg) !important;
}

.main-header .logo img {
  height: 40px;
  width: auto;
  vertical-align: middle;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

.main-header .navbar {
  background-color: var(--ink-card) !important;
  box-shadow: inset 0 -1px 0 var(--ink-border), 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* Boton del menu lateral (hamburguesa) */
.main-header .navbar .sidebar-toggle {
  background-color: transparent !important;
  color: var(--ink-text-label) !important;
  border: 0 !important;
  border-radius: 6px;
  margin: 8px 0 0 8px;
  padding: 9px 12px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.main-header .navbar .sidebar-toggle:hover,
.main-header .navbar .sidebar-toggle:focus {
  background-color: var(--ink-surface-alt) !important;
  color: var(--ink-primary) !important;
}

/* Usuario y boton de tema, centrados en la misma linea */
.main-header .navbar-custom-menu > .navbar-nav {
  display: flex;
  align-items: center;
}

.main-header .navbar .nav > li > a {
  color: var(--ink-text-label) !important;
  font-weight: 500;
  font-size: 13.5px;
  line-height: 1.35;
}

.main-header .navbar .nav > li > a:hover,
.main-header .navbar .nav > li > a:focus,
.main-header .navbar .nav .open > a,
.main-header .navbar .nav .open > a:hover,
.main-header .navbar .nav .open > a:focus {
  background: var(--ink-surface-alt) !important;
  color: var(--ink-text-heading) !important;
}

.main-header .navbar .user-menu > a .fa-user-circle {
  color: var(--ink-text-faint);
}

.main-header .navbar .user-menu > a p {
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-text-muted);
}

/* Desplegable del usuario */
.main-header .navbar .user-menu > .dropdown-menu {
  border-radius: 10px !important;
  border: 1px solid var(--ink-border) !important;
  overflow: hidden;
  padding: 0;
}

.main-header .navbar .user-menu > .dropdown-menu > li.user-header {
  background: linear-gradient(135deg, var(--ink-primary) 0%, var(--ink-primary-dark) 100%) !important;
  height: auto;
  padding: 18px 10px;
}

.main-header .navbar .user-menu > .dropdown-menu > li.user-header > p {
  color: #ffffff;
  font-size: 14px;
  margin-top: 6px;
}

.main-header .navbar .user-menu > .dropdown-menu > .user-footer {
  background-color: var(--ink-surface);
  border-top: 1px solid var(--ink-border);
}

.main-header .navbar .user-menu > .dropdown-menu > .user-footer .btn-default {
  color: var(--ink-text-label);
  /* "Cambio Contrasena" y "Cerrar Sesion" caben en una linea en los 280px del desplegable */
  padding: 6px 10px;
  font-size: 13px;
}

/* --------------------------------------------------------------------------
   4. MENU LATERAL (.main-sidebar)
   -------------------------------------------------------------------------- */
.wrapper,
.main-sidebar,
.left-side {
  background-color: var(--ink-sidebar-bg) !important;
  background-image: none !important;
}

.main-sidebar .sidebar-menu > li.header {
  background: transparent !important;
  color: var(--ink-text-faint) !important;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 16px 15px 6px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.main-sidebar .sidebar-menu > li.header:first-child {
  border-top: 0;
}

.main-sidebar .sidebar-menu > li > a {
  color: #e2e8f0 !important;
  border-left: 3px solid transparent;
  font-size: 13.5px;
  font-weight: 400;
  padding: 10px 5px 10px 15px;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.main-sidebar .sidebar-menu > li > a > .fa,
.main-sidebar .sidebar-menu > li > a > .pull-right-container > .fa {
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.2s ease;
}

.main-sidebar .sidebar-menu > li:hover > a,
.main-sidebar .sidebar-menu > li.active > a,
.main-sidebar .sidebar-menu > li.menu-open > a {
  color: #ffffff !important;
  background-color: rgba(99, 102, 241, 0.18) !important;
  border-left-color: var(--ink-accent-soft) !important;
}

.main-sidebar .sidebar-menu > li.active > a {
  background-color: rgba(99, 102, 241, 0.22) !important;
  font-weight: 600;
}

.main-sidebar .sidebar-menu > li:hover > a > .fa,
.main-sidebar .sidebar-menu > li.active > a > .fa,
.main-sidebar .sidebar-menu > li.menu-open > a > .fa {
  color: #ffffff;
}

/* Submenus */
.main-sidebar .sidebar-menu > li > .treeview-menu {
  background-color: var(--ink-sidebar-dark) !important;
  margin: 0;
  padding: 4px 0;
}

.main-sidebar .sidebar-menu .treeview-menu > li > a {
  color: #cbd5e1 !important;
  font-size: 13px;
  padding: 7px 5px 7px 22px;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.main-sidebar .sidebar-menu .treeview-menu > li > a > .fa {
  color: rgba(255, 255, 255, 0.4);
  width: 18px;
}

.main-sidebar .sidebar-menu .treeview-menu > li > a:hover,
.main-sidebar .sidebar-menu .treeview-menu > li.active > a {
  color: #ffffff !important;
  background-color: rgba(99, 102, 241, 0.14) !important;
}

/* Menu colapsado (sidebar-mini): el texto flotante va con el fondo del menu */
.sidebar-mini.sidebar-collapse .main-sidebar .sidebar-menu > li:hover > a > span:not(.pull-right),
.sidebar-mini.sidebar-collapse .main-sidebar .sidebar-menu > li:hover > .treeview-menu {
  background-color: var(--ink-sidebar-bg) !important;
}

.main-sidebar .sidebar::-webkit-scrollbar {
  width: 4px;
}

.main-sidebar .sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   5. AREA DE CONTENIDO
   -------------------------------------------------------------------------- */
.content-wrapper,
.right-side {
  background-color: var(--ink-surface-alt) !important;
}

/* Titulo de la pagina (fij_titulo.html: dos <h4> y breadcrumb) */
.content-header {
  padding: 18px 20px 4px 20px;
}

.content-header > h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-text-muted);
}

.content-header > h4:first-of-type {
  font-size: 20px;
  font-weight: 600;
  color: var(--ink-text-heading);
  margin-bottom: 2px;
}

.content-header > h4:empty {
  display: none;
}

.content-header > .breadcrumb {
  background: transparent !important;
  font-size: 13px;
  top: 20px;
}

.content-header > .breadcrumb > li > a {
  color: var(--ink-text-muted);
}

.content-header > .breadcrumb > li > a:hover {
  color: var(--ink-primary);
  text-decoration: none;
}

.content-header > .breadcrumb > .active,
.content-header > .breadcrumb > li + li:before {
  color: var(--ink-text-faint);
}

.content {
  padding: 15px 20px;
}

/* --------------------------------------------------------------------------
   6. CAJAS (.box) - equivalente a .card de SB Admin 2
   -------------------------------------------------------------------------- */
.box {
  background: var(--ink-card);
  border: 1px solid var(--ink-border);
  border-top: 1px solid var(--ink-border);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Cajas con color: el acento queda como borde superior de la paleta */
.box.box-primary,
.box.box-info { border-top: 3px solid var(--ink-primary); }
.box.box-success { border-top: 3px solid var(--ink-success); }
.box.box-warning { border-top: 3px solid var(--ink-warning); }
.box.box-danger { border-top: 3px solid var(--ink-danger); }

/* Caja dentro de caja (p. ej. panel de filtros): sin sombra, fondo suave */
.box .box {
  background: var(--ink-surface);
  box-shadow: none;
}

.content-wrapper .box-header,
.content-wrapper .box-body,
.content-wrapper .box-footer {
  background-color: transparent;
}

.content-wrapper .box-header {
  color: var(--ink-text-heading);
}

.content-wrapper .box-header.with-border {
  border-bottom: 1px solid var(--ink-border-light);
}

.content-wrapper .box-header .box-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-text-heading);
}

.content-wrapper .box-body {
  color: var(--ink-text) !important;
}

.content-wrapper .box-footer {
  border-top: 1px solid var(--ink-border-light);
}

/* Las .card de Bootstrap 4 que quedaron en algunas plantillas */
.content-wrapper .card {
  background: var(--ink-card);
  border: 1px solid var(--ink-border);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  margin-bottom: 16px;
}

.content-wrapper .card-header {
  background: var(--ink-surface);
  border-bottom: 1px solid var(--ink-border-light);
  color: var(--ink-text-heading);
  font-weight: 600;
  padding: 12px 16px;
  border-radius: 8px 8px 0 0;
}

.content-wrapper .card-header:empty {
  display: none;
}

.content-wrapper .card-body {
  color: var(--ink-text) !important;
  padding: 16px;
}

.content-wrapper .card-body.card {
  border: 0;
  box-shadow: none;
  margin-bottom: 0;
}

.btn.btn-box-tool {
  padding: 5px;
  border: 0;
  color: var(--ink-text-faint);
}

/* Tarjetas KPI del panel (panel.html, .small-box) */
.small-box {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.05);
}

.small-box > .inner h3 {
  font-weight: 700;
  font-size: 34px;
  color: #ffffff;
}

.small-box > .inner p {
  font-weight: 500;
  font-size: 13.5px;
}

.small-box .icon {
  color: rgba(0, 0, 0, 0.12);
}

.small-box form .btn-block {
  background: rgba(0, 0, 0, 0.12) !important;
  border: 0;
  border-radius: 0;
  color: #ffffff;
  font-size: 12px;
  height: 28px;
}

.small-box form .btn-block:hover {
  background: rgba(0, 0, 0, 0.2) !important;
}

/* --------------------------------------------------------------------------
   7. BOTONES
   -------------------------------------------------------------------------- */
.btn {
  font-weight: 500;
  border-radius: 6px;
  font-size: 13px;
  padding: 7px 16px;
  border: 1px solid transparent;
  letter-spacing: 0.01em;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.btn-primary {
  background-color: var(--ink-primary) !important;
  border-color: var(--ink-primary) !important;
  color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
  background-color: var(--ink-primary-hover) !important;
  border-color: var(--ink-primary-hover) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3) !important;
}

.btn-info {
  background-color: var(--ink-primary);
  border-color: var(--ink-primary);
  color: #ffffff;
}

.btn-info:hover,
.btn-info:focus {
  background-color: var(--ink-primary-hover);
  border-color: var(--ink-primary-hover);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
}

.btn-success {
  background-color: var(--ink-success);
  border-color: var(--ink-success);
  color: #ffffff;
}

.btn-success:hover,
.btn-success:focus {
  background-color: var(--ink-success-dark);
  border-color: var(--ink-success-dark);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.btn-danger {
  background-color: var(--ink-danger);
  border-color: var(--ink-danger);
  color: #ffffff;
}

.btn-danger:hover,
.btn-danger:focus {
  background-color: var(--ink-danger-dark);
  border-color: var(--ink-danger-dark);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

.btn-warning {
  background-color: var(--ink-warning);
  border-color: var(--ink-warning);
  color: #ffffff;
}

.btn-warning:hover,
.btn-warning:focus {
  background-color: var(--ink-warning-dark);
  border-color: var(--ink-warning-dark);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.btn-default,
.btn-secondary {
  background-color: var(--ink-card);
  border-color: var(--ink-input-border);
  color: var(--ink-text-label);
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.hover,
.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--ink-surface-alt) !important;
  border-color: var(--ink-text-faint);
  color: var(--ink-text-heading);
}

/* "Volver" y similares: btn-default con texto de color */
.btn_letra_azul,
.btn_letra_azul:hover,
.btn_letra_azul:focus {
  color: var(--ink-primary);
}

.btn-sm {
  padding: 5px 12px;
  font-size: 12px;
  border-radius: 5px;
}

.btn-xs {
  padding: 3px 8px;
  font-size: 11px;
  border-radius: 4px;
}

.btn-lg {
  padding: 10px 24px;
  font-size: 15px;
  border-radius: 8px;
}

/* Muchas plantillas ponen un <a> dentro del <button>: hereda el color */
.btn > a,
.btn > a:hover,
.btn > a:focus,
.btn > a:visited {
  color: inherit !important;
  text-decoration: none !important;
}

.btn .fa + span,
.btn > a > .fa {
  margin-right: 2px;
}

/* Botones de la columna de acciones: misma altura y separacion */
.content-wrapper .table td .btn-sm,
.content-wrapper .table td .btn-xs {
  min-width: 70px;
  margin: 2px 1px;
  vertical-align: middle;
}

.content-wrapper .table td > form {
  display: inline-block;
}

/* --------------------------------------------------------------------------
   8. FORMULARIOS
   -------------------------------------------------------------------------- */
.form-control {
  border: 1px solid var(--ink-input-border);
  border-radius: 6px;
  font-size: 13.5px;
  color: var(--ink-text);
  background-color: var(--ink-input);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control:focus {
  border-color: var(--ink-accent) !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12) !important;
  outline: none;
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
  background-color: var(--ink-disabled);
  color: var(--ink-text-muted);
}

.form-control::-webkit-input-placeholder { color: var(--ink-text-faint); }
.form-control::-moz-placeholder { color: var(--ink-text-faint); }
.form-control::placeholder { color: var(--ink-text-faint); }

select.form-control:not([multiple]):not([size]) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8.825L0.375 3.2l.85-.85L6 7.125 10.775 2.35l.85.85L6 8.825z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}

label,
.control-label {
  font-weight: 500;
  font-size: 13px;
  color: var(--ink-text-label);
  margin-bottom: 4px;
}

.content-wrapper .box-body label,
.content-wrapper .card-body label,
.content-wrapper fieldset label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-text-label);
  letter-spacing: 0.01em;
}

/* Calendario y otros prefijos de campo (Bootstrap 3: tabla, no flex) */
.input-group .input-group-addon {
  background-color: var(--ink-surface);
  border-color: var(--ink-input-border);
  color: var(--ink-primary);
}

.input-group .input-group-addon:first-child {
  border-radius: 6px 0 0 6px;
}

.input-group .input-group-addon:last-child {
  border-radius: 0 6px 6px 0;
}

/* Fieldsets (AdminLTE.css: fieldset.scheduler-border) */
fieldset.scheduler-border {
  border: 1px solid var(--ink-border) !important;
  border-radius: 8px;
  padding: 4px 14px 12px 14px !important;
  background-color: var(--ink-card);
}

legend.scheduler-border {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ink-text-heading);
  padding: 0 6px;
  width: auto;
  border: none;
  margin-bottom: 4px;
}

/* --------------------------------------------------------------------------
   9. TABLAS
   -------------------------------------------------------------------------- */
.content-wrapper .table {
  font-size: 13px;
}

.content-wrapper .box-body .table-bordered,
.content-wrapper .table {
  color: var(--ink-text) !important;
}

.content-wrapper .table > thead > tr > th {
  background-color: var(--ink-surface);
  border: 1px solid var(--ink-border);
  border-bottom: 2px solid var(--ink-border);
  color: var(--ink-text-label);
  font-weight: 600;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 10px 12px;
  vertical-align: bottom;
}

.content-wrapper .table > tbody > tr > td {
  padding: 10px 12px;
  vertical-align: middle;
  border-color: var(--ink-border-light);
  color: var(--ink-text);
}

.content-wrapper .table-bordered,
.content-wrapper .table-bordered > tbody > tr > td {
  border-color: var(--ink-border);
}

.content-wrapper .table-hover > tbody > tr:hover > td {
  background-color: var(--ink-surface);
}

/* Bootstrap 3 pinta la fila impar (el <tr>) de #f9f9f9 */
.content-wrapper .table-striped > tbody > tr:nth-of-type(odd) {
  background-color: var(--ink-surface);
}

/* Listados (.tabla-responsiva): encabezado indigo como en Renta Gestor */
.content-wrapper .tabla-responsiva .table > thead > tr > th {
  background-color: var(--ink-primary);
  border-color: var(--ink-primary-hover);
  color: #ffffff;
}

/* Bootstrap 3 separa con 2px #ddd el <tbody> implicito de la fila de paginacion */
.content-wrapper .table > tbody + tbody {
  border-top: 2px solid var(--ink-border);
}

/* Visor de documento (iframe del PDF en las fichas de detalle) */
.content-wrapper .responsiveContent iframe {
  border: 1px solid var(--ink-border);
  border-radius: 8px;
  background: #ffffff;
}

/* Listados con muchas columnas: mas compactos para que quepan sin scroll */
.content-wrapper .tabla-responsiva .table > thead > tr > th,
.content-wrapper .tabla-responsiva .table > tbody > tr > td {
  padding: 8px 10px;
}

.content-wrapper .tabla-responsiva .table > tbody > tr > td {
  font-size: 12.5px;
}

/* Fila de paginacion dentro de la tabla (<th class="tabla_abajo">) */
.content-wrapper .table th.tabla_abajo {
  background-color: var(--ink-surface);
  border-color: var(--ink-border);
  color: var(--ink-text-muted);
  font-weight: 400;
  font-size: 12.5px;
  text-transform: none;
  letter-spacing: 0;
  padding: 10px 12px;
}

/* Etiquetas de estado (AdminLTE .label) */
.label {
  font-weight: 500;
  font-size: 10.5px;
  padding: 3px 8px;
  border-radius: 12px;
  letter-spacing: 0.02em;
}

.label-primary { background-color: var(--ink-primary) !important; }
.label-info { background-color: var(--ink-accent) !important; }
.label-success { background-color: var(--ink-success) !important; }
.label-warning { background-color: var(--ink-warning) !important; }
.label-danger { background-color: var(--ink-danger) !important; }
.label-default { background-color: var(--ink-border) !important; color: var(--ink-text-label) !important; }

/* Colores de fondo de AdminLTE (tarjetas del panel, estados) */
.bg-aqua,
.bg-light-blue,
.bg-blue { background-color: var(--ink-primary) !important; }
.bg-green { background-color: var(--ink-success) !important; }
.bg-yellow { background-color: var(--ink-warning) !important; }
.bg-red { background-color: var(--ink-danger) !important; }

/* --------------------------------------------------------------------------
   10. PAGINACION
   -------------------------------------------------------------------------- */
.pagination > li > a,
.pagination > li > span {
  color: var(--ink-text-label);
  background-color: var(--ink-card);
  border-color: var(--ink-border);
  font-size: 13px;
  padding: 6px 12px;
  margin: 0 2px;
  border-radius: 5px !important;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.pagination > li > a:hover,
.pagination > li > a:focus,
.pagination > li > span:hover {
  background-color: var(--ink-surface-alt);
  border-color: var(--ink-input-border);
  color: var(--ink-text-heading);
}

.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > a:focus,
.pagination > .active > span {
  background-color: var(--ink-primary) !important;
  border-color: var(--ink-primary) !important;
  color: #ffffff !important;
  font-weight: 600;
}

.pagination > .disabled > a,
.pagination > .disabled > span {
  color: var(--ink-text-faint);
  background-color: var(--ink-card);
}

/* DataTables */
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: 5px !important;
  margin: 0 2px;
  padding: 4px 10px !important;
  border: 1px solid var(--ink-border) !important;
  color: var(--ink-text-label) !important;
  font-size: 13px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--ink-surface-alt) !important;
  border-color: var(--ink-input-border) !important;
  color: var(--ink-text-heading) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--ink-primary) !important;
  border-color: var(--ink-primary) !important;
  color: #ffffff !important;
}

/* Con dataTables.bootstrap (MITTA lo carga en el pie) el boton es un <li class="paginate_button">
   que envuelve el <a> de .pagination: el borde y el fondo los pone el <a>, no el <li> */
.dataTables_wrapper .dataTables_paginate li.paginate_button,
.dataTables_wrapper .dataTables_paginate li.paginate_button:hover,
.dataTables_wrapper .dataTables_paginate li.paginate_button.current,
.dataTables_wrapper .dataTables_paginate li.paginate_button.current:hover {
  margin: 0;
  padding: 0 !important;
  border: none !important;
  background: none !important;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--ink-input-border);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 13px;
  background-color: var(--ink-input);
  color: var(--ink-text);
}

.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--ink-accent);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
  outline: none;
}

.dataTables_wrapper .dataTables_info {
  font-size: 12.5px;
  color: var(--ink-text-muted);
}

/* --------------------------------------------------------------------------
   11. MODALES
   -------------------------------------------------------------------------- */
.modal-content {
  background-color: var(--ink-card);
  border-radius: 10px !important;
  border: none !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  overflow: hidden;
}

.modal-header {
  background: linear-gradient(135deg, var(--ink-primary) 0%, var(--ink-primary-dark) 100%) !important;
  color: #ffffff !important;
  padding: 14px 20px;
  border-bottom: none !important;
}

/* ventanax() de fij_piedepagina.html pinta el encabezado rojo en los errores
   (asigna style = "background:#CD5C5C"; el navegador lo guarda como rgb) */
.modal-header[style*="CD5C5C"],
.modal-header[style*="cd5c5c"],
.modal-header[style*="rgb(205, 92, 92)"] {
  background: linear-gradient(135deg, var(--ink-danger) 0%, var(--ink-danger-dark) 100%) !important;
}

.modal-header .modal-title,
.modal-header h3,
.modal-header h4,
.modal-header h5,
.modal-header label {
  font-weight: 600;
  font-size: 16px;
  color: #ffffff !important;
}

.modal-header .close {
  color: #ffffff !important;
  opacity: 0.8;
  text-shadow: none;
  font-size: 22px;
}

.modal-header .close:hover {
  opacity: 1;
}

.modal-body {
  color: var(--ink-text) !important;
  padding: 20px;
}

.modal-body h4 {
  color: var(--ink-text) !important;
  font-weight: 500;
}

.modal-footer {
  padding: 12px 20px;
  background: var(--ink-surface);
  border-top: 1px solid var(--ink-border);
}

/* --------------------------------------------------------------------------
   12. MENUS DESPLEGABLES Y PESTANAS
   -------------------------------------------------------------------------- */
.dropdown-menu {
  background-color: var(--ink-card);
  border-radius: 8px;
  border: 1px solid var(--ink-border);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0, 0, 0, 0.04);
}

.dropdown-menu > li > a {
  color: var(--ink-text-label);
  font-size: 13.5px;
  padding: 7px 16px;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background-color: var(--ink-surface-alt);
  color: var(--ink-text-heading);
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover {
  background-color: var(--ink-primary);
}

.nav-tabs-custom {
  background: var(--ink-card);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.nav-tabs-custom > .nav-tabs {
  border-bottom-color: var(--ink-border);
}

.nav-tabs-custom > .nav-tabs > li > a,
.nav-tabs > li > a {
  color: var(--ink-text-muted);
  font-weight: 500;
  font-size: 13.5px;
}

.nav-tabs-custom > .nav-tabs > li.active {
  border-top-color: var(--ink-primary);
}

.nav-tabs-custom > .nav-tabs > li.active > a,
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: var(--ink-primary);
  font-weight: 600;
  background-color: var(--ink-card);
}

.nav-tabs-custom > .tab-content {
  background: var(--ink-card);
  border-radius: 0 0 8px 8px;
}

.tooltip-inner {
  background-color: var(--ink-sidebar-bg);
  border-radius: 6px;
  font-size: 12px;
  padding: 6px 10px;
}

/* --------------------------------------------------------------------------
   13. MENSAJES (#mensajeError / #mensajeOK, callouts y alerts)
   El pie agrega "callout callout-danger" a #mensajeError; AdminLTE pinta esos
   fondos con !important, por eso aqui tambien.
   -------------------------------------------------------------------------- */
#mensajeError:not(:empty),
.callout.callout-danger,
.alert-danger {
  background: #fef2f2 !important;
  color: #991b1b !important;
  border: 0 !important;
  border-left: 4px solid var(--ink-danger) !important;
}

#mensajeOK:not(:empty),
.callout.callout-success,
.alert-success {
  background: #f0fdf4 !important;
  color: #166534 !important;
  border: 0 !important;
  border-left: 4px solid var(--ink-success) !important;
}

.callout.callout-warning,
.alert-warning {
  background: #fffbeb !important;
  color: #92400e !important;
  border: 0 !important;
  border-left: 4px solid var(--ink-warning) !important;
}

.callout.callout-info,
.alert-info {
  background: #eff6ff !important;
  color: #1e40af !important;
  border: 0 !important;
  border-left: 4px solid var(--ink-info) !important;
}

#mensajeError:not(:empty),
#mensajeOK:not(:empty),
.callout,
.alert {
  border-radius: 8px !important;
  padding: 12px 18px;
  margin-bottom: 16px;
  font-size: 13.5px;
}

.callout a,
.alert a {
  color: inherit !important;
}

/* --------------------------------------------------------------------------
   14. PIE DE PAGINA
   -------------------------------------------------------------------------- */
.main-footer {
  background: var(--ink-card);
  border-top: 1px solid var(--ink-border);
  color: var(--ink-text-faint);
  font-size: 12.5px;
}

.main-footer b,
.main-footer strong {
  color: var(--ink-text-muted);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   15. CELULAR Y TABLET
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .content-header {
    padding: 14px 15px 2px 15px;
  }

  .content-header > h4:first-of-type {
    font-size: 17px;
  }

  .content-header > .breadcrumb {
    padding-left: 0;
    margin-top: 6px;
  }

  .content {
    padding: 12px 10px;
  }

  .main-header .navbar .sidebar-toggle {
    margin: 8px 0 0 4px;
  }

  /* Bootstrap 3 pone borde #ddd a .table-responsive en celular */
  .content-wrapper .table-responsive {
    border-color: var(--ink-border);
  }
}

/* gama_leasing.css convierte las tablas en fichas bajo 600px: se respeta su
   padding izquierdo y solo se ajustan colores y bordes */
@media screen and (max-width: 600px) {
  .content-wrapper .table > tbody > tr {
    border: 1px solid var(--ink-border);
    border-radius: 8px;
    margin-bottom: 10px;
    background-color: var(--ink-card);
    overflow: hidden;
  }

  .content-wrapper .table > tbody > tr > td {
    border: 0;
    border-bottom: 1px solid var(--ink-border-light);
  }

  .content-wrapper .table > tbody > tr > td:first-child {
    background: var(--ink-surface);
    color: var(--ink-text-heading);
  }
}

/* ==========================================================================
   16. LOGIN (templates/login.html: .top-content, .form-box, .form-top,
   .form-bottom, .login-form; estilos base en assets/css/style.css)
   ========================================================================== */
body:has(.top-content) {
  min-height: 100vh;
  background: linear-gradient(135deg, var(--ink-sidebar-bg) 0%, var(--ink-primary-dark) 50%, var(--ink-primary) 100%) fixed !important;
}

/* La foto de fondo (jquery.backstretch) se reemplaza por el degradado */
body:has(.top-content) > .backstretch {
  display: none !important;
}

.top-content .text,
.top-content .text h1 {
  color: #ffffff;
}

.top-content .text h1 {
  font-weight: 600;
  letter-spacing: 0.04em;
}

.top-content .text h1 strong {
  font-weight: 700;
}

.top-content .description p {
  color: #e2e8f0;
  opacity: 0.75;
}

.inner-bg {
  padding: 50px 3px 120px 0;
}

.form-box {
  margin-top: 10px;
}

/* Encabezado de la caja: el mensaje ocupa todo el ancho bajo el titulo y la
   llave va en la esquina (style.css flotaba el titulo y heredaba line-height
   de 30px) */
.form-top {
  position: relative;
  background: var(--ink-card);
  border-radius: 10px 10px 0 0;
  padding: 0 28px 18px 28px;
  border-bottom: 1px solid var(--ink-border-light);
}

.form-top-left {
  float: none;
  width: auto;
  padding-top: 28px;
}

.form-top-left h3 {
  padding-right: 44px;
  font-weight: 600;
  color: var(--ink-text-heading);
  font-size: 22px;
  margin-top: 0;
}

.form-top-left p {
  color: var(--ink-text-muted);
  font-size: 13.5px;
  line-height: 1.5;
}

.form-top-right {
  position: absolute;
  top: 24px;
  right: 28px;
  width: auto;
  font-size: 32px;
  line-height: 1;
  padding-top: 4px;
}

.form-top-right i {
  color: var(--ink-primary);
  opacity: 0.3;
}

.form-top #mensajeError,
.form-top #mensajeOK {
  line-height: 1.5;
  text-align: left;
}

.form-bottom {
  background: var(--ink-surface);
  border-radius: 0 0 10px 10px;
  padding: 20px 28px 28px 28px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.login-form .form-control,
.form-bottom input[type="text"],
.form-bottom input[type="password"] {
  height: 48px;
  border: 2px solid var(--ink-border);
  border-radius: 8px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 400;
  color: var(--ink-text);
  background: var(--ink-input);
  line-height: 48px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.login-form .form-control:focus,
.form-bottom input[type="text"]:focus,
.form-bottom input[type="password"]:focus {
  border-color: var(--ink-accent) !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
  outline: none;
}

.login-form .form-control::placeholder {
  color: var(--ink-text-faint);
  font-weight: 300;
}

/* Boton Ingresar (trae background inline #545096) */
.form-bottom form button.btn {
  width: 100%;
  height: 48px;
  line-height: 48px;
  padding: 0 20px;
  margin-top: 4px;
  background: linear-gradient(135deg, var(--ink-primary) 0%, var(--ink-primary-dark) 100%) !important;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.form-bottom form button.btn:hover,
.form-bottom form button.btn:focus {
  opacity: 1 !important;
  color: #ffffff;
  outline: none;
  box-shadow: 0 6px 20px rgba(79, 70, 229, 0.45);
  transform: translateY(-1px);
  background: linear-gradient(135deg, var(--ink-primary-hover) 0%, var(--ink-primary-dark) 100%) !important;
}

.form-bottom form button.btn:active {
  transform: translateY(0);
}

/* Enlace "Olvido de password" */
.form-bottom form > a {
  display: inline-block;
  margin-top: 14px;
  color: var(--ink-primary) !important;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
}

.form-bottom form > a:hover {
  color: var(--ink-primary-hover) !important;
  text-decoration: none;
}

/* Modal de recuperacion de clave */
body:has(.top-content) .modal-body {
  text-align: left;
}

body:has(.top-content) .modal-footer .btn {
  height: auto;
  line-height: 1.5;
  padding: 8px 20px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
}

/* form-elements.css pinta todo button.btn de rojo #CD1334 y verde al foco */
body:has(.top-content) .modal-footer .btn {
  background: var(--ink-card);
  border: 1px solid var(--ink-input-border);
  color: var(--ink-text-label);
}

body:has(.top-content) .modal-footer .btn:hover,
body:has(.top-content) .modal-footer .btn:focus,
body:has(.top-content) .modal-footer .btn:active {
  opacity: 1;
  background: var(--ink-surface-alt);
  color: var(--ink-text-heading);
}

body:has(.top-content) .modal-footer #enviar,
body:has(.top-content) .modal-footer #enviar:focus,
body:has(.top-content) .modal-footer #enviar:active {
  background: var(--ink-primary);
  border-color: var(--ink-primary);
  color: #ffffff;
}

body:has(.top-content) .modal-footer #enviar:hover {
  background: var(--ink-primary-hover);
  border-color: var(--ink-primary-hover);
}

@media (max-width: 767px) {
  .inner-bg {
    padding: 30px 0 60px 0;
  }

  .top-content .text h1 {
    font-size: 30px;
  }

  .form-top,
  .form-bottom {
    padding-left: 20px;
    padding-right: 20px;
  }

  .form-top-right {
    right: 20px;
  }
}

/* ==========================================================================
   17. MODO OSCURO
   body[data-theme="dark"] lo pone el boton #themeToggle de la barra superior
   (preferencia en localStorage "mitta-theme"). El menu lateral queda oscuro
   en ambos modos.
   ========================================================================== */
/* Boton de modo oscuro (button#themeToggle en fij_encabezado.html) */
.main-header .navbar .theme-toggle-item {
  display: flex;
  align-items: center;
}

.theme-toggle-btn {
  background: none;
  border: none;
  color: var(--ink-text-label);
  font-size: 17px;
  cursor: pointer;
  padding: 7px 10px;
  margin: 0 4px;
  border-radius: 6px;
  line-height: 1;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.theme-toggle-btn:hover {
  background-color: var(--ink-surface-alt);
  color: var(--ink-primary);
}

.theme-toggle-btn:focus {
  outline: none;
}

.theme-toggle-btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
}

body[data-theme="dark"] {
  --ink-surface: #1e293b;
  --ink-surface-alt: #0f172a;
  --ink-card: #1e293b;
  --ink-input: #0f172a;
  --ink-input-border: #334155;
  --ink-disabled: #172033;
  --ink-border: #334155;
  --ink-border-light: #273449;
  --ink-text: #e2e8f0;
  --ink-text-heading: #f1f5f9;
  --ink-text-muted: #94a3b8;
  --ink-text-faint: #64748b;
  --ink-text-label: #cbd5e1;
  color: var(--ink-text);
  background-color: var(--ink-surface-alt);
}

body[data-theme="dark"] .theme-toggle-btn {
  color: var(--ink-text-muted);
}

body[data-theme="dark"] .theme-toggle-btn:hover {
  background-color: rgba(255, 255, 255, 0.06);
  color: var(--ink-warning);
}

body[data-theme="dark"] .main-header .navbar .nav > li > a:hover,
body[data-theme="dark"] .main-header .navbar .nav > li > a:focus,
body[data-theme="dark"] .main-header .navbar .nav .open > a,
body[data-theme="dark"] .main-header .navbar .sidebar-toggle:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

/* Cajas y tarjetas */
body[data-theme="dark"] .box .box {
  background: rgba(255, 255, 255, 0.02);
}

body[data-theme="dark"] .content-wrapper .card-header,
body[data-theme="dark"] .modal-footer {
  background: rgba(255, 255, 255, 0.03);
}

body[data-theme="dark"] .small-box {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Formularios */
body[data-theme="dark"] select.form-control:not([multiple]):not([size]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8.825L0.375 3.2l.85-.85L6 7.125 10.775 2.35l.85.85L6 8.825z'/%3E%3C/svg%3E");
}

body[data-theme="dark"] select option {
  background-color: var(--ink-card);
  color: var(--ink-text);
}

/* Campos de solo lectura con style="background-color:white" en ~50 plantillas */
body[data-theme="dark"] .form-control[style*="background-color:white"],
body[data-theme="dark"] .form-control[style*="background-color: white"],
body[data-theme="dark"] .form-control[style*="background: white"] {
  background-color: var(--ink-input) !important;
}

body[data-theme="dark"] .input-group .input-group-addon {
  background-color: rgba(255, 255, 255, 0.04);
  color: var(--ink-accent-soft);
}

/* Tablas */
body[data-theme="dark"] .content-wrapper .table > thead > tr > th {
  background-color: rgba(255, 255, 255, 0.04);
}

body[data-theme="dark"] .content-wrapper .tabla-responsiva .table > thead > tr > th {
  background-color: var(--ink-primary-dark);
  border-color: var(--ink-primary);
  color: #ffffff;
}

body[data-theme="dark"] .content-wrapper .table-hover > tbody > tr:hover > td {
  background-color: rgba(255, 255, 255, 0.04);
}

body[data-theme="dark"] .content-wrapper .table-striped > tbody > tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.03);
}

body[data-theme="dark"] .btn_letra_azul,
body[data-theme="dark"] .btn_letra_azul:hover,
body[data-theme="dark"] .btn_letra_azul:focus {
  color: var(--ink-accent-soft);
}

body[data-theme="dark"] .content-wrapper .table th.tabla_abajo {
  background-color: rgba(255, 255, 255, 0.03);
}

/* Mensajes */
body[data-theme="dark"] #mensajeError:not(:empty),
body[data-theme="dark"] .callout.callout-danger,
body[data-theme="dark"] .alert-danger {
  background: #451a1a !important;
  color: #fca5a5 !important;
}

body[data-theme="dark"] #mensajeOK:not(:empty),
body[data-theme="dark"] .callout.callout-success,
body[data-theme="dark"] .alert-success {
  background: #14332a !important;
  color: #6ee7b7 !important;
}

body[data-theme="dark"] .callout.callout-warning,
body[data-theme="dark"] .alert-warning {
  background: #451a00 !important;
  color: #fcd34d !important;
}

body[data-theme="dark"] .callout.callout-info,
body[data-theme="dark"] .alert-info {
  background: #1e2a4a !important;
  color: #93c5fd !important;
}

/* Calendario (bootstrap-datepicker) */
body[data-theme="dark"] .datepicker {
  color: var(--ink-text);
}

body[data-theme="dark"] .datepicker table tr td.day:hover,
body[data-theme="dark"] .datepicker table tr td.focused,
body[data-theme="dark"] .datepicker .datepicker-switch:hover,
body[data-theme="dark"] .datepicker .prev:hover,
body[data-theme="dark"] .datepicker .next:hover {
  background: rgba(255, 255, 255, 0.08);
}

body[data-theme="dark"] .datepicker-dropdown:after {
  border-bottom-color: var(--ink-card);
}

/* Enlace del pie con color inline #006c90 */
body[data-theme="dark"] .main-footer a[style*="006c90"] {
  color: var(--ink-accent-soft) !important;
}

/* Capa de "cargando" */
body[data-theme="dark"] #cargando {
  background-color: var(--ink-surface-alt) !important;
}

/* Fichas de tabla en celular (gama_leasing.css pinta #f0f0f0 la primera celda) */
@media screen and (max-width: 600px) {
  body[data-theme="dark"] .content-wrapper .table > tbody > tr > td:first-child {
    background: rgba(255, 255, 255, 0.05);
  }
}

/* Transicion suave al cambiar de tema */
body,
.content-wrapper,
.main-header .navbar,
.box,
.table > tbody > tr > td,
.modal-content,
.main-footer {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Panel (templates/panel.html): boton del id de documento en "Listado mis documentos
   recientes" (class="btn btn-md", sin color propio): sin el gris del navegador */
body[data-theme="dark"] .content-wrapper .table .btn.btn-md {
  background-color: transparent;
  color: var(--ink-text);
  border-color: var(--ink-border);
}

/* DataTables (jquery.dataTables.css pinta de blanco cada <tr> y la columna ordenada):
   Clausulas, Correos, Empresas, Perfiles, Plantillas, Procesos, Certificados a Adjuntar */
body[data-theme="dark"] table.dataTable tbody tr {
  background-color: var(--ink-card);
}

body[data-theme="dark"] table.dataTable.stripe tbody tr.odd,
body[data-theme="dark"] table.dataTable.display tbody tr.odd {
  background-color: var(--ink-surface-alt);
}

body[data-theme="dark"] table.dataTable tbody tr:hover {
  background-color: var(--ink-border-light);
}

/* columna por la que se ordena: sin el gris claro de DataTables (sus selectores llevan mas clases) */
body[data-theme="dark"] table.dataTable tbody tr > .sorting_1,
body[data-theme="dark"] table.dataTable tbody tr > .sorting_2,
body[data-theme="dark"] table.dataTable tbody tr > .sorting_3 {
  background-color: transparent !important;
}