/* CRHub V8 CSS UNIFICADO · GLOBAL PANEL
   Generado para eliminar referencias v80xx/v81xx/v82xx/v83xx/v84xx/v85xx.
   Mantiene solo reglas visuales del módulo. */


/* ===== v8022_global_module_width_fix.css ===== */

/*
 * v802.2_global_module_width_fix
 * Ajuste global de ancho para rutas modulares /public/mod/*.
 * Solo visual: no cambia lógica, IDs, names, data-*, POST, JS, SQL ni permisos.
 */

:root{
  --kh-v8022-module-max: 1760px;
  --kh-v8022-module-pad: clamp(10px, 1.25vw, 22px);
}

html,
body{
  max-width:100%;
  overflow-x:hidden!important;
}

*,
*::before,
*::after{
  box-sizing:border-box;
}

body.kh-admin-body,
body.kh-top-menu-mode,
.app-wrapper,
.app-main,
.app-content,
.kh-content-header,
.container-fluid.kh-content,
.kh-content{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
}

body.kh-top-menu-mode .app-main,
body.kh-top-menu-mode .app-header{
  margin-left:0!important;
  max-width:100%!important;
}

.app-content{
  overflow-x:clip;
}

.container-fluid.kh-content,
.kh-content{
  padding-left:var(--kh-v8022-module-pad)!important;
  padding-right:var(--kh-v8022-module-pad)!important;
  overflow-x:clip;
}

.kh-content > *,
.app-content > *,
.row,
[class*="col-"],
.card,
.kh-card,
.kh-admin-card,
.modal-content,
.dropdown-menu{
  min-width:0!important;
  max-width:100%;
}

/* Contenedores creados en parches visuales V8: usar el ancho real disponible,
   no vw completo, porque vw no descuenta padding/menú/scrollbar. */
.kh-clientes-v8006,
.kh-clientes-v8007,
.kh-clientes-v8008,
.ws-orders-v8009,
.ws-form-v8009,
.workshop-boxes-v8009,
.orders-v3,
.workshop-shell,
body .pos-wrap.pos-pro-screen,
.pos-pro-screen,
.cash-v8020-page,
.rest-v8-module,
.kh-v8017-page,
.kh-v8017-shell,
.kh-v8016-page,
.kh-v8016-shell{
  width:100%!important;
  max-width:var(--kh-v8022-module-max)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  min-width:0!important;
}

/* Cuando el módulo ocupa pantalla completa, nunca debe pasar el ancho del contenedor. */
body.kh-pos-menu-hidden .pos-wrap.pos-pro-screen,
body .pos-wrap.pos-pro-screen{
  width:100%!important;
  max-width:100%!important;
}

/* Bootstrap/grid: evitar que columnas con contenido ancho empujen toda la página. */
.row{
  max-width:100%!important;
  margin-left:calc(var(--bs-gutter-x, 1.5rem) * -.5);
  margin-right:calc(var(--bs-gutter-x, 1.5rem) * -.5);
}

.d-flex,
.d-grid,
.grid,
[class*="-grid"],
[class*="-layout"],
[class*="-wrap"]{
  min-width:0;
}

/* Tablas: el scroll debe vivir dentro de la tabla, no en toda la página. */
.table-responsive,
.kh-table-responsive,
.pos-table-wrap,
.pos-pro-cart-table-wrap,
.orders-table-wrap,
.cash-table-wrap,
.rest-table-wrap{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  overflow-x:auto!important;
  -webkit-overflow-scrolling:touch;
}

.table{
  margin-bottom:0;
}

/* Formularios: respetar reglas de oro sin afectar nombres/IDs. */
.form-control,
.form-select,
textarea,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]){
  max-width:100%;
}

/* POS: si la pantalla no tiene espacio suficiente, el grid se compacta sin causar scroll horizontal. */
.pos-pro-screen .pos-pro-grid{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
}

@media (max-width: 1399.98px){
  .pos-pro-screen .pos-pro-grid{
    grid-template-columns: minmax(0, 1fr)!important;
  }
}

/* Headers/hero con acciones: permitir quiebre sano en resoluciones pequeñas. */
.kh-v8017-hero,
.kh-v8017-hero-cash,
.cash-v8020-page .kh-v8017-hero,
.rest-v8-module > .d-flex.justify-content-between,
.rest-v8-module > .d-flex.flex-wrap.justify-content-between,
.pos-pro-screen .pos-pro-topbar{
  max-width:100%!important;
  min-width:0!important;
  flex-wrap:wrap!important;
}

