@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');
/* Marco del sistema (estructura/menu.php + estructura/pie.php): header, barra lateral, ribbon y pie.
   Diseño "teal" (barra lateral verde azulado oscuro, opción activa aqua con brillo y punto que late).
   Se carga desde menu.php, así que aplica a todas las pantallas. Solo pisa estilos de SmartAdmin;
   no cambia medidas del layout (header 49px, barra 220px / 45px minimizada) para no mover el contenido. */
:root {
  --ks-fondo: #f8fbfc;
  --ks-surface: #ffffff;
  --ks-borde: #d9e4e8;
  --ks-texto: #0f262e;
  --ks-texto-2: #3d5961;
  --ks-muted: #6b8189;
  --ks-acento: #1a7a89;
  --ks-acento-suave: #ebf3f4;
  --ks-lateral: #0c3945;
  --ks-lateral-hover: #1c4854;
  --ks-lateral-texto: #d7e6e9;
  --ks-lateral-tenue: rgba(215, 230, 233, .55);
  --ks-lateral-linea: #1c4854;
  --ks-primario: #22a0b4;
  --ks-brillo: 0 0 0 4px rgba(34, 160, 180, .15);
  --ks-fuente: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.demo, #demo-setting { display: none !important; }
#header, #left-panel { font-family: var(--ks-fuente); }

/* ── Header ───────────────────────────────────────── */
#header {
  background: var(--ks-surface) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--ks-borde);
  box-shadow: 0 1px 2px rgba(12, 57, 69, .04), 0 4px 16px rgba(12, 57, 69, .05);
}
#header .btn-header > :first-child > a {
  background: var(--ks-surface);
  background-image: none;
  border: 1px solid var(--ks-borde);
  border-radius: 8px;
  color: var(--ks-texto-2);
  font-size: 15px;
  box-shadow: none;
  transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s;
}
#header .btn-header > :first-child > a:hover {
  background: var(--ks-acento-suave);
  border-color: #b9d3d9;
  color: var(--ks-acento);
  box-shadow: none;
}
#header .btn-header > :first-child > a:active { background: var(--ks-acento-suave); background-image: none; box-shadow: var(--ks-brillo); }
#header .btn-header.transparent a { border: 0 !important; background: none !important; color: var(--ks-texto-2); }
#header .btn-header.transparent a:hover { color: var(--ks-acento); }
#header #Ticket a { cursor: pointer !important; }
#hide-menu i { color: var(--ks-texto-2); }
#header .dropdown-menu { border: 1px solid var(--ks-borde); border-radius: 10px; box-shadow: 0 8px 32px rgba(12, 57, 69, .12); }

/* Marca (arriba de la barra lateral, mismo fondo que ella) */
#header #logo-group {
  width: 220px;
  height: 49px;
  margin: 0;
  padding: 0 14px;
  box-sizing: border-box;
  background: var(--ks-lateral);
  border-bottom: 1px solid var(--ks-lateral-linea);
}
#header #logo-group > span.ks-marca {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 49px;
  float: none;
  box-sizing: border-box;
}
.ks-marca-icono {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 32px !important;
  height: 32px !important;
  flex: 0 0 32px;
  border-radius: 8px;
  background: var(--ks-primario);
  color: #fff;
  font-size: 15px;
  box-shadow: var(--ks-brillo);
}
/* Con logo del cliente: la imagen ocupa el cuadro completo, sin fondo aqua */
.ks-marca-icono.ks-marca-logo { background: #fff; overflow: hidden; padding: 0; }
.ks-marca-logo img { width: 32px; height: 32px; object-fit: contain; display: block; }
.ks-marca-texto { display: flex !important; flex-direction: column; min-width: 0; line-height: 1.15; }
.ks-marca-texto b { color: #fff; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.ks-marca-texto small {
  color: var(--ks-lateral-tenue);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .1em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Barra lateral ────────────────────────────────── */
aside#left-panel { background: var(--ks-lateral) !important; border-right: 1px solid var(--ks-lateral-linea); }

/* Usuario: tarjeta suave como la del demo */
#left-panel .login-info {
  height: auto;
  width: auto;
  margin: 12px 10px 4px !important;
  border: 1px solid var(--ks-lateral-linea);
  border-radius: 10px;
  box-shadow: none;
  background: var(--ks-lateral-hover);
}
#left-panel .login-info > span { display: block; height: auto; border-bottom: 0; padding: 8px 10px; }
#left-panel .login-info a { display: flex; align-items: center; margin: 0; color: var(--ks-lateral-texto); }
#left-panel .login-info a:hover { color: #fff; }
#left-panel .login-info a span { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#left-panel .login-info img { width: 26px; height: 26px; border: 0; border-radius: 50%; box-shadow: 0 0 0 2px var(--ks-primario); margin-right: 9px; }

/* Título de sección */
#left-panel nav > ul::before {
  content: "Menú";
  display: block;
  padding: 12px 22px 8px;
  color: var(--ks-lateral-tenue);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
}
#left-panel nav > ul { padding: 0 0 40px; }

