/* ========================================================================
   CR UI SYSTEM — Componentes compartidos para vistas EJS
   Fase 1 del rediseño visual. No modifica lógica, rutas ni datos.
   ======================================================================== */
:root {
  --cr-ui-bg: #f7f9fc;
  --cr-ui-surface: #ffffff;
  --cr-ui-surface-muted: #f8fafc;
  --cr-ui-text: #0f172a;
  --cr-ui-text-soft: #475569;
  --cr-ui-muted: #64748b;
  --cr-ui-border: #dfe6ef;
  --cr-ui-border-strong: #cbd5e1;
  --cr-ui-primary: #c81e24;
  --cr-ui-primary-hover: #a9141a;
  --cr-ui-primary-soft: #fff1f2;
  --cr-ui-success: #16a34a;
  --cr-ui-success-soft: #f0fdf4;
  --cr-ui-warning: #d97706;
  --cr-ui-warning-soft: #fffbeb;
  --cr-ui-danger: #dc2626;
  --cr-ui-danger-soft: #fef2f2;
  --cr-ui-info: #2563eb;
  --cr-ui-info-soft: #eff6ff;
  --cr-ui-radius-sm: 8px;
  --cr-ui-radius: 12px;
  --cr-ui-radius-lg: 16px;
  --cr-ui-shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
  --cr-ui-shadow: 0 12px 32px rgba(15, 23, 42, .12);
  --cr-ui-transition: 160ms ease;
}

body.cr-shadcn-shell {
  color: var(--cr-ui-text);
  background: var(--cr-ui-bg);
}

/* Encabezado reutilizable */
.cr-ui-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.cr-ui-page-header-copy {
  min-width: 0;
}

.cr-ui-page-kicker {
  margin-bottom: 5px;
  color: var(--cr-ui-primary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.cr-ui-page-title {
  margin: 0;
  color: var(--cr-ui-text);
  font-size: clamp(24px, 2.1vw, 30px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.025em;
}

.cr-ui-page-description {
  max-width: 720px;
  margin: 7px 0 0;
  color: var(--cr-ui-muted);
  font-size: 14px;
  line-height: 1.55;
}

.cr-ui-page-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  flex: 0 0 auto;
}

/* Tarjetas */
.cr-ui-card {
  background: var(--cr-ui-surface);
  border: 1px solid var(--cr-ui-border);
  border-radius: var(--cr-ui-radius-lg);
  box-shadow: var(--cr-ui-shadow-sm);
  overflow: hidden;
}

.cr-ui-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--cr-ui-border);
}

.cr-ui-card-heading {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.cr-ui-card-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 10px;
  color: var(--cr-ui-primary);
  background: var(--cr-ui-primary-soft);
  font-size: 20px;
}

.cr-ui-card-title {
  margin: 0;
  color: var(--cr-ui-text);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}

.cr-ui-card-description {
  margin: 4px 0 0;
  color: var(--cr-ui-muted);
  font-size: 13px;
  line-height: 1.5;
}

.cr-ui-card-body {
  padding: 22px;
}

.cr-ui-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 22px;
  border-top: 1px solid var(--cr-ui-border);
  background: #fbfcfe;
}

/* Botones normalizados */
.cr-button,
a.cr-button,
button.cr-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 9px 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 650;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--cr-ui-transition), background var(--cr-ui-transition), border-color var(--cr-ui-transition), box-shadow var(--cr-ui-transition), transform var(--cr-ui-transition);
}

.cr-button:hover,
a.cr-button:hover,
button.cr-button:hover {
  text-decoration: none;
  transform: translateY(-1px);
}

.cr-button:focus-visible {
  outline: 3px solid rgba(200, 30, 36, .18);
  outline-offset: 2px;
}