/* Menú superior: evitar overflow por enlaces largos. */
.kh-main-top-menu{
  max-width:100%!important;
  min-width:0!important;
}
.kh-main-top-menu .nav-link,
.kh-main-top-menu .dropdown-item{
  max-width:100%;
}

@supports not (overflow: clip){
  .app-content,
  .container-fluid.kh-content,
  .kh-content{
    overflow-x:hidden;
  }
}

@media (max-width: 767.98px){
  :root{--kh-v8022-module-pad:10px;}
  .container-fluid.kh-content,
  .kh-content{
    padding-left:10px!important;
    padding-right:10px!important;
  }
}




/* ===== v8023_menu_dropdown_overflow_fix.css ===== */

/*
 * v802.3_menu_dropdown_overflow_fix
 * Corrige el scroll horizontal dentro de dropdowns del menú superior causado por el fix global de ancho.
 * Solo visual: no cambia lógica, rutas, IDs, names, data-*, POST, JS, SQL ni permisos.
 */

/* El menú superior puede mantener su scroll propio si no cabe, pero sus dropdowns no deben heredar
   el max-width estrecho del item padre ni mostrar barra horizontal. */
.kh-main-top-menu .dropdown,
.app-header .dropdown,
.navbar .dropdown{
  position:relative;
}

.kh-main-top-menu .dropdown-menu,
.app-header .dropdown-menu,
.navbar .dropdown-menu{
  min-width:14rem!important;
  width:max-content!important;
  max-width:min(24rem, calc(100vw - 1.5rem))!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  scrollbar-width:thin;
  white-space:normal!important;
  z-index:1085!important;
}

.kh-main-top-menu .dropdown-menu .dropdown-item,
.app-header .dropdown-menu .dropdown-item,
.navbar .dropdown-menu .dropdown-item{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  line-height:1.25!important;
  padding:.58rem .9rem!important;
}

.kh-main-top-menu .dropdown-menu .dropdown-item i,
.app-header .dropdown-menu .dropdown-item i,
.navbar .dropdown-menu .dropdown-item i,
.kh-main-top-menu .dropdown-menu .dropdown-item .bi,
.app-header .dropdown-menu .dropdown-item .bi,
.navbar .dropdown-menu .dropdown-item .bi{
  flex:0 0 auto;
  margin-right:.42rem;
}

/* Separadores y headers dentro de menú sin empujar ancho. */
.kh-main-top-menu .dropdown-header,
.app-header .dropdown-header,
.navbar .dropdown-header{
  max-width:100%!important;
  white-space:normal!important;
}

.kh-main-top-menu .dropdown-divider,
.app-header .dropdown-divider,
.navbar .dropdown-divider{
  margin:.35rem 0;
}

/* Protección contra reglas globales que aplican max-width:100% a dropdown-menu.
   Los módulos siguen protegidos contra overflow; solo se libera el ancho sano del menú. */
.dropdown-menu.show{
  overflow-x:hidden!important;
}

@media (max-width: 767.98px){
  .kh-main-top-menu .dropdown-menu,
  .app-header .dropdown-menu,
  .navbar .dropdown-menu{
    min-width:13rem!important;
    max-width:calc(100vw - 1rem)!important;
  }
}




/* ===== v8028_global_form_controls.css ===== */

/*
 * KH v802.8 - Reglas globales para controles de formulario.
 * Objetivo: que TODOS los inputs/selects/textarea se vean delineados,
 * incluso cuando Bootstrap, AdminLTE o CSS de módulos intenten dejarlos claros.
 * Visual only: no cambia lógica, IDs, names, data-* ni JS.
 */

:root {
  --kh-form-border: #111827;
  --kh-form-border-muted: #334155;
  --kh-form-focus: #2563eb;
  --kh-form-bg: #ffffff;
  --kh-form-disabled-bg: #f1f5f9;
  --kh-form-placeholder: #64748b;
}

/* Inputs estándar: borde visible siempre */
body input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
body input:not(.btn):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]),
body textarea.form-control,
body textarea,
body select.form-select,
body select,
body .form-control,
body .form-select {
  background-color: var(--kh-form-bg) !important;
  border: 1.5px solid var(--kh-form-border) !important;
  border-radius: 12px !important;
  color: #0f172a !important;
  min-height: 42px;
  box-shadow:
    inset 0 0 0 1px rgba(17, 24, 39, .04),
    0 1px 2px rgba(15, 23, 42, .08) !important;
  outline: none !important;
}

/* Tamaños pequeños sin perder visibilidad */
body .form-control-sm,
body .form-select-sm,
body input.form-control-sm,
body select.form-select-sm {
  min-height: 36px !important;
  border-radius: 10px !important;
}