#left-panel nav ul li a {
  color: var(--ks-lateral-texto);
  font-size: 13.5px;
  font-weight: 500;
  border-radius: 8px;
  transition: background-color .2s, color .2s, box-shadow .2s;
}
#left-panel nav > ul > li > a { margin: 2px 10px; padding: 9px 12px; }
#left-panel nav > ul > li > a > i {
  width: 18px;
  font-size: 15px;
  text-align: center;
  color: var(--ks-lateral-tenue);
  margin-right: 8px;
  vertical-align: middle;
  transition: color .2s;
}
/* Nombres largos: bajan de línea antes de chocar con el "+" del submenú */
#left-panel nav > ul > li > a > .menu-item-parent {
  display: inline-block;
  max-width: 128px;
  vertical-align: middle;
  line-height: 1.25;
}
#left-panel nav ul li a:hover { color: #fff; background: var(--ks-lateral-hover); }
#left-panel nav ul li a:hover > i { color: #fff; }
#left-panel nav ul li a:active { background: var(--ks-lateral-hover) !important; }
#left-panel nav ul li.open > a,
#left-panel nav ul li.open > a b { color: #fff !important; }
#left-panel nav ul li.open > a > i { color: var(--ks-primario); }
#left-panel nav ul b { color: var(--ks-lateral-tenue); }

/* Opción activa: pastilla aqua con brillo y punto que late (en vez de la flecha de SmartAdmin) */
#left-panel nav ul li.active > a {
  color: #fff !important;
  background: var(--ks-primario) !important;
  box-shadow: var(--ks-brillo);
  font-weight: 600;
  padding-right: 26px;
}
#left-panel nav ul li.active > a > i { color: #fff; }
#left-panel nav ul li.active > a:before { content: none !important; }
#left-panel nav ul li.active > a::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: #fff;
  animation: ks-pulso 2s cubic-bezier(.4, 0, .6, 1) infinite;
}
@keyframes ks-pulso { 50% { opacity: .5; } }

/* Submenús: sin franja oscura, con una línea guía a la izquierda */
#left-panel nav ul ul {
  background: transparent;
  margin: 2px 10px 6px 30px;
  padding: 0 0 0 8px;
  border-left: 1px solid var(--ks-lateral-linea);
}
#left-panel nav ul ul li > a { margin: 1px 0; padding: 7px 10px 7px 12px; font-size: 13px; color: rgba(215, 230, 233, .8); }
#left-panel nav ul ul li > a:hover { background: var(--ks-lateral-hover); color: #fff; }
#left-panel nav ul ul ul { margin: 2px 0 4px 12px; }
#left-panel nav > ul > li > ul::before,
#left-panel nav > ul ul li::before { display: none; }
#left-panel nav > ul > li:last-child.open { border-bottom: 0; }

/* Contadores (pedidos, lotes…) */
#left-panel .inbox-badge,
#left-panel nav .badge {
  background: var(--ks-primario);
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
}
#left-panel nav ul li.active > a .badge { background: #fff; color: var(--ks-lateral); }