.cr-button:disabled,
.cr-button[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

.cr-button-primary {
  color: #ffffff !important;
  background: var(--cr-ui-primary) !important;
  border-color: var(--cr-ui-primary) !important;
  box-shadow: 0 4px 10px rgba(200, 30, 36, .16);
}

.cr-button-primary:hover {
  background: var(--cr-ui-primary-hover) !important;
  border-color: var(--cr-ui-primary-hover) !important;
}

.cr-button-secondary {
  color: var(--cr-ui-text-soft) !important;
  background: #ffffff !important;
  border-color: var(--cr-ui-border-strong) !important;
  box-shadow: var(--cr-ui-shadow-sm);
}

.cr-button-secondary:hover {
  color: var(--cr-ui-text) !important;
  background: #f8fafc !important;
  border-color: #b8c4d3 !important;
}

.cr-button-danger {
  color: #ffffff !important;
  background: var(--cr-ui-danger) !important;
  border-color: var(--cr-ui-danger) !important;
}

.cr-button-ghost {
  color: var(--cr-ui-text-soft) !important;
  background: transparent !important;
  border-color: transparent !important;
}

.cr-button-ghost:hover {
  color: var(--cr-ui-primary) !important;
  background: var(--cr-ui-primary-soft) !important;
}

.cr-button-sm {
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 12px;
}

/* Campos de formulario */
.cr-ui-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.cr-ui-field-label {
  margin: 0;
  color: #334155;
  font-size: 13px;
  font-weight: 650;
}

.cr-ui-required {
  color: var(--cr-ui-primary);
}

.cr-ui-input-wrap,
.cr-ui-select-wrap,
.cr-ui-textarea-wrap {
  position: relative;
}

.cr-ui-input-wrap > i,
.cr-ui-textarea-wrap > i {
  position: absolute;
  top: 50%;
  left: 13px;
  z-index: 1;
  color: #94a3b8;
  font-size: 18px;
  transform: translateY(-50%);
  pointer-events: none;
}

.cr-ui-textarea-wrap > i {
  top: 15px;
  transform: none;
}

.cr-ui-input,
.cr-ui-select,
.cr-ui-textarea {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 13px;
  color: var(--cr-ui-text);
  background: #ffffff;
  border: 1px solid var(--cr-ui-border-strong);
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.4;
  transition: border-color var(--cr-ui-transition), box-shadow var(--cr-ui-transition), background var(--cr-ui-transition);
}

.cr-ui-input-wrap.has-icon .cr-ui-input,
.cr-ui-textarea-wrap.has-icon .cr-ui-textarea {
  padding-left: 42px;
}

.cr-ui-input::placeholder,
.cr-ui-textarea::placeholder {
  color: #94a3b8;
}

.cr-ui-input:focus,
.cr-ui-select:focus,
.cr-ui-textarea:focus {
  outline: 0;
  border-color: rgba(200, 30, 36, .65);
  box-shadow: 0 0 0 3px rgba(200, 30, 36, .10);
}

.cr-ui-input[disabled],
.cr-ui-select[disabled],
.cr-ui-textarea[disabled] {
  color: #94a3b8;
  background: #f8fafc;
  cursor: not-allowed;
}

.cr-ui-select {
  appearance: none;
  padding-right: 38px;
}

.cr-ui-select-wrap > .mdi-chevron-down {
  position: absolute;
  top: 50%;
  right: 13px;
  color: #64748b;
  font-size: 18px;
  transform: translateY(-50%);
  pointer-events: none;
}

.cr-ui-textarea {
  min-height: 110px;
  resize: vertical;
}

.cr-ui-field-help {
  margin: 0;
  color: var(--cr-ui-muted);
  font-size: 12px;
  line-height: 1.5;
}

.cr-ui-field-error {
  min-height: 0;
  color: var(--cr-ui-danger);
  font-size: 12px;
  font-weight: 600;
}

.cr-ui-field.is-invalid .cr-ui-input,
.cr-ui-field.is-invalid .cr-ui-select,
.cr-ui-field.is-invalid .cr-ui-textarea {
  border-color: var(--cr-ui-danger);
}

/* Toolbar de tablas */
.cr-ui-table-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  align-items: end;
  gap: 18px;
  margin-bottom: 18px;
}

