/* ===== Adjustment Codes (scoped) ===== */ body.adjustment-view .container { max-width: 680px; } .adjustment-view *, .adjustment-view *::before, .adjustment-view *::after { /*box-sizing: content-box; /* o el valor que quieras por defecto */ } #adjSearch{ width:100%; } #adjCodesSection { background: #fff; border-radius: 12px; box-shadow: 0 0 8px rgba(0,0,0,.06); padding: 18px; } /* Header / tÃtulo */ #adjCodesSection h2 { margin: 4px 0 14px; font-family: 'Michroma', sans-serif; color: #1E2A5B; text-transform: uppercase; font-size: 20px; } /* Filtros */ #adjCodesSection .filters { flex-wrap: wrap; gap: 12px; align-items: flex-end; margin: 6px 0 12px; } #adjCodesSection .filters label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; color: #1E2A5B; } #adjCodesSection .filters input, #adjCodesSection .filters select { height: 40px; padding: 0 12px; border: 1px solid #C1CCD1; border-radius: 8px; font-size: 14px; box-sizing: border-box; } #adjCodesSection .filter-button-wrapper { display: flex; gap: 10px; align-items: center; margin-left: auto; } #adjCodesSection .material-button { height: 40px; padding: 0 14px; display: inline-flex; align-items: center; gap: 6px; border-radius: 8px; cursor: pointer; } /* Tabla */ #adjCodesSection .entry-table-wrapper { overflow-x: auto; } #adjCodesSection .entry-table { width: 100%; border-collapse: collapse; background: #fff; font-size: 14px; } #adjCodesSection .entry-table th, #adjCodesSection .entry-table td { border: 1px solid #e5e7eb; padding: 10px 8px; text-align: left; vertical-align: middle; } #adjCodesSection .entry-table th { background: #1E2A5B; color: #fff; font-family: 'Michroma', sans-serif; } /* Pills de estado */ #adjCodesSection .status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; border: 1px solid transparent; } #adjCodesSection .status-pill.on { background: #e8f5ee; color: #256c3a; border-color: #cdebd7; } #adjCodesSection .status-pill.off { background: #fff2ef; color: #b12c1c; border-color: #f6d1c9; } /* Botones de acciÃ³n (icon-only) */ #adjCodesSection .icon-btn { background: none; border: none; cursor: pointer; padding: 6px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; } #adjCodesSection .icon-btn:hover { background: #f3f5f8; } #adjCodesSection .icon-btn .material-icons { font-size: 20px; } /* Mensaje de estado */ #adjCodesSection #adjStatusMsg { margin-top: 10px; color: #1E2A5B; font-weight: 600; } /* Ajuste para checkbox + label en el modal */ #adjForm .chk { display: flex; align-items: center; gap: 8px; /* espacio entre checkbox y texto */ margin-top: 12px; font-weight: 600; color: #1E2A5B; } #adjForm .chk input[type="checkbox"] { width: 18px; height: 18px; accent-color: #1E2A5B; /* color del check */ margin: 0; /* elimina margenes extra */ } #adjForm .chk span { line-height: 1.2; } /* ===== Modal Add/Edit (scoped, alineado con HTML + JS) ===== */ /* Utilidad */ .hidden { display: none !important; } body.no-scroll { overflow: hidden; } /* === Modal global (porque lo movimos a ) === */ #adjModal .modal { position: fixed; inset: 0; z-index: 10000; /* contenedor del modal */ display: flex; align-items: flex-start; /* no centrado vertical */ justify-content: center; padding-top: 40px; /* margen superior */ pointer-events: auto; } /* Backdrop: cubre TODO el viewport y va debajo del contenido */ .modal__backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 10000; /* base del overlay */ } /* Contenido del modal: por ENCIMA del backdrop */ .modal__content { position: relative; z-index: 10001; /* clave: por encima del backdrop */ width: 92%; max-width: min(560px, 92vw); max-height: 90vh; background: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.25); overflow: auto; padding: 18px; display: flex; flex-direction: column; box-sizing: border-box; } /* Header / footer / close: GLOBAL (ya no scopeados al section) */ .modal__header{ position: relative; padding: 10px 48px 10px 16px; /* deja espacio a la derecha para la X */ border-bottom: 1px solid #eef2f7; } .modal__title{ margin: 0; font-family: 'Michroma', sans-serif; color: #1E2A5B; font-size: 18px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Bot¨®n X: no participa del flujo, no ¡°ensancha¡± el header */ .modal__close{ position: absolute; top: -20px; right: -8px; width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; line-height: 1; border: 0; border-radius: 8px; font-size: 20px; color: #1E2A5B; background: transparent; cursor: pointer; } .modal__footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; } /* Form dentro del modal */ .modal__content form label { display: block; margin-top: 10px; font-weight: 600; color: #1E2A5B; } .modal__content form input, .modal__content form select { width: 100%; border: 1px solid #C1CCD1; border-radius: 8px; padding: 10px 12px; margin-top: 6px; font-size: 14px; box-sizing: border-box; } /* Grids internas reutilizables */ .grid-2, .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } @media (max-width: 640px) { .grid-2, .row { grid-template-columns: 1fr; } }