/* Botón para minimizar */
#left-panel .minifyme {
  background: var(--ks-lateral-hover);
  border-bottom: 0;
  color: var(--ks-lateral-tenue);
  border-radius: 8px 0 0 8px;
}
#left-panel .minifyme:hover { background: var(--ks-primario); color: #fff; }

/* Menú minimizado: solo iconos, tooltips y submenús flotantes */
.minified #left-panel .login-info { margin: 8px 4px !important; }
.minified #left-panel .login-info > span { padding: 6px 3px; }
.minified #left-panel nav > ul::before { content: none; }
.minified #left-panel nav > ul > li { border: 0; }
.minified #left-panel nav > ul > li > a { margin: 2px 4px; padding: 9px 7px; }
.minified #left-panel nav > ul > li > a > i { margin: 0; }
.minified #left-panel nav ul li.active > a { padding-right: 7px; }
.minified #left-panel nav ul li.active > a::after { content: none; }
.minified #left-panel nav > ul > li > a > .menu-item-parent {
  display: none;
  max-width: none;
  line-height: 38px;
  background: var(--ks-surface);
  color: var(--ks-texto);
  font-weight: 600;
  border: 1px solid var(--ks-borde);
  border-radius: 0 8px 8px 0;
  box-shadow: 0 8px 32px rgba(12, 57, 69, .12);
}
.minified #left-panel nav > ul > li > ul {
  margin: 0;
  padding: 4px;
  background: var(--ks-lateral);
  border: 1px solid var(--ks-lateral-linea);
  border-radius: 0 8px 8px 0;
  box-shadow: 0 8px 32px rgba(12, 57, 69, .25);
}
.minified #left-panel nav > ul > li > ul > li { background: transparent; }

/* ── Ribbon (migas de pan) ────────────────────────── */
#ribbon {
  background: var(--ks-surface);
  border-bottom: 1px solid var(--ks-borde);
}
#ribbon .breadcrumb,
#ribbon .breadcrumb a { color: var(--ks-muted) !important; font-size: 12px; }
#ribbon .breadcrumb a:hover { color: var(--ks-acento) !important; }
#ribbon .breadcrumb li:last-child,
#ribbon .breadcrumb > .active { color: var(--ks-texto) !important; font-weight: 600; }
#ribbon .breadcrumb > li + li:before { color: #b9cdd3; }

/* ── Pie ──────────────────────────────────────────── */
.page-footer {
  background: var(--ks-surface);
  border-top: 1px solid var(--ks-borde);
}
.page-footer .txt-color-white,
.page-footer .ks-pie { color: var(--ks-muted) !important; font-size: 12px; }
.page-footer .ks-pie b { color: var(--ks-texto-2); font-weight: 700; }

/* ══ Tema pronto para las pantallas con diseño de Platillos (#content.pl, catalogosAsucursales/platillos.css) ══
   Solo en c2v1: cambia la paleta azul por la teal del menú y la fuente a DM Sans. Este archivo se carga
   desde menu.php (después del <head> de cada página), así que pisa platillos.css sin tocarlo. */
.pl {
  --pl-fondo: var(--ks-fondo);
  --pl-surface: var(--ks-surface);
  --pl-borde: #dde7ea;
  --pl-borde-2: #ecf2f4;
  --pl-texto: var(--ks-texto);
  --pl-texto-2: var(--ks-texto-2);
  --pl-muted: var(--ks-muted);
  --pl-acento: var(--ks-acento);
  --pl-acento-2: #12606c;
  --pl-acento-suave: var(--ks-acento-suave);
  --pl-radio: 12px;
  font-family: var(--ks-fuente);
}
.pl .form-control, .pl .btn, .pl .select2-container, .pl .modal, .pl table { font-family: var(--ks-fuente); }
.select2-container .select2-dropdown { font-family: var(--ks-fuente); }
#content.pl { padding: 22px 24px 48px; }

/* Encabezado */
.pl-head h1 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.pl-head h1 .fa { display: inline-grid; place-items: center; width: 38px; height: 38px; margin-right: 12px; border-radius: 10px;
                  background: var(--ks-acento-suave); color: var(--ks-acento); font-size: 17px; vertical-align: -6px; }