.cr-ui-table-toolbar-search {
  max-width: 620px;
}

.cr-ui-search-box {
  display: flex;
  align-items: center;
  min-height: 44px;
  border: 1px solid var(--cr-ui-border-strong);
  border-radius: 10px;
  background: #ffffff;
  overflow: hidden;
  transition: border-color var(--cr-ui-transition), box-shadow var(--cr-ui-transition);
}

.cr-ui-search-box:focus-within {
  border-color: rgba(200, 30, 36, .65);
  box-shadow: 0 0 0 3px rgba(200, 30, 36, .10);
}

.cr-ui-search-box > i {
  margin-left: 13px;
  color: #94a3b8;
  font-size: 18px;
}

.cr-ui-search-box input {
  flex: 1;
  min-width: 0;
  height: 42px;
  padding: 8px 11px;
  color: var(--cr-ui-text);
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 14px;
}

.cr-ui-search-box button {
  align-self: stretch;
  min-width: 76px;
  margin: 4px;
  padding: 0 14px;
  color: #ffffff;
  border: 0;
  border-radius: 8px;
  background: var(--cr-ui-primary);
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}

.cr-ui-table-toolbar-actions {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 10px;
}

.cr-ui-rows-control {
  width: 142px;
}

/* Tabla base */
.cr-ui-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--cr-ui-border);
  border-radius: 12px;
}

.cr-ui-table,
body.cr-shadcn-shell table.cr-ui-table {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  background: #ffffff;
}

.cr-ui-table th {
  padding: 11px 14px;
  color: #64748b;
  background: #f8fafc;
  border-bottom: 1px solid var(--cr-ui-border);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .035em;
  text-transform: uppercase;
  white-space: nowrap;
}

.cr-ui-table td {
  padding: 12px 14px;
  color: #263449;
  border-bottom: 1px solid #e9eef5;
  font-size: 13px;
  vertical-align: middle;
}

.cr-ui-table tbody tr:last-child td {
  border-bottom: 0;
}

.cr-ui-table tbody tr:hover td {
  background: #fbfcfe;
}

/* Estado vacío */
.cr-ui-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 210px;
  padding: 32px;
  text-align: center;
}

.cr-ui-empty-state-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 13px;
  color: var(--cr-ui-primary);
  background: var(--cr-ui-primary-soft);
  border-radius: 14px;
  font-size: 24px;
}

.cr-ui-empty-state h3 {
  margin: 0;
  color: var(--cr-ui-text);
  font-size: 15px;
  font-weight: 700;
}

.cr-ui-empty-state p {
  max-width: 430px;
  margin: 6px 0 0;
  color: var(--cr-ui-muted);
  font-size: 13px;
  line-height: 1.5;
}

.cr-ui-empty-state-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