/* Textareas cómodos */
body textarea,
body textarea.form-control {
  min-height: 96px;
  resize: vertical;
}

/* Placeholder visible */
body input::placeholder,
body textarea::placeholder,
body .form-control::placeholder {
  color: var(--kh-form-placeholder) !important;
  opacity: 1 !important;
}

/* Focus azul claro y fuerte */
body input.form-control:not([type="checkbox"]):not([type="radio"]):focus,
body input:not(.btn):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]):focus,
body textarea:focus,
body textarea.form-control:focus,
body select:focus,
body select.form-select:focus,
body .form-control:focus,
body .form-select:focus {
  background-color: #ffffff !important;
  border-color: var(--kh-form-focus) !important;
  box-shadow:
    0 0 0 .22rem rgba(37, 99, 235, .22),
    inset 0 0 0 1px rgba(37, 99, 235, .20) !important;
}

/* Readonly/disabled siguen delineados, pero se ven bloqueados */
body input[readonly],
body textarea[readonly],
body .form-control[readonly],
body input:disabled,
body textarea:disabled,
body select:disabled,
body .form-control:disabled,
body .form-select:disabled {
  background-color: var(--kh-form-disabled-bg) !important;
  border-color: var(--kh-form-border-muted) !important;
  color: #475569 !important;
  opacity: 1 !important;
}

/* File inputs */
body input[type="file"].form-control,
body input[type="file"] {
  border: 1.5px solid var(--kh-form-border) !important;
  background-color: #fff !important;
  border-radius: 12px !important;
  min-height: 42px !important;
  padding: .45rem .75rem !important;
}

body input[type="file"]::file-selector-button {
  border: 0 !important;
  border-right: 1px solid #cbd5e1 !important;
  margin: -.45rem .75rem -.45rem -.75rem !important;
  padding: .65rem 1rem !important;
  color: #0f172a !important;
  background: #f8fafc !important;
  font-weight: 700 !important;
}

/* Checkbox/radio: texto separado y control visible */
body .form-check {
  display: flex;
  align-items: center;
  gap: .55rem;
}
body .form-check .form-check-input,
body input[type="checkbox"],
body input[type="radio"] {
  border: 1.5px solid #111827 !important;
  box-shadow: none !important;
  flex: 0 0 auto;
}
body .form-check .form-check-label {
  margin-left: 0 !important;
  line-height: 1.25;
}
body .form-check-input:checked,
body input[type="checkbox"]:checked,
body input[type="radio"]:checked {
  background-color: #2563eb !important;
  border-color: #2563eb !important;
}
body .form-check-input:focus,
body input[type="checkbox"]:focus,
body input[type="radio"]:focus {
  box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .22) !important;
}

/* Input groups: que no se pierdan bordes entre addon + input */
body .input-group .input-group-text {
  border: 1.5px solid var(--kh-form-border) !important;
  background: #f8fafc !important;
  color: #0f172a !important;
  font-weight: 700;
}
body .input-group > .form-control,
body .input-group > .form-select {
  border: 1.5px solid var(--kh-form-border) !important;
}

/* Select2 / Choices / TomSelect si aparecen en algún módulo */
body .select2-container .select2-selection,
body .select2-container--bootstrap-5 .select2-selection,
body .choices__inner,
body .ts-control {
  background-color: #fff !important;
  border: 1.5px solid var(--kh-form-border) !important;
  border-radius: 12px !important;
  min-height: 42px !important;
  color: #0f172a !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .08) !important;
}
body .select2-container--focus .select2-selection,
body .choices.is-focused .choices__inner,
body .ts-wrapper.focus .ts-control {
  border-color: var(--kh-form-focus) !important;
  box-shadow: 0 0 0 .22rem rgba(37, 99, 235, .22) !important;
}

/* TinyMCE / editores enriquecidos */
body .tox.tox-tinymce,
body .tox .tox-edit-area__iframe,
body .tox .tox-toolbar,
body .tox .tox-statusbar {
  border-color: var(--kh-form-border) !important;
}
body .tox.tox-tinymce {
  border: 1.5px solid var(--kh-form-border) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .08) !important;
}

/* Modales: refuerzo porque suelen tener CSS propio */
body .modal input.form-control:not([type="checkbox"]):not([type="radio"]),
body .modal input:not(.btn):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
body .modal textarea,
body .modal select,
body .modal .form-control,
body .modal .form-select {
  border: 1.5px solid var(--kh-form-border) !important;
  background-color: #fff !important;
  color: #0f172a !important;
}

/* Evitar que botones disfrazados de input sean afectados */
body input[type="button"],
body input[type="submit"],
body input[type="reset"],
body .btn {
  min-height: initial;
}