.pl-head p { margin-top: 6px; }

/* Tarjetas (contexto, indicadores, pestañas, tablas) con sombra suave */
.pl-contexto, .pl-stat, .pl .pl-tabs, .pl .pl-tab-body, .pl-kpi, .pl-agregar, .pl .cmp-card, .pl .cmp-panel {
  box-shadow: 0 1px 2px rgba(12, 57, 69, .04), 0 4px 16px rgba(12, 57, 69, .04);
}
.pl-stat { padding: 16px 18px 16px 20px; }
.pl-stat .num { font-size: 26px; letter-spacing: -.02em; }
.pl-stat .txt { color: var(--ks-muted); }
.pl-stat { --k: var(--ks-primario); }

/* Campos */
.pl .form-control { border-color: #d3e0e4; border-radius: 8px; }
.pl .form-control:focus { border-color: var(--ks-primario); box-shadow: var(--ks-brillo) !important; }
.pl .input-group-addon { border-color: #d3e0e4; background: #f3f8f9; }

/* Botones */
.pl .btn { border-radius: 8px; }
.pl .btn-default { border-color: #d3e0e4; }
.pl .btn-default:hover, .pl .btn-default:focus { background: var(--ks-acento-suave); border-color: #b9d3d9; color: var(--ks-acento); }
.pl .btn-primary { background: var(--ks-acento); border-color: var(--ks-acento); box-shadow: 0 1px 2px rgba(12, 57, 69, .12); }
.pl .btn-primary:hover, .pl .btn-primary:focus { background: #12606c; border-color: #12606c; }
.pl .btn:focus-visible { box-shadow: var(--ks-brillo); }

/* Tablas */
.pl .table > thead > tr > th { background: #f6fafb; color: var(--ks-muted); }
.pl .table-hover > tbody > tr:hover > td, .pl .table > tbody > tr:hover > td { background: #f3f9fa; }
.pl .pagination > .active > a, .pl .pagination > .active > a:hover, .pl .pagination > .active > a:focus { background: var(--ks-acento); border-color: var(--ks-acento); }

/* select2 */
.pl .select2-container .select2-selection--single { border-color: #d3e0e4; border-radius: 8px; }
.pl .select2-container--open .select2-selection--single, .pl .select2-container--focus .select2-selection--single { border-color: var(--ks-primario); box-shadow: var(--ks-brillo); }
.select2-container .select2-results__option--highlighted[aria-selected] { background: var(--ks-acento-suave) !important; color: var(--ks-texto) !important; }
.select2-container .select2-dropdown { border-color: #d3e0e4; border-radius: 10px; box-shadow: 0 12px 32px rgba(12, 57, 69, .14); }

/* Modales */
.pl .modal-content { border-radius: 16px; box-shadow: 0 24px 64px rgba(12, 57, 69, .28); }

/* ══ Barra superior (menu.php): botón de menú, migas de pan, tickets y usuario ══ */
#header { display: flex; align-items: center; height: 56px; padding-right: 16px; font-family: var(--ks-fuente); }
#header > * { float: none !important; }
#header #logo-group, #header #logo-group > span.ks-marca { height: 56px; flex: 0 0 auto; }
#header .ks-btn-menu { flex: 0 0 auto; margin: 0 4px 0 12px !important; }
#header .ks-btn-menu > :first-child > a { width: 34px; height: 34px; margin: 0; line-height: 32px; text-align: center; padding: 0; }
.ks-migas { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 0 10px; overflow: hidden; white-space: nowrap; font-size: 13px; }
.ks-migas a, .ks-migas span { color: var(--ks-muted); text-decoration: none !important; overflow: hidden; text-overflow: ellipsis; }
.ks-migas a:hover { color: var(--ks-acento); }
.ks-migas .actual { color: var(--ks-texto); font-weight: 700; }
.ks-migas .ks-miga-sep { flex: 0 0 auto; color: #b9cdd3; font-size: 12px; }
.ks-miga-inicio { flex: 0 0 auto; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--ks-acento-suave); color: var(--ks-acento) !important; }
#header .ks-barra-derecha { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; margin-left: auto; height: 56px; }
.ks-barra-derecha .btn-header { margin: 0 !important; }
.ks-barra-derecha .btn-header > :first-child > a { width: 36px; height: 36px; margin: 0 !important; line-height: 36px; text-align: center; padding: 0; }
.ks-btn-ticket { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border: 1px solid #f3d6a6; border-radius: 999px;
                 background: #fff8ec; color: #9a5b0b; font: 600 13px var(--ks-fuente); cursor: pointer; transition: background-color .2s, box-shadow .2s; }
.ks-btn-ticket:hover { background: #ffefd2; }
.ks-btn-ticket:focus-visible { outline: 0; box-shadow: 0 0 0 4px rgba(245, 158, 11, .2); }
.ks-usuario > a { display: flex; align-items: center; gap: 10px; height: 44px; padding: 4px 10px 4px 4px; border: 1px solid transparent; border-radius: 999px;
                  color: var(--ks-texto) !important; text-decoration: none !important; transition: background-color .2s, border-color .2s; }
.ks-usuario > a:hover, .ks-usuario.open > a { background: var(--ks-acento-suave); border-color: #cfe2e6; }
.ks-avatar { flex: 0 0 auto; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
             background: linear-gradient(135deg, var(--ks-primario), var(--ks-acento)); color: #fff; font-weight: 700; font-size: 15px; }
.ks-usuario-texto { display: flex; flex-direction: column; line-height: 1.2; max-width: 180px; }
.ks-usuario-texto b { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ks-usuario-texto small { font-size: 11px; color: var(--ks-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ks-usuario-flecha { color: var(--ks-muted); }
#header .ks-usuario-menu { min-width: 220px; margin-top: 8px; padding: 6px; font-family: var(--ks-fuente); }
.ks-usuario-menu > li > a { padding: 9px 12px; border-radius: 8px; color: var(--ks-texto-2); font-size: 13px; }
.ks-usuario-menu > li > a .fa { width: 18px; color: var(--ks-muted); }
.ks-usuario-menu > li > a:hover { background: var(--ks-acento-suave); color: var(--ks-acento); }
.ks-usuario-menu > li#logout { float: none; margin: 0; padding: 0; }
.ks-usuario-menu > li#logout > a:hover { background: #fdecec; color: #c02626; }
.ks-usuario-menu > li#logout > a:hover .fa { color: #c02626; }
.ks-usuario-cab { padding: 8px 12px 10px; }
.ks-usuario-cab b, .ks-usuario-cab small { display: block; }
.ks-usuario-cab b { color: var(--ks-texto); font-size: 14px; }
.ks-usuario-cab small { color: var(--ks-muted); font-size: 12px; }
/* La barra mide 56px: el menú lateral empieza debajo */
#left-panel { padding-top: 56px; }
/* Las migas viven en la barra: la franja vieja de cada pantalla se oculta */
#ribbon { display: none !important; }
@media (max-width: 979px) {
  .ks-usuario-texto, .ks-usuario-flecha, .ks-btn-ticket span { display: none; }
  .ks-btn-ticket { width: 36px; padding: 0; justify-content: center; }
}
@media (max-width: 640px) { .ks-migas { display: none; } }

/* ══ Tema global para las pantallas que aún usan SmartAdmin (sin .pl) ══
   Los selectores .pl de platillos.css y del tema de arriba tienen más peso, así que no se pisan. */
body, #main, #content, .jarviswidget, .modal, .smart-form, .table, .form-control, .btn, .popover, .tooltip, .dropdown-menu, .sweet-alert {
  font-family: var(--ks-fuente);
}
html, body, #main { background: var(--ks-fondo) !important; }
#content { padding: 22px 24px 48px; }
h1.page-title { margin: 6px 0 18px; font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--ks-texto) !important; }
h1.page-title .fa { color: var(--ks-acento); }
h1.page-title span { font-size: 15px; font-weight: 500; color: var(--ks-muted); }
.txt-color-blueDark { color: var(--ks-texto) !important; }

/* Widgets → tarjetas */
.jarviswidget { margin-bottom: 18px; border-radius: 12px; overflow: hidden; background: #fff;
                box-shadow: 0 1px 2px rgba(12, 57, 69, .04), 0 4px 16px rgba(12, 57, 69, .05); }
.jarviswidget > div { border: 1px solid var(--ks-borde) !important; background: #fff; }
.jarviswidget > header + div { border-top: 0 !important; }
.jarviswidget > div:first-child { border-radius: 12px; }
.jarviswidget > header { height: 48px; border: 1px solid var(--ks-borde) !important; border-bottom-color: #ecf2f4 !important;
                         border-radius: 12px 12px 0 0; background: #fff !important; color: var(--ks-texto) !important; }
.jarviswidget > header > h2 { height: 48px; line-height: 48px; margin-left: 14px; font-size: 14px; font-weight: 700; color: var(--ks-texto) !important; }
.jarviswidget > header > .widget-icon { height: 48px; line-height: 48px; color: var(--ks-acento) !important; }
.jarviswidget > header > .widget-icon > i { color: var(--ks-acento) !important; }
.jarviswidget > header .widget-toolbar { height: 48px; line-height: 48px; border-left: 1px solid var(--ks-borde) !important; }
.jarviswidget > header .jarviswidget-ctrls a { color: var(--ks-muted) !important; }
.jarviswidget .widget-body { padding: 16px 18px; }
.jarviswidget .widget-body.no-padding, .jarviswidget .widget-body.p-0 { padding: 0; }
.jarviswidget legend, #content legend { padding: 4px 0 8px; margin-bottom: 14px; border-bottom: 1px solid var(--ks-borde); font-size: 15px; font-weight: 700; color: var(--ks-texto); }

/* Botones */
.btn { border-radius: 8px; font-weight: 600; transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s; }
.btn:focus, .btn:active:focus { outline: 0; box-shadow: var(--ks-brillo); }
.btn-default { background: #fff; border-color: #d3e0e4; color: var(--ks-texto); }
.btn-default:hover, .btn-default:focus { background: var(--ks-acento-suave); border-color: #b9d3d9; color: var(--ks-acento); }
.btn-primary, .btn-info { background: var(--ks-acento); border-color: var(--ks-acento); color: #fff; }
.btn-primary:hover, .btn-primary:focus, .btn-info:hover, .btn-info:focus { background: #12606c; border-color: #12606c; color: #fff; }
.btn-success { background: #16a34a; border-color: #16a34a; }
.btn-success:hover, .btn-success:focus { background: #15803d; border-color: #15803d; }
.btn-danger { background: #dc2626; border-color: #dc2626; }
.btn-danger:hover, .btn-danger:focus { background: #b91c1c; border-color: #b91c1c; }
.btn-warning { background: #f59e0b; border-color: #f59e0b; color: #fff; }
.btn-warning:hover, .btn-warning:focus { background: #d97706; border-color: #d97706; color: #fff; }
.btn-lg { border-radius: 10px; }
.jarviswidget .form-actions { margin: 18px -18px -16px; padding: 14px 18px; border-top: 1px solid var(--ks-borde); background: #f8fbfc; text-align: right; }

/* Campos */
.form-control, .smart-form .input input, .smart-form .select select, .smart-form .textarea textarea {
  border-color: #d3e0e4 !important; border-radius: 8px !important; box-shadow: none; color: var(--ks-texto);
}
.form-control:focus, .smart-form .input input:focus, .smart-form .select select:focus, .smart-form .textarea textarea:focus {
  border-color: var(--ks-primario) !important; box-shadow: var(--ks-brillo) !important;
}
.control-label, .smart-form .label { color: var(--ks-texto-2); font-weight: 600; }
.input-group-addon { border-color: #d3e0e4; background: #f3f8f9; color: var(--ks-texto-2); }
.input-group .form-control:not(:first-child):not(:last-child) { border-radius: 0 !important; }
.input-group .form-control:first-child:not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.input-group .form-control:last-child:not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.smart-form footer { background: #f8fbfc; border-top: 1px solid var(--ks-borde); }
.select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple { border-color: #d3e0e4; border-radius: 8px; }
.bootstrap-select > .dropdown-toggle { border-radius: 8px; }

/* Tablas */
.table { color: var(--ks-texto); }
.table > thead > tr > th { background: #f6fafb; color: var(--ks-muted); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
                           border-bottom: 1px solid var(--ks-borde) !important; }
.table-bordered, .table-bordered > thead > tr > th, .table-bordered > tbody > tr > td { border-color: #e4edf0 !important; }
.table > tbody > tr > td { vertical-align: middle; }
.table-striped > tbody > tr:nth-of-type(odd) { background: #fbfdfd; }
.table-hover > tbody > tr:hover > td, .table-hover > tbody > tr:hover { background: #f3f9fa; }
.dt-toolbar, .dt-toolbar-footer { background: #fff; border-color: var(--ks-borde) !important; }
.pagination > li > a, .pagination > li > span { color: var(--ks-texto-2); border-color: #e0eaed; }
.pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > a:focus, .pagination > .active > span { background: var(--ks-acento); border-color: var(--ks-acento); color: #fff; }

/* Pestañas */
.nav-tabs { border-bottom-color: var(--ks-borde); }
.nav-tabs > li > a { border-radius: 8px 8px 0 0; color: var(--ks-texto-2); font-weight: 600; }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { border-top: 2px solid var(--ks-acento) !important; color: var(--ks-acento); box-shadow: none; }

/* Modales */
.modal-content { border: 0; border-radius: 16px; box-shadow: 0 24px 64px rgba(12, 57, 69, .28); overflow: hidden; }
.modal-header { padding: 16px 20px; border-bottom: 1px solid var(--ks-borde); background: #fff; }
.modal-header .modal-title { font-weight: 700; color: var(--ks-texto); }
.modal-footer { padding: 12px 20px; border-top: 1px solid var(--ks-borde); background: #f8fbfc; }
.modal-backdrop.in { opacity: .45; background: #0c2830; }

/* Alertas, etiquetas, paneles */
.alert { border: 1px solid transparent; border-left-width: 4px; border-radius: 10px; }
.alert-info { background: var(--ks-acento-suave); border-color: #cfe2e6; border-left-color: var(--ks-acento); color: var(--ks-texto-2); }
.alert-success { background: #eaf7ef; border-color: #c9ebd5; border-left-color: #16a34a; color: #166534; }
.alert-warning { background: #fef6e7; border-color: #f6dfb4; border-left-color: #d97706; color: #8a4b05; }
.alert-danger { background: #fdecec; border-color: #f6c9c9; border-left-color: #dc2626; color: #991b1b; }
.label, .badge { border-radius: 999px; font-weight: 700; }
.label-primary, .label-info { background: var(--ks-acento); }
.panel { border-color: var(--ks-borde); border-radius: 12px; box-shadow: 0 1px 2px rgba(12, 57, 69, .04); }
.panel-heading { border-radius: 12px 12px 0 0; }
.panel-default > .panel-heading { background: #f6fafb; border-color: var(--ks-borde); color: var(--ks-texto); }
.well { border-color: var(--ks-borde); border-radius: 12px; background: #f8fbfc; box-shadow: none; }

/* SweetAlert */
.sweet-alert { border-radius: 16px; }
.sweet-alert h2 { color: var(--ks-texto); font-weight: 700; }
.sweet-alert button { border-radius: 8px !important; font-weight: 600; }
.sweet-alert button.confirm { background-color: var(--ks-acento) !important; box-shadow: none !important; }
.sweet-alert button.cancel { background-color: #94a3b8 !important; }

/* Títulos con la fuente del tema (SmartAdmin fija Open Sans en h1-h6) */
#content h1, #content h2, #content h3, #content h4, #content h5, #content h6, .modal h4, .modal h5 { font-family: var(--ks-fuente); }
.dataTables_info { font-style: normal !important; color: var(--ks-muted); }

/* El usuario ya se muestra en la barra superior: se oculta la tarjeta repetida del menú lateral */
#left-panel .login-info { display: none; }