/* Badges */
.cr-ui-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 4px 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.cr-ui-badge-neutral { color: #475569; background: #f8fafc; border-color: #e2e8f0; }
.cr-ui-badge-success { color: #15803d; background: var(--cr-ui-success-soft); border-color: #bbf7d0; }
.cr-ui-badge-warning { color: #b45309; background: var(--cr-ui-warning-soft); border-color: #fde68a; }
.cr-ui-badge-danger { color: #b91c1c; background: var(--cr-ui-danger-soft); border-color: #fecaca; }
.cr-ui-badge-info { color: #1d4ed8; background: var(--cr-ui-info-soft); border-color: #bfdbfe; }
.cr-ui-badge-primary { color: #b91c1c; background: var(--cr-ui-primary-soft); border-color: #fecdd3; }

/* Paginación wrapper */
.cr-ui-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.cr-ui-pagination .pagination {
  margin: 0 !important;
  gap: 4px;
}

.cr-ui-pagination .page-link {
  display: grid;
  place-items: center;
  min-width: 34px;
  height: 34px;
  padding: 0 9px;
  color: #475569;
  border: 1px solid var(--cr-ui-border);
  border-radius: 8px !important;
  background: #ffffff;
  font-size: 12px;
}

.cr-ui-pagination .page-item.active .page-link {
  color: #ffffff;
  border-color: var(--cr-ui-primary);
  background: var(--cr-ui-primary);
}

.cr-ui-pagination .page-item.disabled .page-link {
  color: #a8b2c1;
  background: #f8fafc;
}

/* Diálogo accesible compartido */
body.cr-ui-dialog-open {
  overflow: hidden;
}

.cr-ui-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(15, 23, 42, .52);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 140ms ease;
}

.cr-ui-dialog-overlay.is-visible {
  opacity: 1;
}

.cr-ui-dialog-overlay.is-closing {
  opacity: 0;
}

.cr-ui-dialog {
  width: min(100%, 470px);
  max-height: calc(100vh - 40px);
  overflow: hidden auto;
  background: #ffffff;
  border: 1px solid rgba(203, 213, 225, .9);
  border-radius: 16px;
  box-shadow: 0 26px 70px rgba(15, 23, 42, .28);
  opacity: 0;
  transform: translateY(10px) scale(.985);
  transition: opacity 140ms ease, transform 140ms ease;
}

.cr-ui-dialog.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.cr-ui-dialog.is-closing {
  opacity: 0;
  transform: translateY(6px) scale(.99);
}

.cr-ui-dialog-header {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 22px 14px;
}

.cr-ui-dialog-heading {
  min-width: 0;
  padding-right: 34px;
}

.cr-ui-dialog-title {
  margin: 0;
  color: var(--cr-ui-text);
  font-size: 19px;
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: -.015em;
}

.cr-ui-dialog-description {
  margin: 7px 0 0;
  color: var(--cr-ui-muted);
  font-size: 13px;
  line-height: 1.55;
}

.cr-ui-dialog-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: #64748b;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  font-size: 19px;
  cursor: pointer;
}

.cr-ui-dialog-close:hover {
  color: var(--cr-ui-text);
  border-color: var(--cr-ui-border);
  background: #f8fafc;
}

.cr-ui-dialog-body {
  padding: 8px 22px 22px;
}

.cr-ui-dialog-message {
  margin: 0;
  color: var(--cr-ui-text-soft);
  font-size: 14px;
  line-height: 1.6;
}

.cr-ui-dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  padding: 14px 22px;
  border-top: 1px solid var(--cr-ui-border);
  background: #fbfcfe;
}

/* Toasts compartidos */
.cr-ui-toast-region {
  position: fixed;
  top: calc(var(--cr-navbar-height, 60px) + 12px);
  right: 16px;
  z-index: 10070;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  width: min(390px, calc(100vw - 32px));
  pointer-events: none;
}

.cr-ui-toast {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 66px;
  padding: 12px 11px 12px 13px;
  overflow: hidden;
  color: var(--cr-ui-text);
  border: 1px solid var(--cr-ui-border);
  border-left-width: 4px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 14px 34px rgba(15, 23, 42, .16);
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 170ms ease, transform 170ms ease;
  pointer-events: auto;
}

.cr-ui-toast.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.cr-ui-toast.is-leaving {
  opacity: 0;
  transform: translateX(18px);
}

.cr-ui-toast-success { border-left-color: var(--cr-ui-success); }
.cr-ui-toast-error { border-left-color: var(--cr-ui-danger); }
.cr-ui-toast-warning { border-left-color: var(--cr-ui-warning); }
.cr-ui-toast-info { border-left-color: var(--cr-ui-info); }

.cr-ui-toast-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 20px;
}

.cr-ui-toast-success .cr-ui-toast-icon { color: var(--cr-ui-success); background: var(--cr-ui-success-soft); }
.cr-ui-toast-error .cr-ui-toast-icon { color: var(--cr-ui-danger); background: var(--cr-ui-danger-soft); }
.cr-ui-toast-warning .cr-ui-toast-icon { color: var(--cr-ui-warning); background: var(--cr-ui-warning-soft); }
.cr-ui-toast-info .cr-ui-toast-icon { color: var(--cr-ui-info); background: var(--cr-ui-info-soft); }

.cr-ui-toast-copy {
  min-width: 0;
}

.cr-ui-toast-title {
  display: block;
  color: var(--cr-ui-text);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
}

.cr-ui-toast-message {
  margin: 2px 0 0;
  color: var(--cr-ui-text-soft);
  font-size: 12.5px;
  line-height: 1.4;
}

.cr-ui-toast-close {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  color: #94a3b8;
  border: 0;
  border-radius: 7px;
  background: transparent;
  cursor: pointer;
}

.cr-ui-toast-close:hover {
  color: #475569;
  background: #f1f5f9;
}

.cr-ui-toast-progress {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: currentColor;
  opacity: .65;
  transform-origin: left;
  animation: cr-ui-toast-progress linear forwards;
}

.cr-ui-toast-success .cr-ui-toast-progress { color: var(--cr-ui-success); }
.cr-ui-toast-error .cr-ui-toast-progress { color: var(--cr-ui-danger); }
.cr-ui-toast-warning .cr-ui-toast-progress { color: var(--cr-ui-warning); }
.cr-ui-toast-info .cr-ui-toast-progress { color: var(--cr-ui-info); }

@keyframes cr-ui-toast-progress {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

/* Loader compacto, sin overlay gris invasivo */
.cr-ui-loading-overlay {
  position: fixed;
  top: calc(var(--cr-navbar-height, 60px) + 12px);
  right: 16px;
  z-index: 10065;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 140ms ease, transform 140ms ease;
  pointer-events: none;
}

.cr-ui-loading-overlay.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.cr-ui-loading-overlay.is-leaving {
  opacity: 0;
  transform: translateY(-6px);
}

.cr-ui-loading-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 290px;
  max-width: min(390px, calc(100vw - 32px));
  padding: 13px 15px;
  border: 1px solid var(--cr-ui-border);
  border-radius: 12px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 14px 34px rgba(15, 23, 42, .16);
}

.cr-ui-spinner {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border: 3px solid #fee2e2;
  border-top-color: var(--cr-ui-primary);
  border-radius: 50%;
  animation: cr-ui-spin .75s linear infinite;
}

.cr-ui-loading-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cr-ui-loading-copy strong {
  color: var(--cr-ui-text);
  font-size: 13px;
}

.cr-ui-loading-copy span {
  color: var(--cr-ui-muted);
  font-size: 12px;
}

@keyframes cr-ui-spin {
  to { transform: rotate(360deg); }
}

/* Sidebar shell refactorizado */
body.cr-shadcn-shell .cr-sidebar-shell {
  overflow: hidden !important;
}

body.cr-shadcn-shell .cr-sidebar-scroll {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 14px 10px 22px;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

body.cr-shadcn-shell .cr-sidebar-scroll::-webkit-scrollbar {
  width: 5px;
}

body.cr-shadcn-shell .cr-sidebar-scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #cbd5e1;
}

body.cr-shadcn-shell .cr-sidebar-menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

body.cr-shadcn-shell .cr-sidebar-menu > .nav-item + .nav-item {
  margin-top: 2px;
}

body.cr-shadcn-shell .cr-sidebar-menu .nav-link {
  min-height: 42px;
}

body.cr-shadcn-shell .cr-sidebar-menu .sub-menu {
  margin: 5px 0 7px 16px;
  padding-left: 13px;
  border-left: 1px solid #e2e8f0;
}

body.cr-shadcn-shell .cr-sidebar-menu .sub-menu .nav-link {
  min-height: 34px;
  padding: 7px 10px !important;
  border-radius: 8px;
  font-size: 12px;
}

/* Layouts de formulario compartidos */
.cr-ui-form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 300px);
  align-items: start;
  gap: 20px;
}

.cr-ui-form {
  display: flex;
  flex-direction: column;
}

.cr-ui-form-section {
  display: grid;
  gap: 18px;
  padding: 22px;
}

.cr-ui-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.cr-ui-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  padding: 16px 22px;
  border-top: 1px solid var(--cr-ui-border);
  background: #fbfcfe;
}

.cr-ui-help-card {
  padding: 18px;
  color: var(--cr-ui-text-soft);
  border: 1px solid var(--cr-ui-border);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: var(--cr-ui-shadow-sm);
}

.cr-ui-help-card-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 13px;
  color: var(--cr-ui-primary);
  background: var(--cr-ui-primary-soft);
  border-radius: 10px;
  font-size: 20px;
}

.cr-ui-help-card h3 {
  margin: 0;
  color: var(--cr-ui-text);
  font-size: 14px;
  font-weight: 700;
}

.cr-ui-help-card p {
  margin: 7px 0 0;
  color: var(--cr-ui-muted);
  font-size: 12.5px;
  line-height: 1.55;
}

/* Responsive */
@media (max-width: 991px) {
  .cr-ui-page-header,
  .cr-ui-card-header,
  .cr-ui-card-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .cr-ui-page-actions {
    justify-content: flex-start;
  }

  .cr-ui-table-toolbar {
    grid-template-columns: 1fr;
  }

  .cr-ui-table-toolbar-search {
    max-width: none;
  }

  .cr-ui-table-toolbar-actions {
    justify-content: flex-start;
  }

  .cr-ui-form-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575px) {
  .cr-ui-page-header {
    gap: 16px;
  }

  .cr-ui-page-actions,
  .cr-ui-page-actions .cr-button {
    width: 100%;
  }

  .cr-ui-card-header,
  .cr-ui-card-body,
  .cr-ui-form-section {
    padding: 17px;
  }

  .cr-ui-card-footer,
  .cr-ui-form-actions {
    padding: 14px 17px;
  }

  .cr-ui-form-grid {
    grid-template-columns: 1fr;
  }

  .cr-ui-table-toolbar-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .cr-ui-rows-control {
    width: 100%;
  }

  .cr-ui-dialog-overlay {
    align-items: end;
    padding: 10px;
  }

  .cr-ui-dialog {
    width: 100%;
    border-radius: 16px 16px 10px 10px;
  }

  .cr-ui-dialog-footer {
    flex-direction: column-reverse;
  }

  .cr-ui-dialog-footer .cr-button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cr-ui-dialog-overlay,
  .cr-ui-dialog,
  .cr-ui-toast,
  .cr-ui-loading-overlay,
  .cr-button {
    transition: none !important;
  }

  .cr-ui-spinner,
  .cr-ui-toast-progress {
    animation: none !important;
  }
}

body.cr-shadcn-shell .cr-sidebar-menu .nav-item.cr-current-parent > .nav-link {
  color: var(--cr-ui-primary) !important;
  background: #fff8f8 !important;
}

body.cr-shadcn-shell .cr-sidebar-menu .nav-link[aria-current="page"] {
  font-weight: 700;
}


/* ========================================================================
   FASE 2 — Catálogos CRUD y selector de insumos
   ======================================================================== */
.cr-catalog-page .cr-ui-card { min-width: 0; }
.cr-table-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 7px; }
.cr-table-actions form { display: inline-flex; margin: 0; }
.cr-icon-button-warning { color: #b45309 !important; background: #fffbeb !important; border-color: #fde68a !important; }
.cr-icon-button-success { color: #15803d !important; background: #f0fdf4 !important; border-color: #bbf7d0 !important; }
.cr-icon-button-danger { color: #dc2626 !important; background: #fff !important; border-color: #fecaca !important; }
.cr-icon-button-danger:hover { background: #fef2f2 !important; }
.cr-entity-cell { display: flex; align-items: center; gap: 11px; min-width: 180px; }
.cr-entity-avatar { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; color: var(--cr-ui-primary); background: var(--cr-ui-primary-soft); border-radius: 9px; font-size: 12px; font-weight: 800; }
.cr-table-description { display: block; max-width: 580px; color: var(--cr-ui-text-soft); line-height: 1.45; white-space: normal; }
.cr-code-badge { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 9px; color: #334155; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.cr-date-cell { display: inline-flex; align-items: center; gap: 9px; font-variant-numeric: tabular-nums; }
.cr-date-icon { display: grid; place-items: center; width: 30px; height: 30px; color: var(--cr-ui-primary); background: var(--cr-ui-primary-soft); border-radius: 8px; }
.cr-supply-selector { display: flex; flex-direction: column; gap: 16px; padding: 18px; border: 1px solid var(--cr-ui-border); border-radius: 14px; background: #fbfcfe; }
.cr-supply-selector-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.cr-supply-selector-header h3 { margin: 0; color: var(--cr-ui-text); font-size: 15px; font-weight: 750; }
.cr-supply-selector-header p { margin: 4px 0 0; color: var(--cr-ui-muted); font-size: 12.5px; }
.cr-supply-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cr-supply-panel { min-height: 300px; max-height: 390px; overflow-y: auto; padding: 12px; border: 1px solid var(--cr-ui-border); border-radius: 12px; background: #fff; scrollbar-width: thin; }
.cr-supply-panel-title { position: sticky; top: -12px; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -12px -12px 10px; padding: 12px; border-bottom: 1px solid var(--cr-ui-border); background: rgba(255,255,255,.96); backdrop-filter: blur(8px); }
.cr-supply-panel-title span { color: var(--cr-ui-text); font-size: 13px; font-weight: 700; }
.cr-supply-panel-title small { color: var(--cr-ui-muted); font-size: 10.5px; }
.cr-supply-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cr-supply-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px; border: 1px solid #e8edf4; border-radius: 10px; background: #fff; transition: border-color var(--cr-ui-transition), box-shadow var(--cr-ui-transition); }
.cr-supply-item:hover { border-color: #cbd5e1; box-shadow: var(--cr-ui-shadow-sm); }
.cr-supply-item-copy { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.cr-supply-item-copy strong { overflow: hidden; color: var(--cr-ui-text); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.cr-supply-item-copy span { color: var(--cr-ui-muted); font-size: 11px; }
.cr-supply-item-actions { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.cr-supply-quantity { width: 72px !important; min-height: 34px !important; padding: 6px 8px !important; text-align: center; }
.cr-supply-remove { color: var(--cr-ui-danger) !important; }
.cr-supply-empty { padding: 34px 12px; color: var(--cr-ui-muted); font-size: 12.5px; text-align: center; }
.cr-supply-total { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 16px; border: 1px solid #fecdd3; border-radius: 12px; background: #fff7f8; }
.cr-supply-total > div:first-child { display: flex; flex-direction: column; gap: 3px; }
.cr-supply-total strong { color: var(--cr-ui-text); font-size: 13px; }
.cr-supply-total span { color: var(--cr-ui-muted); font-size: 11.5px; }
.cr-supply-cost-field { position: relative; display: flex; align-items: center; width: 150px; }
.cr-supply-cost-field .cr-ui-input { color: var(--cr-ui-text); background: #fff; font-size: 16px; font-weight: 750; text-align: right; }
@media (max-width: 767px) { .cr-supply-columns { grid-template-columns: 1fr; } .cr-supply-selector-header, .cr-supply-total { align-items: stretch; flex-direction: column; } .cr-supply-cost-field { width: 100%; } .cr-supply-item { align-items: stretch; flex-direction: column; } .cr-supply-item-actions { justify-content: space-between; } }