:root {
  /* =========================
     BRAND TOKENS
  ========================= */
  --vmms-black: #000000;
  --vmms-white: #ffffff;
  --vmms-red: #D0021B;
  --vmms-gray: #737373;
  --vmms-yellow: #FFBD59;

  /* =========================
     SURFACES / UI
  ========================= */
  --vmms-sidebar: #0b0b0d;
  --vmms-sidebar-soft: #141418;
  --vmms-bg: #f3f3f3;
  --vmms-surface: #ffffff;
  --vmms-surface-soft: #f8f8f8;
  --vmms-border: #e5e7eb;
  --vmms-border-strong: #d7dbe0;
  --vmms-text: #111111;
  --vmms-text-soft: #666666;
  --vmms-text-muted: #8a8a8a;

  /* =========================
     FEEDBACK
  ========================= */
  --vmms-success: #15803d;
  --vmms-success-bg: #dcfce7;
  --vmms-danger: #b91c1c;
  --vmms-danger-bg: #fee2e2;
  --vmms-warning: #b45309;
  --vmms-warning-bg: #fef3c7;
  --vmms-info: #1d4ed8;
  --vmms-info-bg: #dbeafe;

  /* =========================
     RADIUS
  ========================= */
  --vmms-radius-xs: 8px;
  --vmms-radius-sm: 10px;
  --vmms-radius-md: 14px;
  --vmms-radius-lg: 18px;
  --vmms-radius-xl: 22px;
  --vmms-radius-pill: 999px;

  /* =========================
     SHADOWS
  ========================= */
  --vmms-shadow-xs: 0 2px 8px rgba(0, 0, 0, 0.05);
  --vmms-shadow-sm: 0 6px 20px rgba(0, 0, 0, 0.08);
  --vmms-shadow-md: 0 14px 36px rgba(0, 0, 0, 0.10);
  --vmms-shadow-lg: 0 22px 50px rgba(0, 0, 0, 0.14);

  /* =========================
     SPACING SCALE
  ========================= */
  --vmms-space-1: 4px;
  --vmms-space-2: 8px;
  --vmms-space-3: 12px;
  --vmms-space-4: 16px;
  --vmms-space-5: 20px;
  --vmms-space-6: 24px;
  --vmms-space-7: 32px;
  --vmms-space-8: 40px;

  /* =========================
     TYPOGRAPHY
  ========================= */
  --vmms-font-family: Arial, sans-serif;
  --vmms-font-size-xs: 12px;
  --vmms-font-size-sm: 13px;
  --vmms-font-size-md: 14px;
  --vmms-font-size-base: 15px;
  --vmms-font-size-lg: 18px;
  --vmms-font-size-xl: 22px;
  --vmms-font-size-2xl: 28px;

  /* =========================
     LAYOUT
  ========================= */
  --vmms-transition: all 0.2s ease;
  --vmms-sidebar-width: 270px;
  --vmms-sidebar-width-mobile: 280px;
  --vmms-header-height: 72px;
  --vmms-container-max: 1280px;

  /* =========================
     STATES / EFFECTS
  ========================= */
  --vmms-focus-ring: 0 0 0 3px rgba(208, 2, 27, 0.12);
  --vmms-overlay: rgba(0, 0, 0, 0.45);

  /* =========================
     Z-INDEX
  ========================= */
  --vmms-z-overlay: 9998;
  --vmms-z-sidebar: 9999;
  --vmms-z-toast: 10020;
  --vmms-z-modal: 10030;
}

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

html {
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--vmms-font-family);
  font-size: var(--vmms-font-size-md);
  line-height: 1.45;
  background: var(--vmms-bg);
  color: var(--vmms-text);
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

.layout {
  display: flex;
  min-height: 100vh;
  align-items: stretch;
}

.sidebar {
  width: var(--vmms-sidebar-width);
  min-width: var(--vmms-sidebar-width);
  background: linear-gradient(180deg, #050505 0%, #101014 100%);
  color: var(--vmms-white);
  padding: 18px 16px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  border-right: 1px solid rgba(255,255,255,0.05);
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  border-left: 4px solid var(--vmms-red);
}

.sidebar-brand {
  text-align: center;
  padding: 5px 3px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 18px;
}

.sidebar-brand img {
  width: 130px;
  height: 130px;
  object-fit: contain;
  display: block;
  margin: 0 auto 1px;
}

.sidebar-brand .brand-title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.4px;
}

.sidebar-brand .brand-title .red {
  color: var(--vmms-red);
}

.sidebar-brand .brand-subtitle {
  font-size: 12px;
  color: rgba(255,255,255,0.58);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.user-box {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 18px;
}

.user-box-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-avatar {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #111111;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  position: relative;
  flex-shrink: 0;
}

.user-avatar-status {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--vmms-yellow);
  border: 2px solid #111111;
}

.user-meta {
  min-width: 0;
}

.user-name {
  color: var(--vmms-white);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 6px;
}

.user-role-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 8px;
  background: var(--vmms-yellow);
  color: #111111;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.2px;
}

.menu {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.menu a[href="/app/logout.php"] {
  margin-top: auto;
}

.menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--vmms-white);
  background: transparent;
  padding: 12px 14px;
  border-radius: 12px;
  transition: var(--vmms-transition);
  border: 1px solid transparent;
  font-weight: 600;
}

.menu-icon {
  width: 18px;
  min-width: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  opacity: 0.95;
}

.menu-text {
  display: inline-block;
}

.menu-link-cierres {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding-right: 42px !important;
  flex-wrap: nowrap !important;
}

.menu-link-cierres .menu-icon {
  flex-shrink: 0;
}

.menu-link-cierres .menu-text,
.menu-link-cierres .menu-link-texto,
.menu-link-cierres .menu-texto-cierres {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.badge-globo {
  position: absolute !important;
  top: 50% !important;
  right: 12px !important;
  transform: translateY(-50%);
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  border-radius: 999px !important;
  background: var(--vmms-yellow) !important;
  color: #111111 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 18px !important;
  text-align: center !important;
  box-shadow: 0 0 0 2px #0b0b0d, 0 2px 6px rgba(0,0,0,0.4) !important;
  z-index: 5 !important;
  flex-shrink: 0 !important;
}

.menu a:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.06);
}

.menu a.active {
  background: var(--vmms-red);
  color: var(--vmms-white);
  box-shadow: 0 10px 20px rgba(208, 2, 27, 0.22);
}

.sidebar-footer-brand {
  margin-top: auto;
  padding: 16px 10px 8px;
  border-top: 1px solid rgba(255,255,255,0.06);
  text-align: center;
}

.sidebar-footer-brand img {
  max-width: 85%;
  margin-bottom: 8px;
  margin: auto;
  padding: 3px;
}

.sidebar-footer-brand .footer-brand-text {
  color: var(--vmms-red);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.3px;
}

.sidebar-footer-brand .footer-brand-subtext {
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.8px;
  margin-top: 4px;
}

.main {
  flex: 1;
  min-width: 0;
  padding: 22px;
}

.container {
  width: 100%;
  max-width: var(--vmms-container-max);
  margin: 0 auto;
}

.mobile-topbar {
  display: none;
}

.mobile-menu-toggle {
  width: auto;
  min-width: 44px;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 12px;
  border: none;
  background: var(--vmms-red);
  color: var(--vmms-white);
  font-weight: 700;
  box-shadow: var(--vmms-shadow-xs);
}

.mobile-topbar-title {
  font-weight: 800;
  font-size: 14px;
  color: var(--vmms-text);
  text-align: center;
  justify-self: center;
}

.mobile-overlay {
  display: none;
}

.page-topbar {
  min-height: var(--vmms-header-height);
  background: var(--vmms-surface);
  border: 1px solid var(--vmms-border);
  border-radius: 16px;
  padding: 14px 18px;
  box-shadow: var(--vmms-shadow-xs);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.page-topbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.page-topbar-icon {
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  border-radius: 50%;
  background: rgba(208, 2, 27, 0.10);
  color: var(--vmms-red);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  flex-shrink: 0;
}

.page-topbar h1,
.titulo-principal {
  margin: 0;
  font-size: var(--vmms-font-size-xl);
  line-height: 1.2;
  color: var(--vmms-text);
}

.page-topbar p,
.header p {
  margin: 0;
  color: var(--vmms-text-soft);
  font-size: var(--vmms-font-size-base);
}

.card {
  background: var(--vmms-surface);
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 10px;
  box-shadow: var(--vmms-shadow-xs);
  border: 1px solid var(--vmms-border);
}

.card h2,
.card h3 {
  margin-top: 0;
  color: var(--vmms-text);
}

.card h2 {
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--vmms-border);
  font-size: 15px;
  line-height: 1.2;
}

.section-heading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.section-icon {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: rgba(208, 2, 27, 0.08);
  color: var(--vmms-red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
  flex-shrink: 0;
}

.section-text {
  display: inline-block;
}

.section-title-inline {
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-title-inline .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--vmms-red);
  display: inline-block;
  flex-shrink: 0;
}

.grid {
  display: grid;
  gap: 18px;
}

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

.grid-main-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 10px;
  align-items: start;
}

.form-layout-2 > .form-column > .card {
  margin-bottom: 0;
}

.form-layout-2 > .form-column:last-child .ns-service-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.form-layout-2 > .form-column:last-child .ns-service-card .grid-main-2 {
  flex: 1;
  align-content: start;
}

.actions-card .respuesta {
  margin: 0 0 12px 0;
}

.acciones-grid .btn,
.acciones-grid button {
  min-height: 48px;
  border-radius: 14px;
}

.acciones-grid .btn-success,
.acciones-grid .btn-primary {
  box-shadow: 0 14px 28px rgba(208, 2, 27, 0.18);
}

.toolbar-grid-4 {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) 120px 140px;
  gap: 10px;
  align-items: end;
}

.toolbar-grid-4 > div {
  display: flex;
  flex-direction: column;
}

.toolbar-grid-4 label {
  margin-bottom: 4px;
}

.toolbar-grid-4 .btn,
.toolbar-grid-4 button {
  width: 100%;
  white-space: nowrap;
}

.form-layout-2 {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr);
  gap: 14px;
  align-items: start;
  margin-bottom: 14px;
}

.form-column {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
}

.items-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.items-grid-3 .item-box {
  transition: var(--vmms-transition);
}

.items-grid-3 .item-box:hover {
  border-color: rgba(208, 2, 27, 0.22);
  background: #ffffff;
  box-shadow: var(--vmms-shadow-xs);
}

.history-card-bottom {
  margin-bottom: 18px;
}

.history-scroll {
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

.history-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}

.history-summary-grid .bloque-info {
  margin-bottom: 0;
  padding: 10px;
  font-size: 13px;
}

.historial-vacio {
  border: 1px dashed var(--vmms-border);
  border-radius: 12px;
  padding: 14px;
  background: #fafafa;
  color: var(--vmms-text-soft);
}

.historial-load-action {
  margin-top: 20px;
  display: inline-flex;
  width: auto;
}

@media (max-width: 768px) {
  .history-summary-grid {
    grid-template-columns: 1fr;
  }
}

.history-scroll .accordion-header {
  font-size: 15px;
}

.history-scroll .accordion-badge {
  font-size: 12px;
  padding: 4px 8px;
}

.actions-card {
  margin-bottom: 18px;
}

.actions-card .acciones-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}

.actions-card .acciones-grid .btn,
.actions-card .acciones-grid button {
  width: 190px;
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 12px;
}

.actions-card .btn-success,
.actions-card .btn-primary {
  box-shadow: 0 14px 28px rgba(208, 2, 27, 0.18);
}

.campo-completo {
  grid-column: 1 / -1;
}

label {
  display: block;
  margin-bottom: 4px;
  font-weight: 700;
  font-size: 12px;
  color: var(--vmms-text);
  line-height: 1.15;
}

input,
select,
textarea,
button {
  width: 100%;
  border-radius: var(--vmms-radius-sm);
  font-size: var(--vmms-font-size-base);
  transition: var(--vmms-transition);
}

input,
select,
textarea {
  padding: 7px 10px;
  border: 1px solid var(--vmms-border-strong);
  background: var(--vmms-white);
  color: var(--vmms-text);
  font-size: 13px;
}

input::placeholder,
textarea::placeholder {
  color: var(--vmms-text-muted);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: rgba(208, 2, 27, 0.35);
  box-shadow: var(--vmms-focus-ring);
}

input:disabled,
select:disabled,
textarea:disabled {
  background: #f3f4f6;
  color: var(--vmms-text-soft);
  cursor: not-allowed;
  opacity: 1;
}

textarea {
  min-height: 100px;
  resize: vertical;
}

button,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  padding: 8px 12px;
  border: none;
  cursor: pointer;
  font-weight: 700;
  border-radius: 10px;
  transition: var(--vmms-transition);
  font-size: 13px;
}

.btn,
button {
  background: var(--vmms-black);
  color: var(--vmms-white);
}

.btn:hover,
button:hover {
  filter: brightness(0.96);
}

.btn-primary {
  background: var(--vmms-red);
  box-shadow: 0 10px 20px rgba(208, 2, 27, 0.18);
}

.btn-success {
  background: var(--vmms-success);
}

.btn-danger {
  background: #2b2b2b;
}

.btn-secondary {
  background: #4b5563;
}

.btn-soft {
  background: #efefef;
  color: var(--vmms-text);
  border: 1px solid #e1e1e1;
  box-shadow: none;
}

.btn-soft:hover {
  background: #e5e5e5;
}

.btn-whatsapp {
  background: #25D366;
  color: #ffffff;
}

.btn-disabled {
  background: var(--vmms-success);
  color: #ffffff;
  cursor: default;
}

.respuesta {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 12px;
  font-weight: 700;
  text-align: center;
  display: none;
  border: 1px solid transparent;
}

.respuesta.ok {
  background: var(--vmms-success-bg);
  color: var(--vmms-success);
  border-color: rgba(21, 128, 61, 0.12);
  display: block;
}

.respuesta.error {
  background: var(--vmms-danger-bg);
  color: var(--vmms-danger);
  border-color: rgba(185, 28, 28, 0.12);
  display: block;
}

/* =========================================================
   TOAST GLOBAL VMMS — DARK GLASS UNIFICADO
========================================================= */

#toastContainer {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: var(--vmms-z-toast);
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.vmms-toast {
  --vmms-toast-accent: var(--vmms-red);
  --vmms-toast-accent-rgb: 208, 2, 27;

  min-width: 320px;
  max-width: 460px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 26px;
  gap: 10px;
  align-items: start;

  padding: 12px;
  border-radius: 16px;

  background:
    radial-gradient(circle at top right, rgba(255, 189, 89, 0.10) 0%, transparent 34%),
    linear-gradient(180deg, rgba(17, 17, 17, 0.92) 0%, rgba(24, 24, 27, 0.88) 100%);

  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-left: 4px solid var(--vmms-toast-accent);

  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.26),
    0 6px 16px rgba(15, 23, 42, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  pointer-events: auto;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.vmms-toast.is-closing {
  opacity: 0;
  transform: translateY(-6px);
}

.vmms-toast-icon {
  width: 36px;
  height: 36px;
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: rgba(var(--vmms-toast-accent-rgb), 0.16);
  color: #ffffff;
  border: 1px solid rgba(var(--vmms-toast-accent-rgb), 0.36);

  font-size: 15px;
  font-weight: 900;
  line-height: 1;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 6px 14px rgba(0, 0, 0, 0.14);
}

.vmms-toast-body {
  min-width: 0;
}

.vmms-toast-title {
  margin-bottom: 3px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.vmms-toast-message {
  color: rgba(255, 255, 255, 0.76);
  font-size: 13px;
  line-height: 1.32;
  font-weight: 600;
  word-break: break-word;
}

.vmms-toast-close {
  width: 26px !important;
  min-width: 26px !important;
  max-width: 26px !important;
  height: 26px !important;
  min-height: 26px !important;

  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 999px !important;

  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.72) !important;

  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  cursor: pointer;
  box-shadow: none !important;
}

.vmms-toast-close:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
  filter: none !important;
}

.vmms-toast--success {
  --vmms-toast-accent: #22c55e;
  --vmms-toast-accent-rgb: 34, 197, 94;
}

.vmms-toast--error {
  --vmms-toast-accent: #ef4444;
  --vmms-toast-accent-rgb: 239, 68, 68;
}

.vmms-toast--warning {
  --vmms-toast-accent: var(--vmms-yellow);
  --vmms-toast-accent-rgb: 255, 189, 89;
}

.vmms-toast--info {
  --vmms-toast-accent: #60a5fa;
  --vmms-toast-accent-rgb: 96, 165, 250;
}

.vmms-toast--success .vmms-toast-icon {
  background: var(--vmms-success-bg);
  color: var(--vmms-success);
}

.vmms-toast--error .vmms-toast-icon {
  background: var(--vmms-danger-bg);
  color: var(--vmms-danger);
}

.vmms-toast--warning .vmms-toast-icon {
  background: var(--vmms-warning-bg);
  color: var(--vmms-warning);
}

.vmms-toast--info .vmms-toast-icon {
  background: var(--vmms-info-bg);
  color: var(--vmms-info);
}

@media (max-width: 768px) {
  #toastContainer {
    top: 12px;
    left: 12px;
    right: 12px;
  }

  .vmms-toast {
    min-width: 0;
    max-width: none;
    width: 100%;
    grid-template-columns: 34px minmax(0, 1fr) 26px;
    padding: 10px;
    border-radius: 15px;
  }

  .vmms-toast-icon {
    width: 34px;
    height: 34px;
  }

  .vmms-toast-title,
  .vmms-toast-message {
    font-size: 12.5px;
  }
}

.muted {
  text-align: center;
  color: var(--vmms-text-soft);
  margin-top: 10px;
}

.items-lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.item-box {
  border: 1px solid var(--vmms-border);
  border-radius: 10px;
  padding: 9px 10px;
  background: var(--vmms-surface-soft);
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.item-box:hover {
  border-color: rgba(208, 2, 27, 0.24);
  background: #ffffff;
  box-shadow: var(--vmms-shadow-xs);
  transform: translateY(-1px);
}

.item-box.active {
  border-color: rgba(208, 2, 27, 0.28);
  background: rgba(208, 2, 27, 0.05);
}

.item-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.item-top input[type="checkbox"] {
  width: auto;
  margin: 0;
  accent-color: var(--vmms-red);
  transform: scale(0.95);
}

.item-top label {
  margin: 0;
  font-weight: 600;
  font-size: 12px;
  line-height: 1.15;
}

.detalle-item {
  margin-top: 10px;
  display: none;
}

.resultado-item,
.bloque-info,
.vacio {
  border: 1px solid var(--vmms-border);
  border-radius: 12px;
  padding: 10px;
  background: var(--vmms-surface-soft);
  margin-top: 12px;
}

.resultado-item {
  cursor: pointer;
}

.resultado-item:hover {
  background: #f2f2f2;
}

.acciones-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.historial-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) 260px;
  gap: 18px;
}

.historial-help {
  background: #fff5db;
  border: 1px solid #f3e1aa;
  border-radius: 14px;
  padding: 18px;
  color: #7a5a00;
}

.accordion-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.accordion-item {
  border: 1px solid var(--vmms-border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--vmms-surface-soft);
}

.accordion-header {
  width: 100%;
  border: none;
  background: #f7f7f7;
  color: var(--vmms-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
}

.accordion-header:hover {
  background: #f0f0f0;
}

.accordion-title {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.accordion-badge {
  background: #e5e5e5;
  color: #444;
  border-radius: 8px;
  padding: 5px 8px;
  font-size: 13px;
  font-weight: 700;
}

.accordion-icon {
  font-size: 18px;
  color: var(--vmms-text-soft);
  transition: transform 0.22s ease;
}

.accordion-content {
  display: block;
  max-height: 0;
  overflow: hidden;
  padding: 0 14px;
  opacity: 0.4;
  background: var(--vmms-white);
  border-top: 1px solid transparent;
  line-height: 1.50;
  font-size: 13px;
  transition:
    max-height 0.28s ease,
    padding 0.22s ease,
    opacity 0.22s ease,
    border-color 0.22s ease;
}

.accordion-content p {
  margin: 3px 0 3px 0;
}

.accordion-content p:last-child {
  margin-bottom: 0;
}

.accordion-item.active .accordion-content {
  max-height: 900px;
  padding: 12px 14px;
  opacity: 1;
  border-top: 1px solid var(--vmms-border);
}

.accordion-item.active .accordion-icon {
  transform: rotate(180deg);
}

.lista-items {
  margin: 12px 0 12px;
  padding-left: 20px;
}

.texto-detalle {
  color: #444;
  font-style: italic;
}

.card-servicio {
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: var(--vmms-shadow-sm);
}

.estado-vencido {
  background: #fee2e2;
}

.estado-proximo {
  background: #fff3d2;
}

.estado-futuro {
  background: #f3f4f6;
}

.filtros-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.login-page {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background:
    linear-gradient(rgba(0, 0, 0, 0.76), rgba(0, 0, 0, 0.78)),
    linear-gradient(135deg, #111 0%, #1d1d1d 100%);
  padding: 20px;
}

.login-box {
  width: 100%;
  max-width: 430px;
  background: rgba(255, 255, 255, 0.98);
  padding: 20px 35px;
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
}

.login-logo {
  text-align: center;
}

.login-logo img {
  width: 130px;
  height: 130px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.login-logo h1 {
  margin: 0 0 6px 0;
  font-size: 28px;
  color: var(--vmms-text);
}

.login-logo p {
  margin: 0;
  color: var(--vmms-text-soft);
}

.error-box {
  background: var(--vmms-danger-bg);
  color: var(--vmms-danger);
  padding: 12px;
  border-radius: 10px;
  margin-bottom: 18px;
  text-align: center;
  font-weight: 700;
}

@media (max-width: 1200px) {
  .grid-main-2,
  .historial-layout,
  .form-layout-2 {
    grid-template-columns: 1fr;
  }

  .toolbar-grid-4 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 960px) {
  .grid-2,
  .grid-form {
    grid-template-columns: 1fr;
  }

  .items-lista {
    grid-template-columns: 1fr;
  }

  .acciones-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .toolbar-grid-4 {
    grid-template-columns: 1fr;
  }

  .items-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .layout {
    display: block;
  }

  .main {
    padding: 12px;
  }

  .mobile-topbar {
    display: grid;
    grid-template-columns: 40px 1fr 40px;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 10px 12px;
    background: var(--vmms-surface);
    border: 1px solid var(--vmms-border);
    border-radius: 14px;
    box-shadow: var(--vmms-shadow-sm);
  }

  .sidebar {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--vmms-sidebar-width-mobile);
    min-width: var(--vmms-sidebar-width-mobile);
    height: 100vh;
    z-index: var(--vmms-z-sidebar);
    box-shadow: 0 10px 30px rgba(0,0,0,0.30);
    transform: translateX(-100%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      transform 0.80s ease,
      opacity 0.70s ease,
      visibility 0.60s ease;
  }

  .sidebar.mobile-open {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .mobile-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: var(--vmms-overlay);
    z-index: var(--vmms-z-overlay);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 0.28s ease,
      visibility 0.28s ease;
  }

  .mobile-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .page-topbar {
    flex-direction: column;
    align-items: flex-start;
    padding: 14px;
  }

  .page-topbar-left {
    width: 100%;
  }

  .acciones-grid,
  .items-grid-3,
  .items-lista,
  .toolbar-grid-4 {
    grid-template-columns: 1fr;
  }

  .toolbar-grid-4 {
    gap: 8px;
  }

  .toolbar-grid-4 button,
  .toolbar-grid-4 .btn {
    min-height: 34px;
    padding: 7px 10px;
    font-size: 12px;
  }

  .actions-card .acciones-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .actions-card .acciones-grid .btn,
  .actions-card .acciones-grid button {
    width: 100%;
    max-width: 220px;
    min-height: 34px;
    padding: 7px 10px;
    font-size: 12px;
  }
}




.cap-layout {
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.cap-search-panel,
.cap-results-panel {
  border: 1px solid var(--vmms-border);
  border-radius: 16px;
  background: var(--vmms-surface-soft);
  padding: 16px;
}

.cap-help {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff8e8;
  border: 1px solid #f0dfb5;
  color: #7a5a00;
  font-size: 14px;
  line-height: 1.5;
}

.cap-actions {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.cap-actions .btn {
  flex: 1;
}

.cap-results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--vmms-border);
}

.cap-results-list {
  max-height: 420px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-right: 4px;
}

.cap-result-item {
  border: 1px solid var(--vmms-border);
  border-radius: 14px;
  background: var(--vmms-white);
  padding: 14px;
  cursor: pointer;
  transition: var(--vmms-transition);
  box-shadow: 0 4px 14px rgba(0,0,0,0.04);
}

.cap-result-item:hover {
  border-color: rgba(208, 2, 27, 0.22);
  box-shadow: 0 8px 22px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}

.cap-result-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--vmms-text);
  margin-bottom: 6px;
}

.cap-result-meta {
  font-size: 14px;
  color: var(--vmms-text-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

@media (max-width: 1100px) {
  .cap-layout {
    grid-template-columns: 1fr;
  }

  .cap-results-list {
    max-height: 360px;
  }
}

@media (max-width: 768px) {
  .cap-actions {
    flex-direction: column;
  }
}


/* =========================================================
   LAYOUTS Y COMPONENTES REUTILIZABLES GLOBALES
========================================================= */

.page-grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 20px;
  align-items: start;
}

.page-grid-sidebar {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.3fr);
  gap: 20px;
  align-items: start;
}

.card-soft {
  background: linear-gradient(180deg, #ffffff 0%, #fcfcfc 100%);
}

.card-accent {
  border-color: rgba(208, 2, 27, 0.12);
}

.card-sticky {
  position: sticky;
  top: 22px;
}

.actions-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.actions-grid .btn,
.actions-grid button {
  min-height: 48px;
  border-radius: 14px;
}

.actions-grid .btn-primary,
.actions-grid button[type="submit"] {
  box-shadow: 0 14px 28px rgba(208, 2, 27, 0.18);
}

.form-section .grid,
.form-section .grid-2,
.form-section .grid-form {
  gap: 16px;
}

.form-section textarea {
  min-height: 110px;
}

.panel-title-strong h2 {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.1px;
}

.is-hidden {
  display: none !important;
}

.is-sticky {
  position: sticky;
  top: 22px;
}

@media (max-width: 1200px) {
  .page-grid-2,
  .page-grid-sidebar {
    grid-template-columns: 1fr;
  }

  .card-sticky,
  .is-sticky {
    position: relative;
    top: 0;
  }
}

@media (max-width: 960px) {
  .actions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .actions-grid,
  .page-grid-2,
  .page-grid-sidebar {
    grid-template-columns: 1fr;
  }

  .panel-title-strong h2 {
    font-size: 18px;
  }
}

/* =========================================================
CLIENTES / VEHÍCULOS — G1 BASE GLOBAL
========================================================= */

.cv-stats-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid var(--vmms-border);
  border-radius: 14px;
  background: var(--vmms-surface);
  box-shadow: var(--vmms-shadow-xs);
  font-size: 13px;
  color: var(--vmms-text-soft);
}

.cv-toolbar-card {
  margin-bottom: 12px;
}

.cv-list-wrap {
  width: 100%;
}

.clientes-vehiculos-lista,
.cv-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.totales {
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--vmms-text-soft);
}

.sin-resultados,
.cv-empty-state {
  background: #fff;
  border: 1px dashed #d1d5db;
  border-radius: 14px;
  padding: 24px;
  text-align: center;
  color: #666;
}

.cliente-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(208, 2, 27, 0.10);
  border-radius: 20px;
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.15) 0%, transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #fcfcfd 100%);
  box-shadow:
    0 10px 26px rgba(15, 23, 42, 0.09),
    0 2px 8px rgba(15, 23, 42, 0.07);
  padding: 16px;
}

.cliente-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 14px;
  right: 14px;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #d0021b 0%, #ffbd59 100%);
}

.cliente-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}

.cliente-header {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto;
  gap: 16px;
  align-items: center;
  background: linear-gradient(180deg, rgba(208, 2, 27, 0.075) 0%, rgba(255,255,255,0.9) 100%);
  border: 1px solid rgba(208, 2, 27, 0.08);
  border-radius: 16px;
  padding: 14px 14px 12px 14px;
  margin-bottom: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.75),
    0 2px 10px rgba(15,23,42,0.25);
}

.cliente-header h3 {
  margin: 0 0 8px 0;
  font-size: 17px;
  line-height: 1.15;
  color: #111111;
  letter-spacing: -0.01em;
}

.cliente-header-main {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.cliente-avatar {
  width: 54px;
  height: 54px;
  min-width: 54px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(208,2,27,0.10) 0%, rgba(255,189,89,0.18) 100%);
  color: var(--vmms-red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
}

.cliente-header-info {
  min-width: 0;
  flex: 1;
}

.cliente-header-topline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 6px;
}

.cliente-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid transparent;
}

.cliente-chip--ok {
  background: #dcfce7;
  color: #166534;
  border-color: #bbf7d0;
}

.cliente-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cliente-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #e6eaf0;
  color: #111111;
  font-size: 12px;
  line-height: 1;
  box-shadow:
    0 2px 6px rgba(15,23,42,0.04),
    inset 0 1px 0 rgba(255,255,255,0.88),
    inset 0 -1px 0 rgba(15,23,42,0.03);
}

.cliente-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.cliente-stat {
  min-width: 112px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #e8ebf0;
  border-radius: 14px;
  padding: 10px 12px;
  text-align: left;
  box-shadow:
    0 2px 6px rgba(15,23,42,0.04),
    inset 0 1px 0 rgba(255,255,255,0.88),
    inset 0 -1px 0 rgba(15,23,42,0.03);
}

.cliente-stat-label {
  display: block;
  font-size: 11px;
  color: #666;
  margin-bottom: 4px;
}

.cliente-stat strong {
  display: block;
  font-size: 15px;
  line-height: 1.1;
  color: #111111;
}

.vehiculos-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vehiculo-item {
  position: relative;
  overflow: hidden;
  border-width: 1px;
  border-style: solid;
  border-radius: 18px;
  padding: 14px;
  box-shadow:
    0 6px 16px rgba(15, 23, 42, 0.05),
    inset 0 1px 0 rgba(255,255,255,0.82),
    inset 0 -1px 0 rgba(15,23,42,0.03);
  transition:
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}

.vehiculo-item::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 0;
  width: 6px;
  border-radius: 0 10px 10px 0;
  opacity: 0.95;
}

.vehiculo-item--estado-vencido {
  border-color: rgba(185, 28, 28, 0.22);
  background: linear-gradient(180deg, #ffffff 0%, #fff8f8 100%);
}

.vehiculo-item--estado-vencido::before {
  background: linear-gradient(180deg, #dc2626 0%, #f87171 100%);
}

.vehiculo-item--estado-proximo {
  border-color: rgba(180, 83, 9, 0.24);
  background: linear-gradient(180deg, #ffffff 0%, #fffaf0 100%);
}

.vehiculo-item--estado-proximo::before {
  background: linear-gradient(180deg, #f59e0b 0%, #fbbf24 100%);
}

.vehiculo-item--estado-futuro {
  border-color: rgba(29, 78, 216, 0.18);
  background: linear-gradient(180deg, #ffffff 0%, rgba(96, 165, 250, 0.10) 60%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.75),
    0 2px 10px rgba(15,23,42,0.25);
}

.vehiculo-item--estado-futuro::before {
  background: linear-gradient(180deg, #2563eb 0%, #60a5fa 100%);
}

.vehiculo-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding-left: 10px;
}

.vehiculo-info-principal {
  flex: 1;
}

.vehiculo-titulo-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}

.vehiculo-titulo {
  font-size: 14px;
  font-weight: 700;
  color: #111111;
  margin-bottom: 0;
  letter-spacing: -0.01em;
}

.vehiculo-dominio-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  color: #374151;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.vehiculo-meta-chip {
  color: #111111;
}

.vehiculo-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.vehiculo-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #e6eaf0;
  font-size: 12px;
  box-shadow:
    0 2px 6px rgba(15,23,42,0.04),
    inset 0 1px 0 rgba(255,255,255,0.88),
    inset 0 -1px 0 rgba(15,23,42,0.03);
}

.vehiculo-estado-linea {
  margin-bottom: 8px;
}

.vehiculo-estado-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 6px 11px;
  font-size: 11px;
  font-weight: 700;
  box-shadow:
    0 2px 8px rgba(0,0,0,0.05),
    inset 0 1px 0 rgba(255,255,255,0.45);
}

.estado-vencido {
  background: #fee2e2;
  color: #991b1b;
}

.estado-proximo {
  background: #fff7d6;
  color: #92400e;
}

.estado-futuro {
  background: #e8f3ff;
  color: #1d4ed8;
}

.vehiculo-acciones {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 170px));
  gap: 8px;
  align-items: stretch;
}

.vehiculo-acciones a,
.vehiculo-acciones button {
  width: 100%;
}

.btn-abrir,
.btn-nuevo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 36px;
  padding: 8px 12px;
  text-decoration: none;
  border-radius: 10px;
  font-weight: 700;
  font-size: 12px;
  border: 1px solid transparent;
  box-shadow:
    0 2px 8px rgba(15,23,42,0.06),
    inset 0 1px 0 rgba(255,255,255,0.16);
}

@media (max-width: 1100px) {
  .cliente-header {
    grid-template-columns: 1fr;
  }

  .cliente-stats {
    justify-content: flex-start;
  }
}

@media (max-width: 900px) {
  .vehiculo-top {
    flex-direction: column;
  }

  .vehiculo-acciones {
    width: 100%;
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .cv-stats-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .cliente-avatar {
    width: 48px;
    height: 48px;
    min-width: 48px;
    font-size: 22px;
  }

  .vehiculo-top {
    padding-left: 8px;
  }

  .vehiculo-item::before {
    top: 12px;
    bottom: 12px;
  }

  .vehiculo-meta-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =========================================================
CLIENTES / VEHÍCULOS — G2 HISTORIAL / ACORDEÓN / DOCS
========================================================= */

.vehiculo-historial {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed #e4e7ec;
}

.vehiculo-historial-header {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(0,0,0,0.03);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: #111111;
  margin-bottom: 10px;
}

.vehiculo-historial-lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.historial-servicio-item {
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  overflow: hidden;
  background: #ffffff;
  box-shadow:
    0 4px 12px rgba(15, 23, 42, 0.04),
    inset 0 1px 0 rgba(255,255,255,0.72);
}

.historial-servicio-toggle {
  width: 100%;
  border: none;
  background: linear-gradient(180deg, #fafbfc 0%, #f2f5f8 100%);
  color: #111111;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  text-align: left;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.22s ease;
}

.historial-servicio-toggle:hover {
  background: linear-gradient(180deg, #f5f7fa 0%, #edf2f6 100%);
}

.historial-servicio-icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #111111;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
  transition: transform 0.38s ease;
}

.historial-servicio-panel {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 0.52s ease,
    opacity 0.32s ease;
}

.historial-servicio-item.is-open .historial-servicio-panel {
  max-height: 1400px;
  opacity: 1;
}

.historial-servicio-item.is-open .historial-servicio-icon {
  transform: rotate(180deg);
}

.historial-servicio-contenido {
  padding: 14px;
  border-top: 1px solid #e8edf2;
  background: linear-gradient(180deg, #ffffff 0%, #fcfcfd 100%);
}

.historial-servicio-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
}

.historial-servicio-grid > div {
  color: #111111;
  background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
  border: 1px solid #dde4ec;
  border-radius: 14px;
  padding: 8px 10px;
  box-shadow:
    0 6px 14px rgba(15, 23, 42, 0.05),
    inset 0 1px 0 rgba(255,255,255,0.92),
    inset 0 -3px 8px rgba(15, 23, 42, 0.04);
  line-height: 1.35;
}

.historial-servicio-grid > div strong {
  display: block;
  margin-bottom: 5px;
  color: #111111;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.historial-extra-section {
  margin-top: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #e3e8ef;
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow:
    0 4px 10px rgba(15, 23, 42, 0.04),
    inset 0 1px 0 rgba(255,255,255,0.86);
}

.historial-extra-title {
  margin: 0 0 8px 0;
  font-size: 12px;
  font-weight: 800;
  color: #111111;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.historial-extra-content,
.historial-extra-content p,
.historial-extra-content span,
.historial-extra-content li,
.lista-items-servicio li,
.historial-servicio-contenido,
.historial-servicio-contenido p,
.historial-servicio-contenido span {
  color: #111111;
}

.lista-items-servicio {
  margin: 0 0 0 18px;
  padding: 0;
}

.lista-items-servicio li {
  margin-bottom: 4px;
  line-height: 1.35;
  font-size: 13px;
}

.historial-servicio-acciones {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.btn-doc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 12px;
  text-decoration: none;
  border: 1px solid transparent;
  box-shadow:
    0 2px 8px rgba(15,23,42,0.06),
    inset 0 1px 0 rgba(255,255,255,0.16);
  text-align: center;
}

.btn-doc-upload {
  background: #fff7d6;
  color: #92400e;
  border-color: #f5deb3;
  cursor: pointer;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease !important;
}

.btn-doc-upload:hover {
  background: #fef0c7;
  transform: translateY(-1px) !important;
}

.btn-doc-ot {
  background: rgba(17, 159, 247, 0.22);
  color: #082d8a;
  border-color: rgba(0, 157, 255, 0.60);
}

.btn-doc-ot:hover {
  filter: brightness(0.98);
}

.btn-doc-factura {
  background: #dcfce7;
  color: #166534;
  border-color: #bbf7d0;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease !important;
}

.btn-doc-factura:hover {
  background: #d1fae5;
  transform: translateY(-1px) !important;
}

.btn-doc-disabled {
  background: #f3f4f6;
  color: #777;
  cursor: pointer;
  border-color: #e5e7eb;
}

@media (max-width: 900px) {
  .historial-servicio-grid {
    grid-template-columns: 1fr;
  }

  .historial-servicio-acciones {
    grid-template-columns: 1fr;
  }

  .historial-servicio-contenido {
    padding: 12px;
  }
}

/* =========================================================
CLIENTES / VEHÍCULOS — G3 MODAL UPLOAD
========================================================= */

.modal-upload-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}

.modal-upload-box {
  width: 100%;
  max-width: 520px;
  background: #fff;
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}

.modal-upload-box h3 {
  margin-top: 0;
  margin-bottom: 14px;
  font-size: 18px;
}

.modal-upload-grid {
  display: grid;
  gap: 12px;
}

.modal-upload-grid label {
  display: block;
  font-weight: 700;
  margin-bottom: 6px;
}

.modal-upload-grid input[type="text"],
.modal-upload-grid input[type="file"],
.modal-upload-grid input[type="number"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  font-size: 13px;
  box-sizing: border-box;
}

.modal-upload-acciones {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.modal-upload-acciones .btn-doc,
.modal-upload-acciones button {
  width: 100%;
}

.mensaje-upload {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  display: none;
  font-weight: 700;
}

.mensaje-upload.ok {
  display: block;
  background: #dcfce7;
  color: #166534;
}

.mensaje-upload.error {
  display: block;
  background: #fee2e2;
  color: #991b1b;
}

@media (max-width: 900px) {
  .modal-upload-acciones {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
CLIENTES / VEHÍCULOS — G5 AJUSTES FINALES NEUTRALES
========================================================= */

.cliente-header h3,
.vehiculo-titulo,
.vehiculo-historial-header,
.historial-servicio-toggle,
.btn-abrir,
.btn-nuevo,
.btn-doc {
  font-weight: 700;
}

.vehiculo-item:hover {
  transform: none;
}

.historial-servicio-contenido,
.historial-servicio-grid,
.historial-servicio-grid > div,
.lista-items-servicio li {
  color: #111111;
}

.upload-file-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.upload-file-row input[type="file"] {
  flex: 1;
  min-width: 0;
}

.upload-file-clear {
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  min-height: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  border-radius: 10px !important;
  background: #f3f4f6 !important;
  color: #666 !important;
  border: 1px solid #e5e7eb !important;
  cursor: pointer !important;
  font-size: 20px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.upload-file-clear:hover {
  background: #e5e7eb !important;
  color: #111 !important;
}

#btnCancelarUploadArchivo {
  cursor: pointer !important;
}

.upload-helper-text {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.3;
  color: #666;
}

/* =========================================================
G5.1 — RESTAURACIÓN BOTONES PERSONALIZADOS CV
========================================================= */

.btn-abrir {
  background: rgba(73, 73, 73, 0.22) !important;
  color: #000000 !important;
  border-color: rgba(73, 73, 73, 0.60) !important;
  cursor: pointer !important;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease !important;
}

.btn-abrir:hover {
  background: rgba(73, 73, 73, 0.5) !important;
  color: #000000 !important;
  border-color: rgba(73, 73, 73, 1) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 18px rgba(255, 189, 89, 0.18) !important;
}

.btn-nuevo {
  background: var(--vmms-red) !important;
  color: #fff !important;
  border-color: rgba(0, 0, 0, 0.2) !important;
  cursor: pointer !important;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease !important;
}

.btn-nuevo:hover {
  background: var(--vmms-red) !important;
  color: #fff !important;
  border-color: rgba(0, 0, 0, 0.6) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 18px rgba(255, 189, 89, 0.18) !important;
}

.btn-doc-ot {
  background: rgba(17, 159, 247, 0.22) !important;
  color: #082d8a !important;
  border-color: rgba(0, 157, 255, 0.60) !important;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease !important;
}

.btn-doc-ot:hover {
  background: rgba(0, 132, 214, 0.26) !important;
  color: #082d8a !important;
  border-color: rgba(0, 132, 214, 0.60) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 18px rgba(255, 189, 89, 0.18) !important;
}

/* =========================================================
G7 — SAFETY FIX CLIENTES / VEHÍCULOS
========================================================= */

.clientes-vehiculos-lista .muted,
.vehiculo-historial .muted,
.historial-servicio-contenido .muted,
.historial-extra-content .muted {
  color: #777;
  font-style: italic;
  text-align: left;
  margin-top: 0;
}

/* =========================================================
CLIENTES / VEHÍCULOS — BADGES DE EDICIÓN
========================================================= */

.cliente-header-actions {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

/* =========================================================
CLIENTES / VEHÍCULOS — BOTONES PREMIUM SUAVES
========================================================= */

/* Contenedor: siempre en una sola línea */
.vehiculo-acciones {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
}

/* Base compartida */
.vehiculo-acciones .btn-abrir,
.vehiculo-acciones .btn-nuevo {
  width: auto !important;
  min-width: 132px !important;
  max-width: 150px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 13px !important;
  border-radius: 10px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-size: 12px !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  text-decoration: none !important;

  border: 1px solid transparent !important;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease !important;

  box-shadow:
    0 2px 7px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.62) !important;
}

/* Ver / Ocultar historial — gris suave translúcido */
.vehiculo-acciones .btn-abrir {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.72) 0%, rgba(226,232,240,0.62) 100%) !important;
  color: #1f2937 !important;
  border-color: rgba(100, 116, 139, 0.24) !important;
}

.vehiculo-acciones .btn-abrir:hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.88) 0%, rgba(226,232,240,0.76) 100%) !important;
  color: #111827 !important;
  border-color: rgba(100, 116, 139, 0.36) !important;
  transform: translateY(-1px) !important;
  box-shadow:
    0 5px 12px rgba(15, 23, 42, 0.10),
    inset 0 1px 0 rgba(255,255,255,0.75) !important;
}

/* Nuevo servicio — rojo suave, no sólido pesado */
.vehiculo-acciones .btn-nuevo {
  background:
    linear-gradient(180deg, rgba(208, 2, 27, 0.92) 0%, rgba(176, 0, 23, 0.92) 100%) !important;
  color: #ffffff !important;
  border-color: rgba(145, 0, 20, 0.34) !important;
}

.vehiculo-acciones .btn-nuevo:hover {
  background:
    linear-gradient(180deg, rgba(220, 16, 42, 0.96) 0%, rgba(208, 2, 27, 0.96) 100%) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow:
    0 6px 14px rgba(208, 2, 27, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.20) !important;
}

/* Click más natural */
.vehiculo-acciones .btn-abrir:active,
.vehiculo-acciones .btn-nuevo:active {
  transform: translateY(0) !important;
  box-shadow:
    0 2px 6px rgba(15, 23, 42, 0.08),
    inset 0 2px 4px rgba(15, 23, 42, 0.10) !important;
}

/* Mantener una sola línea también en pantallas chicas */
@media (max-width: 900px) {
  .vehiculo-acciones {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .vehiculo-acciones .btn-abrir,
  .vehiculo-acciones .btn-nuevo {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

/* =========================================================
   LOGIN CLIENTE
========================================================= */

.login-page--cliente {
  background:
    linear-gradient(rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.80)),
    radial-gradient(circle at top, rgba(208, 2, 27, 0.22) 0%, transparent 30%),
    linear-gradient(135deg, #0b0b0d 0%, #16181d 100%);
}

.login-box--cliente {
  max-width: 460px;
  padding: 17px 25px;
  border-radius: 20px;
  box-shadow:
    0 22px 55px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.65);
}

.login-logo--cliente {
  margin-bottom: 10px;
}

.login-logo--cliente img {
  margin: 0 auto 3px;
}

.login-panel-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(208, 2, 27, 0.10);
  color: var(--vmms-red);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.login-logo--cliente h1 {
  line-height: 1.15;
}

.login-subtitle {
  margin: 0;
  color: var(--vmms-text-soft);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

.login-form-stack {
  margin-top: 18px;
}

.login-form-stack label {
  font-size: 12px;
  font-weight: 800;
  color: var(--vmms-text);
  margin-bottom: 6px;
}

.login-form-stack input {
  width: 100%;
  min-height: 44px;
  padding: 11px 12px;
  margin-bottom: 16px;
  border: 1px solid #d4d9df;
  border-radius: 10px;
  font-size: 14px;
  background: #ffffff;
}

.login-form-stack .btn-primary {
  width: 100%;
  min-height: 42px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 800;
  margin-top: 4px;
}

.login-respuesta {
  display: none;
  margin-bottom: 16px;
  padding: 12px 14px;
  border-radius: 12px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid transparent;
}

.login-respuesta.error {
  display: block;
  background: var(--vmms-danger-bg);
  color: var(--vmms-danger);
  border-color: rgba(185, 28, 28, 0.12);
}

.login-respuesta.ok {
  display: block;
  background: var(--vmms-success-bg);
  color: var(--vmms-success);
  border-color: rgba(21, 128, 61, 0.12);
}

.login-footer-links {
  margin-top: 16px;
  text-align: center;
}

.login-footer-links a {
  color: #0f4da8;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
}

.login-footer-links a:hover {
  text-decoration: underline;
}

.login-footnote {
  margin-top: 14px;
  text-align: center;
  color: var(--vmms-text-soft);
  font-size: 12px;
  line-height: 1.5;
}

@media (max-width: 520px) {
  .login-box--cliente {
    padding: 22px 20px;
    border-radius: 18px;
  }

  .login-logo--cliente img {
    width: 104px;
    height: 104px;
  }

  .login-logo--cliente h1 {
    font-size: 24px;
  }
}

/* =========================================================
   PANEL CLIENTE — BASE COMPATIBLE GLOBAL
   Migrado desde cliente-panel-ui.php
========================================================= */

.cliente-panel-page .contenedor {
  max-width: 1100px;
  margin: 24px auto;
  padding: 0 20px 40px;
}

.cliente-panel-page .card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(0,0,0,.08);
  padding: 22px;
  margin-bottom: 18px;
}

.cliente-panel-page .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.cliente-panel-page .bloque {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 14px;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.cliente-panel-page .bloque strong {
  display: block;
  margin-bottom: 6px;
  color: #111827;
}

.cliente-panel-page .contenido-vehiculo,
.cliente-panel-page .servicio-detalle {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition:
    max-height 0.35s ease,
    opacity 0.25s ease,
    margin-top 0.25s ease;
}

.cliente-panel-page .contenido-vehiculo.abierto,
.cliente-panel-page .servicio-detalle.abierto {
  max-height: 5000px;
  opacity: 1;
  margin-top: 12px;
}

.cliente-panel-page .vehiculo-header,
.cliente-panel-page .servicio-toggle {
  cursor: pointer;
}

.cliente-panel-page .muted {
  color: #6b7280;
}

.cliente-panel-page .vacio {
  padding: 18px;
  border: 2px dashed #cbd5e1;
  border-radius: 12px;
  background: #fafcff;
  color: #475569;
  text-align: center;
}

.cliente-panel-page .error-box {
  background: #fee2e2;
  color: #991b1b;
  border-radius: 10px;
  padding: 14px;
}

.cliente-panel-page .loading {
  color: #475569;
  padding: 16px;
}

.cliente-panel-page .estado-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.cliente-panel-page .estado-vencido {
  background: #fee2e2;
  color: #991b1b;
}

.cliente-panel-page .estado-proximo {
  background: #fef3c7;
  color: #92400e;
}

.cliente-panel-page .estado-futuro {
  background: #dcfce7;
  color: #166534;
}

.cliente-panel-page .estado-sin-dato {
  background: #e5e7eb;
  color: #374151;
}

.cliente-panel-page .btn-doc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 10px;
  padding: 9px 12px;
  font-weight: 700;
  font-size: 13px;
  border: 1px solid transparent;
}

.cliente-panel-page .btn-doc-disabled {
  background: #f3f4f6;
  color: #777;
  cursor: default;
  border: 1px solid #e5e7eb;
}

.cliente-panel-page .cp-history-title {
  margin: 20px 0 10px 0;
  color: #111111;
  font-size: 15px;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

  /* =========================================================
   PANEL CLIENTE — SHELL PREMIUM
========================================================= */

.cliente-panel-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, rgba(208, 2, 27, 0.10) 0%, transparent 32%),
    radial-gradient(circle at top right, rgba(255, 189, 89, 0.16) 0%, transparent 28%),
    linear-gradient(180deg, #f4f5f7 0%, #eef0f3 100%);
  color: var(--vmms-text);
}

.cliente-panel-page .cp-topbar {
  background: rgba(10, 10, 12, 0.96);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 12px 30px rgba(0,0,0,0.16);
  color: #ffffff;
  padding: 14px 20px;
}

.cliente-panel-page .cp-topbar-inner {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.cliente-panel-page .cp-brand-area {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cliente-panel-page .cp-brand-logo-wrap {
  width: 60px;
  height: 60px;
  min-width: 60px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(245,245,245,0.92) 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow:
    0 12px 26px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -1px 0 rgba(0,0,0,0.06);
}

.cliente-panel-page .cp-brand-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.cliente-panel-page .cp-topbar h1 {
  margin: 0;
  font-size: 20px;
  line-height: 1.1;
  color: #ffffff;
}

.cliente-panel-page .cp-topbar p {
  margin: 4px 0 0 0;
  font-size: 12px;
  color: rgba(255,255,255,0.62);
}

.cliente-panel-page .cp-topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cliente-panel-page .cp-topbar-link {
  width: auto;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease,
    color 0.18s ease;
}

.cliente-panel-page .cp-topbar-link--soft {
  background: rgba(255,255,255,0.08);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.10);
}

.cliente-panel-page .cp-topbar-link--dark {
  background: rgba(208, 2, 27, 0.92);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.08);
}

.cliente-panel-page .cp-topbar-link:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
}

.cliente-panel-page .cp-container {
  max-width: 1180px;
  margin: 22px auto;
  padding: 0 20px 40px;
}

.cliente-panel-page .cp-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.6fr);
  gap: 18px;
  align-items: stretch;
  margin-bottom: 18px;
  padding: 22px;
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.18) 0%, transparent 80%),
    linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
  border: 1px solid rgba(208, 2, 27, 0.10);
  box-shadow:
    0 18px 42px rgba(15, 23, 42, 0.10),
    inset 0 1px 0 rgba(255,255,255,0.90);
}

.cliente-panel-page .cp-hero::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20px;
  bottom: 20px;
  width: 6px;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(180deg, var(--vmms-red) 0%, var(--vmms-yellow) 100%);
}

.cliente-panel-page .cp-hero-content {
  position: relative;
  z-index: 1;
  padding-left: 8px;
}

.cliente-panel-page .cp-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(208, 2, 27, 0.08);
  color: var(--vmms-red);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.cliente-panel-page .cp-hero h2 {
  margin: 0 0 8px 0;
  font-size: 30px;
  line-height: 1.08;
  color: #111111;
  letter-spacing: -0.03em;
}

.cliente-panel-page .cp-hero p {
  max-width: 720px;
  margin: 0;
  color: #555;
  font-size: 14px;
  line-height: 1.55;
}

.cliente-panel-page .cp-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.cliente-panel-page .cp-whatsapp-btn {
  width: auto;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(37, 211, 102, 0.96) 0%, rgba(24, 166, 78, 0.96) 100%);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
  box-shadow:
    0 10px 22px rgba(37, 211, 102, 0.20),
    inset 0 1px 0 rgba(255,255,255,0.22);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease;
}

.cliente-panel-page .cp-whatsapp-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.02);
  box-shadow:
    0 14px 28px rgba(37, 211, 102, 0.26),
    inset 0 1px 0 rgba(255,255,255,0.25);
}

.cliente-panel-page .cp-hero-card {
  position: relative;
  z-index: 1;
  align-self: stretch;
  padding: 18px;
  border-radius: 20px;
  background:
    linear-gradient(180deg, #111111 0%, #1c1c20 100%);
  color: #ffffff;
  box-shadow:
    0 14px 30px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.08);
}

.cliente-panel-page .cp-hero-card-label {
  display: inline-flex;
  margin-bottom: 12px;
  min-height: 24px;
  padding: 0 10px;
  align-items: center;
  border-radius: 999px;
  background: rgba(255,189,89,0.16);
  color: var(--vmms-yellow);
  font-size: 11px;
  font-weight: 800;
}

.cliente-panel-page .cp-hero-card strong {
  display: block;
  font-size: 17px;
  line-height: 1.25;
  margin-bottom: 8px;
}

.cliente-panel-page .cp-hero-card p {
  margin: 0;
  color: rgba(255,255,255,0.66);
  font-size: 13px;
  line-height: 1.45;
}

@media (max-width: 900px) {
  .cliente-panel-page .cp-topbar-inner,
  .cliente-panel-page .cp-topbar-actions {
    align-items: stretch;
  }

  .cliente-panel-page .cp-topbar-inner {
    flex-direction: column;
  }

  .cliente-panel-page .cp-topbar-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .cliente-panel-page .cp-topbar-link {
    width: 100%;
  }

  .cliente-panel-page .cp-hero {
    grid-template-columns: 1fr;
    padding: 18px;
  }

  .cliente-panel-page .cp-hero h2 {
    font-size: 25px;
  }
}

@media (max-width: 520px) {
  .cliente-panel-page .cp-container {
    padding: 0 12px 32px;
    margin-top: 14px;
  }

  .cliente-panel-page .cp-brand-logo-wrap {
  width: 46px;
  height: 46px;
  min-width: 46px;
  border-radius: 14px;
}

  .cliente-panel-page .cp-topbar-actions {
    grid-template-columns: 1fr;
  }

  .cliente-panel-page .cp-hero {
    border-radius: 18px;
  }

  .cliente-panel-page .cp-hero h2 {
    font-size: 23px;
  }
}

/* =========================================================
   PANEL CLIENTE — MIS DATOS PREMIUM
========================================================= */

.cliente-panel-page .cp-client-summary-card {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(208, 2, 27, 0.08);
  background:
    radial-gradient(circle at top right, rgba(255, 189, 89, 0.12) 0%, transparent 26%),
    linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
  box-shadow:
    0 14px 34px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.90);
}

.cliente-panel-page .cp-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(229, 231, 235, 0.85);
}

.cliente-panel-page .cp-section-kicker {
  display: inline-flex;
  margin-bottom: 5px;
  color: var(--vmms-red);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cliente-panel-page .cp-section-header h2 {
  margin: 0;
  padding: 0;
  border: none;
  color: #111111;
  font-size: 21px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.cliente-panel-page .cp-section-icon {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(208, 2, 27, 0.10) 0%, rgba(255, 189, 89, 0.16) 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.75),
    0 6px 14px rgba(15,23,42,0.06);
}

.cliente-panel-page .cp-client-summary {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
  gap: 16px;
  align-items: stretch;
}

.cliente-panel-page .cp-client-profile {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 17px;
  border-radius: 20px;
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.20) 0%, transparent 34%),
    linear-gradient(145deg, #ffffff 0%, #f7f9fc 56%, #eef2f6 100%);
  color: #111111;
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow:
    0 16px 34px rgba(15, 23, 42, 0.10),
    0 3px 8px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255,255,255,0.96),
    inset 0 -8px 18px rgba(15,23,42,0.035);
}

.cliente-panel-page .cp-client-profile::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 5px;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(180deg, var(--vmms-red) 0%, var(--vmms-yellow) 100%);
  box-shadow: 0 0 18px rgba(208, 2, 27, 0.18);
}

.cliente-panel-page .cp-client-profile::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 19px;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.78) 0%, transparent 42%);
  opacity: 0.75;
}

.cliente-panel-page .cp-client-profile > * {
  position: relative;
  z-index: 1;
}

.cliente-panel-page .cp-client-avatar {
  width: 58px;
  height: 58px;
  min-width: 58px;
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(208,2,27,0.96) 0%, rgba(157,1,21,0.96) 100%);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 900;
  box-shadow:
    0 12px 22px rgba(208, 2, 27, 0.20),
    0 3px 7px rgba(15,23,42,0.12),
    inset 0 1px 0 rgba(255,255,255,0.28),
    inset 0 -3px 8px rgba(0,0,0,0.14);
}

.cliente-panel-page .cp-client-main {
  min-width: 0;
}

.cliente-panel-page .cp-client-label {
  display: inline-flex;
  margin-bottom: 6px;
  color: var(--vmms-red);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cliente-panel-page .cp-client-main h3 {
  margin: 0 0 5px 0;
  color: #111111;
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.cliente-panel-page .cp-client-main p {
  margin: 0;
  color: #5b6470;
  font-size: 12px;
  line-height: 1.4;
}

.cliente-panel-page .cp-client-data-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.cliente-panel-page .cp-data-tile {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #e5eaf0;
  box-shadow:
    0 6px 16px rgba(15, 23, 42, 0.045),
    inset 0 1px 0 rgba(255,255,255,0.88),
    inset 0 -1px 0 rgba(15,23,42,0.03);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.cliente-panel-page .cp-data-tile:hover {
  transform: translateY(-1px);
  border-color: rgba(208, 2, 27, 0.14);
  box-shadow:
    0 10px 22px rgba(15, 23, 42, 0.07),
    inset 0 1px 0 rgba(255,255,255,0.90);
}

.cliente-panel-page .cp-data-icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 12px;
  background: rgba(208, 2, 27, 0.075);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.cliente-panel-page .cp-data-tile strong {
  display: block;
  margin-bottom: 4px;
  color: #111111;
  font-size: 11px;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

.cliente-panel-page .cp-data-tile p {
  margin: 0;
  color: #333333;
  font-size: 13px;
  line-height: 1.25;
  word-break: break-word;
}

@media (max-width: 1050px) {
  .cliente-panel-page .cp-client-summary {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .cliente-panel-page .cp-client-data-grid {
    grid-template-columns: 1fr;
  }

  .cliente-panel-page .cp-client-profile {
    align-items: flex-start;
  }
}

@media (max-width: 520px) {
  .cliente-panel-page .cp-section-header {
    align-items: flex-start;
  }

  .cliente-panel-page .cp-section-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
  }

  .cliente-panel-page .cp-client-profile {
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

  .cliente-panel-page .cp-client-avatar {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 15px;
    font-size: 21px;
  }

  .cliente-panel-page .cp-client-main {
    min-width: 0;
  }

  .cliente-panel-page .cp-client-main h3 {
    font-size: 16px;
    line-height: 1.15;
    word-break: break-word;
  }

  .cliente-panel-page .cp-client-main p {
    font-size: 12px;
    line-height: 1.35;
  }
}

/* =========================================================
   PANEL CLIENTE — VEHÍCULOS PREMIUM
========================================================= */

.cliente-panel-page .cp-vehicles-card {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(208, 2, 27, 0.08);
  background:
    radial-gradient(circle at top right, rgba(255, 189, 89, 0.10) 0%, transparent 26%),
    linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
  box-shadow:
    0 14px 34px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.90);
}

/* Lista generada por JS */
.cliente-panel-page #vehiculosCliente {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Card principal de cada vehículo */
.cliente-panel-page .vehiculo-card {
  position: relative;
  overflow: hidden;
  margin-bottom: 0;
  padding: 0;
  border-radius: 22px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.16) 0%, transparent 28%),
    linear-gradient(145deg, #ffffff 0%, #f8fafc 58%, #eef2f6 100%);
  box-shadow:
    0 16px 34px rgba(15, 23, 42, 0.09),
    0 3px 8px rgba(15, 23, 42, 0.05),
    inset 0 1px 0 rgba(255,255,255,0.96),
    inset 0 -8px 18px rgba(15,23,42,0.032);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.cliente-panel-page .vehiculo-card:hover {
  transform: translateY(-1px);
  border-color: rgba(208, 2, 27, 0.16);
  box-shadow:
    0 20px 42px rgba(15, 23, 42, 0.115),
    0 4px 10px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255,255,255,0.96);
}

.cliente-panel-page .vehiculo-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 5px;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(180deg, var(--vmms-red) 0%, var(--vmms-yellow) 100%);
  box-shadow: 0 0 18px rgba(208, 2, 27, 0.18);
}

/* Header clickeable del vehículo */
.cliente-panel-page .vehiculo-header {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 16px 18px 16px 22px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.82);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.82) 0%, rgba(248,250,252,0.72) 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
  transition:
    background 0.18s ease,
    border-color 0.18s ease;
}

.cliente-panel-page .vehiculo-header:hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(248,250,252,0.86) 100%);
}

/* Dominio tipo patente */
.cliente-panel-page .vehiculo-titulo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 13px;
  margin-bottom: 8px;
  border-radius: 10px;
  background:
    linear-gradient(180deg, #ffffff 0%, #eef2f7 100%);
  border: 1px solid rgba(203, 213, 225, 0.95);
  color: #111111;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.08em;
  box-shadow:
    0 4px 10px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255,255,255,0.92),
    inset 0 -2px 5px rgba(15,23,42,0.04);
}

.cliente-panel-page .vehiculo-sub {
  color: #4b5563;
  font-size: 13px;
  line-height: 1.35;
  margin: 0;
}

/* Botón + / - */
.cliente-panel-page .vehiculo-toggle-icono {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(208,2,27,0.96) 0%, rgba(165,1,22,0.96) 100%);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  font-weight: 800;
  line-height: 1;
  box-shadow:
    0 10px 20px rgba(208, 2, 27, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -2px 5px rgba(0,0,0,0.15);
}

/* Panel desplegable */
.cliente-panel-page .contenido-vehiculo {
  position: relative;
  z-index: 1;
  padding: 0 16px;
}

.cliente-panel-page .contenido-vehiculo.abierto {
  margin-top: 0;
  padding: 16px;
}

/* Card interna de próximo servicio */
.cliente-panel-page .contenido-vehiculo > .card {
  margin-bottom: 14px !important;
  padding: 14px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  box-shadow:
    0 8px 18px rgba(15, 23, 42, 0.055),
    inset 0 1px 0 rgba(255,255,255,0.92) !important;
}

/* Bloques internos */
.cliente-panel-page .vehiculo-card .bloque {
  border-radius: 15px;
  border: 1px solid #e2e8f0;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  box-shadow:
    0 5px 13px rgba(15, 23, 42, 0.045),
    inset 0 1px 0 rgba(255,255,255,0.88),
    inset 0 -1px 0 rgba(15,23,42,0.03);
}

.cliente-panel-page .vehiculo-card .bloque strong {
  color: #111111;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

/* Estado del vehículo: quitamos margen viejo de 30px */
.cliente-panel-page .estado-chip {
  margin: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  box-shadow:
    0 3px 8px rgba(15,23,42,0.05),
    inset 0 1px 0 rgba(255,255,255,0.48);
}

/* Título historial interno */
.cliente-panel-page .contenido-vehiculo h3 {
  margin: 16px 0 10px 0 !important;
  color: #111111;
  font-size: 15px;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

/* Empty states */
.cliente-panel-page .vacio {
  border-radius: 16px;
  border: 1px dashed rgba(148, 163, 184, 0.90);
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  color: #64748b;
}

/* Responsive */
@media (max-width: 760px) {
  .cliente-panel-page .vehiculo-header {
    align-items: center;
    flex-wrap: nowrap;
    padding: 14px 14px 14px 18px;
  }

  .cliente-panel-page .vehiculo-titulo {
    min-height: 30px;
    font-size: 14px;
    margin-bottom: 6px;
  }

  .cliente-panel-page .vehiculo-sub {
    font-size: 12px;
  }

  .cliente-panel-page .vehiculo-toggle-icono {
    width: 32px;
    height: 32px;
    min-width: 32px;
  }

  .cliente-panel-page .contenido-vehiculo.abierto {
    padding: 12px;
  }
}

/* =========================================================
   PANEL CLIENTE — HISTORIAL INTERNO PREMIUM
========================================================= */

.cliente-panel-page .historial-lista {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cliente-panel-page .cp-service-item {
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background:
    linear-gradient(145deg, #ffffff 0%, #f8fafc 62%, #eef2f6 100%);
  box-shadow:
    0 10px 22px rgba(15, 23, 42, 0.065),
    inset 0 1px 0 rgba(255,255,255,0.94),
    inset 0 -5px 12px rgba(15,23,42,0.025);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.cliente-panel-page .cp-service-item:hover {
  transform: translateY(-1px);
  border-color: rgba(208, 2, 27, 0.14);
  box-shadow:
    0 14px 30px rgba(15, 23, 42, 0.09),
    inset 0 1px 0 rgba(255,255,255,0.96);
}

.cliente-panel-page .cp-service-toggle {
  width: 100%;
  padding: 13px 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(248,250,252,0.84) 100%);
  border: none;
  border-bottom: 1px solid transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
}

.cliente-panel-page .cp-service-item:has(.servicio-detalle.abierto) .cp-service-toggle {
  border-bottom-color: rgba(226, 232, 240, 0.92);
}

.cliente-panel-page .cp-service-toggle-left {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
}

.cliente-panel-page .cp-service-date-icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 13px;
  background:
    linear-gradient(180deg, rgba(208,2,27,0.10) 0%, rgba(255,189,89,0.18) 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.80),
    0 4px 10px rgba(15,23,42,0.05);
}

.cliente-panel-page .cp-service-title-wrap {
  min-width: 0;
}

.cliente-panel-page .servicio-toggle-texto {
  color: #111111;
  font-size: 14px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.cliente-panel-page .cp-service-mini-meta {
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.25;
}

.cliente-panel-page .cp-service-toggle-right {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.cliente-panel-page .cp-service-toggle-right .estado-chip {
  margin: 0 !important;
  white-space: nowrap;
}

.cliente-panel-page .servicio-toggle-icono {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, #ffffff 0%, #eef2f7 100%);
  color: #111827;
  border: 1px solid rgba(203, 213, 225, 0.90);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  box-shadow:
    0 4px 10px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255,255,255,0.92);
}

.cliente-panel-page .cp-service-detail {
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
}

.cliente-panel-page .cp-service-detail.abierto {
  padding: 14px;
  margin-top: 0;
}

.cliente-panel-page .cp-service-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.cliente-panel-page .cp-service-detail-grid .bloque {
  position: relative;
  overflow: hidden;
  min-height: 94px;
  padding: 13px 13px 12px;
  border-radius: 16px;
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.11) 0%, transparent 34%),
    linear-gradient(145deg, #ffffff 0%, #f8fafc 58%, #eef2f6 100%);
  border: 1px solid #dfe7f0;
  box-shadow:
    0 10px 22px rgba(15, 23, 42, 0.055),
    0 3px 8px rgba(15,23,42,0.035),
    inset 0 1px 0 rgba(255,255,255,0.94),
    inset 0 -5px 12px rgba(15,23,42,0.022);
}

.cliente-panel-page .cp-service-detail-grid .bloque::before {
  content: "";
  position: absolute;
  top: 0;
  left: 14px;
  right: 14px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--vmms-red) 0%, var(--vmms-yellow) 100%);
  opacity: 0.92;
}

.cliente-panel-page .cp-service-detail-grid .bloque strong {
  display: block;
  margin-bottom: 5px;
  color: #111111;
  font-size: 12px;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

.cliente-panel-page .cp-service-extra {
  margin-top: 12px;
  padding: 13px 14px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #e1e8f0;
  box-shadow:
    0 5px 13px rgba(15, 23, 42, 0.04),
    inset 0 1px 0 rgba(255,255,255,0.90);
}

.cliente-panel-page .cp-service-extra strong {
  display: block;
  margin-bottom: 8px;
  color: #111111;
  font-size: 11px;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

.cliente-panel-page .cp-service-items-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cliente-panel-page .cp-service-items-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 6px;
  color: #1f2937;
  font-size: 13px;
  line-height: 1.4;
}

.cliente-panel-page .cp-service-items-list li:last-child {
  margin-bottom: 0;
}

.cliente-panel-page .cp-service-items-list li::before {
  content: "✓";
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin-top: 1px;
  border-radius: 999px;
  background: rgba(21, 128, 61, 0.11);
  color: #15803d;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.cliente-panel-page .cp-service-notes p {
  margin: 0;
  color: #374151;
  font-size: 13px;
  line-height: 1.45;
}

@media (max-width: 760px) {
  .cliente-panel-page .cp-service-toggle {
    align-items: flex-start;
    gap: 10px;
  }

  .cliente-panel-page .cp-service-toggle-right {
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 6px;
  }

  .cliente-panel-page .cp-service-toggle-right .estado-chip {
    font-size: 10px;
    min-height: 24px;
    padding: 0 9px;
  }

  .cliente-panel-page .servicio-toggle-texto {
    font-size: 13px;
  }

  .cliente-panel-page .cp-service-mini-meta {
    font-size: 11px;
  }

  .cliente-panel-page .cp-service-date-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 12px;
  }

  .cliente-panel-page .servicio-toggle-icono {
    width: 28px;
    height: 28px;
    min-width: 28px;
  }

  .cliente-panel-page .cp-service-detail.abierto {
    padding: 12px;
  }
}

/* =========================================================
   CP1.1 PASO 4.1 — AJUSTES DE COHERENCIA / MOBILE / ESTADO
========================================================= */

/* ---------------------------------------------
   Legibilidad general: evitar microtextos de 10/11px
--------------------------------------------- */

.cliente-panel-page .cp-kicker,
.cliente-panel-page .cp-section-kicker,
.cliente-panel-page .cp-client-label,
.cliente-panel-page .cp-data-tile strong,
.cliente-panel-page .cp-service-detail-grid .bloque strong,
.cliente-panel-page .cp-service-extra strong,
.cliente-panel-page .vehiculo-card .bloque strong,
.cliente-panel-page .estado-chip {
  font-size: 12px !important;
}

.cliente-panel-page .cp-service-mini-meta,
.cliente-panel-page .vehiculo-sub,
.cliente-panel-page .cp-client-main p,
.cliente-panel-page .cp-data-tile p,
.cliente-panel-page .cp-service-notes p,
.cliente-panel-page .cp-service-items-list li {
  font-size: 13px !important;
}

.cliente-panel-page .servicio-toggle-texto,
.cliente-panel-page .vehiculo-titulo {
  font-size: 14px !important;
}

/* ---------------------------------------------
   Header vehículo: alineación limpia
--------------------------------------------- */

.cliente-panel-page .cp-vehicle-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.cliente-panel-page .cp-vehicle-topline {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  width: 100%;
}

.cliente-panel-page .cp-vehicle-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cliente-panel-page .vehiculo-sub {
  margin-top: 7px;
  text-transform: uppercase;
  letter-spacing: 0.035em;
  font-weight: 650;
  color: #334155;
}

/* Dominio siempre alineado igual */
.cliente-panel-page .vehiculo-titulo {
  margin: 0 !important;
  min-width: 108px;
  text-align: center;
}

/* ---------------------------------------------
   Estado visual por vehículo
   Azul = al día / amarillo = próximo / rojo = vencido
--------------------------------------------- */

.cliente-panel-page .vehiculo-card {
  border-width: 1px !important;
  border-style: solid !important;
}

.cliente-panel-page .cp-vehicle--futuro {
  border-color: #bfdbfe !important;
  background:
    radial-gradient(circle at top right, rgba(96,165,250,0.15) 0%, transparent 30%),
    linear-gradient(145deg, #ffffff 0%, #f8fbff 58%, #edf6ff 100%) !important;
}

.cliente-panel-page .cp-vehicle--futuro::before {
  background: linear-gradient(180deg, #2563eb 0%, #60a5fa 100%) !important;
}

.cliente-panel-page .cp-vehicle--futuro .vehiculo-header {
  border-bottom-color: #bfdbfe !important;
}

.cliente-panel-page .cp-vehicle--proximo {
  border-color: #f3d28b !important;
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.22) 0%, transparent 30%),
    linear-gradient(145deg, #ffffff 0%, #fffaf0 58%, #fff3d2 100%) !important;
}

.cliente-panel-page .cp-vehicle--proximo::before {
  background: linear-gradient(180deg, #f59e0b 0%, #fbbf24 100%) !important;
}

.cliente-panel-page .cp-vehicle--proximo .vehiculo-header {
  border-bottom-color: #f3d28b !important;
}

.cliente-panel-page .cp-vehicle--vencido {
  border-color: #f0b4b4 !important;
  background:
    radial-gradient(circle at top right, rgba(248,113,113,0.14) 0%, transparent 30%),
    linear-gradient(145deg, #ffffff 0%, #fff8f8 58%, #feecec 100%) !important;
}

.cliente-panel-page .cp-vehicle--vencido::before {
  background: linear-gradient(180deg, #dc2626 0%, #f87171 100%) !important;
}

.cliente-panel-page .cp-vehicle--vencido .vehiculo-header {
  border-bottom-color: #f0b4b4 !important;
}

.cliente-panel-page .cp-vehicle--sin-dato {
  border-color: #d7dce3 !important;
  background:
    linear-gradient(145deg, #ffffff 0%, #f8fafc 58%, #eef2f6 100%) !important;
}

.cliente-panel-page .cp-vehicle--sin-dato::before {
  background: linear-gradient(180deg, #94a3b8 0%, #cbd5e1 100%) !important;
}

/* ---------------------------------------------
   Historial de servicios: sin badge de estado histórico
--------------------------------------------- */

.cliente-panel-page .cp-service-toggle-right {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ---------------------------------------------
   Mobile: mantener + del servicio en la misma línea
--------------------------------------------- */

@media (max-width: 760px) {
  .cliente-panel-page .cp-service-toggle {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 32px !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .cliente-panel-page .cp-service-toggle-left {
    min-width: 0 !important;
  }

  .cliente-panel-page .cp-service-toggle-right {
    width: 32px !important;
    min-width: 32px !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: row !important;
    gap: 0 !important;
  }

  .cliente-panel-page .servicio-toggle-icono {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    font-size: 18px !important;
  }

  .cliente-panel-page .servicio-toggle-texto {
    font-size: 14px !important;
    line-height: 1.2 !important;
  }

  .cliente-panel-page .cp-service-mini-meta {
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  .cliente-panel-page .vehiculo-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 34px !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .cliente-panel-page .vehiculo-titulo {
    min-width: 96px;
    min-height: 30px;
  }

  .cliente-panel-page .vehiculo-sub {
    font-size: 12px !important;
    line-height: 1.3;
  }
}


/* =========================================================
   CP1.1 PASO 4.2 — HIGHLIGHTS PREMIUM + GRID 3 COLUMNAS
========================================================= */

.cliente-panel-page .cp-next-service-card {
  margin-bottom: 14px !important;
  padding: 0 !important;
  border-radius: 20px !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%) !important;
  box-shadow:
    0 12px 28px rgba(15, 23, 42, 0.07),
    inset 0 1px 0 rgba(255,255,255,0.94) !important;
  overflow: hidden;
}

.cliente-panel-page .cp-next-service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 14px;
}

.cliente-panel-page .cp-highlight-block {
  position: relative;
  overflow: hidden;
  min-height: 154px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid #dfe7f0;
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.14) 0%, transparent 30%),
    linear-gradient(145deg, #ffffff 0%, #f8fafc 58%, #eef2f6 100%);
  box-shadow:
    0 12px 26px rgba(15, 23, 42, 0.07),
    0 3px 8px rgba(15,23,42,0.04),
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -6px 14px rgba(15,23,42,0.025);
}

.cliente-panel-page .cp-highlight-block::before {
  content: "";
  position: absolute;
  top: 0;
  left: 16px;
  right: 16px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--vmms-red) 0%, var(--vmms-yellow) 100%);
  opacity: 0.95;
}

.cliente-panel-page .cp-highlight-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.cliente-panel-page .cp-highlight-head strong {
  margin: 0;
  color: #111111;
  font-size: 14px;
  line-height: 1.1;
  text-transform: none;
  letter-spacing: 0;
}

.cliente-panel-page .cp-highlight-icon {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(208,2,27,0.10) 0%, rgba(255,189,89,0.18) 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.82),
    0 5px 12px rgba(15,23,42,0.05);
}

.cliente-panel-page .cp-highlight-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cliente-panel-page .cp-highlight-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 13px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.90) 0%, rgba(248,250,252,0.82) 100%);
  border: 1px solid #e6ebf2;
  box-shadow:
    0 4px 10px rgba(15,23,42,0.035),
    inset 0 1px 0 rgba(255,255,255,0.90);
}

.cliente-panel-page .cp-highlight-row span {
  color: #475569;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 600;
}

.cliente-panel-page .cp-highlight-row b {
  color: #111111;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 800;
  text-align: right;
}

.cliente-panel-page .cp-highlight-helper {
  position: relative;
  z-index: 1;
  margin: auto;
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255, 244, 214, 0.92);
  border: 1px solid #f5deb3;
  color: #7a4f00;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.cliente-panel-page .cp-highlight-helper-icon {
  font-size: 14px;
  line-height: 1;
}

.cliente-panel-page .cp-status-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 92px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.cliente-panel-page .cp-status-note {
  margin: 0;
  color: #5b6470;
  font-size: 13px;
  line-height: 1.4;
}

@media (max-width: 1100px) {
  .cliente-panel-page .cp-service-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .cliente-panel-page .cp-next-service-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 12px;
  }

  .cliente-panel-page .cp-highlight-block {
    min-height: auto;
    padding: 14px;
  }

  .cliente-panel-page .cp-highlight-row {
    padding: 9px 11px;
  }

  .cliente-panel-page .cp-highlight-row span,
  .cliente-panel-page .cp-highlight-row b,
  .cliente-panel-page .cp-status-note {
    font-size: 12px;
  }

  .cliente-panel-page .cp-service-detail-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   CP1.1 PASO 4.3 — LOGO / AVATAR DINÁMICO POR MARCA
========================================================= */

.cliente-panel-page .cp-vehicle-header-left {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 13px;
}

.cliente-panel-page .cp-vehicle-brand {
  width: 54px;
  height: 54px;
  min-width: 54px;
  border-radius: 17px;
  background:
    linear-gradient(145deg, #ffffff 0%, #f8fafc 58%, #eef2f6 100%);
  border: 1px solid rgba(203, 213, 225, 0.95);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  overflow: hidden;
  box-shadow:
    0 10px 22px rgba(15, 23, 42, 0.075),
    0 3px 8px rgba(15, 23, 42, 0.045),
    inset 0 1px 0 rgba(255,255,255,0.94),
    inset 0 -4px 10px rgba(15,23,42,0.025);
}

.cliente-panel-page .cp-vehicle-brand img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.cliente-panel-page .cp-vehicle-brand--fallback {
  padding: 0;
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.18) 0%, transparent 34%),
    linear-gradient(145deg, #ffffff 0%, #f8fafc 58%, #eef2f6 100%);
  color: #111827;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

/* Ajuste visual según estado del vehículo */
.cliente-panel-page .cp-vehicle--futuro .cp-vehicle-brand {
  border-color: #bfdbfe;
  box-shadow:
    0 10px 22px rgba(37, 99, 235, 0.09),
    inset 0 1px 0 rgba(255,255,255,0.94);
}

.cliente-panel-page .cp-vehicle--proximo .cp-vehicle-brand {
  border-color: #f3d28b;
  box-shadow:
    0 10px 22px rgba(245, 158, 11, 0.10),
    inset 0 1px 0 rgba(255,255,255,0.94);
}

.cliente-panel-page .cp-vehicle--vencido .cp-vehicle-brand {
  border-color: #f0b4b4;
  box-shadow:
    0 10px 22px rgba(220, 38, 38, 0.09),
    inset 0 1px 0 rgba(255,255,255,0.94);
}

@media (max-width: 760px) {
  .cliente-panel-page .cp-vehicle-header-left {
    gap: 10px;
  }

  .cliente-panel-page .cp-vehicle-brand {
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: 15px;
    padding: 7px;
  }

  .cliente-panel-page .cp-vehicle-brand--fallback {
    font-size: 13px;
  }
}

@media (max-width: 420px) {
  .cliente-panel-page .cp-vehicle-brand {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 14px;
  }

  .cliente-panel-page .cp-vehicle-header-left {
    align-items: center;
  }
}

/* =========================================================
   CP1.1 PASO 4.4 — DOCUMENTACIÓN / COMPROBANTES PREMIUM
========================================================= */

.cliente-panel-page .cp-doc-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
}

/* Orden de trabajo: azul, alineado al botón OT */
.cliente-panel-page .cp-doc-card--ot {
  border-color: rgba(37, 99, 235, 0.28) !important;
  background:
    radial-gradient(circle at top right, rgba(37, 99, 235, 0.12) 0%, transparent 34%),
    linear-gradient(145deg, #ffffff 0%, #f8fbff 58%, #eef6ff 100%) !important;
}

.cliente-panel-page .cp-doc-card--ot::before {
  background: linear-gradient(90deg, #2563eb 0%, #93c5fd 100%) !important;
}

/* Factura: verde */
.cliente-panel-page .cp-doc-card--factura {
  border-color: #bbf7d0 !important;
  background:
    radial-gradient(circle at top right, rgba(34,197,94,0.12) 0%, transparent 34%),
    linear-gradient(145deg, #ffffff 0%, #f7fff9 58%, #ecfdf3 100%) !important;
}

.cliente-panel-page .cp-doc-card--factura::before {
  background: linear-gradient(90deg, #16a34a 0%, #86efac 100%) !important;
}

/* Sin documento: neutro */
.cliente-panel-page .cp-doc-card--empty {
  border-color: #e2e8f0 !important;
  background:
    radial-gradient(circle at top right, rgba(148,163,184,0.12) 0%, transparent 34%),
    linear-gradient(145deg, #ffffff 0%, #f8fafc 58%, #eef2f6 100%) !important;
}

.cliente-panel-page .cp-doc-card--empty::before {
  background: linear-gradient(90deg, #94a3b8 0%, #cbd5e1 100%) !important;
}

.cliente-panel-page .cp-doc-head {
  position: relative;
  min-width: 0;
  min-height: 42px;
  padding: 2px 6px 0 42px;
  text-align: center;
}

.cliente-panel-page .cp-doc-icon {
  position: absolute;
  left: 0;
  top: 2px;
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 13px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(248,250,252,0.88) 100%);
  border: 1px solid rgba(226, 232, 240, 0.95);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 5px 12px rgba(15,23,42,0.045),
    inset 0 1px 0 rgba(255,255,255,0.92);
}

.cliente-panel-page .cp-doc-head strong {
  display: block;
  width: 100%;
  margin: 0 0 5px 0 !important;
  text-align: center;
}

.cliente-panel-page .cp-doc-head p {
  width: 100%;
  max-width: 230px;
  margin: 0 auto;
  color: #64748b;
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
}

.cliente-panel-page .cp-doc-action {
  width: 100%;
  margin-top: auto;
}

.cliente-panel-page .cp-doc-card .btn-doc {
  width: 100%;
  min-height: 34px;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 750;
}

/* Botones documentales premium */
.cliente-panel-page .cp-doc-card .btn-doc-ot {
  background:
    linear-gradient(180deg, rgba(37, 99, 235, 0.14) 0%, rgba(96, 165, 250, 0.18) 100%) !important;
  color: #1d4ed8 !important;
  border: 1px solid rgba(37, 99, 235, 0.34) !important;
  box-shadow:
    0 5px 12px rgba(37, 99, 235, 0.10),
    inset 0 1px 0 rgba(255,255,255,0.88),
    inset 0 -1px 0 rgba(37,99,235,0.08) !important;
}

.cliente-panel-page .cp-doc-card .btn-doc-ot:hover {
  transform: translateY(-1px) !important;
  background:
    linear-gradient(180deg, rgba(37, 99, 235, 0.18) 0%, rgba(96, 165, 250, 0.24) 100%) !important;
}

.cliente-panel-page .cp-doc-card .btn-doc-factura {
  background:
    linear-gradient(180deg, rgba(22, 163, 74, 0.16) 0%, rgba(134, 239, 172, 0.24) 100%) !important;
  color: #166534 !important;
  border: 1px solid rgba(22, 163, 74, 0.34) !important;
  box-shadow:
    0 5px 12px rgba(22, 163, 74, 0.10),
    inset 0 1px 0 rgba(255,255,255,0.88),
    inset 0 -1px 0 rgba(22,163,74,0.08) !important;
}

.cliente-panel-page .cp-doc-card .btn-doc-factura:hover {
  transform: translateY(-1px) !important;
  background:
    linear-gradient(180deg, rgba(22, 163, 74, 0.20) 0%, rgba(134, 239, 172, 0.30) 100%) !important;
}

.cliente-panel-page .cp-doc-card .btn-doc-disabled {
  background:
    linear-gradient(180deg, #f8fafc 0%, #eef2f6 100%) !important;
  color: #64748b !important;
  border: 1px solid #d7dce3 !important;
  cursor: default !important;
  box-shadow:
    0 4px 10px rgba(15,23,42,0.035),
    inset 0 1px 0 rgba(255,255,255,0.90),
    inset 0 -1px 0 rgba(15,23,42,0.04) !important;
}

.cliente-panel-page .cp-doc-card .btn-doc-ot {
  border: 1px solid rgba(37, 99, 235, 0.34) !important;
  box-shadow:
    0 5px 12px rgba(37, 99, 235, 0.10),
    inset 0 1px 0 rgba(255,255,255,0.88),
    inset 0 -1px 0 rgba(37,99,235,0.08) !important;
}

.cliente-panel-page .cp-doc-card .btn-doc-factura {
  border: 1px solid rgba(22, 163, 74, 0.34) !important;
  box-shadow:
    0 5px 12px rgba(22, 163, 74, 0.10),
    inset 0 1px 0 rgba(255,255,255,0.88),
    inset 0 -1px 0 rgba(22,163,74,0.08) !important;
}

.cliente-panel-page .cp-doc-card .btn-doc-disabled {
  border: 1px solid #d7dce3 !important;
  box-shadow:
    0 4px 10px rgba(15,23,42,0.035),
    inset 0 1px 0 rgba(255,255,255,0.90),
    inset 0 -1px 0 rgba(15,23,42,0.04) !important;
}

/* =========================================================
   CP1.1 PASO 5.1.2 — HISTORIAL MOBILE 2 COLUMNAS
========================================================= */

@media (max-width: 760px) {
  .cliente-panel-page .cp-service-detail-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  /* 1 a 4: datos técnicos en 2 columnas */
  .cliente-panel-page .cp-service-detail-grid > .bloque:nth-child(1),
  .cliente-panel-page .cp-service-detail-grid > .bloque:nth-child(2),
  .cliente-panel-page .cp-service-detail-grid > .bloque:nth-child(3),
  .cliente-panel-page .cp-service-detail-grid > .bloque:nth-child(4) {
    grid-column: auto !important;
    min-height: 86px;
    padding: 11px 10px !important;
  }

  /* 5: importe abonado a ancho completo */
  .cliente-panel-page .cp-service-detail-grid > .bloque:nth-child(5) {
    grid-column: 1 / -1 !important;
    min-height: auto;
  }

  /* 6: factura / orden de trabajo / sin documento a ancho completo */
  .cliente-panel-page .cp-service-detail-grid > .cp-doc-card,
  .cliente-panel-page .cp-service-detail-grid > .bloque-doc-accion {
    grid-column: 1 / -1 !important;
  }

  .cliente-panel-page .cp-service-detail-grid .bloque strong {
    font-size: 11.5px !important;
    line-height: 1.15;
  }

  .cliente-panel-page .cp-service-detail-grid .bloque {
    font-size: 12.5px;
    line-height: 1.35;
  }
}

/* =========================================================
   ORDEN DE TRABAJO — OT1.1.1 BRANDING VMMS + A4
========================================================= */

@page {
  size: A4;
  margin: 8mm;
}

.ot-page {
  padding: 18px;
  background:
    radial-gradient(circle at top left, rgba(208, 2, 27, 0.07) 0%, transparent 28%),
    radial-gradient(circle at top right, rgba(255, 189, 89, 0.12) 0%, transparent 24%),
    linear-gradient(180deg, #f3f4f6 0%, #e9edf2 100%);
  color: #111111;
}

/* Barra superior fuera del documento */
.ot-toolbar {
  width: 210mm;
  max-width: 100%;
  margin: 0 auto 12px auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ot-btn {
  width: auto !important;
  min-width: 190px;
  min-height: 38px;
  padding: 0 15px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease,
    background 0.18s ease;
}

.ot-btn:hover {
  transform: translateY(-1px);
}

.ot-btn--primary {
  background:
    linear-gradient(180deg, rgba(208, 2, 27, 0.94) 0%, rgba(158, 0, 20, 0.96) 100%);
  color: #ffffff;
  border-color: rgba(120, 0, 18, 0.34);
  box-shadow:
    0 10px 22px rgba(208, 2, 27, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.20);
}

.ot-btn--soft {
  background:
    linear-gradient(180deg, #ffffff 0%, #eef2f6 100%);
  color: #111827;
  border-color: #d5dce5;
  box-shadow:
    0 6px 14px rgba(15,23,42,0.06),
    inset 0 1px 0 rgba(255,255,255,0.92);
}

/* Documento A4 */
.ot-document {
  width: 210mm;
  max-width: 100%;
  min-height: 297mm;
  margin: 0 auto;
  border-radius: 22px;
  overflow: hidden;
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
  border: 1px solid rgba(17, 17, 17, 0.16);
  outline: 1px solid rgba(208, 2, 27, 0.10);
  outline-offset: -8px;
  box-shadow:
    0 24px 50px rgba(15, 23, 42, 0.10),
    0 6px 18px rgba(15, 23, 42, 0.05),
    inset 0 0 0 8px rgba(248, 250, 252, 0.78),
    inset 0 1px 0 rgba(255,255,255,0.94);
}

/* Header alineado al Panel Cliente */
.ot-hero {
  position: relative;
  overflow: hidden;
  padding: 20px 24px;
  min-height: 116px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.16) 0%, transparent 34%),
    linear-gradient(135deg, #08080a 0%, #151519 58%, #0b0b0d 100%);
  color: #ffffff;
  border-bottom: 4px solid var(--vmms-red);
}

.ot-hero::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 6px;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(180deg, var(--vmms-red) 0%, var(--vmms-yellow) 100%);
  box-shadow: 0 0 18px rgba(208, 2, 27, 0.28);
}

.ot-hero-main,
.ot-hero-side {
  position: relative;
  z-index: 1;
}

.ot-brand-row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.ot-logo-wrap {
  width: 64px;
  height: 64px;
  min-width: 64px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(245,245,245,0.92) 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow:
    0 12px 26px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -1px 0 rgba(0,0,0,0.06);
}

.ot-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ot-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  margin-bottom: 7px;
  border-radius: 999px;
  background: rgba(208, 2, 27, 0.20);
  border: 1px solid rgba(208, 2, 27, 0.24);
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ot-hero h1 {
  margin: 0 0 5px 0;
  font-size: 31px;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #ffffff;
}

.ot-hero p {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255,255,255,0.78);
}

.ot-hero-side {
  min-width: 190px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.ot-code {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.08) 100%);
  border: 1px solid rgba(255,255,255,0.13);
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    0 10px 18px rgba(0,0,0,0.12);
}

.ot-issued {
  min-height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,189,89,0.14);
  border: 1px solid rgba(255,189,89,0.18);
  color: rgba(255,255,255,0.88);
  font-size: 11.5px;
  font-weight: 750;
}

/* Contenido compacto para A4 */
.ot-content {
  padding: 18px 22px 20px;
}

.ot-page .grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.ot-page .bloque {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.07) 0%, transparent 34%),
    linear-gradient(145deg, #ffffff 0%, #f8fafc 58%, #eef2f6 100%);
  border: 1px solid #dfe7f0;
  border-radius: 14px;
  padding: 10px 12px;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: 12.5px;
  line-height: 1.3;
  box-shadow:
    0 6px 14px rgba(15, 23, 42, 0.04),
    inset 0 1px 0 rgba(255,255,255,0.92),
    inset 0 -3px 8px rgba(15,23,42,0.02);
}

.ot-page .bloque::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12px;
  right: 12px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--vmms-red) 0%, var(--vmms-yellow) 100%);
  opacity: 0.84;
}

.ot-page .bloque strong {
  display: block;
  margin-bottom: 5px;
  color: #111111;
  font-size: 11px;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

.ot-page .nota {
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px dashed #cbd5e1;
  border-radius: 14px;
  padding: 11px 12px;
  line-height: 1.45;
  font-size: 12.5px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.92);
}

.ot-page .footer {
  color: #5b6470;
  font-size: 11px;
  line-height: 1.35;
}

/* Impresión / Guardar PDF — espejo visual de pantalla */
@media print {
  @page {
    size: A4;
    margin: 8mm;
  }

  .ot-page {
    width: 210mm !important;
    min-height: 297mm !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .ot-toolbar {
    display: none !important;
  }

  .ot-document {
    width: 210mm !important;
    max-width: 210mm !important;
    min-height: 297mm !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background:
      linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%) !important;
    border: 1px solid rgba(17, 17, 17, 0.16) !important;
    outline: 1px solid rgba(208, 2, 27, 0.10) !important;
    outline-offset: -8px !important;
    box-shadow:
      inset 0 0 0 8px rgba(248, 250, 252, 0.78),
      inset 0 1px 0 rgba(255,255,255,0.94) !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .ot-hero,
  .ot-logo-wrap,
  .ot-code,
  .ot-issued,
  .ot-content,
  .ot-page .section,
  .ot-page .grid,
  .ot-page .bloque,
  .ot-page .nota,
  .ot-page .footer {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .ot-document,
  .ot-hero,
  .ot-content,
  .ot-page .section,
  .ot-page .bloque,
  .ot-page .nota {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

/* Responsive pantalla */
@media screen and (max-width: 760px) {
  .ot-page {
    padding: 12px;
  }

  .ot-toolbar {
    width: 100%;
    margin-bottom: 12px;
  }

  .ot-btn {
    width: 100% !important;
    min-width: 0;
  }

  .ot-document {
    width: 100%;
    min-height: auto;
    border-radius: 20px;
  }

  .ot-hero {
    padding: 18px;
    align-items: flex-start;
    flex-direction: column;
  }

  .ot-logo-wrap {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 16px;
  }

  .ot-hero h1 {
    font-size: 26px;
  }

  .ot-hero p {
    font-size: 12.5px;
  }

  .ot-hero-side {
    width: 100%;
    min-width: 0;
    align-items: flex-start;
  }

  .ot-content {
    padding: 16px;
  }

  .ot-page .grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   ORDEN DE TRABAJO — OT1.1 PASO 2 CONTENIDO PREMIUM A4
========================================================= */

.ot-page .ot-section {
  margin-bottom: 13px;
}

.ot-section-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 9px;
  padding-bottom: 7px;
  border-bottom: 1px solid #e5e7eb;
}

.ot-section-title h2 {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  color: #111111;
  font-size: 15.5px !important;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.ot-section-icon {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(208, 2, 27, 0.10) 0%, rgba(255, 189, 89, 0.16) 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.78),
    0 4px 10px rgba(15,23,42,0.045);
}

.ot-general-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 10px;
}

.ot-general-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  padding: 12px;
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.09) 0%, transparent 34%),
    linear-gradient(145deg, #ffffff 0%, #f8fafc 58%, #eef2f6 100%);
  border: 1px solid #dfe7f0;
  box-shadow:
    0 8px 18px rgba(15, 23, 42, 0.045),
    inset 0 1px 0 rgba(255,255,255,0.92),
    inset 0 -3px 8px rgba(15,23,42,0.02);
}

.ot-general-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 14px;
  right: 14px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--vmms-red) 0%, var(--vmms-yellow) 100%);
  opacity: 0.9;
}

.ot-general-card-head {
  margin-bottom: 8px;
}

.ot-general-card-head span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(208, 2, 27, 0.08);
  color: var(--vmms-red);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.055em;
}

.ot-info-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 6px 0;
  border-bottom: 1px solid rgba(226, 232, 240, 0.82);
}

.ot-info-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.ot-info-row strong {
  color: #111111;
  font-size: 10.8px;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

.ot-info-row p {
  margin: 0;
  color: #333333;
  font-size: 12.2px;
  line-height: 1.25;
  word-break: break-word;
}

.ot-domain-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  min-width: 110px;
  padding: 0 14px;
  margin-bottom: 8px;
  border-radius: 11px;
  background:
    linear-gradient(180deg, #ffffff 0%, #eef2f7 100%);
  border: 1px solid rgba(203, 213, 225, 0.95);
  color: #111111;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.08em;
  box-shadow:
    0 4px 10px rgba(15, 23, 42, 0.055),
    inset 0 1px 0 rgba(255,255,255,0.92),
    inset 0 -2px 5px rgba(15,23,42,0.04);
}

.ot-service-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.ot-service-grid .bloque {
  min-height: 74px;
}

.ot-items-section .items-lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 16px;
  margin: 0;
  padding: 12px 14px 12px 34px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #dfe7f0;
  box-shadow:
    0 8px 18px rgba(15,23,42,0.04),
    inset 0 1px 0 rgba(255,255,255,0.92);
}

.ot-items-section .items-lista li {
  margin: 0;
  padding-left: 2px;
  font-size: 12.3px;
  line-height: 1.35;
}

@media print {
  .ot-general-grid {
    grid-template-columns: 1.1fr 0.9fr !important;
    gap: 8px !important;
  }

  .ot-section-title {
    margin-bottom: 7px !important;
    padding-bottom: 5px !important;
  }

  .ot-section-title h2 {
    font-size: 14px !important;
  }

  .ot-section-icon {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    border-radius: 10px !important;
  }

  .ot-general-card {
    padding: 9px 10px !important;
    border-radius: 12px !important;
  }

  .ot-info-row {
    grid-template-columns: 105px minmax(0, 1fr) !important;
    gap: 6px !important;
    padding: 4px 0 !important;
  }

  .ot-info-row strong {
    font-size: 9.8px !important;
  }

  .ot-info-row p {
    font-size: 10.8px !important;
    line-height: 1.2 !important;
  }

  .ot-domain-chip {
    min-height: 29px !important;
    min-width: 94px !important;
    font-size: 13px !important;
    margin-bottom: 6px !important;
  }

  .ot-service-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .ot-service-grid .bloque {
    min-height: 58px !important;
  }

  .ot-items-section .items-lista {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 2px 12px !important;
    padding: 8px 10px 8px 26px !important;
  }

  .ot-items-section .items-lista li {
    font-size: 10.8px !important;
    line-height: 1.25 !important;
  }
}

@media screen and (max-width: 760px) {
  .ot-general-grid {
    grid-template-columns: 1fr;
  }

  .ot-info-row {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .ot-service-grid {
    grid-template-columns: 1fr !important;
  }

  .ot-items-section .items-lista {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   ORDEN DE TRABAJO — OT1.1 PASO 3 CIERRE DOCUMENTAL
========================================================= */

.ot-items-list {
  list-style: none !important;
  padding: 11px 12px !important;
}

.ot-items-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 !important;
  padding: 6px 8px;
  border-radius: 11px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.86) 0%, rgba(248,250,252,0.72) 100%);
  border: 1px solid rgba(226, 232, 240, 0.82);
}

.ot-item-check {
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin-top: 1px;
  border-radius: 999px;
  background: rgba(21, 128, 61, 0.11);
  color: #15803d;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.ot-item-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ot-item-text strong {
  color: #111111;
  font-size: 12.2px;
  line-height: 1.15;
}

.ot-item-text small {
  color: #5b6470;
  font-size: 11.5px;
  line-height: 1.2;
}

.ot-empty-note {
  color: #64748b;
  font-size: 12.5px;
}

.ot-note-box {
  position: relative;
  min-height: 48px;
  color: #374151;
}

.ot-note-box::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(180deg, var(--vmms-red) 0%, var(--vmms-yellow) 100%);
}

.ot-footer-panel {
  margin-top: 12px !important;
  padding-top: 0 !important;
  border-top: none !important;
}

.ot-footer-warning {
  display: grid;
  grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr);
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 14px;
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.12) 0%, transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #dfe7f0;
  box-shadow:
    0 6px 14px rgba(15,23,42,0.04),
    inset 0 1px 0 rgba(255,255,255,0.92);
}

.ot-footer-warning strong {
  color: #111111;
  font-size: 11.5px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ot-footer-warning span {
  color: #5b6470;
  font-size: 11.5px;
  line-height: 1.35;
}

.ot-footer-signatures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 12px;
}

.ot-signature-box {
  min-height: 44px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 12px 5px;
  border-bottom: 1.5px solid #cbd5e1;
  color: #5b6470;
  font-size: 11.5px;
  font-weight: 700;
  text-align: center;
}

/* Print compacto */
@media print {
  .ot-items-list {
    padding: 7px 8px !important;
    gap: 2px 8px !important;
  }

  .ot-items-list li {
    padding: 4px 6px !important;
    gap: 6px !important;
  }

  .ot-item-check {
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    font-size: 9px !important;
  }

  .ot-item-text strong {
    font-size: 10.6px !important;
  }

  .ot-item-text small {
    font-size: 10px !important;
  }

  .ot-note-box {
    min-height: 34px !important;
  }

  .ot-footer-warning {
    grid-template-columns: 0.7fr 1.3fr !important;
    padding: 7px 9px !important;
    border-radius: 11px !important;
  }

  .ot-footer-warning strong,
  .ot-footer-warning span {
    font-size: 9.8px !important;
    line-height: 1.2 !important;
  }

  .ot-footer-signatures {
    gap: 12px !important;
    margin-top: 8px !important;
  }

  .ot-signature-box {
    min-height: 32px !important;
    padding-bottom: 4px !important;
    font-size: 9.8px !important;
  }
}

@media screen and (max-width: 760px) {
  .ot-footer-warning {
    grid-template-columns: 1fr;
  }

  .ot-footer-signatures {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   ORDEN DE TRABAJO — DOCUMENTO EMITIDO
========================================================= */

.ot-doc-type-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
}

.ot-doc-type-chip {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(208, 2, 27, 0.10) 0%, rgba(255, 189, 89, 0.16) 100%);
  border: 1px solid rgba(208, 2, 27, 0.14);
  color: #111111;
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
}

/* =========================================================
   CIERRES COMERCIALES — CC1.2 GLOBAL UI
========================================================= */

.cc-page .cc-card {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.11) 0%, transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
  border: 1px solid rgba(208, 2, 27, 0.08);
  box-shadow:
    0 14px 34px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.90);
}

.cc-page .cc-card > h2 {
  margin-bottom: 14px;
}

/* Tabs */

.cc-page .tabs-cierres {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.cc-page .tab-cierre-btn {
  width: auto !important;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid #d7dce3;
  background:
    linear-gradient(180deg, #ffffff 0%, #eef2f6 100%);
  color: #111111;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow:
    0 3px 8px rgba(15,23,42,0.04),
    inset 0 1px 0 rgba(255,255,255,0.90);
  transition:
    transform 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.cc-page .tab-cierre-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(208, 2, 27, 0.22);
}

.cc-page .tab-cierre-btn.tab-activa {
  background:
    linear-gradient(180deg, rgba(208, 2, 27, 0.94) 0%, rgba(158, 0, 20, 0.96) 100%);
  color: #ffffff;
  border-color: rgba(120, 0, 18, 0.34);
  box-shadow:
    0 8px 18px rgba(208, 2, 27, 0.16),
    inset 0 1px 0 rgba(255,255,255,0.20);
}

/* Pendientes */

.cc-page .lista-cierres {
  display: grid;
  gap: 18px;
  margin-top: 18px;
  padding: 12px;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.56) 0%, rgba(241,245,249,0.88) 100%);
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.94),
    0 8px 18px rgba(15,23,42,0.035);
}

.cc-page .cierre-card {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.12) 0%, transparent 30%),
    linear-gradient(145deg, #ffffff 0%, #f8fafc 58%, #eef2f6 100%);
  border: 1px solid rgba(208, 2, 27, 0.10);
  border-radius: 20px;
  padding: 18px;
  box-shadow:
    0 18px 34px rgba(15, 23, 42, 0.08),
    0 5px 12px rgba(15,23,42,0.045),
    inset 0 1px 0 rgba(255,255,255,0.96),
    inset 0 -8px 16px rgba(15,23,42,0.025);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.cc-page .cierre-card::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.42);
  pointer-events: none;
}

.cc-page .cierre-card:hover {
  transform: translateY(-2px);
  border-color: rgba(208, 2, 27, 0.18);
  box-shadow:
    0 22px 42px rgba(15, 23, 42, 0.11),
    0 8px 16px rgba(15,23,42,0.06),
    inset 0 1px 0 rgba(255,255,255,0.98),
    inset 0 -8px 16px rgba(15,23,42,0.03);
}

.cc-page .cierre-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  right: 18px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--vmms-red) 0%, var(--vmms-yellow) 100%);
  opacity: 0.94;
}

.cc-page .badge-pendiente {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  background: rgba(255, 244, 214, 0.95);
  color: #7a4f00;
  border: 1px solid #f5deb3;
  box-shadow:
    0 3px 8px rgba(15,23,42,0.045),
    inset 0 1px 0 rgba(255,255,255,0.72);
}

.cc-page .bloque-cierre {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #e1e8f0;
  border-radius: 14px;
  padding: 12px;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  color: #1f2937;
  box-shadow:
    0 5px 13px rgba(15, 23, 42, 0.04),
    inset 0 1px 0 rgba(255,255,255,0.90);
}

.cc-page .bloque-cierre strong {
  display: block;
  margin-bottom: 6px;
  color: #111111;
  font-size: 11.5px;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

.cc-page .acciones-cierre {
  margin-top: 16px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.cc-page .btn-cierre {
  width: auto !important;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding: 0 14px;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 800;
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease;
}

.cc-page .btn-cierre:hover {
  transform: translateY(-1px);
}

.cc-page .btn-cierre-principal {
  background:
    linear-gradient(180deg, rgba(208, 2, 27, 0.94) 0%, rgba(158, 0, 20, 0.96) 100%);
  color: #ffffff;
  border-color: rgba(120, 0, 18, 0.34);
  box-shadow:
    0 8px 18px rgba(208, 2, 27, 0.16),
    inset 0 1px 0 rgba(255,255,255,0.20);
}

.cc-page .btn-cierre-soft {
  background:
    linear-gradient(180deg, #ffffff 0%, #eef2f6 100%);
  color: #111827;
  border-color: #d5dce5;
  box-shadow:
    0 5px 12px rgba(15,23,42,0.055),
    inset 0 1px 0 rgba(255,255,255,0.92);
}

.cc-page .vacio-cierres {
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px dashed #cbd5e1;
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  color: #64748b;
}

/* Documentos */

.cc-page .panel-documentos {
  display: none;
}

.cc-page .documentos-vacio {
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px dashed #cbd5e1;
  border-radius: 16px;
  padding: 22px;
  color: #64748b;
  text-align: center;
}

.cc-page .tabla-documentos-wrap {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #e1e8f0;
  box-shadow:
    0 10px 24px rgba(15,23,42,0.06),
    inset 0 1px 0 rgba(255,255,255,0.90);
  overflow: auto;
}

.cc-page .tabla-documentos {
  width: 100%;
  border-collapse: collapse;
  min-width: 980px;
}

.cc-page .tabla-documentos thead {
  background:
    linear-gradient(135deg, #08080a 0%, #151519 28%, #0b0b0d 40%);
  color: #ffffff;
}

.cc-page .tabla-documentos th,
.cc-page .tabla-documentos td {
  padding: 12px 10px;
  border-bottom: 1px solid #e9ecef;
  text-align: left;
  font-size: 13px;
  vertical-align: top;
}

.cc-page .tabla-documentos th {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

.cc-page .tabla-documentos tbody tr:hover {
  background: #f9fafb;
}

.cc-page .doc-accion-link,
.cc-page .doc-accion-disabled {
  width: auto !important;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 10px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 800;
}

/* Modal */

.cc-page .modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, 0.58);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: var(--vmms-z-modal);
  padding: 20px;
}

.cc-page .modal-box {
  width: 100%;
  max-width: 560px;
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.10) 0%, transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
  border-radius: 20px;
  padding: 22px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow:
    0 24px 60px rgba(0,0,0,0.24),
    inset 0 1px 0 rgba(255,255,255,0.92);
}

.cc-page .modal-box h3 {
  margin: 0 0 16px 0;
  color: #111111;
  font-size: 19px;
  line-height: 1.15;
}

.cc-page .modal-grid {
  display: grid;
  gap: 14px;
}

.cc-page .modal-grid label {
  display: block;
  font-weight: 800;
  margin-bottom: 6px;
  font-size: 12px;
  color: #111111;
  text-transform: uppercase;
  letter-spacing: 0.035em;
}

.cc-page .modal-grid input,
.cc-page .modal-grid select {
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  font-size: 13px;
  background: #ffffff;
}

.cc-page .texto-ayuda {
  font-size: 12px;
  color: #64748b;
  margin-top: 5px;
  line-height: 1.45;
}

.cc-page .modal-acciones {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.cc-page .mensaje-modal {
  display: none;
  margin-top: 14px;
  padding: 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
}

.cc-page .mensaje-modal.error {
  display: block;
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid rgba(185, 28, 28, 0.12);
}

.cc-page .mensaje-modal.ok {
  display: block;
  background: #dcfce7;
  color: #166534;
  border: 1px solid rgba(21, 128, 61, 0.12);
}

@media (max-width: 768px) {
  .cc-page .acciones-cierre,
  .cc-page .modal-acciones {
    flex-direction: column;
  }

  .cc-page .btn-cierre {
    width: 100% !important;
  }

  .cc-page .tabs-cierres {
    display: grid;
    grid-template-columns: 1fr;
  }

  .cc-page .tab-cierre-btn {
    width: 100% !important;
  }

  .cc-page .modal-box {
    padding: 18px;
    border-radius: 18px;
  }
}

/* =========================================================
   CIERRES COMERCIALES — CC1.3 CARDS PENDIENTES PREMIUM
========================================================= */

.cc-page .cc-pending-card {
  padding: 0;
}

.cc-page .cc-pending-head {
  position: relative;
  z-index: 1;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgba(203, 213, 225, 0.96);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(248,250,252,0.84) 100%);
}

.cc-page .cc-pending-client {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 13px;
}

.cc-page .cc-client-avatar {
  width: 54px;
  height: 54px;
  min-width: 54px;
  border-radius: 17px;
  background:
    linear-gradient(145deg, rgba(208,2,27,0.96) 0%, rgba(157,1,21,0.96) 100%);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.04em;
  box-shadow:
    0 12px 22px rgba(208, 2, 27, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.25);
}

.cc-page .cc-client-main {
  min-width: 0;
}

.cc-page .cc-client-topline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 5px;
}

.cc-page .cc-client-topline h3 {
  margin: 0;
  color: #111111;
  font-size: 17px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.cc-page .cc-client-main p {
  margin: 0;
  color: #475569;
  font-size: 13px;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 650;
}

.cc-page .cc-domain-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 11px;
  border-radius: 10px;
  background:
    linear-gradient(180deg, #ffffff 0%, #eef2f7 100%);
  border: 1px solid rgba(203, 213, 225, 0.95);
  color: #111111;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  box-shadow:
    0 3px 8px rgba(15,23,42,0.045),
    inset 0 1px 0 rgba(255,255,255,0.92);
}

.cc-page .cc-pending-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.cc-page .cc-pending-status small {
  color: #64748b;
  font-size: 11.5px;
  font-weight: 750;
}

.cc-page .cc-pending-body {
  padding: 16px 18px 0;
}

.cc-page .cc-mini-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.cc-page .cc-mini-card {
  min-height: 86px;
  padding: 13px 12px;
}

.cc-page .cc-mini-card span {
  display: block;
  color: #111111;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 750;
}

.cc-page .cc-mini-card small {
  display: block;
  margin-top: 5px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.2;
}

.cc-page .cc-contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.cc-page .cc-contact-pill {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #e1e8f0;
  box-shadow:
    0 4px 10px rgba(15,23,42,0.035),
    inset 0 1px 0 rgba(255,255,255,0.90);
}

.cc-page .cc-contact-pill strong {
  color: #111111;
  font-size: 11.5px;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  white-space: nowrap;
}

.cc-page .cc-contact-pill span {
  min-width: 0;
  color: #475569;
  font-size: 12.5px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.cc-page .cc-observation-box {
  position: relative;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 12px 14px 12px 16px;
  border-radius: 15px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px dashed #cbd5e1;
  color: #374151;
}

.cc-page .cc-observation-box::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(180deg, var(--vmms-red) 0%, var(--vmms-yellow) 100%);
}

.cc-page .cc-observation-box strong {
  display: block;
  margin-bottom: 5px;
  color: #111111;
  font-size: 11.5px;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

.cc-page .cc-observation-box p {
  margin: 0;
  color: #374151;
  font-size: 13px;
  line-height: 1.4;
}

.cc-page .cc-card-actions {
  padding: 14px 18px 16px;
  margin-top: 0;
  border-top: 1px solid rgba(203, 213, 225, 0.92);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.74) 0%, rgba(248,250,252,0.80) 100%);
}

.cc-page .cc-empty-state {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cc-page .cc-empty-state strong {
  color: #111111;
  font-size: 15px;
}

.cc-page .cc-empty-state span {
  color: #64748b;
  font-size: 13px;
}

@media (max-width: 1100px) {
  .cc-page .cc-mini-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .cc-page .cc-pending-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .cc-page .cc-pending-status {
    width: 100%;
    align-items: flex-start;
    flex-direction: row;
    justify-content: space-between;
  }

  .cc-page .cc-client-avatar {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 15px;
    font-size: 16px;
  }

  .cc-page .cc-client-topline {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .cc-page .cc-mini-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cc-page .cc-contact-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 420px) {
  .cc-page .cc-mini-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   CIERRES COMERCIALES — CC1.3 MODAL PREMIUM
========================================================= */

.cc-page .cc-modal-overlay {
  backdrop-filter: blur(6px);
}

.cc-page .cc-modal-box {
  max-width: 640px;
  padding: 0;
  overflow: hidden;
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.12) 0%, transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow:
    0 28px 70px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.94);
}

.cc-page .cc-modal-header {
  position: relative;
  padding: 18px 20px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.16) 0%, transparent 34%),
    linear-gradient(135deg, #08080a 0%, #151519 58%, #0b0b0d 100%);
  color: #ffffff;
  border-bottom: 4px solid var(--vmms-red);
}

.cc-page .cc-modal-header::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 5px;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(180deg, var(--vmms-red) 0%, var(--vmms-yellow) 100%);
}

.cc-page .cc-modal-title-wrap {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.cc-page .cc-modal-icon {
  width: 46px;
  height: 46px;
  min-width: 46px;
  border-radius: 15px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.08) 100%);
  border: 1px solid rgba(255,255,255,0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    0 10px 18px rgba(0,0,0,0.12);
}

.cc-page .cc-modal-kicker {
  display: inline-flex;
  margin-bottom: 5px;
  color: var(--vmms-yellow);
  font-size: 10.5px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cc-page .cc-modal-header h3 {
  margin: 0 0 4px 0;
  color: #ffffff;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.cc-page .cc-modal-header p {
  margin: 0;
  color: rgba(255,255,255,0.72);
  font-size: 12.5px;
  line-height: 1.35;
}

.cc-page .cc-modal-close {
  position: relative;
  z-index: 1;
  width: 34px !important;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  padding: 0 !important;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.12);
  font-size: 22px;
  line-height: 1;
  box-shadow: none;
}

.cc-page .cc-modal-close:hover {
  background: rgba(255,255,255,0.18);
  transform: translateY(-1px);
}

.cc-page .cc-modal-service-card {
  margin: 16px 20px 0;
  display: grid;
  grid-template-columns: 1.2fr 0.7fr 0.9fr;
  gap: 10px;
}

.cc-page .cc-modal-service-card > div {
  min-width: 0;
  padding: 11px 12px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #e1e8f0;
  box-shadow:
    0 5px 13px rgba(15,23,42,0.04),
    inset 0 1px 0 rgba(255,255,255,0.90);
}

.cc-page .cc-modal-service-card strong {
  display: block;
  margin-bottom: 5px;
  color: #111111;
  font-size: 11px;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

.cc-page .cc-modal-service-card span {
  color: #374151;
  font-size: 12.5px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.cc-page .cc-modal-domain {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 9px;
  background:
    linear-gradient(180deg, #ffffff 0%, #eef2f7 100%);
  border: 1px solid rgba(203, 213, 225, 0.95);
  color: #111111 !important;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.cc-page .cc-modal-grid {
  padding: 16px 20px 0;
  gap: 12px;
}

.cc-page .cc-field {
  min-width: 0;
}

.cc-page .cc-field-money {
  padding: 13px;
  border-radius: 16px;
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.10) 0%, transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #e1e8f0;
  box-shadow:
    0 6px 14px rgba(15,23,42,0.045),
    inset 0 1px 0 rgba(255,255,255,0.90);
}

.cc-page .cc-money-input-wrap {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
}

.cc-page .cc-money-input-wrap span {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  color: #111111;
  font-weight: 900;
  border-right: 1px solid #dbe3ec;
}

.cc-page .cc-money-input-wrap input {
  border: none !important;
  border-radius: 0 !important;
  min-height: 40px;
  box-shadow: none !important;
}

.cc-page .cc-upload-box {
  padding: 13px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px dashed #cbd5e1;
}

.cc-page .cc-upload-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  gap: 10px;
  align-items: center;
}

.cc-page .cc-upload-clear {
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  border-radius: 11px !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #eef2f6 100%) !important;
  color: #64748b !important;
  border: 1px solid #d7dce3 !important;
  font-size: 20px !important;
  box-shadow:
    0 4px 10px rgba(15,23,42,0.04),
    inset 0 1px 0 rgba(255,255,255,0.90) !important;
}

.cc-page .cc-upload-clear:hover {
  color: #111111 !important;
  transform: translateY(-1px);
}

.cc-page .cc-modal-actions {
  padding: 16px 20px 20px;
  margin-top: 0;
  border-top: 1px solid rgba(226, 232, 240, 0.82);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.74) 0%, rgba(248,250,252,0.86) 100%);
  justify-content: flex-end;
}

.cc-page .cc-modal-actions .btn-cierre {
  min-width: 150px;
}

@media (max-width: 760px) {
  .cc-page .cc-modal-service-card {
    grid-template-columns: 1fr;
  }

  .cc-page .cc-modal-header {
    padding: 16px;
  }

  .cc-page .cc-modal-title-wrap {
    align-items: flex-start;
  }

  .cc-page .cc-modal-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
  }

  .cc-page .cc-modal-service-card,
  .cc-page .cc-modal-grid {
    margin-left: 16px;
    margin-right: 16px;
    padding-left: 0;
    padding-right: 0;
  }

  .cc-page .cc-modal-actions {
    padding: 14px 16px 16px;
  }

  .cc-page .cc-modal-actions .btn-cierre {
    width: 100% !important;
  }
}

/* =========================================================
   CIERRES COMERCIALES — CC1.3 DOCUMENTOS PREMIUM
========================================================= */

.cc-page .cc-doc-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.cc-page .cc-doc-summary-card {
  position: relative;
  overflow: hidden;
  min-height: 76px;
  padding: 13px 14px;
  border-radius: 16px;
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.10) 0%, transparent 34%),
    linear-gradient(145deg, #ffffff 0%, #f8fafc 58%, #eef2f6 100%);
  border: 1px solid #dfe7f0;
  box-shadow:
    0 8px 18px rgba(15, 23, 42, 0.045),
    inset 0 1px 0 rgba(255,255,255,0.92),
    inset 0 -3px 8px rgba(15,23,42,0.02);
}

.cc-page .cc-doc-summary-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 14px;
  right: 14px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--vmms-red) 0%, var(--vmms-yellow) 100%);
  opacity: 0.88;
}

.cc-page .cc-doc-summary-card span {
  display: block;
  color: #64748b;
  font-size: 11.5px;
  line-height: 1.15;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  margin-bottom: 8px;
}

.cc-page .cc-doc-summary-card strong {
  display: block;
  color: #111111;
  font-size: 24px;
  line-height: 1;
  font-weight: 900;
}

.cc-page .cc-doc-summary-card--factura::before {
  background: linear-gradient(90deg, #16a34a 0%, #86efac 100%);
}

.cc-page .cc-doc-summary-card--ot::before {
  background: linear-gradient(90deg, #111111 0%, #737373 100%);
}

.cc-page .cc-doc-summary-card--none::before {
  background: linear-gradient(90deg, #94a3b8 0%, #cbd5e1 100%);
}

.cc-page .cc-doc-table-wrap {
  border-radius: 18px;
  overflow: auto;
  border: 1px solid #e1e8f0;
  box-shadow:
    0 12px 28px rgba(15, 23, 42, 0.065),
    inset 0 1px 0 rgba(255,255,255,0.90);
}

.cc-page .cc-doc-table {
  min-width: 1000px;
}

.cc-page .cc-doc-table thead {
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.12) 0%, transparent 34%),
    linear-gradient(135deg, #08080a 0%, #151519 58%, #0b0b0d 100%);
}

.cc-page .cc-doc-table th {
  padding: 13px 12px;
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.cc-page .cc-doc-table td {
  padding: 13px 12px;
  vertical-align: middle;
  border-bottom: 1px solid #edf1f5;
  color: #374151;
}

.cc-page .cc-doc-table tbody tr {
  background: #ffffff;
  transition:
    background 0.18s ease,
    box-shadow 0.18s ease;
}

.cc-page .cc-doc-table tbody tr:hover {
  background: #f8fafc;
}

.cc-page .cc-doc-date,
.cc-page .cc-doc-client {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cc-page .cc-doc-date strong,
.cc-page .cc-doc-client strong {
  color: #111111;
  font-size: 13px;
  line-height: 1.15;
}

.cc-page .cc-doc-date span,
.cc-page .cc-doc-client span {
  color: #64748b;
  font-size: 11.5px;
  line-height: 1.15;
  font-weight: 650;
}

.cc-page .cc-doc-domain {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 10px;
  background:
    linear-gradient(180deg, #ffffff 0%, #eef2f7 100%);
  border: 1px solid rgba(203, 213, 225, 0.95);
  color: #111111;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  box-shadow:
    0 3px 8px rgba(15,23,42,0.045),
    inset 0 1px 0 rgba(255,255,255,0.92);
}

.cc-page .cc-doc-amount {
  color: #111111;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 900;
  white-space: nowrap;
}

.cc-page .cc-doc-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
  border: 1px solid transparent;
  white-space: nowrap;
}

.cc-page .cc-doc-badge--factura {
  background:
    linear-gradient(180deg, rgba(22, 163, 74, 0.16) 0%, rgba(134, 239, 172, 0.24) 100%);
  color: #166534;
  border-color: rgba(22, 163, 74, 0.34);
}

.cc-page .cc-doc-badge--ot {
  background:
    linear-gradient(180deg, rgba(17,17,17,0.08) 0%, rgba(115,115,115,0.13) 100%);
  color: #111111;
  border-color: rgba(17,17,17,0.18);
}

.cc-page .cc-doc-badge--none {
  background:
    linear-gradient(180deg, #f8fafc 0%, #eef2f6 100%);
  color: #64748b;
  border-color: #d7dce3;
}

.cc-page .cc-doc-empty {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cc-page .cc-doc-empty strong {
  color: #111111;
  font-size: 15px;
}

.cc-page .cc-doc-empty span {
  color: #64748b;
  font-size: 13px;
}

/* Acciones dentro de documentos */

.cc-page .doc-accion-link,
.cc-page .doc-accion-disabled {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
  box-shadow:
    0 4px 10px rgba(15,23,42,0.04),
    inset 0 1px 0 rgba(255,255,255,0.82);
}

.cc-page .doc-accion-ot {
  background:
    linear-gradient(180deg, rgba(17,17,17,0.94) 0%, rgba(38,38,42,0.96) 100%);
  color: #ffffff;
  border: 1px solid rgba(17,17,17,0.34);
}

.cc-page .doc-accion-factura {
  background:
    linear-gradient(180deg, rgba(22, 163, 74, 0.16) 0%, rgba(134, 239, 172, 0.24) 100%);
  color: #166534;
  border: 1px solid rgba(22, 163, 74, 0.34);
}

.cc-page .doc-accion-disabled {
  background:
    linear-gradient(180deg, #f8fafc 0%, #eef2f6 100%);
  color: #64748b;
  border: 1px solid #d7dce3;
}

/* =========================================================
   CORR-2.1 / CORR-2.2 — DOCUMENTOS: MENÚ [...] + MODAL GESTIÓN
========================================================= */

.cc-page .cc-doc-actions-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  width: auto;
}

.cc-page .cc-doc-more-btn {
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  border-radius: 11px !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #eef2f6 100%) !important;
  color: #111827 !important;
  border: 1px solid #d5dce5 !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 1px !important;
  box-shadow:
    0 4px 10px rgba(15,23,42,0.05),
    inset 0 1px 0 rgba(255,255,255,0.92) !important;
}

.cc-page .cc-doc-more-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(208, 2, 27, 0.22) !important;
}


@media (max-width: 760px) {
  .cc-page .cc-doc-actions-wrap {
    display: flex;
    align-items: stretch;
    gap: 7px;
  }

  .cc-page .cc-doc-actions-wrap .doc-accion-link,
  .cc-page .cc-doc-actions-wrap .doc-accion-disabled {
    flex: 1;
    justify-content: center;
  }
}


@media (max-width: 1100px) {
  .cc-page .cc-doc-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .cc-page .cc-doc-summary {
    grid-template-columns: 1fr;
  }

  .cc-page .cc-doc-summary-card {
    min-height: auto;
  }

  .cc-page .cc-doc-table-wrap {
    border-radius: 16px;
  }
}

/* =========================================================
   CIERRES COMERCIALES — CC1.6 BUSCADOR DOCUMENTOS
   FIX RESTAURACIÓN TOOLBAR + PAGINADOR
========================================================= */

.cc-page .cc-doc-toolbar {
  margin-bottom: 14px;
  padding: 14px;
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.10) 0%, transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #dfe7f0;
  box-shadow:
    0 8px 18px rgba(15,23,42,0.045),
    inset 0 1px 0 rgba(255,255,255,0.92);
}

.cc-page .cc-doc-toolbar label {
  display: block;
  margin-bottom: 5px;
  color: #111111;
  font-size: 11.5px;
  line-height: 1.1;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

.cc-page .cc-doc-search-main {
  margin-bottom: 12px;
}

.cc-page .cc-doc-search-main input {
  width: 100%;
  min-height: 42px;
  border-radius: 13px;
  font-size: 13px;
}

.cc-page .cc-doc-filter-grid {
  display: grid;
  grid-template-columns: 170px 150px 150px 120px 150px;
  gap: 10px;
  align-items: end;
}

.cc-page .cc-doc-filter-grid input,
.cc-page .cc-doc-filter-grid select {
  width: 100%;
  min-height: 38px;
  border-radius: 11px;
  font-size: 12.5px;
}

.cc-page .cc-doc-filter-action button,
.cc-page #ccDocClear {
  width: 100% !important;
  min-height: 38px !important;
  border-radius: 11px !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #eef2f6 100%) !important;
  color: #111827 !important;
  border: 1px solid #d5dce5 !important;
  box-shadow:
    0 5px 12px rgba(15,23,42,0.055),
    inset 0 1px 0 rgba(255,255,255,0.92) !important;
}

.cc-page .cc-doc-filter-action button:hover,
.cc-page #ccDocClear:hover {
  transform: translateY(-1px);
  filter: none !important;
}

.cc-page .cc-doc-live-info {
  margin-top: 10px;
  padding: 9px 11px;
  border-radius: 12px;
  background: rgba(255, 244, 214, 0.78);
  border: 1px solid #f5deb3;
  color: #7a4f00;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
}

.cc-page .cc-doc-pager {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.cc-page .cc-doc-page-btn {
  width: auto !important;
  min-width: 112px !important;
  min-height: 36px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  border: 1px solid #d7dce3 !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #eef2f6 100%) !important;
  color: #111111 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer;
  box-shadow:
    0 4px 10px rgba(15,23,42,0.04),
    inset 0 1px 0 rgba(255,255,255,0.90) !important;
}

.cc-page .cc-doc-page-btn:not(:disabled):hover {
  transform: translateY(-1px);
  filter: none !important;
  border-color: rgba(208, 2, 27, 0.22) !important;
}

.cc-page .cc-doc-page-btn:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.cc-page .cc-doc-page-current {
  width: auto !important;
  min-height: 36px;
  padding: 0 13px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(180deg, rgba(208, 2, 27, 0.09) 0%, rgba(255, 189, 89, 0.14) 100%);
  color: #111111;
  border: 1px solid rgba(208, 2, 27, 0.12);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

@media (max-width: 1150px) {
  .cc-page .cc-doc-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .cc-page .cc-doc-filter-grid {
    grid-template-columns: 1fr;
  }

  .cc-page .cc-doc-pager {
    flex-direction: column;
  }

  .cc-page .cc-doc-page-btn,
  .cc-page .cc-doc-page-current {
    width: 100% !important;
  }
}

/* =========================================================
   CIERRES COMERCIALES — DOCUMENTOS / ORDEN DE TRABAJO AZUL
========================================================= */

/* Mini card resumen: Órdenes de trabajo */
.cc-page .cc-doc-summary-card--ot::before {
  background: linear-gradient(90deg, #2563eb 0%, #93c5fd 100%) !important;
}

/* Badge Documento: Orden de trabajo */
.cc-page .cc-doc-badge--ot {
  background:
    linear-gradient(180deg, rgba(37, 99, 235, 0.13) 0%, rgba(96, 165, 250, 0.20) 100%) !important;
  color: #1d4ed8 !important;
  border-color: rgba(37, 99, 235, 0.30) !important;
  box-shadow:
    0 4px 10px rgba(37, 99, 235, 0.07),
    inset 0 1px 0 rgba(255,255,255,0.86),
    inset 0 -1px 0 rgba(37,99,235,0.08) !important;
}

/* Botón Acción: Orden de trabajo */
.cc-page .doc-accion-ot {
  background:
    linear-gradient(180deg, rgba(37, 99, 235, 0.16) 0%, rgba(96, 165, 250, 0.24) 100%) !important;
  color: #1d4ed8 !important;
  border: 1px solid rgba(37, 99, 235, 0.34) !important;
  box-shadow:
    0 5px 12px rgba(37, 99, 235, 0.10),
    inset 0 1px 0 rgba(255,255,255,0.88),
    inset 0 -1px 0 rgba(37,99,235,0.08) !important;
}

.cc-page .doc-accion-ot:hover {
  transform: translateY(-1px);
  filter: none !important;
  background:
    linear-gradient(180deg, rgba(37, 99, 235, 0.20) 0%, rgba(96, 165, 250, 0.30) 100%) !important;
  border-color: rgba(37, 99, 235, 0.42) !important;
}

/* =========================================================
   PRÓXIMOS SERVICIOS — PS1.2 SHELL + TOOLBAR
========================================================= */

.ps-page .ps-toolbar-card {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  padding: 16px;
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.12) 0%, transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
  border: 1px solid rgba(208, 2, 27, 0.08);
  box-shadow:
    0 14px 34px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.92);
}

.ps-page .ps-toolbar-head {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.92);
}

.ps-page .ps-toolbar-kicker {
  display: inline-flex;
  margin-bottom: 5px;
  color: var(--vmms-red);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ps-page .ps-toolbar-head h2 {
  margin: 0 0 5px 0;
  padding: 0;
  border: none;
  color: #111111;
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.ps-page .ps-toolbar-head p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.4;
}

/* =========================================================
   PRÓXIMOS SERVICIOS — PS1.3 CARDS PREMIUM
========================================================= */

.ps-page #contenido {
  display: grid;
  gap: 22px;
  margin-top: 18px;
}

.ps-page .ps-group {
  position: relative;
  overflow: hidden;
  padding: 16px;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.62) 0%, rgba(241,245,249,0.92) 100%);
  border: 1px solid rgba(226, 232, 240, 0.96);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.94),
    0 10px 22px rgba(15,23,42,0.045);
}

.ps-page .ps-group-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(203, 213, 225, 0.92);
}

.ps-page .ps-group-kicker {
  display: inline-flex;
  margin-bottom: 5px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ps-page .ps-group-head h2 {
  margin: 0 0 4px 0;
  padding: 0;
  border: none;
  color: #111111;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.ps-page .ps-group-head p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.4;
}

.ps-page .ps-group-count {
  min-width: 40px;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 900;
  box-shadow:
    0 6px 14px rgba(15,23,42,0.06),
    inset 0 1px 0 rgba(255,255,255,0.82);
}

.ps-page .ps-group--vencido .ps-group-kicker {
  color: #b91c1c;
}

.ps-page .ps-group--vencido .ps-group-count {
  background:
    linear-gradient(180deg, rgba(208,2,27,0.13) 0%, rgba(208,2,27,0.22) 100%);
  color: #8f0f1d;
  border: 1px solid rgba(208,2,27,0.24);
}

.ps-page .ps-group--proximo .ps-group-kicker {
  color: #92400e;
}

.ps-page .ps-group--proximo .ps-group-count {
  background:
    linear-gradient(180deg, rgba(255,189,89,0.20) 0%, rgba(245,158,11,0.28) 100%);
  color: #7a4f00;
  border: 1px solid rgba(245,158,11,0.28);
}

.ps-page .ps-group--futuro .ps-group-kicker {
  color: #1d4ed8;
}

.ps-page .ps-group--futuro .ps-group-count {
  background:
    linear-gradient(180deg, rgba(59,130,246,0.13) 0%, rgba(29,78,216,0.21) 100%);
  color: #1d4ed8;
  border: 1px solid rgba(29,78,216,0.24);
}

.ps-page .ps-service-grid {
  display: grid;
  gap: 16px;
}

.ps-page .ps-service-card {
  position: relative;
  overflow: hidden;
  padding: 0;
  border-radius: 20px;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,0.80) 0%, transparent 28%),
    linear-gradient(145deg, #ffffff 0%, #f8fafc 58%, #eef2f6 100%);
  border: 1px solid #dfe7f0;
  box-shadow:
    0 18px 34px rgba(15,23,42,0.08),
    0 5px 12px rgba(15,23,42,0.045),
    inset 0 1px 0 rgba(255,255,255,0.96),
    inset 0 -8px 16px rgba(15,23,42,0.025);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.ps-page .ps-service-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 22px 42px rgba(15,23,42,0.11),
    0 8px 16px rgba(15,23,42,0.06),
    inset 0 1px 0 rgba(255,255,255,0.98),
    inset 0 -8px 16px rgba(15,23,42,0.03);
}

.ps-page .ps-service-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  right: 18px;
  height: 4px;
  border-radius: 999px;
}

.ps-page .ps-state--vencido::before {
  background: linear-gradient(90deg, #d0021b 0%, #fca5a5 100%);
}

.ps-page .ps-state--proximo::before {
  background: linear-gradient(90deg, #ffbd59 0%, #f59e0b 100%);
}

.ps-page .ps-state--futuro::before {
  background: linear-gradient(90deg, #3b82f6 0%, #93c5fd 100%);
}

.ps-page .ps-card-head {
  padding: 18px 18px 14px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  border-bottom: 1px solid rgba(203, 213, 225, 0.92);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(248,250,252,0.84) 100%);
}

.ps-page .ps-card-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 13px;
}

.ps-page .ps-client-avatar {
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(145deg, rgba(208,2,27,0.92) 0%, rgba(158,0,20,0.96) 100%);
  color: #ffffff;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.04em;
  box-shadow:
    0 12px 22px rgba(208,2,27,0.18),
    inset 0 1px 0 rgba(255,255,255,0.25);
}

.ps-page .ps-card-title-wrap {
  min-width: 0;
}

.ps-page .ps-card-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 5px;
}

.ps-page .ps-card-title-row h3 {
  margin: 0;
  color: #111111;
  font-size: 17px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.ps-page .ps-card-title-wrap p {
  margin: 0;
  color: #475569;
  font-size: 13px;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 650;
}

.ps-page .ps-domain-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 11px;
  border-radius: 10px;
  background:
    linear-gradient(180deg, #ffffff 0%, #eef2f7 100%);
  border: 1px solid rgba(203, 213, 225, 0.95);
  color: #111111;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  box-shadow:
    0 3px 8px rgba(15,23,42,0.045),
    inset 0 1px 0 rgba(255,255,255,0.92);
}

.ps-page .ps-status-badge {
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.ps-page .ps-status-badge--vencido {
  background:
    linear-gradient(180deg, rgba(208,2,27,0.13) 0%, rgba(208,2,27,0.22) 100%);
  color: #8f0f1d;
  border: 1px solid rgba(208,2,27,0.24);
}

.ps-page .ps-status-badge--proximo {
  background:
    linear-gradient(180deg, rgba(255,189,89,0.20) 0%, rgba(245,158,11,0.28) 100%);
  color: #7a4f00;
  border: 1px solid rgba(245,158,11,0.28);
}

.ps-page .ps-status-badge--futuro {
  background:
    linear-gradient(180deg, rgba(59,130,246,0.13) 0%, rgba(29,78,216,0.21) 100%);
  color: #1d4ed8;
  border: 1px solid rgba(29,78,216,0.24);
}

.ps-page .ps-card-body {
  padding: 16px 18px 16px;
}

.ps-page .ps-mini-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.ps-page .ps-info-card {
  min-width: 0;
  min-height: 86px;
  padding: 13px 12px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #e1e8f0;
  box-shadow:
    0 5px 13px rgba(15,23,42,0.04),
    inset 0 1px 0 rgba(255,255,255,0.90);
}

.ps-page .ps-info-card strong {
  display: block;
  margin-bottom: 6px;
  color: #111111;
  font-size: 11.5px;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

.ps-page .ps-info-card span {
  display: block;
  color: #111111;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.ps-page .ps-info-card small {
  display: block;
  margin-top: 5px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.2;
}

.ps-page .ps-info-card--highlight {
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.10) 0%, transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.ps-page .ps-card-actions {
  padding: 14px 18px 16px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(203, 213, 225, 0.92);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.74) 0%, rgba(248,250,252,0.80) 100%);
}

.ps-page .ps-action-btn {
  width: auto !important;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 11px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  box-shadow:
    0 5px 12px rgba(15,23,42,0.055),
    inset 0 1px 0 rgba(255,255,255,0.92);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}

.ps-page .ps-action-btn:hover {
  transform: translateY(-1px);
}

.ps-page .ps-action-btn--whatsapp {
  background:
    linear-gradient(180deg, rgba(37, 211, 102, 0.15) 0%, rgba(37, 211, 102, 0.24) 100%);
  color: #15803d;
  border-color: rgba(22,163,74,0.28);
}

.ps-page .ps-action-btn--mark {
  background:
    linear-gradient(180deg, #ffffff 0%, #eef2f6 100%);
  color: #111827;
  border-color: #d5dce5;
}

.ps-page .ps-action-btn--done {
  background:
    linear-gradient(180deg, rgba(22, 163, 10, 0.80) 0%, rgba(134, 239, 172, 0.40) 100%);
  color: #166534;
  border-color: rgba(22, 163, 74, 0.34);
  cursor: default;
}

.ps-page .ps-action-btn--done:hover {
  transform: none;
}

.ps-page .ps-action-note {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  background:
    linear-gradient(180deg, #f8fafc 0%, #eef2f6 100%);
  color: #64748b;
  border: 1px solid #d7dce3;
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 1100px) {
  .ps-page .ps-mini-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .ps-page .ps-group-head,
  .ps-page .ps-card-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .ps-page .ps-card-title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .ps-page .ps-mini-grid {
    grid-template-columns: 1fr;
  }

  .ps-page .ps-card-actions {
    flex-direction: column;
  }

  .ps-page .ps-action-btn,
  .ps-page .ps-action-note {
    width: 100% !important;
    justify-content: center;
  }
}

/* =========================================================
   HISTORIAL CONTACTOS — HC1.2 SHELL + TOOLBAR + MODAL BASE
========================================================= */

.hc-page .hc-toolbar-card {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  padding: 16px;
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.12) 0%, transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
  border: 1px solid rgba(208, 2, 27, 0.08);
  box-shadow:
    0 14px 34px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.92);
}

.hc-page .hc-toolbar-head {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.92);
}

.hc-page .hc-toolbar-kicker {
  display: inline-flex;
  margin-bottom: 5px;
  color: var(--vmms-red);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.hc-page .hc-toolbar-head h2 {
  margin: 0 0 5px 0;
  padding: 0;
  border: none;
  color: #111111;
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.hc-page .hc-toolbar-head p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.4;
}

/* Modal nota — reemplaza CSS incrustado */

.hc-page .btn-nota {
  width: auto !important;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 13px;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.hc-page .modal-nota-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, 0.58);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: var(--vmms-z-modal);
  padding: 20px;
  backdrop-filter: blur(6px);
}

.hc-page .modal-nota-box {
  width: 100%;
  max-width: 620px;
  overflow: hidden;
  border-radius: 22px;
  padding: 0;
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.12) 0%, transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow:
    0 28px 70px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.94);
}

.hc-page .modal-nota-box h3 {
  margin: 0;
  padding: 18px 20px;
  color: #ffffff;
  font-size: 21px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.16) 0%, transparent 34%),
    linear-gradient(135deg, #08080a 0%, #151519 58%, #0b0b0d 100%);
  border-bottom: 4px solid var(--vmms-red);
}

.hc-page .modal-nota-box label {
  display: block;
  margin: 16px 20px 6px;
  font-weight: 900;
  font-size: 12px;
  color: #111111;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

.hc-page .modal-nota-box textarea {
  display: block;
  width: calc(100% - 40px);
  min-height: 140px;
  margin: 0 20px;
  padding: 11px 12px;
  resize: vertical;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  font-size: 13px;
  background: #ffffff;
}

.hc-page .modal-nota-acciones {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding: 16px 20px 20px;
  border-top: 1px solid rgba(226, 232, 240, 0.82);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.74) 0%, rgba(248,250,252,0.86) 100%);
}

.hc-page .mensaje-nota {
  margin: 14px 20px 0;
  padding: 12px 14px;
  border-radius: 10px;
  display: none;
  font-size: 13px;
  font-weight: 700;
}

.hc-page .mensaje-nota.ok {
  display: block;
  background: #dcfce7;
  color: #166534;
  border: 1px solid rgba(21, 128, 61, 0.12);
}

.hc-page .mensaje-nota.error {
  display: block;
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid rgba(185, 28, 28, 0.12);
}

@media (max-width: 760px) {
  .hc-page .modal-nota-acciones {
    flex-direction: column;
  }

  .hc-page .btn-nota {
    width: 100% !important;
  }

  .hc-page .modal-nota-box {
    border-radius: 18px;
  }

  .hc-page .modal-nota-box h3 {
    font-size: 19px;
    padding: 16px;
  }

  .hc-page .modal-nota-box label {
    margin-left: 16px;
    margin-right: 16px;
  }

  .hc-page .modal-nota-box textarea {
    width: calc(100% - 32px);
    margin-left: 16px;
    margin-right: 16px;
  }
}

/* =========================================================
   HISTORIAL CONTACTOS — HC1.3 CARDS PREMIUM
========================================================= */

.hc-page #contenido {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

.hc-page .hc-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.hc-page .hc-summary-card {
  position: relative;
  overflow: hidden;
  min-height: 76px;
  padding: 13px 14px;
  border-radius: 16px;
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.10) 0%, transparent 34%),
    linear-gradient(145deg, #ffffff 0%, #f8fafc 58%, #eef2f6 100%);
  border: 1px solid #dfe7f0;
  box-shadow:
    0 8px 18px rgba(15, 23, 42, 0.045),
    inset 0 1px 0 rgba(255,255,255,0.92),
    inset 0 -3px 8px rgba(15,23,42,0.02);
}

.hc-page .hc-summary-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 14px;
  right: 14px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--vmms-red) 0%, var(--vmms-yellow) 100%);
  opacity: 0.88;
}

.hc-page .hc-summary-card--whatsapp::before {
  background: linear-gradient(90deg, #16a34a 0%, #86efac 100%);
}

.hc-page .hc-summary-card--notes::before {
  background: linear-gradient(90deg, #2563eb 0%, #93c5fd 100%);
}

.hc-page .hc-summary-card span {
  display: block;
  color: #64748b;
  font-size: 11.5px;
  line-height: 1.15;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  margin-bottom: 8px;
}

.hc-page .hc-summary-card strong {
  display: block;
  color: #111111;
  font-size: 24px;
  line-height: 1;
  font-weight: 900;
}

.hc-page .hc-results-list {
  display: grid;
  gap: 18px;
  padding: 12px;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.56) 0%, rgba(241,245,249,0.88) 100%);
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.94),
    0 8px 18px rgba(15,23,42,0.035);
}

.hc-page .hc-contact-card {
  position: relative;
  overflow: hidden;
  padding: 0;
  border-radius: 20px;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,0.80) 0%, transparent 28%),
    linear-gradient(145deg, #ffffff 0%, #f8fafc 58%, #eef2f6 100%);
  border: 1px solid #dfe7f0;
  box-shadow:
    0 18px 34px rgba(15,23,42,0.08),
    0 5px 12px rgba(15,23,42,0.045),
    inset 0 1px 0 rgba(255,255,255,0.96),
    inset 0 -8px 16px rgba(15,23,42,0.025);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.hc-page .hc-contact-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 22px 42px rgba(15,23,42,0.11),
    0 8px 16px rgba(15,23,42,0.06),
    inset 0 1px 0 rgba(255,255,255,0.98),
    inset 0 -8px 16px rgba(15,23,42,0.03);
}

.hc-page .hc-contact-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  right: 18px;
  height: 4px;
  border-radius: 999px;
}

.hc-page .hc-contact-head {
  padding: 18px 18px 14px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  border-bottom: 1px solid rgba(203, 213, 225, 0.92);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(248,250,252,0.84) 100%);
}

.hc-page .hc-contact-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 13px;
}

.hc-page .hc-contact-avatar {
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(145deg, rgba(208,2,27,0.92) 0%, rgba(158,0,20,0.96) 100%);
  color: #ffffff;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.04em;
  box-shadow:
    0 12px 22px rgba(208,2,27,0.18),
    inset 0 1px 0 rgba(255,255,255,0.25);
}

.hc-page .hc-contact-title-wrap {
  min-width: 0;
}

.hc-page .hc-contact-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 5px;
}

.hc-page .hc-contact-title-row h3 {
  margin: 0;
  color: #111111;
  font-size: 17px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.hc-page .hc-contact-title-wrap p {
  margin: 0;
  color: #475569;
  font-size: 13px;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 650;
}

.hc-page .hc-domain-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 11px;
  border-radius: 10px;
  background:
    linear-gradient(180deg, #ffffff 0%, #eef2f7 100%);
  border: 1px solid rgba(203, 213, 225, 0.95);
  color: #111111;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  box-shadow:
    0 3px 8px rgba(15,23,42,0.045),
    inset 0 1px 0 rgba(255,255,255,0.92);
}

.hc-page .hc-medium-badge--whatsapp {
  background: linear-gradient(180deg, rgba(22, 163, 74, 0.16) 0%, rgba(134, 239, 172, 0.24) 100%);
  color: #166534;
  border-color: rgba(22, 163, 74, 0.34);
}

.hc-page .hc-medium-badge--phone {
  background: linear-gradient(180deg, rgba(59,130,246,0.13) 0%, rgba(29,78,216,0.21) 100%);
  color: #1d4ed8;
  border-color: rgba(29,78,216,0.24);
}

.hc-page .hc-medium-badge--email {
  background: linear-gradient(180deg, rgba(255,189,89,0.20) 0%, rgba(245,158,11,0.28) 100%);
  color: #7a4f00;
  border-color: rgba(245,158,11,0.28);
}

.hc-page .hc-medium-badge--default {
  background: linear-gradient(180deg, #f8fafc 0%, #eef2f6 100%);
  color: #64748b;
  border-color: #d7dce3;
}

.hc-page .hc-contact-body {
  padding: 16px 18px 16px;
}

.hc-page .hc-info-card {
  min-width: 0;
  min-height: 86px;
  padding: 13px 12px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #e1e8f0;
  box-shadow:
    0 5px 13px rgba(15,23,42,0.04),
    inset 0 1px 0 rgba(255,255,255,0.90);
}

.hc-page .hc-info-card strong {
  display: block;
  margin-bottom: 6px;
  color: #111111;
  font-size: 11.5px;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

.hc-page .hc-info-card span {
  display: block;
  color: #111111;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.hc-page .hc-info-card small {
  display: block;
  margin-top: 5px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.2;
}

.hc-page .hc-info-card--highlight {
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.10) 0%, transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

@media (max-width: 1100px) {
  .hc-page .hc-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
    .hc-page .hc-summary-grid {
      grid-template-columns: 1fr;
    }

  .hc-page .hc-contact-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .hc-page .hc-contact-badges {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .hc-page .hc-contact-title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

/* =========================================================
   HISTORIAL CONTACTOS — HC1.4 MODAL NOTAS PREMIUM
========================================================= */

.hc-page .hc-note-modal-box {
  max-width: 660px;
}

.hc-page .hc-note-modal-header {
  position: relative;
  padding: 18px 20px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.16) 0%, transparent 34%),
    linear-gradient(135deg, #08080a 0%, #151519 58%, #0b0b0d 100%);
  color: #ffffff;
  border-bottom: 4px solid var(--vmms-red);
}

.hc-page .hc-note-modal-header::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 5px;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(180deg, var(--vmms-red) 0%, var(--vmms-yellow) 100%);
}

.hc-page .hc-note-modal-title-wrap {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.hc-page .hc-note-modal-icon {
  width: 46px;
  height: 46px;
  min-width: 46px;
  border-radius: 15px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.08) 100%);
  border: 1px solid rgba(255,255,255,0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    0 10px 18px rgba(0,0,0,0.12);
}

.hc-page .hc-note-modal-kicker {
  display: inline-flex;
  margin-bottom: 5px;
  color: var(--vmms-yellow);
  font-size: 10.5px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.hc-page .hc-note-modal-header h3 {
  margin: 0 0 4px 0;
  padding: 0;
  color: #ffffff;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  background: none;
  border: none;
}

.hc-page .hc-note-modal-header p {
  margin: 0;
  color: rgba(255,255,255,0.72);
  font-size: 12.5px;
  line-height: 1.35;
}

.hc-page .hc-note-modal-close {
  position: relative;
  z-index: 1;
  width: 34px !important;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  padding: 0 !important;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.12);
  font-size: 22px;
  line-height: 1;
  box-shadow: none;
}

.hc-page .hc-note-modal-close:hover {
  background: rgba(255,255,255,0.18);
  transform: translateY(-1px);
}

.hc-page .hc-note-context-card {
  margin: 16px 20px 0;
  display: grid;
  grid-template-columns: 1.1fr 0.7fr 1.1fr;
  gap: 10px;
}

.hc-page .hc-note-context-card > div {
  min-width: 0;
  padding: 11px 12px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #e1e8f0;
  box-shadow:
    0 5px 13px rgba(15,23,42,0.04),
    inset 0 1px 0 rgba(255,255,255,0.90);
}

.hc-page .hc-note-context-card strong {
  display: block;
  margin-bottom: 5px;
  color: #111111;
  font-size: 11px;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

.hc-page .hc-note-context-card span {
  color: #374151;
  font-size: 12.5px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.hc-page .hc-note-domain {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 9px;
  background:
    linear-gradient(180deg, #ffffff 0%, #eef2f7 100%);
  border: 1px solid rgba(203, 213, 225, 0.95);
  color: #111111 !important;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.hc-page .hc-note-form-body {
  padding: 16px 20px 0;
}

.hc-page .hc-note-form-body label {
  margin: 0 0 6px;
}

.hc-page .hc-note-form-body textarea {
  width: 100%;
  min-height: 145px;
  margin: 0;
  border-radius: 13px;
}

.hc-page .hc-note-helper {
  margin-top: 8px;
  padding: 9px 11px;
  border-radius: 12px;
  background: rgba(255, 244, 214, 0.78);
  border: 1px solid #f5deb3;
  color: #7a4f00;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
}

.hc-page .hc-note-modal-actions {
  justify-content: flex-end;
}

.hc-page .hc-note-modal-actions .btn-nota {
  min-width: 130px;
}

@media (max-width: 760px) {
  .hc-page .hc-note-modal-header {
    padding: 16px;
  }

  .hc-page .hc-note-modal-title-wrap {
    align-items: flex-start;
  }

  .hc-page .hc-note-context-card {
    grid-template-columns: 1fr;
    margin-left: 16px;
    margin-right: 16px;
  }

  .hc-page .hc-note-form-body {
    padding-left: 16px;
    padding-right: 16px;
  }

  .hc-page .hc-note-modal-actions {
    padding-left: 16px;
    padding-right: 16px;
  }

  .hc-page .hc-note-modal-actions .btn-nota {
    width: 100% !important;
  }
}

/* =========================================================
   CONSULTA CAPACIDADES — CAP1.2 SHELL + BUSCADOR PREMIUM
========================================================= */

.cap-page .cap-toolbar-card {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  padding: 16px;
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.12) 0%, transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
  border: 1px solid rgba(208, 2, 27, 0.08);
  box-shadow:
    0 14px 34px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.92);
}

.cap-page .cap-toolbar-head {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.92);
}

.cap-page .cap-toolbar-kicker {
  display: inline-flex;
  margin-bottom: 5px;
  color: var(--vmms-red);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cap-page .cap-toolbar-head h2 {
  margin: 0 0 5px 0;
  padding: 0;
  border: none;
  color: #111111;
  font-size: 17px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.cap-page .cap-toolbar-head p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.4;
}

.cap-page .cap-layout-premium {
  display: grid;
  grid-template-columns: minmax(320px, 0.85fr) minmax(0, 1.15fr);
  gap: 14px;
  align-items: stretch;
}

.cap-page .cap-search-panel-premium,
.cap-page .cap-results-panel-premium {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: 14px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #e1e8f0;
  box-shadow:
    0 8px 18px rgba(15,23,42,0.045),
    inset 0 1px 0 rgba(255,255,255,0.92);
}

.cap-page .cap-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.cap-page .cap-form-grid label {
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

.cap-page .cap-form-grid input {
  border-radius: 13px;
  font-size: 13px;
}

.cap-page .cap-actions-premium .btn,
.cap-page .cap-actions-premium button {
  width: auto !important;
  min-width: 120px;
  min-height: 38px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 850;
}

.cap-page .cap-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.92);
}

.cap-page .cap-results-kicker {
  display: block;
  margin-bottom: 4px;
  color: var(--vmms-red);
  font-size: 10.5px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cap-page .cap-results-header strong {
  color: #111111;
  font-size: 15px;
  line-height: 1.15;
  font-weight: 900;
}

.cap-page .cap-count-chip {
  min-height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(180deg, rgba(208, 2, 27, 0.09) 0%, rgba(255, 189, 89, 0.14) 100%);
  color: #111111;
  border: 1px solid rgba(208, 2, 27, 0.12);
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.cap-page .cap-results-list {
  max-height: 420px;
  overflow-y: auto;
  display: grid;
  gap: 10px;
  padding-right: 4px;
}

.cap-page .cap-result-item {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  padding: 13px 14px;
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.09) 0%, transparent 34%),
    linear-gradient(145deg, #ffffff 0%, #f8fafc 58%, #eef2f6 100%);
  border: 1px solid #dfe7f0;
  box-shadow:
    0 8px 18px rgba(15,23,42,0.045),
    inset 0 1px 0 rgba(255,255,255,0.92),
    inset 0 -3px 8px rgba(15,23,42,0.02);
  cursor: pointer;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.cap-page .cap-result-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 14px;
  right: 14px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--vmms-red) 0%, var(--vmms-yellow) 100%);
  opacity: 0.86;
}

.cap-page .cap-result-item:hover {
  transform: translateY(-1px);
  border-color: rgba(208, 2, 27, 0.16);
  box-shadow:
    0 12px 24px rgba(15,23,42,0.075),
    inset 0 1px 0 rgba(255,255,255,0.94);
}

.cap-page .cap-result-title {
  margin-bottom: 7px;
  color: #111111;
  font-size: 15px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.cap-page .cap-result-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  color: #64748b;
  font-size: 12.5px;
  line-height: 1.35;
}

.cap-page .cap-result-meta strong {
  color: #111111;
  font-weight: 850;
}

.cap-page .cap-results-list .vacio {
  margin: 0;
  border-radius: 16px;
  border: 1px dashed rgba(148, 163, 184, 0.90);
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  color: #64748b;
}

@media (max-width: 1100px) {
  .cap-page .cap-layout-premium {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .cap-page .cap-toolbar-card {
    padding: 14px;
  }

  .cap-page .cap-results-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .cap-page .cap-count-chip {
    width: 100%;
  }

  .cap-page .cap-actions-premium {
    flex-direction: column;
  }

  .cap-page .cap-actions-premium .btn,
  .cap-page .cap-actions-premium button {
    width: 100% !important;
  }
}

/* =========================================================
   CONSULTA CAPACIDADES — CAP1.3 DETALLE TÉCNICO PREMIUM
========================================================= */

.cap-page .cap-detail-card {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  padding: 0;
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.12) 0%, transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
  border: 1px solid rgba(208, 2, 27, 0.08);
  box-shadow:
    0 16px 38px rgba(15, 23, 42, 0.09),
    inset 0 1px 0 rgba(255,255,255,0.92);
}

.cap-page .cap-detail-header {
  padding: 18px 20px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.16) 0%, transparent 34%),
    linear-gradient(135deg, #08080a 0%, #151519 58%, #0b0b0d 100%);
  color: #ffffff;
  border-bottom: 4px solid var(--vmms-red);
}

.cap-page .cap-detail-kicker {
  display: inline-flex;
  margin-bottom: 5px;
  color: var(--vmms-red);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cap-page .cap-detail-header h2 {
  margin: 0 0 5px 0;
  padding: 0;
  border: none;
  color: #ffffff;
  font-size: 23px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.cap-page .cap-detail-header p {
  margin: 0;
  color: rgba(255,255,255,0.72);
  font-size: 12.5px;
  line-height: 1.35;
}

.cap-page .cap-confidence-badge {
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
  border: 1px solid transparent;
  box-shadow:
    0 6px 14px rgba(0,0,0,0.10),
    inset 0 1px 0 rgba(255,255,255,0.28);
}

.cap-page .cap-confidence--alta {
  background:
    linear-gradient(180deg, rgba(22, 163, 74, 0.18) 0%, rgba(134, 239, 172, 0.28) 100%);
  color: #bbf7d0;
  border-color: rgba(134, 239, 172, 0.34);
}

.cap-page .cap-confidence--media {
  background:
    linear-gradient(180deg, rgba(255,189,89,0.22) 0%, rgba(245,158,11,0.30) 100%);
  color: #ffedd5;
  border-color: rgba(245,158,11,0.34);
}

.cap-page .cap-confidence--baja {
  background:
    linear-gradient(180deg, rgba(208,2,27,0.18) 0%, rgba(248,113,113,0.26) 100%);
  color: #fecaca;
  border-color: rgba(248,113,113,0.34);
}

.cap-page .cap-confidence--neutral {
  background:
    linear-gradient(180deg, rgba(148,163,184,0.18) 0%, rgba(203,213,225,0.28) 100%);
  color: #e5e7eb;
  border-color: rgba(203,213,225,0.28);
}

.cap-page .cap-detail-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1.25fr);
  gap: 14px;
  padding: 16px 18px 0;
}

.cap-page .cap-capacity-hero {
  position: relative;
  overflow: hidden;
  min-height: 168px;
  padding: 18px;
  border-radius: 20px;
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.18) 0%, transparent 34%),
    linear-gradient(145deg, #ffffff 0%, #f8fafc 58%, #eef2f6 100%);
  border: 1px solid #dfe7f0;
  box-shadow:
    0 14px 30px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.94),
    inset 0 -6px 14px rgba(15,23,42,0.025);
}

.cap-page .cap-capacity-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 16px;
  right: 16px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--vmms-red) 0%, var(--vmms-yellow) 100%);
}

.cap-page .cap-capacity-label {
  display: block;
  margin-bottom: 12px;
  color: var(--vmms-red);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cap-page .cap-capacity-hero strong {
  display: block;
  color: #111111;
  font-size: 36px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -0.04em;
  margin-bottom: 10px;
}

.cap-page .cap-capacity-hero small {
  display: block;
  color: #64748b;
  font-size: 12.5px;
  line-height: 1.35;
  font-weight: 700;
}

.cap-page .cap-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.cap-page .cap-info-tile {
  min-width: 0;
  padding: 10px 10px;
  border-radius: 15px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #e1e8f0;
  box-shadow:
    0 5px 13px rgba(15,23,42,0.04),
    inset 0 1px 0 rgba(255,255,255,0.90);
}

.cap-page .cap-info-tile strong {
  display: block;
  margin-bottom: 6px;
  color: #111111;
  font-size: 11.5px;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

.cap-page .cap-info-tile span {
  display: block;
  color: #111111;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.cap-page .cap-variants-section {
  margin: 14px 18px 0;
  padding: 14px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #e1e8f0;
  box-shadow:
    0 6px 15px rgba(15,23,42,0.04),
    inset 0 1px 0 rgba(255,255,255,0.90);
}

.cap-page .cap-section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.cap-page .cap-section-title-row .cap-detail-kicker {
  color: var(--vmms-red);
}

.cap-page .cap-section-title-row h3 {
  margin: 0;
  color: #111111;
  font-size: 17px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.cap-page .cap-variants-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
}

.cap-page .cap-filter-list {
  display: block;
}

.cap-page .cap-filter-accordion {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.cap-page .cap-filter-accordion-item {
  overflow: hidden;
  border: 1px solid rgba(226,232,240,0.96);
  border-radius: 13px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  box-shadow:
    0 4px 11px rgba(15,23,42,0.035),
    inset 0 1px 0 rgba(255,255,255,0.86);
}

.cap-page .cap-filter-toggle {
  width: 100%;
  min-height: 38px;
  padding: 8px 11px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #111111;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 24px;
  align-items: center;
  gap: 10px;
  text-align: left;
  box-shadow: none;
}

.cap-page .cap-filter-toggle:hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(255,248,223,0.36) 100%);
  filter: none;
}

.cap-page .cap-filter-toggle-title {
  font-size: 13px;
  font-weight: 750;
  color: #111111;
}

.cap-page .cap-filter-toggle-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(255,248,223,0.70);
  border: 1px solid rgba(245,222,179,0.90);
  color: #7a4f00;
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}

.cap-page .cap-filter-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #f3f6f9;
  color: #64748b;
  font-size: 14px;
  transition: transform 0.18s ease;
}

.cap-page .cap-filter-accordion-item.is-open .cap-filter-toggle-icon {
  transform: rotate(180deg);
}

.cap-page .cap-filter-panel {
  display: none;
  padding: 0 11px 10px;
  border-top: 1px solid rgba(226,232,240,0.74);
}

.cap-page .cap-filter-accordion-item.is-open .cap-filter-panel {
  display: block;
}

.cap-page .cap-filter-pill-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding-top: 9px;
}

.cap-page .cap-filter-accordion-item--empty {
  opacity: 0.62;
}

.cap-page .cap-filter-accordion-item--empty .cap-filter-toggle {
  cursor: default;
}

.cap-page .cap-variant-chip {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  width: fit-content;
  max-width: 100%;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255,248,223,0.60);
  border: 1px solid rgba(245,222,179,0.85);
  color: #6b4700;
  font-size: 12px;
  line-height: 1.1;
  font-weight: 650;
  flex: 0 0 auto;
}

.cap-page .cap-filter-option-chip {
  width: fit-content;
  max-width: 100%;
  justify-content: flex-start;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,248,223,0.66) 100%);
}

.cap-page .cap-variant-chip strong {
  font-size: 12px;
  font-weight: 750;
  color: #111111;
}

.cap-page .cap-variant-chip small {
  font-size: 11px;
  font-weight: 650;
  color: #7a5a00;
  white-space: nowrap;
}

.cap-page .cap-empty-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #f3f6f9;
  border: 1px solid #dbe2ea;
  color: #64748b;
  font-size: 12px;
  line-height: 1.1;
  font-weight: 700;
}

.cap-page .cap-observations-box {
  margin: 14px 18px 18px;
  padding: 14px;
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(37,99,235,0.07) 0%, transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid rgba(37, 99, 235, 0.16);
  box-shadow:
    0 6px 15px rgba(15,23,42,0.04),
    inset 0 1px 0 rgba(255,255,255,0.90);
}

.cap-page .cap-observations-box strong {
  display: block;
  margin-bottom: 7px;
  color: #111111;
  font-size: 11.5px;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

.cap-page .cap-observations-box p {
  margin: 0;
  color: #374151;
  font-size: 13px;
  line-height: 1.45;
}

@media (max-width: 1100px) {
  .cap-page .cap-detail-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .cap-page .cap-detail-header {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
  }

  .cap-page .cap-detail-layout {
    padding: 14px 14px 0;
  }

  .cap-page .cap-detail-grid {
    grid-template-columns: 1fr;
  }

  .cap-page .cap-capacity-hero {
    min-height: auto;
  }

  .cap-page .cap-capacity-hero strong {
    font-size: 30px;
  }

  .cap-page .cap-variants-section,
  .cap-page .cap-observations-box {
    margin-left: 14px;
    margin-right: 14px;
  }

  .cap-page .cap-variant-chip {
    width: fit-content;
    max-width: 100%;
    flex: 0 0 auto;
  }
}

/* =========================================================
   CONSULTA CAPACIDADES — CAP1.4 HERRAMIENTA TÉCNICA PREMIUM
========================================================= */

.cap-page .cap-maintenance-card {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  padding: 0;
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.12) 0%, transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
  border: 1px solid rgba(208, 2, 27, 0.08);
  box-shadow:
    0 16px 38px rgba(15, 23, 42, 0.09),
    inset 0 1px 0 rgba(255,255,255,0.92);
}

.cap-page .cap-maintenance-kicker {
  color: var(--vmms-yellow);
}

.cap-page .cap-maintenance-body {
  padding: 16px 18px 18px;
}

.cap-page .cap-warning-panel {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin-top: 10px;
  padding: 10px;
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.16) 0%, transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #fffaf0 100%);
  border: 1px solid #f5deb3;
  box-shadow:
    0 8px 18px rgba(245,158,11,0.06),
    inset 0 1px 0 rgba(255,255,255,0.92);
}

.cap-page .cap-warning-icon {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 15px;
  background:
    linear-gradient(180deg, rgba(255,189,89,0.22) 0%, rgba(245,158,11,0.30) 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.82),
    0 6px 14px rgba(245,158,11,0.10);
}

.cap-page .cap-warning-panel strong {
  display: block;
  margin-bottom: 5px;
  color: #111111;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 900;
}

.cap-page .cap-warning-panel p {
  margin: 0;
  color: #7a4f00;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 650;
}

.cap-page .cap-maintenance-actions {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.cap-page .cap-rebuild-btn {
  width: auto !important;
  min-height: 38px;
  padding: 0 15px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 850;
}

/* Modal reconstrucción */

.cap-page .cap-rebuild-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, 0.58);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: var(--vmms-z-modal);
  padding: 20px;
  backdrop-filter: blur(6px);
}

.cap-page .cap-rebuild-modal-box {
  width: 100%;
  max-width: 660px;
  overflow: hidden;
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.12) 0%, transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow:
    0 28px 70px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.94);
}

.cap-page .cap-rebuild-modal-header {
  position: relative;
  padding: 18px 20px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.16) 0%, transparent 34%),
    linear-gradient(135deg, #08080a 0%, #151519 58%, #0b0b0d 100%);
  color: #ffffff;
  border-bottom: 4px solid var(--vmms-red);
}

.cap-page .cap-rebuild-modal-header::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 5px;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(180deg, var(--vmms-red) 0%, var(--vmms-yellow) 100%);
}

.cap-page .cap-rebuild-title-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.cap-page .cap-rebuild-modal-icon {
  width: 46px;
  height: 46px;
  min-width: 46px;
  border-radius: 15px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.08) 100%);
  border: 1px solid rgba(255,255,255,0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    0 10px 18px rgba(0,0,0,0.12);
}

.cap-page .cap-rebuild-kicker {
  display: inline-flex;
  margin-bottom: 5px;
  color: var(--vmms-yellow);
  font-size: 10.5px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cap-page .cap-rebuild-modal-header h3 {
  margin: 0 0 4px 0;
  color: #ffffff;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.cap-page .cap-rebuild-modal-header p {
  margin: 0;
  color: rgba(255,255,255,0.72);
  font-size: 12.5px;
  line-height: 1.35;
}

.cap-page .cap-rebuild-close {
  position: relative;
  z-index: 1;
  width: 34px !important;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  padding: 0 !important;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.12);
  font-size: 22px;
  line-height: 1;
  box-shadow: none;
}

.cap-page .cap-rebuild-content {
  padding: 16px 20px 0;
}

.cap-page .cap-rebuild-alert {
  padding: 13px 14px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, #ffffff 0%, #fffaf0 100%);
  border: 1px solid #f5deb3;
}

.cap-page .cap-rebuild-alert strong {
  display: block;
  margin-bottom: 6px;
  color: #111111;
  font-size: 13px;
  font-weight: 900;
}

.cap-page .cap-rebuild-alert p {
  margin: 0;
  color: #7a4f00;
  font-size: 13px;
  line-height: 1.45;
}

.cap-page .cap-rebuild-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.cap-page .cap-rebuild-grid > div {
  padding: 12px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #e1e8f0;
  box-shadow:
    0 5px 13px rgba(15,23,42,0.04),
    inset 0 1px 0 rgba(255,255,255,0.90);
}

.cap-page .cap-rebuild-grid strong {
  display: block;
  margin-bottom: 5px;
  color: #111111;
  font-size: 11.5px;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

.cap-page .cap-rebuild-grid span {
  color: #374151;
  font-size: 13px;
  line-height: 1.35;
}

.cap-page .cap-rebuild-check {
  margin-top: 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 13px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px dashed #cbd5e1;
  cursor: pointer;
}

.cap-page .cap-rebuild-check input {
  width: auto;
  margin-top: 2px;
  accent-color: var(--vmms-red);
}

.cap-page .cap-rebuild-check span {
  color: #374151;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 750;
}

.cap-page .cap-rebuild-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding: 16px 20px 20px;
  border-top: 1px solid rgba(226, 232, 240, 0.82);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.74) 0%, rgba(248,250,252,0.86) 100%);
}

.cap-page .cap-rebuild-actions .btn {
  width: auto !important;
  min-width: 150px;
  min-height: 38px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 850;
}

.cap-page .cap-rebuild-confirm:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

@media (max-width: 760px) {
  .cap-page .cap-rebuild-modal-header {
      flex-direction: column;
      align-items: flex-start;
      padding: 16px;
    }

  .cap-page .cap-warning-panel {
    flex-direction: column;
  }

  .cap-page .cap-rebuild-content {
    padding-left: 16px;
    padding-right: 16px;
  }

  .cap-page .cap-rebuild-grid {
    grid-template-columns: 1fr;
  }

  .cap-page .cap-rebuild-actions {
    flex-direction: column;
    padding-left: 16px;
    padding-right: 16px;
  }

  .cap-page .cap-rebuild-actions .btn,
  .cap-page .cap-rebuild-btn {
    width: 100% !important;
  }
}

/* =========================================================
   CONSULTA CAPACIDADES — BOTONES PREMIUM BUSCADOR
   Réplica visual de Clientes/Vehículos
========================================================= */

.cap-page .cap-actions-premium {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.cap-page .cap-actions-premium .btn,
.cap-page .cap-actions-premium button {
  width: auto !important;
  min-width: 132px !important;
  max-width: 150px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 13px !important;
  border-radius: 10px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-size: 12px !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  text-decoration: none !important;

  border: 1px solid transparent !important;
  cursor: pointer !important;

  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease !important;

  box-shadow:
    0 2px 7px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.62) !important;
}

/* Consultar — réplica de btn-nuevo */
.cap-page .cap-actions-premium .btn-primary,
.cap-page .cap-actions-premium button.btn-primary {
  background:
    linear-gradient(180deg, rgba(208, 2, 27, 0.92) 0%, rgba(176, 0, 23, 0.92) 100%) !important;
  color: #ffffff !important;
  border-color: rgba(145, 0, 20, 0.34) !important;
}

.cap-page .cap-actions-premium .btn-primary:hover,
.cap-page .cap-actions-premium button.btn-primary:hover {
  background:
    linear-gradient(180deg, rgba(220, 16, 42, 0.96) 0%, rgba(208, 2, 27, 0.96) 100%) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow:
    0 6px 14px rgba(208, 2, 27, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.20) !important;
}

/* Limpiar — réplica de btn-abrir */
.cap-page .cap-actions-premium .btn-soft,
.cap-page .cap-actions-premium button.btn-soft {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.72) 0%, rgba(226,232,240,0.62) 100%) !important;
  color: #1f2937 !important;
  border-color: rgba(100, 116, 139, 0.24) !important;
}

.cap-page .cap-actions-premium .btn-soft:hover,
.cap-page .cap-actions-premium button.btn-soft:hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.88) 0%, rgba(226,232,240,0.76) 100%) !important;
  color: #111827 !important;
  border-color: rgba(100, 116, 139, 0.36) !important;
  transform: translateY(-1px) !important;
  box-shadow:
    0 5px 12px rgba(15, 23, 42, 0.10),
    inset 0 1px 0 rgba(255,255,255,0.75) !important;
}

/* Click natural */
.cap-page .cap-actions-premium .btn:active,
.cap-page .cap-actions-premium button:active {
  transform: translateY(0) !important;
  box-shadow:
    0 2px 6px rgba(15, 23, 42, 0.08),
    inset 0 2px 4px rgba(15, 23, 42, 0.10) !important;
}

@media (max-width: 760px) {
  .cap-page .cap-actions-premium {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .cap-page .cap-actions-premium .btn,
  .cap-page .cap-actions-premium button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

/* =========================================================
   NUEVO SERVICIO — NS1.1 PREMIUM BASE
   Cards cristal / 3D + botoneras alineadas a VMMS
========================================================= */

.ns-page .page-topbar {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.12) 0%, transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
  border: 1px solid rgba(208, 2, 27, 0.08);
  box-shadow:
    0 14px 34px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.92);
}

.ns-page .page-topbar-icon {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 15px;
  background:
    linear-gradient(180deg, rgba(208,2,27,0.10) 0%, rgba(255,189,89,0.18) 100%);
  color: var(--vmms-red);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.82),
    0 5px 12px rgba(15,23,42,0.06);
}

/* Cards principales */
.ns-page .ns-card,
.ns-page .ns-form-card,
.ns-page .ns-items-card,
.ns-page .ns-history-card,
.ns-page .actions-card {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.12) 0%, transparent 30%),
    linear-gradient(145deg, #ffffff 0%, #f8fafc 58%, #eef2f6 100%);
  border: 1px solid rgba(226, 232, 240, 0.96);
  box-shadow:
    0 18px 34px rgba(15, 23, 42, 0.08),
    0 5px 12px rgba(15, 23, 42, 0.045),
    inset 0 1px 0 rgba(255,255,255,0.96),
    inset 0 -8px 16px rgba(15,23,42,0.025);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.ns-page .ns-card:hover,
.ns-page .ns-form-card:hover,
.ns-page .ns-items-card:hover,
.ns-page .ns-history-card:hover,
.ns-page .actions-card:hover {
  transform: translateY(-1px);
  border-color: rgba(208, 2, 27, 0.14);
  box-shadow:
    0 22px 42px rgba(15, 23, 42, 0.105),
    0 8px 16px rgba(15, 23, 42, 0.055),
    inset 0 1px 0 rgba(255,255,255,0.98),
    inset 0 -8px 16px rgba(15,23,42,0.03);
}

.ns-page .ns-card::before,
.ns-page .ns-form-card::before,
.ns-page .ns-items-card::before,
.ns-page .ns-history-card::before,
.ns-page .actions-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  right: 18px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--vmms-red) 0%, var(--vmms-yellow) 100%);
  opacity: 0.90;
}

/* Header interno de cards */
.ns-page .card h2.section-heading {
  position: relative;
  z-index: 1;
  margin: 0 0 13px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(203, 213, 225, 0.92);
  color: #111111;
  font-size: 15px;
  line-height: 1.15;
  font-weight: 750;
}

.ns-page .section-icon {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(208,2,27,0.10) 0%, rgba(255,189,89,0.18) 100%);
  color: var(--vmms-red);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.82),
    0 4px 10px rgba(15,23,42,0.05);
}

/* Inputs más premium */
.ns-page input,
.ns-page select,
.ns-page textarea {
  border-radius: 12px;
  border-color: #d7dce3;
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.90),
    0 2px 6px rgba(15,23,42,0.025);
}

.ns-page input:focus,
.ns-page select:focus,
.ns-page textarea:focus {
  border-color: rgba(208, 2, 27, 0.35);
  box-shadow:
    var(--vmms-focus-ring),
    inset 0 1px 0 rgba(255,255,255,0.90);
}

/* Toolbar búsqueda */
.ns-page .toolbar-grid-4 {
  position: relative;
  z-index: 1;
  gap: 10px;
}

/* Botones búsqueda — réplica Clientes/Vehículos */
.ns-page .toolbar-grid-4 button,
.ns-page .toolbar-grid-4 .btn {
  width: 100% !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 13px !important;
  border-radius: 10px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-size: 12px !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;

  border: 1px solid transparent !important;
  cursor: pointer !important;

  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease !important;

  box-shadow:
    0 2px 7px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.62) !important;
}

/* Buscar — rojo suave */
.ns-page #btnBuscar,
.ns-page .toolbar-grid-4 .btn-primary {
  background:
    linear-gradient(180deg, rgba(208, 2, 27, 0.92) 0%, rgba(176, 0, 23, 0.92) 100%) !important;
  color: #ffffff !important;
  border-color: rgba(145, 0, 20, 0.34) !important;
}

.ns-page #btnBuscar:hover,
.ns-page .toolbar-grid-4 .btn-primary:hover {
  background:
    linear-gradient(180deg, rgba(220, 16, 42, 0.96) 0%, rgba(208, 2, 27, 0.96) 100%) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow:
    0 6px 14px rgba(208, 2, 27, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.20) !important;
}

/* Nueva búsqueda — gris cristal */
.ns-page #btnResetBusqueda {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.72) 0%, rgba(226,232,240,0.62) 100%) !important;
  color: #1f2937 !important;
  border-color: rgba(100, 116, 139, 0.24) !important;
}

.ns-page #btnResetBusqueda:hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.88) 0%, rgba(226,232,240,0.76) 100%) !important;
  color: #111827 !important;
  border-color: rgba(100, 116, 139, 0.36) !important;
  transform: translateY(-1px) !important;
  box-shadow:
    0 5px 12px rgba(15, 23, 42, 0.10),
    inset 0 1px 0 rgba(255,255,255,0.75) !important;
}

/* Botonera Acciones */
.ns-page .actions-card .acciones-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 8px !important;
}

.ns-page .actions-card .acciones-grid .btn,
.ns-page .actions-card .acciones-grid button {
  width: auto !important;
  min-width: 132px !important;
  max-width: 230px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 13px !important;
  border-radius: 10px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-size: 12px !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;

  border: 1px solid transparent !important;
  cursor: pointer !important;

  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease !important;

  box-shadow:
    0 2px 7px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.62) !important;
}

/* =========================================================
   CORR-1.1 — NUEVO SERVICIO: RESPETAR BOTONES OCULTOS
   Evita que display:inline-flex!important muestre botones
   que JS/HTML necesitan mantener ocultos.
========================================================= */

.ns-page .actions-card .acciones-grid button[hidden],
.ns-page .actions-card .acciones-grid .btn[hidden],
.ns-page .actions-card .acciones-grid button.is-hidden,
.ns-page .actions-card .acciones-grid .btn.is-hidden {
  display: none !important;
}

/* Actualizar datos — gris cristal */
.ns-page #btnActualizarDatos {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.72) 0%, rgba(226,232,240,0.62) 100%) !important;
  color: #1f2937 !important;
  border-color: rgba(100, 116, 139, 0.24) !important;
}

/* Guardar / actualizar servicio — rojo premium */
.ns-page #btnGuardarServicio,
.ns-page #btnActualizarServicio {
  background:
    linear-gradient(180deg, rgba(208, 2, 27, 0.92) 0%, rgba(176, 0, 23, 0.92) 100%) !important;
  color: #ffffff !important;
  border-color: rgba(145, 0, 20, 0.34) !important;
}

/* Cancelar edición — oscuro suave */
.ns-page #btnCancelarEdicionServicio {
  background:
    linear-gradient(180deg, rgba(31,41,55,0.92) 0%, rgba(17,24,39,0.94) 100%) !important;
  color: #ffffff !important;
  border-color: rgba(17,24,39,0.42) !important;
}

.ns-page #btnActualizarDatos:hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.88) 0%, rgba(226,232,240,0.76) 100%) !important;
  color: #111827 !important;
  border-color: rgba(100, 116, 139, 0.36) !important;
  transform: translateY(-1px) !important;
  box-shadow:
    0 5px 12px rgba(15, 23, 42, 0.10),
    inset 0 1px 0 rgba(255,255,255,0.75) !important;
}

.ns-page #btnGuardarServicio:hover,
.ns-page #btnActualizarServicio:hover {
  background:
    linear-gradient(180deg, rgba(220, 16, 42, 0.96) 0%, rgba(208, 2, 27, 0.96) 100%) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow:
    0 6px 14px rgba(208, 2, 27, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.20) !important;
}

.ns-page #btnCancelarEdicionServicio:hover {
  background:
    linear-gradient(180deg, rgba(55,65,81,0.94) 0%, rgba(31,41,55,0.96) 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow:
    0 5px 12px rgba(15, 23, 42, 0.14),
    inset 0 1px 0 rgba(255,255,255,0.18) !important;
}

/* Servicio realizado: checks/cards internas más premium */
.ns-page .items-grid-3 .item-box {
  border-radius: 15px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #e1e8f0;
  box-shadow:
    0 5px 13px rgba(15,23,42,0.04),
    inset 0 1px 0 rgba(255,255,255,0.90);
}

.ns-page .items-grid-3 .item-box:hover {
  transform: translateY(-1px);
  border-color: rgba(208, 2, 27, 0.18);
  box-shadow:
    0 8px 18px rgba(15,23,42,0.06),
    inset 0 1px 0 rgba(255,255,255,0.92);
}

.ns-page .items-grid-3 .item-box.active {
  border-color: rgba(208, 2, 27, 0.24);
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.12) 0%, transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #fffaf0 100%);
}

/* Resultados de búsqueda */
.ns-page .resultado-item {
  border-radius: 16px;
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.10) 0%, transparent 34%),
    linear-gradient(145deg, #ffffff 0%, #f8fafc 58%, #eef2f6 100%);
  border: 1px solid #dfe7f0;
  box-shadow:
    0 8px 18px rgba(15,23,42,0.045),
    inset 0 1px 0 rgba(255,255,255,0.92);
}

.ns-page .resultado-item:hover {
  transform: translateY(-1px);
  border-color: rgba(208, 2, 27, 0.16);
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.14) 0%, transparent 34%),
    linear-gradient(145deg, #ffffff 0%, #f8fafc 58%, #eef2f6 100%);
}

/* Responsive */
@media (max-width: 768px) {
  .ns-page .actions-card .acciones-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .ns-page .actions-card .acciones-grid .btn,
  .ns-page .actions-card .acciones-grid button {
    width: 100% !important;
    max-width: none !important;
  }
}

/* =========================================================
   CLIENTES / VEHÍCULOS — CV-MODAL1.1 MODALES PREMIUM
   Editar cliente + Editar vehículo + Subir comprobante
========================================================= */

.cv-modal-overlay {
  background: rgba(17, 24, 39, 0.62) !important;
  z-index: var(--vmms-z-modal) !important;
  backdrop-filter: blur(7px);
}

.cv-modal-box {
  width: 100%;
  max-width: 660px;
  overflow: hidden;
  padding: 0 !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.12) 0%, transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%) !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  box-shadow:
    0 28px 70px rgba(0,0,0,0.30),
    inset 0 1px 0 rgba(255,255,255,0.94) !important;
}

.cv-modal-header {
  position: relative;
  padding: 18px 20px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.16) 0%, transparent 34%),
    linear-gradient(135deg, #08080a 0%, #151519 58%, #0b0b0d 100%);
  color: #ffffff;
  border-bottom: 4px solid var(--vmms-red);
}

.cv-modal-header::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 5px;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(180deg, var(--vmms-red) 0%, var(--vmms-yellow) 100%);
}

.cv-modal-title-wrap {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.cv-modal-icon {
  width: 46px;
  height: 46px;
  min-width: 46px;
  border-radius: 15px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.08) 100%);
  border: 1px solid rgba(255,255,255,0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    0 10px 18px rgba(0,0,0,0.12);
}

.cv-modal-kicker {
  display: inline-flex;
  margin-bottom: 5px;
  color: var(--vmms-yellow);
  font-size: 10.5px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cv-modal-header h3 {
  margin: 0 0 4px 0;
  color: #ffffff;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.cv-modal-header p {
  margin: 0;
  color: rgba(255,255,255,0.72);
  font-size: 12.5px;
  line-height: 1.35;
}

.cv-modal-close {
  position: relative;
  z-index: 1;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.10) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  font-size: 22px !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

.cv-modal-close:hover {
  background: rgba(255,255,255,0.18) !important;
  transform: translateY(-1px);
}

.cv-modal-content {
  padding: 16px 20px 0;
}

.cv-modal-context-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}

.cv-modal-context-card > div {
  min-width: 0;
  padding: 11px 12px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #e1e8f0;
  box-shadow:
    0 5px 13px rgba(15,23,42,0.04),
    inset 0 1px 0 rgba(255,255,255,0.90);
}

.cv-modal-context-card strong {
  display: block;
  margin-bottom: 5px;
  color: #111111;
  font-size: 11px;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

.cv-modal-context-card span {
  color: #374151;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.cv-modal-domain {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 9px;
  background:
    linear-gradient(180deg, #ffffff 0%, #eef2f7 100%);
  border: 1px solid rgba(203, 213, 225, 0.95);
  color: #111111 !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em;
}

.cv-modal-form-grid {
  gap: 14px !important;
}

.cv-modal-form-grid--vehicle {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cv-modal-form-grid label {
  margin-bottom: 6px;
  color: #111111;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

.cv-modal-form-grid input {
  min-height: 42px;
  border-radius: 13px;
  border: 1px solid #cbd5e1;
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.90),
    0 2px 6px rgba(15,23,42,0.025);
}

.cv-modal-form-grid input:focus {
  border-color: rgba(208, 2, 27, 0.35);
  box-shadow:
    var(--vmms-focus-ring),
    inset 0 1px 0 rgba(255,255,255,0.90);
}

.cv-modal-upload #uploadArchivoPdf {
  min-height: 42px;
  padding: 7px 10px;
}

.cv-modal-upload #uploadArchivoPdf::file-selector-button {
  min-height: 28px;
  margin-right: 10px;
  padding: 0 11px;
  border-radius: 9px;
  border: 1px solid rgba(100, 116, 139, 0.24);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.72) 0%, rgba(226,232,240,0.62) 100%);
  color: #1f2937;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.cv-upload-file-row {
  align-items: stretch;
}

.cv-modal-upload .upload-file-clear {
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  border-radius: 13px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.72) 0%, rgba(226,232,240,0.62) 100%) !important;
  color: #1f2937 !important;
  border-color: rgba(100, 116, 139, 0.24) !important;
  box-shadow:
    0 3px 8px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255,255,255,0.75) !important;
}

.cv-modal-upload .upload-file-clear:hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.88) 0%, rgba(226,232,240,0.76) 100%) !important;
  color: #111827 !important;
  transform: translateY(-1px);
}

.cv-modal-upload .upload-helper-text {
  margin-top: 7px;
  padding: 8px 10px;
  border-radius: 11px;
  background: rgba(255, 244, 214, 0.78);
  border: 1px solid #f5deb3;
  color: #7a4f00;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 700;
}

.cv-modal-overlay .mensaje-upload {
  margin-top: 14px;
  border-radius: 12px;
}

.cv-modal-actions {
  display: flex !important;
  justify-content: flex-end;
  gap: 10px !important;
  flex-wrap: wrap;
  margin-top: 16px;
  padding: 16px 20px 20px;
  border-top: 1px solid rgba(226, 232, 240, 0.82);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.74) 0%, rgba(248,250,252,0.86) 100%);
}

.cv-modal-actions .btn-doc {
  width: auto !important;
  min-width: 132px !important;
  max-width: 180px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 13px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease !important;
}

/* Acción principal — verde premium */
.cv-modal-actions .btn-doc-factura {
  background:
    linear-gradient(180deg, rgba(22, 163, 74, 0.16) 0%, rgba(134, 239, 172, 0.24) 100%) !important;
  color: #166534 !important;
  border: 1px solid rgba(22, 163, 74, 0.34) !important;
  box-shadow:
    0 5px 12px rgba(22, 163, 74, 0.10),
    inset 0 1px 0 rgba(255,255,255,0.88),
    inset 0 -1px 0 rgba(22,163,74,0.08) !important;
}

.cv-modal-actions .btn-doc-factura:hover {
  transform: translateY(-1px) !important;
  background:
    linear-gradient(180deg, rgba(22, 163, 74, 0.20) 0%, rgba(134, 239, 172, 0.30) 100%) !important;
}

/* Cancelar — gris cristal */
.cv-modal-actions .btn-doc-disabled {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.72) 0%, rgba(226,232,240,0.62) 100%) !important;
  color: #1f2937 !important;
  border: 1px solid rgba(100, 116, 139, 0.24) !important;
  cursor: pointer !important;
  box-shadow:
    0 4px 10px rgba(15, 23, 42, 0.07),
    inset 0 1px 0 rgba(255,255,255,0.75) !important;
}

.cv-modal-actions .btn-doc-disabled:hover {
  transform: translateY(-1px) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.88) 0%, rgba(226,232,240,0.76) 100%) !important;
}

@media (max-width: 760px) {
  .cv-modal-header {
    padding: 16px;
  }

  .cv-modal-title-wrap {
    align-items: flex-start;
  }

  .cv-modal-content {
    padding-left: 16px;
    padding-right: 16px;
  }

  .cv-modal-context-card,
  .cv-modal-form-grid--vehicle {
    grid-template-columns: 1fr;
  }

  .cv-upload-file-row {
    display: grid;
    grid-template-columns: 1fr 42px;
  }

  .cv-modal-actions {
    flex-direction: column;
    padding-left: 16px;
    padding-right: 16px;
  }

  .cv-modal-actions .btn-doc {
    width: 100% !important;
    max-width: none !important;
  }
}

/* =========================================================
   CLIENTES / VEHÍCULOS — CV-ACC1 MENÚ ACCIONES + SELECTOR
========================================================= */

.cliente-card {
  overflow: hidden !important;
}

.cliente-header {
  position: relative;
  z-index: 4;
}

.cliente-header-actions {
  position: relative;
  z-index: 20;
}

.cv-actions-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
  z-index: 30;
}

.cv-actions-trigger {
  width: auto !important;
  min-height: 23px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(209, 213, 219, 0.90) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(248,250,252,0.78) 100%) !important;
  color: #374151 !important;
  font-size: 10.8px !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  box-shadow:
    0 2px 6px rgba(15,23,42,0.045),
    inset 0 1px 0 rgba(255,255,255,0.92) !important;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease !important;
}

.cv-actions-trigger:hover,
.cv-actions-menu.is-open .cv-actions-trigger {
  background:
    linear-gradient(180deg, rgba(255,248,223,0.96) 0%, rgba(255,243,199,0.82) 100%) !important;
  color: #7a4f00 !important;
  border-color: rgba(238, 217, 167, 0.95) !important;
  transform: translateY(-1px) !important;
}

.cv-actions-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 190px;
  display: none;
  padding: 6px;
  border-radius: 14px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.12) 0%, transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  box-shadow:
    0 18px 42px rgba(15, 23, 42, 0.16),
    inset 0 1px 0 rgba(255,255,255,0.95);
  z-index: 999;
}

.cv-actions-menu.is-open .cv-actions-dropdown {
  display: grid;
  gap: 4px;
}

.cv-actions-item {
  width: 100% !important;
  min-height: 30px !important;
  padding: 0 8px !important;
  border-radius: 10px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: #111827 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 7px !important;
  font-size: 11.5px !important;
  font-weight: 750 !important;
  text-align: left !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

.cv-actions-item:hover {
  background: rgba(15, 23, 42, 0.045) !important;
  border-color: rgba(203, 213, 225, 0.70) !important;
  transform: none !important;
}

.cv-actions-item--warning:hover {
  background: rgba(255, 247, 214, 0.92) !important;
  border-color: #f5deb3 !important;
  color: #7a4f00 !important;
}

/* Selector premium de vehículos */

.cv-select-vehicle-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.cv-select-vehicle-option {
  width: 100% !important;
  min-height: 64px !important;
  padding: 10px 12px !important;
  border-radius: 16px !important;
  border: 1px solid #e1e8f0 !important;
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.10) 0%, transparent 32%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  color: #111111 !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  text-align: left !important;
  box-shadow:
    0 6px 16px rgba(15,23,42,0.055),
    inset 0 1px 0 rgba(255,255,255,0.90) !important;
  cursor: pointer !important;
}

.cv-select-vehicle-option:hover {
  border-color: rgba(208, 2, 27, 0.18) !important;
  transform: translateY(-1px) !important;
  box-shadow:
    0 10px 22px rgba(15,23,42,0.08),
    inset 0 1px 0 rgba(255,255,255,0.94) !important;
}

.cv-select-vehicle-domain {
  min-height: 30px;
  padding: 0 11px;
  border-radius: 10px;
  background:
    linear-gradient(180deg, #ffffff 0%, #eef2f7 100%);
  border: 1px solid rgba(203, 213, 225, 0.95);
  color: #111111;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 3px 8px rgba(15,23,42,0.045),
    inset 0 1px 0 rgba(255,255,255,0.92);
}

.cv-select-vehicle-info {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.cv-select-vehicle-info strong {
  display: block;
  color: #111111;
  font-size: 13px;
  line-height: 1.2;
}

.cv-select-vehicle-info small {
  display: block;
  color: #64748b;
  font-size: 12px;
  line-height: 1.25;
}

.cv-select-vehicle-action {
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(208, 2, 27, 0.08);
  color: var(--vmms-red);
  border: 1px solid rgba(208, 2, 27, 0.12);
  font-size: 11px;
  font-weight: 850;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cv-select-vehicle-empty {
  border: 1px dashed #cbd5e1;
  border-radius: 16px;
  padding: 18px;
  background: #ffffff;
  color: #64748b;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
}

@media (max-width: 760px) {
  .cliente-header-actions {
    width: 100%;
  }

  .cv-actions-menu {
      width: min(220px, 100%);
      margin-left: auto;
      margin-right: auto;
    }
    
    .cv-actions-trigger {
      width: 100% !important;
      min-height: 28px !important;
      padding: 0 12px !important;
      font-size: 10.8px !important;
    }

  .cv-actions-dropdown {
    left: 0;
    right: auto;
    width: 100%;
  }

  .cv-select-vehicle-option {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }

  .cv-select-vehicle-domain,
  .cv-select-vehicle-action {
    justify-self: start;
  }
}

/* =========================================================
   CLIENTES / VEHÍCULOS — CV-ACC2 TRANSFERIR VEHÍCULO
========================================================= */

.cv-transfer-box {
  max-width: 680px !important;
}

.cv-transfer-warning {
  display: grid;
  gap: 5px;
  padding: 12px 14px;
  margin-bottom: 12px;
  border-radius: 14px;
  background: rgba(255, 247, 214, 0.92);
  border: 1px solid #f5deb3;
  color: #7a4f00;
  box-shadow:
    0 4px 12px rgba(15,23,42,0.045),
    inset 0 1px 0 rgba(255,255,255,0.72);
}

.cv-transfer-warning strong {
  color: #7a4f00;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

.cv-transfer-warning span {
  font-size: 13px;
  line-height: 1.35;
}

.cv-transfer-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.cv-transfer-summary > div {
  padding: 12px 14px;
  border-radius: 15px;
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.10) 0%, transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #e1e8f0;
  box-shadow:
    0 5px 13px rgba(15,23,42,0.04),
    inset 0 1px 0 rgba(255,255,255,0.90);
}

.cv-transfer-summary strong {
  display: block;
  margin-bottom: 5px;
  color: #111111;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

.cv-transfer-summary span {
  display: block;
  color: #1f2937;
  font-size: 13px;
  line-height: 1.35;
}

.cv-transfer-search {
  margin-top: 12px;
}

.cv-transfer-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px;
  gap: 8px;
  align-items: stretch;
}

.cv-transfer-search-row input {
  min-height: 38px;
}

.cv-transfer-search-row .btn-doc {
  width: 100%;
  min-height: 38px;
}

.cv-transfer-results {
  display: grid;
  gap: 9px;
  margin-top: 12px;
  max-height: 280px;
  overflow-y: auto;
  padding-right: 4px;
}

.cv-transfer-result {
  width: 100% !important;
  min-height: 72px !important;
  padding: 10px 12px !important;
  border-radius: 16px !important;
  border: 1px solid #e1e8f0 !important;
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.09) 0%, transparent 32%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  color: #111111 !important;
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 11px !important;
  text-align: left !important;
  box-shadow:
    0 5px 14px rgba(15,23,42,0.05),
    inset 0 1px 0 rgba(255,255,255,0.90) !important;
  cursor: pointer !important;
}

.cv-transfer-result:hover:not(.is-disabled) {
  border-color: rgba(208, 2, 27, 0.18) !important;
  transform: translateY(-1px) !important;
  box-shadow:
    0 9px 20px rgba(15,23,42,0.08),
    inset 0 1px 0 rgba(255,255,255,0.94) !important;
}

.cv-transfer-result.is-disabled {
  opacity: 0.65;
  cursor: not-allowed !important;
}

.cv-transfer-client-icon {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(208,2,27,0.10) 0%, rgba(255,189,89,0.18) 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.82),
    0 5px 12px rgba(15,23,42,0.05);
}

.cv-transfer-client-info {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.cv-transfer-client-info strong {
  color: #111111;
  font-size: 13px;
  line-height: 1.2;
}

.cv-transfer-client-info small {
  color: #64748b;
  font-size: 12px;
  line-height: 1.25;
}

.cv-transfer-client-action {
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(208, 2, 27, 0.08);
  color: var(--vmms-red);
  border: 1px solid rgba(208, 2, 27, 0.12);
  font-size: 11px;
  font-weight: 850;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.cv-transfer-result.is-disabled .cv-transfer-client-action {
  background: #f3f4f6;
  color: #64748b;
  border-color: #d7dce3;
}

.cv-transfer-empty {
  border: 1px dashed #cbd5e1;
  border-radius: 16px;
  padding: 16px;
  background: #ffffff;
  color: #64748b;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
}

.cv-transfer-selected {
  margin-top: 12px;
}

.cv-transfer-selected-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  border-radius: 16px;
  background:
    radial-gradient(circle at top right, rgba(34,197,94,0.10) 0%, transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #f7fff9 100%);
  border: 1px solid #bbf7d0;
  box-shadow:
    0 6px 16px rgba(15,23,42,0.055),
    inset 0 1px 0 rgba(255,255,255,0.90);
}

.cv-transfer-selected-card strong {
  display: block;
  margin-bottom: 4px;
  color: #111111;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

.cv-transfer-selected-card span {
  display: block;
  color: #111111;
  font-size: 13px;
  font-weight: 800;
}

.cv-transfer-selected-card small {
  display: block;
  margin-top: 3px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.25;
}

.cv-transfer-selected-badge {
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: #dcfce7;
  color: #166534 !important;
  border: 1px solid #bbf7d0;
  font-size: 11px !important;
  font-weight: 900 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

#btnConfirmarTransferirVehiculo:disabled {
  opacity: 0.55;
  cursor: not-allowed !important;
  transform: none !important;
}

@media (max-width: 760px) {
  .cv-transfer-summary {
    grid-template-columns: 1fr;
  }

  .cv-transfer-search-row {
    grid-template-columns: 1fr;
  }

  .cv-transfer-result {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }

  .cv-transfer-client-action {
    justify-self: start;
  }

  .cv-transfer-selected-card {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* =========================================================
   CLIENTES / VEHÍCULOS — CV-PERF2 FILTROS + PAGINACIÓN
========================================================= */

.cv-advanced-toolbar-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(208, 2, 27, 0.08);
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.10) 0%, transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
  box-shadow:
    0 10px 26px rgba(15, 23, 42, 0.07),
    inset 0 1px 0 rgba(255,255,255,0.90);
}

.cv-toolbar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.88);
}

.cv-toolbar-head h2 {
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: none !important;
}

.cv-advanced-toolbar-grid {
  display: grid;
  grid-template-columns: 170px minmax(220px, 1fr) 155px 110px 105px 105px;
  gap: 10px;
  align-items: end;
}

.cv-advanced-toolbar-grid > div {
  min-width: 0;
}

.cv-advanced-toolbar-grid label {
  margin-bottom: 5px;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.035em;
  color: #111111;
}

.cv-advanced-toolbar-grid input,
.cv-advanced-toolbar-grid select {
  min-height: 38px;
  border-radius: 11px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #d7dce3;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.88);
}

.cv-filter-action-btn {
  width: 100% !important;
  min-height: 38px !important;
  border-radius: 11px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.cv-results-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px 0;
  padding: 10px 12px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #e1e8f0;
  box-shadow:
    0 5px 13px rgba(15, 23, 42, 0.04),
    inset 0 1px 0 rgba(255,255,255,0.90);
}

.cv-live-info {
  color: #475569;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.35;
  background: rgba(255, 244, 214, 0.78);
  border: 1px solid #f5deb3;
  border-radius: 13px;
  padding: 10px;
}

.cv-pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.cv-page-btn {
  width: auto !important;
  min-height: 30px !important;
  padding: 0 11px !important;
  border-radius: 999px !important;
  border: 1px solid #d7dce3 !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #eef2f6 100%) !important;
  color: #111827 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow:
    0 3px 8px rgba(15,23,42,0.04),
    inset 0 1px 0 rgba(255,255,255,0.90) !important;
}

.cv-page-btn:hover:not(:disabled) {
  transform: translateY(-1px) !important;
  border-color: rgba(208, 2, 27, 0.20) !important;
}

.cv-page-btn:disabled {
  opacity: 0.50;
  cursor: not-allowed !important;
  transform: none !important;
}

.cv-page-current {
  min-height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  background: rgba(208, 2, 27, 0.08);
  color: var(--vmms-red);
  border: 1px solid rgba(208, 2, 27, 0.12);
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cv-stats-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.cv-stats-bar span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.cv-stats-bar strong {
  color: #111111;
}

@media (max-width: 1220px) {
  .cv-advanced-toolbar-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .cv-advanced-toolbar-grid {
    grid-template-columns: 1fr;
  }

  .cv-results-panel {
    align-items: flex-start;
    flex-direction: column;
  }

  .cv-pager {
    width: 100%;
    justify-content: flex-start;
  }

  .cv-page-btn,
  .cv-page-current {
    flex: 1;
  }
}

/* =========================================================
   PRÓXIMOS SERVICIOS — PS-PERF2 CENTRO DE SEGUIMIENTO
========================================================= */

.ps-page .ps-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.ps-page .ps-summary-card {
  position: relative;
  overflow: hidden;
  min-height: 105px;
  padding: 14px;
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.12) 0%, transparent 32%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #e1e8f0;
  box-shadow:
    0 8px 20px rgba(15,23,42,0.06),
    inset 0 1px 0 rgba(255,255,255,0.92);
}

.ps-page .ps-summary-card::before {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 0;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--vmms-red) 0%, var(--vmms-yellow) 100%);
}

.ps-page .ps-summary-card span {
  display: block;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  margin-bottom: 8px;
}

.ps-page .ps-summary-card strong {
  display: block;
  color: #111111;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.04em;
}

.ps-page .ps-summary-card small {
  display: block;
  margin-top: 8px;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.ps-page .ps-summary-card--vencido::before {
  background: linear-gradient(90deg, #dc2626 0%, #f87171 100%);
}

.ps-page .ps-summary-card--proximo::before {
  background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%);
}

.ps-page .ps-summary-card--futuro::before {
  background: linear-gradient(90deg, #2563eb 0%, #60a5fa 100%);
}

.ps-page .ps-summary-card--pendiente::before {
  background: linear-gradient(90deg, #111827 0%, #64748b 100%);
}

.ps-page .ps-advanced-toolbar-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(208, 2, 27, 0.08);
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.10) 0%, transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
  box-shadow:
    0 10px 26px rgba(15, 23, 42, 0.07),
    inset 0 1px 0 rgba(255,255,255,0.90);
}

.ps-page .ps-advanced-toolbar-grid {
  display: grid;
  grid-template-columns: 155px minmax(220px, 1fr) 145px 145px 95px 100px 100px;
  gap: 10px;
  align-items: end;
}

.ps-page .ps-advanced-toolbar-grid > div {
  min-width: 0;
}

.ps-page .ps-advanced-toolbar-grid label {
  margin-bottom: 5px;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.035em;
  color: #111111;
}

.ps-page .ps-advanced-toolbar-grid input,
.ps-page .ps-advanced-toolbar-grid select {
  min-height: 38px;
  border-radius: 11px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #d7dce3;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.88);
}

.ps-page .ps-filter-action-btn {
  width: 100% !important;
  min-height: 38px !important;
  border-radius: 11px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.ps-page .ps-results-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px 0;
  padding: 10px 12px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #e1e8f0;
  box-shadow:
    0 5px 13px rgba(15, 23, 42, 0.04),
    inset 0 1px 0 rgba(255,255,255,0.90);
}

.ps-page .ps-live-info {
  color: #475569;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.35;
  background: rgba(255, 244, 214, 0.78);
  border: 1px solid #f5deb3;
  border-radius: 13px;
  padding: 10px;
}

.ps-page .ps-pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.ps-page .ps-page-btn {
  width: auto !important;
  min-height: 30px !important;
  padding: 0 11px !important;
  border-radius: 999px !important;
  border: 1px solid #d7dce3 !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #eef2f6 100%) !important;
  color: #111827 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow:
    0 3px 8px rgba(15,23,42,0.04),
    inset 0 1px 0 rgba(255,255,255,0.90) !important;
}

.ps-page .ps-page-btn:hover:not(:disabled) {
  transform: translateY(-1px) !important;
  border-color: rgba(208, 2, 27, 0.20) !important;
}

.ps-page .ps-page-btn:disabled {
  opacity: 0.50;
  cursor: not-allowed !important;
  transform: none !important;
}

.ps-page .ps-page-current {
  min-height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  background: rgba(208, 2, 27, 0.08);
  color: var(--vmms-red);
  border: 1px solid rgba(208, 2, 27, 0.12);
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ps-page .ps-card-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.ps-page .ps-contact-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

.ps-page .ps-contact-badge--ok {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #bbf7d0;
}

.ps-page .ps-contact-badge--pending {
  background: #f3f4f6;
  color: #475569;
  border: 1px solid #d7dce3;
}

.ps-page .ps-info-card--contact {
  grid-column: span 2;
}

.ps-page .ps-info-card--contact small {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.25;
}

.ps-page .ps-empty-state {
  margin-top: 10px;
}

@media (max-width: 1280px) {
  .ps-page .ps-advanced-toolbar-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ps-page .ps-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .ps-page .ps-advanced-toolbar-grid {
    grid-template-columns: 1fr;
  }

  .ps-page .ps-results-panel {
    align-items: flex-start;
    flex-direction: column;
  }

  .ps-page .ps-pager {
    width: 100%;
    justify-content: flex-start;
  }

  .ps-page .ps-page-btn,
  .ps-page .ps-page-current {
    flex: 1;
  }
}

@media (max-width: 620px) {
  .ps-page .ps-summary-grid {
    grid-template-columns: 1fr;
  }

  .ps-page .ps-card-status {
    align-items: flex-start;
  }

  .ps-page .ps-info-card--contact {
    grid-column: auto;
  }
}

/* =========================================================
   PRÓXIMOS SERVICIOS — PS-PERF3 MODAL CONTACTO
========================================================= */

.ps-page .ps-contact-modal-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(17, 24, 39, 0.58);
  z-index: var(--vmms-z-modal);
}

.ps-page .ps-contact-modal-box {
  width: 100%;
  max-width: 640px;
  overflow: hidden;
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.12) 0%, transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow:
    0 26px 70px rgba(0,0,0,0.26),
    inset 0 1px 0 rgba(255,255,255,0.94);
}

.ps-page .ps-contact-context {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.ps-page .ps-contact-context > div {
  min-width: 0;
  padding: 12px;
  border-radius: 15px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #e1e8f0;
  box-shadow:
    0 5px 13px rgba(15,23,42,0.04),
    inset 0 1px 0 rgba(255,255,255,0.90);
}

.ps-page .ps-contact-context strong {
  display: block;
  margin-bottom: 5px;
  color: #111111;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

.ps-page .ps-contact-context span {
  color: #334155;
  font-size: 13px;
  line-height: 1.3;
  word-break: break-word;
}

.ps-page .ps-action-btn--manage {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(248,250,252,0.82) 100%) !important;
  color: #111827 !important;
  border: 1px solid #d7dce3 !important;
}

.ps-page .ps-action-btn--manage:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(208, 2, 27, 0.20) !important;
}

@media (max-width: 760px) {
  .ps-page .ps-contact-modal-box {
    max-height: calc(100vh - 28px);
    overflow-y: auto;
  }

  .ps-page .ps-contact-context,
  .ps-page .ps-contact-form-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   PRÓXIMOS SERVICIOS — PS-CRM-FIX1A
========================================================= */

.ps-page .ps-contact-modal-box {
  max-width: 680px !important;
  padding: 0 !important;
}

.ps-page .ps-contact-context {
  margin-bottom: 14px;
}

.ps-page .ps-contact-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ps-page .ps-contact-field-full {
  grid-column: 1 / -1;
}

.ps-page .ps-contact-form-grid label {
  margin-bottom: 5px;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.035em;
  color: #111111;
}

.ps-page .ps-contact-form-grid select,
.ps-page .ps-contact-form-grid textarea {
  width: 100%;
  border-radius: 12px;
  border: 1px solid #d7dce3;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  color: #111111;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.88);
}

.ps-page .ps-contact-form-grid select {
  min-height: 40px;
}

.ps-page .ps-contact-form-grid textarea {
  min-height: 110px;
  resize: vertical;
}

.ps-page .ps-contact-badge--sent {
  background: #dbeafe;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

.ps-page .ps-contact-badge--success {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #bbf7d0;
}

.ps-page .ps-contact-badge--warning {
  background: #fff7d6;
  color: #92400e;
  border: 1px solid #f5deb3;
}

@media (max-width: 760px) {
  .ps-page .ps-contact-form-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   HISTORIAL CONTACTOS — HC-PERF2 CRM + FILTROS + PAGINADOR
========================================================= */

.hc-page .hc-summary-grid--crm {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.hc-page .hc-summary-grid--crm .hc-summary-card {
  position: relative;
  overflow: hidden;
  min-height: 105px;
  padding: 14px;
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.12) 0%, transparent 32%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #e1e8f0;
  box-shadow:
    0 8px 20px rgba(15,23,42,0.06),
    inset 0 1px 0 rgba(255,255,255,0.92);
}

.hc-page .hc-summary-grid--crm .hc-summary-card::before {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 0;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--vmms-red) 0%, var(--vmms-yellow) 100%);
}

.hc-page .hc-summary-grid--crm .hc-summary-card span {
  display: block;
  color: #475569;
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  margin-bottom: 8px;
}

.hc-page .hc-summary-grid--crm .hc-summary-card strong {
  display: block;
  color: #111111;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.04em;
}

.hc-page .hc-summary-grid--crm .hc-summary-card small {
  display: block;
  margin-top: 8px;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.hc-page .hc-summary-card--action::before {
  background: linear-gradient(90deg, #dc2626 0%, #f87171 100%);
}

.hc-page .hc-summary-card--turnos::before {
  background: linear-gradient(90deg, #16a34a 0%, #86efac 100%);
}

.hc-page .hc-summary-card--noresponde::before {
  background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%);
}

.hc-page .hc-summary-card--hoy::before {
  background: linear-gradient(90deg, #2563eb 0%, #60a5fa 100%);
}

.hc-page .hc-advanced-toolbar-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(208, 2, 27, 0.08);
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.10) 0%, transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
  box-shadow:
    0 10px 26px rgba(15, 23, 42, 0.07),
    inset 0 1px 0 rgba(255,255,255,0.90);
}

.hc-page .hc-advanced-toolbar-grid {
  display: grid;
  grid-template-columns: 145px minmax(220px, 1fr) 125px 155px 130px 130px 90px 95px 95px;
  gap: 10px;
  align-items: end;
}

.hc-page .hc-advanced-toolbar-grid > div {
  min-width: 0;
}

.hc-page .hc-advanced-toolbar-grid label {
  margin-bottom: 5px;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.035em;
  color: #111111;
}

.hc-page .hc-advanced-toolbar-grid input,
.hc-page .hc-advanced-toolbar-grid select {
  min-height: 38px;
  border-radius: 11px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #d7dce3;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.88);
}

.hc-page .hc-filter-action-btn {
  width: 100% !important;
  min-height: 38px !important;
  border-radius: 11px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.hc-page .hc-results-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 10px 0 0 0;
  padding: 10px 12px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #e1e8f0;
  box-shadow:
    0 5px 13px rgba(15, 23, 42, 0.04),
    inset 0 1px 0 rgba(255,255,255,0.90);
}

.hc-page .hc-live-info {
  color: #475569;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.35;
}

.hc-page .hc-pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.hc-page .hc-page-btn {
  width: auto !important;
  min-height: 30px !important;
  padding: 0 11px !important;
  border-radius: 999px !important;
  border: 1px solid #d7dce3 !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #eef2f6 100%) !important;
  color: #111827 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  box-shadow:
    0 3px 8px rgba(15,23,42,0.04),
    inset 0 1px 0 rgba(255,255,255,0.90) !important;
}

.hc-page .hc-page-btn:hover:not(:disabled) {
  transform: translateY(-1px) !important;
  border-color: rgba(208, 2, 27, 0.20) !important;
}

.hc-page .hc-page-btn:disabled {
  opacity: 0.50;
  cursor: not-allowed !important;
  transform: none !important;
}

.hc-page .hc-page-current {
  min-height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  background: rgba(208, 2, 27, 0.08);
  color: var(--vmms-red);
  border: 1px solid rgba(208, 2, 27, 0.12);
  font-size: 12px;
  font-weight: 850;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hc-page .hc-contact-status-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.hc-page .hc-contact-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
  border: 1px solid transparent;
}

.hc-page .hc-contact-status--ok {
  background: #dcfce7;
  color: #166534;
  border-color: #bbf7d0;
}

.hc-page .hc-contact-status--success {
  background: #dcfce7;
  color: #166534;
  border-color: #bbf7d0;
}

.hc-page .hc-contact-status--warning {
  background: #fff7d6;
  color: #92400e;
  border-color: #f5deb3;
}

.hc-page .hc-contact-status--pending {
  background: #f3f4f6;
  color: #475569;
  border-color: #d7dce3;
}

.hc-page .hc-contact-status--sent {
  background: #dbeafe;
  color: #1d4ed8;
  border-color: #bfdbfe;
}

.hc-page .hc-medium-badge--whatsapp {
  background: #dcfce7;
  color: #166534;
  border-color: #bbf7d0;
}

.hc-page .hc-medium-badge--phone {
  background: #eef2ff;
  color: #3730a3;
  border-color: #c7d2fe;
}

.hc-page .hc-medium-badge--presencial {
  background: #fff7d6;
  color: #92400e;
  border-color: #f5deb3;
}

.hc-page .hc-medium-badge--default {
  background: #f3f4f6;
  color: #475569;
  border-color: #d7dce3;
}

.hc-page .hc-info-card--timeline {
  border-color: rgba(37, 99, 235, 0.20);
  background:
    radial-gradient(circle at top right, rgba(96,165,250,0.12) 0%, transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.hc-page .hc-empty-state {
  margin-top: 10px;
}

@media (max-width: 1380px) {
  .hc-page .hc-advanced-toolbar-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .hc-page .hc-summary-grid--crm {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hc-page .hc-results-panel {
    align-items: flex-start;
    flex-direction: column;
  }

  .hc-page .hc-pager {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  .hc-page .hc-advanced-toolbar-grid,
  .hc-page .hc-summary-grid--crm {
    grid-template-columns: 1fr;
  }

  .hc-page .hc-page-btn,
  .hc-page .hc-page-current {
    flex: 1;
  }

  .hc-page .hc-contact-status-wrap {
    align-items: flex-start;
  }
}

/* =========================================================
   HISTORIAL CONTACTOS — HC-UI-FIX1 PREMIUM VISUAL + RESPONSIVE
   Ajuste visual sobre HC-PERF2 sin tocar lógica
========================================================= */

/* ================================
   1) RESUMEN SUPERIOR MÁS PREMIUM
================================ */

.hc-page .hc-summary-grid--crm {
  gap: 14px !important;
  margin-bottom: 14px !important;
}

.hc-page .hc-summary-grid--crm .hc-summary-card {
  min-height: 104px !important;
  padding: 15px 16px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.15) 0%, transparent 32%),
    linear-gradient(145deg, #ffffff 0%, #f8fafc 58%, #eef2f6 100%) !important;
  box-shadow:
    0 14px 30px rgba(15, 23, 42, 0.075),
    0 3px 8px rgba(15,23,42,0.04),
    inset 0 1px 0 rgba(255,255,255,0.94),
    inset 0 -6px 14px rgba(15,23,42,0.025) !important;
}

.hc-page .hc-summary-grid--crm .hc-summary-card::before {
  left: 14px !important;
  right: 14px !important;
  height: 4px !important;
  border-radius: 999px !important;
}

.hc-page .hc-summary-grid--crm .hc-summary-card span {
  color: #334155 !important;
  font-size: 11.5px !important;
  font-weight: 850 !important;
}

.hc-page .hc-summary-grid--crm .hc-summary-card strong {
  font-size: 27px !important;
  font-weight: 900 !important;
}

.hc-page .hc-summary-grid--crm .hc-summary-card small {
  color: #64748b !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
}


/* ================================
   2) FILTROS — DESKTOP EN 2 FILAS
   Orden actual:
   1 Buscar por
   2 Valor
   3 Medio
   4 Estado
   5 Desde
   6 Hasta
   7 Mostrar
   8 Buscar
   9 Limpiar
================================ */

.hc-page .hc-advanced-toolbar-card {
  padding: 15px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(208, 2, 27, 0.08) !important;
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.10) 0%, transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%) !important;
  box-shadow:
    0 12px 28px rgba(15, 23, 42, 0.065),
    inset 0 1px 0 rgba(255,255,255,0.92) !important;
}

.hc-page .hc-toolbar-head {
  margin-bottom: 13px !important;
  padding-bottom: 11px !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.92) !important;
}

.hc-page .hc-toolbar-kicker {
  display: inline-flex !important;
  margin-bottom: 5px !important;
  color: var(--vmms-red) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

.hc-page .hc-toolbar-head h2 {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  color: #111111 !important;
  font-size: 18px !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
}

.hc-page .hc-toolbar-head p {
  margin: 5px 0 0 0 !important;
  color: #64748b !important;
  font-size: 12.5px !important;
  line-height: 1.35 !important;
}

/* Layout desktop: 5 columnas, 2 filas */
.hc-page .hc-advanced-toolbar-grid {
  display: grid !important;
  grid-template-columns: 150px minmax(260px, 1fr) 132px 165px 105px !important;
  gap: 10px !important;
  align-items: end !important;
}

/* Fila 1 */
.hc-page .hc-advanced-toolbar-grid > div:nth-child(1) {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

.hc-page .hc-advanced-toolbar-grid > div:nth-child(2) {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

.hc-page .hc-advanced-toolbar-grid > div:nth-child(3) {
  grid-column: 3 !important;
  grid-row: 1 !important;
}

.hc-page .hc-advanced-toolbar-grid > div:nth-child(4) {
  grid-column: 4 !important;
  grid-row: 1 !important;
}

.hc-page .hc-advanced-toolbar-grid > div:nth-child(7) {
  grid-column: 5 !important;
  grid-row: 1 !important;
}

/* Fila 2 */
.hc-page .hc-advanced-toolbar-grid > div:nth-child(5) {
  grid-column: 1 !important;
  grid-row: 2 !important;
}

.hc-page .hc-advanced-toolbar-grid > div:nth-child(6) {
  grid-column: 2 !important;
  grid-row: 2 !important;
}

.hc-page .hc-advanced-toolbar-grid > div:nth-child(8) {
  grid-column: 4 !important;
  grid-row: 2 !important;
}

.hc-page .hc-advanced-toolbar-grid > div:nth-child(9) {
  grid-column: 5 !important;
  grid-row: 2 !important;
}

.hc-page .hc-advanced-toolbar-grid label {
  margin-bottom: 5px !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.045em !important;
  color: #111111 !important;
}

.hc-page .hc-advanced-toolbar-grid input,
.hc-page .hc-advanced-toolbar-grid select {
  min-height: 37px !important;
  padding: 7px 10px !important;
  border-radius: 11px !important;
  border: 1px solid #d7dce3 !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  color: #111111 !important;
  font-size: 12.5px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.90),
    0 2px 6px rgba(15,23,42,0.025) !important;
}

/* Botones filtros más delicados */
.hc-page .hc-filter-action-btn {
  width: 100% !important;
  min-height: 37px !important;
  height: 37px !important;
  padding: 0 12px !important;
  border-radius: 11px !important;
  font-size: 12px !important;
  font-weight: 780 !important;
  box-shadow:
    0 4px 10px rgba(15,23,42,0.055),
    inset 0 1px 0 rgba(255,255,255,0.22) !important;
}

.hc-page #hcBtnBuscar {
  background:
    linear-gradient(180deg, rgba(208, 2, 27, 0.92) 0%, rgba(176, 0, 23, 0.94) 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(145, 0, 20, 0.34) !important;
}

.hc-page #hcBtnBuscar:hover {
  transform: translateY(-1px) !important;
  box-shadow:
    0 7px 16px rgba(208, 2, 27, 0.16),
    inset 0 1px 0 rgba(255,255,255,0.22) !important;
}

.hc-page #hcBtnLimpiar {
  background:
    linear-gradient(180deg, #ffffff 0%, #eef2f6 100%) !important;
  color: #111827 !important;
  border: 1px solid #d5dce5 !important;
}

.hc-page #hcBtnLimpiar:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(100, 116, 139, 0.34) !important;
}


/* ================================
   3) PANEL RESULTADOS / PAGINADOR
================================ */

.hc-page .hc-results-panel {
  padding: 10px 12px;
  background: rgba(255, 244, 214, 0.78);
  border: 1px solid #f5deb3;
  border-radius: 13px;
  box-shadow:
    0 6px 15px rgba(15, 23, 42, 0.04),
    inset 0 1px 0 rgba(255,255,255,0.92);
}

.hc-page .hc-live-info {
  font-size: 12.5px !important;
  font-weight: 720 !important;
  color: #475569 !important;
}

.hc-page .hc-page-btn,
.hc-page .hc-page-current {
  min-height: 30px !important;
  padding: 0 11px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 780 !important;
}


/* ================================
   4) CARDS DE CONTACTO MÁS COHERENTES
================================ */

.hc-page .hc-results-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

.hc-page .hc-contact-card {
  position: relative !important;
  overflow: hidden !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  border-radius: 22px !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.14) 0%, transparent 30%),
    linear-gradient(145deg, #ffffff 0%, #f8fafc 58%, #eef2f6 100%) !important;
  box-shadow:
    0 16px 34px rgba(15, 23, 42, 0.085),
    0 4px 10px rgba(15,23,42,0.04),
    inset 0 1px 0 rgba(255,255,255,0.96),
    inset 0 -8px 16px rgba(15,23,42,0.025) !important;
}

.hc-page .hc-contact-card::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 16px !important;
  bottom: 16px !important;
  width: 5px !important;
  border-radius: 0 999px 999px 0 !important;
  background: linear-gradient(180deg, var(--vmms-red) 0%, var(--vmms-yellow) 100%) !important;
}

.hc-page .hc-contact-head {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 15px 17px 14px 20px !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.92) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.90) 0%, rgba(248,250,252,0.80) 100%) !important;
}

.hc-page .hc-contact-main {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 13px !important;
}

.hc-page .hc-contact-avatar {
  width: 50px !important;
  height: 50px !important;
  min-width: 50px !important;
  border-radius: 16px !important;
  background:
    linear-gradient(145deg, rgba(208,2,27,0.96) 0%, rgba(157,1,21,0.96) 100%) !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
  box-shadow:
    0 10px 20px rgba(208, 2, 27, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.24) !important;
}

.hc-page .hc-contact-title-wrap {
  min-width: 0 !important;
}

.hc-page .hc-contact-title-row {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 5px !important;
}

.hc-page .hc-contact-title-row h3 {
  margin: 0 !important;
  color: #111111 !important;
  font-size: 16px !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
}

.hc-page .hc-contact-title-wrap p {
  margin: 0 !important;
  color: #475569 !important;
  font-size: 12.5px !important;
  line-height: 1.32 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.035em !important;
  font-weight: 650 !important;
}

.hc-page .hc-domain-chip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 27px !important;
  padding: 0 10px !important;
  border-radius: 10px !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #eef2f7 100%) !important;
  border: 1px solid rgba(203, 213, 225, 0.95) !important;
  color: #111111 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  box-shadow:
    0 3px 8px rgba(15,23,42,0.045),
    inset 0 1px 0 rgba(255,255,255,0.92) !important;
}

.hc-page .hc-contact-body {
  position: relative !important;
  z-index: 1 !important;
  padding: 14px 17px 17px 20px !important;
}

.hc-page .hc-contact-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.hc-page .hc-info-card {
  min-width: 0 !important;
  min-height: 82px !important;
  padding: 11px 12px !important;
  border-radius: 15px !important;
  border: 1px solid #e1e8f0 !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  box-shadow:
    0 5px 13px rgba(15, 23, 42, 0.04),
    inset 0 1px 0 rgba(255,255,255,0.90),
    inset 0 -1px 0 rgba(15,23,42,0.03) !important;
}

.hc-page .hc-info-card strong {
  display: block !important;
  margin-bottom: 5px !important;
  color: #111111 !important;
  font-size: 11px !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.045em !important;
}

.hc-page .hc-info-card span {
  display: block !important;
  color: #1f2937 !important;
  font-size: 12.5px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  word-break: break-word !important;
}

.hc-page .hc-info-card small {
  display: block !important;
  margin-top: 4px !important;
  color: #64748b !important;
  font-size: 11.5px !important;
  line-height: 1.25 !important;
}


/* ================================
   5) NOTA INTERNA Y BOTÓN
================================ */

.hc-page .hc-note-panel {
  margin-top: 11px !important;
  padding: 13px 14px !important;
  border-radius: 16px !important;
  border: 1px solid #e1e8f0 !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  box-shadow:
    0 5px 13px rgba(15, 23, 42, 0.04),
    inset 0 1px 0 rgba(255,255,255,0.90) !important;
}

.hc-page .hc-note-panel-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-bottom: 8px !important;
}

.hc-page .hc-note-panel-head strong {
  color: #111111 !important;
  font-size: 11.5px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.045em !important;
}

.hc-page .hc-note-panel p {
  margin: 0 !important;
  color: #374151 !important;
  font-size: 12.8px !important;
  line-height: 1.45 !important;
}

.hc-page .hc-note-action {
  width: auto !important;
  min-height: 30px !important;
  padding: 0 11px !important;
  border-radius: 999px !important;
  border: 1px solid #d7dce3 !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #eef2f6 100%) !important;
  color: #111827 !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  box-shadow:
    0 3px 8px rgba(15,23,42,0.04),
    inset 0 1px 0 rgba(255,255,255,0.90) !important;
}

.hc-page .hc-note-action:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(208, 2, 27, 0.20) !important;
}


/* ================================
   6) RESPONSIVE PROGRESIVO
================================ */

/* Pantallas medianas: filtros en 3 columnas, crea más filas automáticamente */
@media (max-width: 1320px) {
  .hc-page .hc-advanced-toolbar-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .hc-page .hc-advanced-toolbar-grid > div {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .hc-page .hc-contact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .hc-page .hc-summary-grid--crm {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Tablet / mobile: una columna limpia */
@media (max-width: 760px) {
  .hc-page .hc-advanced-toolbar-grid {
    grid-template-columns: 1fr !important;
  }

  .hc-page .hc-summary-grid--crm {
    grid-template-columns: 1fr !important;
  }

  .hc-page .hc-results-panel {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .hc-page .hc-pager {
    width: 100% !important;
    justify-content: flex-start !important;
  }

  .hc-page .hc-page-btn,
  .hc-page .hc-page-current {
    flex: 1 !important;
  }

  .hc-page .hc-contact-head {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .hc-page .hc-contact-status-wrap {
    width: 100% !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
  }

  .hc-page .hc-contact-grid {
    grid-template-columns: 1fr !important;
  }

  .hc-page .hc-note-panel-head {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .hc-page .hc-note-action {
    width: 100% !important;
  }
}

/* =========================================================
   HISTORIAL CONTACTOS — FIX MOBILE FILTROS NO SE PISAN
========================================================= */

@media (max-width: 760px) {
  .hc-page .hc-advanced-toolbar-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .hc-page .hc-advanced-toolbar-grid > div {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .hc-page .hc-advanced-toolbar-grid input,
  .hc-page .hc-advanced-toolbar-grid select,
  .hc-page .hc-advanced-toolbar-grid button,
  .hc-page .hc-filter-action-btn {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .hc-page .hc-advanced-toolbar-grid label {
    width: 100% !important;
  }

  .hc-page .hc-toolbar-card,
  .hc-page .hc-advanced-toolbar-card {
    overflow: visible !important;
  }
}

/* =========================================================
   HISTORIAL CONTACTOS — MOBILE MINI CARDS 2+2 + FULL WIDTH
========================================================= */

@media (max-width: 760px) {
  .hc-page .hc-contact-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  /* 
    Orden esperado:
    1 Última gestión
    2 Servicio relacionado
    3 Próximo cambio
    4 Contacto
    5 Historial del servicio — ancho completo
  */
  .hc-page .hc-info-card--timeline {
    grid-column: 1 / -1 !important;
    min-height: 76px !important;
  }

  .hc-page .hc-note-panel {
    width: 100% !important;
    grid-column: 1 / -1 !important;
    margin-top: 10px !important;
  }
}

/* Celulares muy angostos: todo vuelve a 1 columna */
@media (max-width: 390px) {
  .hc-page .hc-contact-grid {
    grid-template-columns: 1fr !important;
  }

  .hc-page .hc-info-card--timeline {
    grid-column: auto !important;
  }
}

/* =========================================================
   HISTORIAL CONTACTOS — HC-PERF3 TIMELINE DESPLEGABLE
========================================================= */

.hc-page .hc-timeline-action {
  width: 100% !important;
  min-height: 30px !important;
  margin-top: 8px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(37, 99, 235, 0.22) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(239,246,255,0.92) 100%) !important;
  color: #1d4ed8 !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  box-shadow:
    0 3px 8px rgba(15,23,42,0.035),
    inset 0 1px 0 rgba(255,255,255,0.90) !important;
}

.hc-page .hc-timeline-action:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(37, 99, 235, 0.36) !important;
}

.hc-page .hc-timeline-action.is-active {
  background:
    linear-gradient(180deg, rgba(37,99,235,0.92) 0%, rgba(29,78,216,0.96) 100%) !important;
  color: #ffffff !important;
  border-color: rgba(29,78,216,0.42) !important;
}

.hc-page .hc-timeline-panel {
  margin-top: 11px;
  padding: 14px;
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(96,165,250,0.12) 0%, transparent 32%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border: 1px solid rgba(37, 99, 235, 0.18);
  box-shadow:
    0 8px 18px rgba(15,23,42,0.045),
    inset 0 1px 0 rgba(255,255,255,0.92);
}

.hc-page .hc-timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(191, 219, 254, 0.90);
}

.hc-page .hc-timeline-kicker {
  display: inline-flex;
  margin-bottom: 4px;
  color: #1d4ed8;
  font-size: 10.5px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.hc-page .hc-timeline-header h4 {
  margin: 0;
  color: #111111;
  font-size: 15px;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.hc-page .hc-timeline-count {
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: #dbeafe;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 850;
  white-space: nowrap;
}

.hc-page .hc-timeline-list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hc-page .hc-timeline-list::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg, #2563eb 0%, #bfdbfe 100%);
}

.hc-page .hc-timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
}

.hc-page .hc-timeline-marker {
  position: relative;
  z-index: 1;
  width: 18px;
  height: 18px;
  margin-top: 5px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, #2563eb 0%, #60a5fa 100%);
  border: 3px solid #ffffff;
  box-shadow:
    0 0 0 1px #bfdbfe,
    0 4px 8px rgba(37,99,235,0.12);
}

.hc-page .hc-timeline-content {
  padding: 11px 12px;
  border-radius: 15px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #e1e8f0;
  box-shadow:
    0 5px 13px rgba(15,23,42,0.04),
    inset 0 1px 0 rgba(255,255,255,0.90);
}

.hc-page .hc-timeline-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
}

.hc-page .hc-timeline-top strong {
  color: #111111;
  font-size: 12.5px;
  line-height: 1.2;
}

.hc-page .hc-timeline-content p {
  margin: 0;
  color: #374151;
  font-size: 12.5px;
  line-height: 1.45;
}

.hc-page .hc-timeline-loading,
.hc-page .hc-timeline-empty,
.hc-page .hc-timeline-error {
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 12.5px;
  font-weight: 750;
}

.hc-page .hc-timeline-loading,
.hc-page .hc-timeline-empty {
  background: #ffffff;
  color: #64748b;
  border: 1px dashed #cbd5e1;
}

.hc-page .hc-timeline-error {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid rgba(185, 28, 28, 0.12);
}

@media (max-width: 760px) {
  .hc-page .hc-timeline-panel {
    padding: 12px;
  }

  .hc-page .hc-timeline-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .hc-page .hc-timeline-top {
    align-items: flex-start;
    flex-direction: column;
  }
}


/* =========================================================
   CORR-2 DEFINITIVO — DOCUMENTOS: MODAL + ACCIÓN + MENÚ FLOTANTE GLOBAL
   Mantener solo este bloque de los CORR-2 agregados al final del CSS.
========================================================= */

/* Columna Acción */
.cc-page .tabla-documentos th:nth-child(6),
.cc-page .tabla-documentos td:nth-child(6) {
  width: 280px;
  min-width: 280px;
}

.cc-page .tabla-documentos td:nth-child(6) {
  vertical-align: middle;
}

/* Acción principal + botón [...] */
.cc-page .cc-doc-actions-wrap {
  display: grid !important;
  grid-template-columns: minmax(170px, 1fr) 36px !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 260px !important;
}

.cc-page .cc-doc-actions-wrap .doc-accion-link,
.cc-page .cc-doc-actions-wrap .doc-accion-disabled {
  width: 100% !important;
  min-width: 0 !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  text-align: center !important;
}

/* Botón [...] */
.cc-page .cc-doc-more-btn {
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  border-radius: 11px !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #eef2f6 100%) !important;
  color: #111827 !important;
  border: 1px solid #d5dce5 !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 1px !important;
  justify-self: end !important;
  box-shadow:
    0 4px 10px rgba(15,23,42,0.05),
    inset 0 1px 0 rgba(255,255,255,0.92) !important;
}

.cc-page .cc-doc-more-btn:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(208, 2, 27, 0.22) !important;
}

/* Menú flotante global */
.cc-page .cc-doc-floating-menu {
  position: fixed !important;
  z-index: 10100 !important;
  min-width: 220px !important;
  padding: 8px !important;
  border-radius: 14px !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  border: 1px solid #dfe7f0 !important;
  box-shadow:
    0 18px 38px rgba(15,23,42,0.18),
    inset 0 1px 0 rgba(255,255,255,0.92) !important;
}

.cc-page .cc-doc-floating-menu[hidden] {
  display: none !important;
}

.cc-page .cc-doc-floating-menu::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 14px;
  width: 12px;
  height: 12px;
  background: #ffffff;
  border-left: 1px solid #dfe7f0;
  border-top: 1px solid #dfe7f0;
  transform: rotate(45deg);
}

.cc-page .cc-doc-floating-menu.cc-doc-floating-menu--above::before {
  top: auto;
  bottom: -6px;
  border-left: none;
  border-top: none;
  border-right: 1px solid #dfe7f0;
  border-bottom: 1px solid #dfe7f0;
}

.cc-page .cc-doc-floating-item {
  width: 100% !important;
  min-height: 36px !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: #111827 !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

.cc-page .cc-doc-floating-item:hover {
  background: rgba(208, 2, 27, 0.08) !important;
  color: var(--vmms-red) !important;
}

/* Modal de gestión documental */
.cc-page .cc-doc-manage-modal {
  max-width: 640px;
}

.cc-page .cc-doc-current-file {
  padding: 13px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #dfe7f0;
}

.cc-page .cc-doc-current-file strong {
  display: block;
  margin-bottom: 8px;
  color: #111111;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

.cc-page .cc-doc-current-file a {
  width: fit-content;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(180deg, rgba(22, 163, 74, 0.16) 0%, rgba(134, 239, 172, 0.24) 100%);
  color: #166534;
  border: 1px solid rgba(22, 163, 74, 0.34);
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
}

.cc-page .cc-doc-current-file span {
  display: block;
  color: #64748b;
  font-size: 13px;
}

@media (max-width: 760px) {
  .cc-page .tabla-documentos th:nth-child(6),
  .cc-page .tabla-documentos td:nth-child(6) {
    width: 260px;
    min-width: 260px;
  }

  .cc-page .cc-doc-actions-wrap {
    max-width: 240px !important;
    grid-template-columns: minmax(150px, 1fr) 36px !important;
    gap: 10px !important;
  }
}

/* =========================================================
   CORR-4.2 — CLIENTES/VEHÍCULOS: ELIMINAR SERVICIO HISTORIAL
========================================================= */

.cv-btn-delete-service {
  background:
    linear-gradient(180deg, rgba(185, 28, 28, 0.10) 0%, rgba(254, 226, 226, 0.80) 100%) !important;
  color: #991b1b !important;
  border: 1px solid rgba(185, 28, 28, 0.28) !important;
  cursor: pointer !important;
}

.cv-btn-delete-service:hover {
  background:
    linear-gradient(180deg, rgba(185, 28, 28, 0.16) 0%, rgba(254, 202, 202, 0.90) 100%) !important;
  color: #7f1d1d !important;
  transform: translateY(-1px) !important;
}

.cv-modal-danger .cv-modal-icon {
  background:
    linear-gradient(180deg, rgba(185, 28, 28, 0.12) 0%, rgba(254, 226, 226, 0.88) 100%) !important;
  color: #991b1b !important;
}

.cv-modal-danger-card {
  border-color: rgba(185, 28, 28, 0.18) !important;
  background:
    radial-gradient(circle at top right, rgba(185, 28, 28, 0.08) 0%, transparent 32%),
    linear-gradient(180deg, #ffffff 0%, #fff7f7 100%) !important;
}

.cv-delete-warning-box {
  margin-top: 12px;
  padding: 13px 14px;
  border-radius: 14px;
  background: #fff7d6;
  border: 1px solid #f5deb3;
  color: #7a4f00;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}

.cv-btn-danger-final {
  background:
    linear-gradient(180deg, rgba(185, 28, 28, 0.96) 0%, rgba(127, 29, 29, 0.98) 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(127, 29, 29, 0.45) !important;
  cursor: pointer !important;
}

.cv-btn-danger-final:hover {
  filter: brightness(1.03);
  transform: translateY(-1px) !important;
}

@media (max-width: 900px) {
  .historial-servicio-acciones {
    grid-template-columns: 1fr !important;
  }
}


/* =========================================================
   CORR-4.3 — CLIENTES/VEHÍCULOS: ELIMINAR VEHÍCULO
========================================================= */

.cv-btn-delete-vehicle {
  background:
    linear-gradient(180deg, rgba(185, 28, 28, 0.10) 0%, rgba(254, 226, 226, 0.80) 100%) !important;
  color: #991b1b !important;
  border: 1px solid rgba(185, 28, 28, 0.28) !important;
  cursor: pointer !important;
}

.cv-btn-delete-vehicle:hover {
  background:
    linear-gradient(180deg, rgba(185, 28, 28, 0.16) 0%, rgba(254, 202, 202, 0.90) 100%) !important;
  color: #7f1d1d !important;
  transform: translateY(-1px) !important;
}

/* =========================================================
   MOD-NS3 — NUEVO SERVICIO: MODAL CONFIRMAR GUARDADO PREMIUM
========================================================= */

.ns-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--vmms-z-modal);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background:
    radial-gradient(circle at top, rgba(255, 189, 89, 0.12) 0%, transparent 34%),
    rgba(15, 23, 42, 0.68);
  backdrop-filter: blur(8px);
}

.ns-confirm-box {
  width: 100%;
  max-width: 500px;
  overflow: hidden;
  border-radius: 22px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid rgba(226, 232, 240, 0.92);
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  animation: nsConfirmIn 0.18s ease-out;
}

.ns-confirm-header {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 20px 20px 18px;
  background:
    radial-gradient(circle at top right, rgba(208, 2, 27, 0.28) 0%, transparent 35%),
    linear-gradient(135deg, #020617 0%, #111827 55%, #1f2937 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ns-confirm-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(180deg, rgba(255, 189, 89, 0.20) 0%, rgba(255, 189, 89, 0.10) 100%);
  color: #ffbd59;
  border: 1px solid rgba(255, 189, 89, 0.32);
  font-size: 21px;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.ns-confirm-kicker {
  display: inline-flex;
  margin-bottom: 6px;
  color: #ffbd59;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.075em;
}

.ns-confirm-header h3 {
  margin: 0 0 6px 0;
  color: #ffffff;
  font-size: 20px;
  font-weight: 850;
  line-height: 1.12;
}

.ns-confirm-header p {
  margin: 0;
  color: rgba(255, 255, 255, 0.74);
  font-size: 13px;
  line-height: 1.42;
}

.ns-confirm-body {
  margin: 18px 20px 0;
  padding: 14px 15px;
  border-radius: 16px;
  background:
    radial-gradient(circle at top right, rgba(255, 189, 89, 0.18) 0%, transparent 34%),
    linear-gradient(180deg, #fffaf0 0%, #fff7d6 100%);
  border: 1px solid rgba(245, 222, 179, 0.95);
  color: #7a4f00;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.45;
}

.ns-confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
  padding: 18px 20px 20px;
}

.ns-confirm-actions .btn-success,
.ns-confirm-actions .btn-soft {
  min-height: 38px !important;
  border-radius: 13px !important;
  font-size: 12.5px !important;
  font-weight: 750 !important;
}

@keyframes nsConfirmIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 520px) {
  .ns-confirm-box {
    max-width: 100%;
  }

  .ns-confirm-header {
    padding: 18px;
  }

  .ns-confirm-body {
    margin: 16px 18px 0;
  }

  .ns-confirm-actions {
    grid-template-columns: 1fr;
    padding: 16px 18px 18px;
  }
}

/* =========================================================
   SEG-6 — Avisos de privacidad Panel Cliente
   ========================================================= */

.cliente-privacy-notice {
  margin-top: 16px;
  padding: 14px 14px;
  border: 1px solid rgba(208, 2, 27, 0.16);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
  color: #000000;
}

.cliente-privacy-notice strong {
  display: block;
  margin-bottom: 6px;
  font-size: 0.9rem;
  font-weight: 800;
}

.cliente-privacy-notice p {
  margin: 0 0 8px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(0, 0, 0, 0.72);
}

.cliente-privacy-notice a {
  display: inline-flex;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 800;
  color: #D0021B;
  text-decoration: none;
}

.cliente-privacy-notice a:hover {
  text-decoration: underline;
}

/* =========================================================
   SEG-6.5 — Aviso sutil de privacidad Panel Cliente
   ========================================================= */

.cp-privacy-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: -2px 0 16px;
  padding: 10px 14px;
  border: 1px solid rgba(208, 2, 27, 0.10);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.48);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.045);
  backdrop-filter: blur(8px);
  opacity: 0.86;
}

.cp-privacy-strip-content {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.cp-privacy-strip-icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: rgba(208, 2, 27, 0.08);
  font-size: 0.9rem;
}

.cp-privacy-strip p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.35;
  color: rgba(0, 0, 0, 0.58);
}

.cp-privacy-strip a {
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-weight: 800;
  color: #D0021B;
  text-decoration: none;
  white-space: nowrap;
}

.cp-privacy-strip a:hover {
  text-decoration: underline;
}

@media (max-width: 640px) {
  .cp-privacy-strip {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    opacity: 0.92;
  }

  .cp-privacy-strip a {
    padding-left: 40px;
  }
}

/* =========================================================
   OBS-LIST — Observaciones en formato lista
   ========================================================= */

.vmms-observaciones-box {
  margin-top: 12px;
}

.vmms-observaciones-box strong {
  display: block;
  margin-bottom: 8px;
  color: #000000;
}

.vmms-observaciones-lista {
  margin: 0;
  padding: 12px 14px 12px 34px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.035);
  border: 1px solid rgba(0, 0, 0, 0.07);
}

.vmms-observaciones-lista li {
  margin-bottom: 6px;
  line-height: 1.45;
  color: rgba(0, 0, 0, 0.74);
}

.vmms-observaciones-lista li:last-child {
  margin-bottom: 0;
}

/* =========================================================
   FUNC-FILTROS-1 — Datos internos de filtros
   ========================================================= */

.filtro-interno-box {
  margin: 10px 0 2px 28px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(208, 2, 27, 0.045);
  border: 1px solid rgba(208, 2, 27, 0.12);
}

.filtro-interno-title {
  margin-bottom: 10px;
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.62);
}

.filtro-interno-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.filtro-interno-grid label {
  display: block;
  margin-bottom: 5px;
  font-size: 0.78rem;
  font-weight: 800;
  color: rgba(0, 0, 0, 0.72);
}

.filtro-interno-input {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  font-size: 0.86rem;
  background: #ffffff;
}

.filtro-interno-historial {
  margin-top: 7px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255, 189, 89, 0.13);
  border: 1px solid rgba(255, 189, 89, 0.25);
  font-size: 0.82rem;
  color: rgba(0, 0, 0, 0.72);
}


@media (max-width: 640px) {
  .filtro-interno-grid {
    grid-template-columns: 1fr;
  }

  .filtro-interno-box {
    margin-left: 0;
  }

  .filtro-interno-historial span {
    display: block;
    margin-right: 0;
    margin-bottom: 4px;
  }
}


/* =========================================================
   FUNC-FILTROS-1B — Ajuste fino UI filtros internos
   ========================================================= */

.filtro-interno-box {
  margin: 6px 0 0 24px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(208, 2, 27, 0.032);
  border: 1px solid rgba(208, 2, 27, 0.09);
}

.filtro-interno-title {
  margin-bottom: 6px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.52);
}

.filtro-interno-grid {
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.filtro-interno-grid label {
  margin-bottom: 3px;
  font-size: 0.7rem;
  font-weight: 750;
  color: rgba(0, 0, 0, 0.62);
}

.filtro-interno-input {
  min-height: 31px;
  padding: 5px 8px;
  border-radius: 9px;
  font-size: 0.76rem;
}

/* Historial: que el resaltado amarillo ocupe solo el texto */
.filtro-interno-historial {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  width: auto;
  max-width: 100%;
  margin-top: 6px;
  margin-bottom: 7px;
  padding: 5px 8px;
  border-radius: 10px;
  background: rgba(255, 189, 89, 0.13);
  border: 1px solid rgba(255, 189, 89, 0.22);
  font-size: 0.76rem;
  line-height: 1.35;
}

.filtro-interno-historial span {
  display: inline-flex;
  margin-right: 8px;
}

.filtro-interno-historial span:last-child {
  margin-right: 0;
}

@media (max-width: 640px) {
  .filtro-interno-box {
    margin-left: 0;
    padding: 8px;
  }

  .filtro-interno-grid {
    gap: 6px;
  }

  .filtro-interno-historial {
    display: inline-block;
    margin-bottom: 8px;
  }

  .filtro-interno-historial span {
    display: block;
    margin-right: 0;
    margin-bottom: 3px;
  }

  .filtro-interno-historial span:last-child {
    margin-bottom: 0;
  }
}

/* =========================================================
   AUTOMATIZACIONES — MONITOR VISUAL VMMS
========================================================= */

.auto-page .auto-topbar-actions,
.ps-page .ps-topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.auto-page .auto-topbar-btn,
.ps-page .ps-auto-monitor-btn {
  width: auto !important;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.auto-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.auto-summary-card {
  position: relative;
  overflow: hidden;
  min-height: 104px;
  padding: 14px;
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.12) 0%, transparent 32%),
    linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
  border: 1px solid rgba(208, 2, 27, 0.08);
  box-shadow: var(--vmms-shadow-xs);
}

.auto-summary-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 14px;
  right: 14px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--vmms-red) 0%, var(--vmms-yellow) 100%);
}

.auto-summary-card span {
  display: block;
  color: var(--vmms-text-soft);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  margin-bottom: 8px;
}

.auto-summary-card strong {
  display: block;
  color: #111111;
  font-size: 30px;
  line-height: 1;
  margin-bottom: 8px;
}

.auto-summary-card small {
  color: var(--vmms-text-soft);
  font-size: 12px;
}

.auto-toolbar-card {
  margin-bottom: 12px;
}

.auto-toolbar-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 12px;
}

.auto-toolbar-kicker {
  display: inline-flex;
  margin-bottom: 4px;
  color: var(--vmms-red);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.auto-toolbar-head h2 {
  margin: 0 0 4px 0;
  padding: 0;
  border: none;
  font-size: 18px;
}

.auto-toolbar-head p {
  margin: 0;
  color: var(--vmms-text-soft);
  font-size: 13px;
}

.auto-toolbar-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}

.auto-toolbar-grid > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.auto-toolbar-grid label {
  margin-bottom: 4px;
}

.auto-filter-btn {
  width: 100%;
  min-height: 36px;
  border-radius: 10px;
  white-space: nowrap;
}

.auto-results-panel {
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--vmms-surface);
  border: 1px solid var(--vmms-border);
  box-shadow: var(--vmms-shadow-xs);
}

.auto-live-info {
  color: var(--vmms-text-soft);
  font-size: 13px;
  font-weight: 700;
}

.auto-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.auto-task-card {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.10) 0%, transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
  border: 1px solid rgba(208, 2, 27, 0.08);
  box-shadow: var(--vmms-shadow-xs);
}

.auto-task-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  right: 18px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--vmms-red) 0%, var(--vmms-yellow) 100%);
}

.auto-task-head {
  padding: 16px 18px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  border-bottom: 1px solid #e8edf2;
}

.auto-task-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.auto-task-id {
  min-width: 46px;
  min-height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  background: #111111;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
}

.auto-task-main h3 {
  margin: 0 0 5px 0;
  color: #111111;
  font-size: 16px;
  line-height: 1.15;
}

.auto-task-main p {
  margin: 0;
  color: var(--vmms-text-soft);
  font-size: 13px;
  line-height: 1.35;
}

.auto-task-badges {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.auto-status-badge,
.auto-channel-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  border: 1px solid transparent;
}

.auto-channel-badge {
  background: #eef2f6;
  color: #374151;
  border-color: #d7dce3;
}

.auto-status--pendiente {
  background: #fef3c7;
  color: #92400e;
  border-color: #f3d28b;
}

.auto-status--procesando,
.auto-status--preparado {
  background: #dbeafe;
  color: #1d4ed8;
  border-color: #bfdbfe;
}

.auto-status--enviado {
  background: #dcfce7;
  color: #166534;
  border-color: #bbf7d0;
}

.auto-status--omitido {
  background: #f3f4f6;
  color: #4b5563;
  border-color: #d7dce3;
}

.auto-status--error {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fecaca;
}

.auto-status--default {
  background: #f3f4f6;
  color: #374151;
  border-color: #d7dce3;
}

.auto-task-grid {
  padding: 14px 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.auto-task-grid > div,
.auto-message-box,
.auto-error-box {
  min-width: 0;
  padding: 11px 12px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #e1e8f0;
  box-shadow:
    0 4px 10px rgba(15,23,42,0.035),
    inset 0 1px 0 rgba(255,255,255,0.90);
}

.auto-task-grid strong,
.auto-message-box strong,
.auto-error-box strong {
  display: block;
  margin-bottom: 5px;
  color: #111111;
  font-size: 11px;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

.auto-task-grid span,
.auto-message-box span,
.auto-error-box span {
  color: #374151;
  font-size: 13px;
  line-height: 1.35;
  word-break: break-word;
}

.auto-message-box,
.auto-error-box {
  margin: 0 18px 14px;
}

.auto-error-box {
  background: #fff8f8;
  border-color: #fecaca;
}

.auto-error-box strong {
  color: #991b1b;
}

.auto-empty-state {
  padding: 22px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px dashed #cbd5e1;
  color: #64748b;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
}

.auto-empty-state--error {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fecaca;
}

@media (max-width: 1200px) {
  .auto-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .auto-toolbar-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .auto-task-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .auto-page .page-topbar,
  .ps-page .page-topbar {
    align-items: stretch;
  }

  .auto-page .auto-topbar-actions,
  .ps-page .ps-topbar-actions {
    width: 100%;
  }

  .auto-page .auto-topbar-btn,
  .ps-page .ps-auto-monitor-btn {
    width: 100% !important;
  }

  .auto-summary-grid,
  .auto-toolbar-grid,
  .auto-task-grid {
    grid-template-columns: 1fr;
  }

  .auto-task-head {
    flex-direction: column;
  }

  .auto-task-badges {
    justify-content: flex-start;
  }

  .auto-task-main {
    align-items: flex-start;
  }
}

/* =========================================================
   AUTO FIX — ALINEACIÓN BOTONES TOPBAR AUTOMATIZACIONES
========================================================= */

.auto-page .auto-topbar-btn,
.ps-page .ps-auto-monitor-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}

.auto-page .auto-topbar-actions,
.ps-page .ps-topbar-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}


/* =========================================================
   AUTOMATIZACIONES — REINTENTO MANUAL
========================================================= */

.auto-task-actions {
  margin: 0 18px 16px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.auto-retry-btn {
  width: auto !important;
  min-height: 34px !important;
  padding: 0 13px !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #eef2f6 100%) !important;
  color: #111827 !important;
  border: 1px solid #d5dce5 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  box-shadow:
    0 5px 12px rgba(15,23,42,0.055),
    inset 0 1px 0 rgba(255,255,255,0.92) !important;
}

.auto-retry-btn:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(208, 2, 27, 0.22) !important;
  color: var(--vmms-red) !important;
}

@media (max-width: 768px) {
  .auto-task-actions {
    justify-content: stretch;
  }

  .auto-retry-btn {
    width: 100% !important;
  }
}

/* =========================================================
   AUTOMATIZACIONES — MODAL PREMIUM REINTENTO
========================================================= */

.auto-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--vmms-z-modal);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(17, 24, 39, 0.58);
}

.auto-modal-overlay.is-open {
  display: flex;
}

.auto-modal-box {
  width: 100%;
  max-width: 560px;
  overflow: hidden;
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.12) 0%, transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
  border: 1px solid rgba(226, 232, 240, 0.96);
  box-shadow:
    0 26px 70px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.92);
}

.auto-modal-header {
  position: relative;
  padding: 18px 20px;
  background:
    linear-gradient(135deg, #08080a 0%, #151519 58%, #0b0b0d 100%);
  color: #ffffff;
  border-bottom: 4px solid var(--vmms-red);
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.auto-modal-kicker {
  display: inline-flex;
  margin-bottom: 7px;
  min-height: 24px;
  padding: 0 10px;
  align-items: center;
  border-radius: 999px;
  background: rgba(255,189,89,0.16);
  color: var(--vmms-yellow);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.auto-modal-header h3 {
  margin: 0 0 6px 0;
  color: #ffffff;
  font-size: 20px;
  line-height: 1.15;
}

.auto-modal-header p {
  margin: 0;
  color: rgba(255,255,255,0.68);
  font-size: 13px;
  line-height: 1.4;
}

.auto-modal-close {
  width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.08) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  font-size: 22px !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

.auto-modal-body {
  padding: 18px 20px 8px;
}

.auto-modal-warning,
.auto-modal-detail {
  padding: 13px 14px;
  border-radius: 16px;
  margin-bottom: 12px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #e1e8f0;
  box-shadow:
    0 5px 13px rgba(15,23,42,0.04),
    inset 0 1px 0 rgba(255,255,255,0.90);
}

.auto-modal-warning {
  background: #fff8e8;
  border-color: #f3dfaa;
  color: #7a4f00;
}

.auto-modal-warning strong,
.auto-modal-detail strong {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

.auto-modal-warning span,
.auto-modal-detail span {
  color: inherit;
  font-size: 13px;
  line-height: 1.4;
}

.auto-modal-msg {
  display: none;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 800;
}

.auto-modal-msg.ok {
  display: block;
  background: var(--vmms-success-bg);
  color: var(--vmms-success);
  border: 1px solid rgba(21, 128, 61, 0.14);
}

.auto-modal-msg.error {
  display: block;
  background: var(--vmms-danger-bg);
  color: var(--vmms-danger);
  border: 1px solid rgba(185, 28, 28, 0.14);
}

.auto-modal-actions {
  padding: 14px 20px 20px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.auto-modal-btn {
  width: auto !important;
  min-width: 150px;
}

@media (max-width: 768px) {
  .auto-modal-box {
    border-radius: 18px;
  }

  .auto-modal-header {
    padding: 16px;
  }

  .auto-modal-body {
    padding: 16px 16px 6px;
  }

  .auto-modal-actions {
    padding: 12px 16px 16px;
    flex-direction: column;
  }

  .auto-modal-btn {
    width: 100% !important;
  }
}

/* =========================================================
   AUTOMATIZACIONES — GENERAR COLA DESDE MONITOR
========================================================= */

.auto-toolbar-action-wide {
  grid-column: 1 / -1;
}

.auto-toolbar-action-wide .auto-filter-btn {
  min-height: 42px;
  font-size: 13px;
  font-weight: 900;
}

.auto-modal-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.auto-modal-form-grid > div {
  min-width: 0;
}

.auto-modal-form-grid label {
  display: block;
  margin-bottom: 5px;
  color: #111111;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

.auto-modal-form-grid input,
.auto-modal-form-grid select {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #111111;
  font-size: 13px;
}

@media (max-width: 768px) {
  .auto-modal-form-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   AUTOMATIZACIONES — PREVISUALIZAR CANDIDATOS
========================================================= */

.auto-preview-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.auto-preview-box {
  max-height: 280px;
  overflow-y: auto;
  padding: 10px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #e1e8f0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.90),
    0 5px 13px rgba(15,23,42,0.035);
}

.auto-preview-empty {
  padding: 14px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.auto-preview-empty--error {
  background: var(--vmms-danger-bg);
  color: var(--vmms-danger);
  border-color: rgba(185, 28, 28, 0.18);
}

.auto-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e5e7eb;
}

.auto-preview-header strong {
  color: #111111;
  font-size: 13px;
  font-weight: 900;
}

.auto-preview-header span {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.auto-preview-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.auto-preview-item {
  padding: 11px 12px;
  border-radius: 14px;
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.10) 0%, transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
  border: 1px solid #e1e8f0;
  box-shadow:
    0 4px 10px rgba(15,23,42,0.035),
    inset 0 1px 0 rgba(255,255,255,0.90);
}

.auto-preview-main {
  margin-bottom: 7px;
}

.auto-preview-main strong {
  display: block;
  color: #111111;
  font-size: 13px;
  line-height: 1.2;
  margin-bottom: 3px;
}

.auto-preview-main span {
  color: #475569;
  font-size: 12px;
  line-height: 1.35;
}

.auto-preview-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.auto-preview-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: #eef2f6;
  color: #374151;
  font-size: 11px;
  font-weight: 800;
}

@media (max-width: 768px) {
  .auto-preview-actions {
    justify-content: stretch;
  }

  .auto-preview-actions .auto-modal-btn {
    width: 100% !important;
  }

  .auto-preview-box {
    max-height: 340px;
  }

  .auto-preview-header {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* =========================================================
   AUTOMATIZACIONES — PLANTILLAS DROPDOWN + MODAL
========================================================= */

.auto-templates-card {
  margin: 0 0 12px 0;
  padding: 0;
  overflow: hidden;
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.10) 0%, transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid rgba(208, 2, 27, 0.08);
  box-shadow:
    0 8px 20px rgba(15,23,42,0.055),
    inset 0 1px 0 rgba(255,255,255,0.90);
}

.auto-templates-card--compact {
  margin: 0 0 12px 0;
  padding: 0;
}

.auto-templates-toggle {
  width: 100% !important;
  min-height: 62px !important;
  padding: 13px 15px !important;
  border: none !important;
  border-radius: 18px !important;
  background: transparent !important;
  color: #111111 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 14px !important;
  text-align: left !important;
  box-shadow: none !important;
}

.auto-templates-toggle:hover {
  filter: none !important;
  background: rgba(248,250,252,0.75) !important;
}

.auto-templates-toggle > span:first-child {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.auto-templates-toggle strong {
  color: #111111;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.15;
}

.auto-templates-toggle small {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
}

.auto-templates-toggle-meta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-width: 0;
  flex-shrink: 0;
}

.auto-live-info--templates {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.auto-live-info--templates span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
}

.auto-live-info--templates strong {
  color: #111111;
  font-weight: 900;
}

#autoTemplatesToggleIcon {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, #111111 0%, #25252a 100%);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.auto-templates-panel {
  display: none;
  padding: 0 14px 14px;
  border-top: 1px solid #e5e7eb;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
}

.auto-templates-panel.is-open {
  display: block;
}

.auto-templates-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
}

.auto-templates-panel-head p {
  margin: 0;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.auto-template-refresh-btn {
  width: auto !important;
  min-width: 150px;
  flex-shrink: 0;
}

.auto-templates-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 0;
}

.auto-template-dropdown {
  overflow: hidden;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid #e1e8f0;
  box-shadow:
    0 4px 12px rgba(15,23,42,0.035),
    inset 0 1px 0 rgba(255,255,255,0.88);
}

.auto-template-dropdown-toggle {
  width: 100% !important;
  min-height: 48px !important;
  padding: 10px 12px !important;
  border: none !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  color: #111111 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  text-align: left !important;
  box-shadow: none !important;
}

.auto-template-dropdown-toggle:hover {
  filter: none !important;
  background: linear-gradient(180deg, #ffffff 0%, #f2f5f8 100%) !important;
}

.auto-template-dropdown-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.auto-template-dropdown-main strong {
  color: #111111;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.15;
}

.auto-template-dropdown-main small {
  color: #64748b;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.25;
}

.auto-template-dropdown-side {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.auto-template-dropdown-side b {
  width: 24px;
  height: 24px;
  min-width: 24px;
  border-radius: 999px;
  background: #eef2f6;
  color: #111827;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
}

.auto-template-dropdown-panel {
  display: none;
  padding: 12px;
  border-top: 1px solid #e5e7eb;
  background: #ffffff;
}

.auto-template-dropdown-panel.is-open {
  display: block;
}

.auto-template-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
}

.auto-template-status--active {
  background: var(--vmms-success-bg);
  color: var(--vmms-success);
  border: 1px solid rgba(21,128,61,0.12);
}

.auto-template-status--inactive {
  background: #f3f4f6;
  color: #64748b;
  border: 1px solid #e5e7eb;
}

.auto-template-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.auto-template-mini-grid > div,
.auto-template-preview {
  border-radius: 12px;
  padding: 9px 10px;
  background: rgba(255,255,255,0.82);
  border: 1px solid #e6ebf2;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.88);
}

.auto-template-mini-grid strong,
.auto-template-preview strong {
  display: block;
  margin-bottom: 4px;
  color: #111111;
  font-size: 10.5px;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

.auto-template-mini-grid span,
.auto-template-preview span {
  color: #374151;
  font-size: 12px;
  line-height: 1.35;
  word-break: break-word;
}

.auto-template-preview {
  margin-bottom: 8px;
}

.auto-template-vars-inline,
.auto-template-vars-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.auto-template-vars-inline {
  margin-top: 8px;
}

.auto-template-vars-inline span,
.auto-template-vars-list span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: #eef2f6;
  color: #374151;
  font-size: 11px;
  font-weight: 800;
}

.auto-template-dropdown-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.auto-template-edit-btn {
  width: auto !important;
  min-width: 130px;
  min-height: 30px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #eef2f6 100%) !important;
  color: #111827 !important;
  border: 1px solid #d5dce5 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  box-shadow:
    0 4px 10px rgba(15,23,42,0.05),
    inset 0 1px 0 rgba(255,255,255,0.92) !important;
}

.auto-template-edit-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(208,2,27,0.22) !important;
}

/* Modal editor */
.auto-template-modal-box {
  max-width: 780px;
}

.auto-template-meta-box {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.auto-template-meta-box > div {
  border-radius: 12px;
  padding: 10px;
  background: #f8fafc;
  border: 1px solid #e1e8f0;
}

.auto-template-meta-box strong {
  display: block;
  margin-bottom: 4px;
  color: #111111;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

.auto-template-meta-box span {
  color: #374151;
  font-size: 12px;
  font-weight: 800;
  word-break: break-word;
}

.auto-template-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: 10px;
}

.auto-template-field-full {
  grid-column: 1 / -1;
}

.auto-template-form-grid textarea {
  min-height: 70px;
}

#autoTemplateCuerpo {
  min-height: 220px;
  line-height: 1.45;
}

.auto-template-vars-box {
  margin-top: 12px;
  padding: 11px 12px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid #e1e8f0;
}

.auto-template-vars-box > strong {
  display: block;
  margin-bottom: 8px;
  color: #111111;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

@media (max-width: 1100px) {
  .auto-templates-toggle {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .auto-templates-toggle-meta {
    width: 100%;
    justify-content: space-between;
  }

  .auto-live-info--templates {
    flex-wrap: wrap;
    justify-content: flex-start;
    white-space: normal;
  }
}

@media (max-width: 768px) {
  .auto-templates-toggle {
    min-height: auto !important;
    padding: 13px !important;
  }

  .auto-templates-toggle-meta {
    align-items: flex-start;
  }

  .auto-live-info--templates {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .auto-live-info--templates span {
    width: 100%;
    justify-content: space-between;
  }

  .auto-templates-panel-head {
    align-items: stretch;
    flex-direction: column;
  }

  .auto-template-refresh-btn {
    width: 100% !important;
  }

  .auto-template-dropdown-toggle {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .auto-template-dropdown-side {
    width: 100%;
    justify-content: space-between;
  }

  .auto-template-mini-grid,
  .auto-template-meta-box,
  .auto-template-form-grid {
    grid-template-columns: 1fr;
  }

  .auto-template-field-full {
    grid-column: auto;
  }

  .auto-template-dropdown-actions .auto-template-edit-btn,
  .auto-template-edit-btn {
    width: 100% !important;
  }
}

/* =========================================================
   FASE 17.11.2 — HISTORIAL CONTACTOS
   Header CRM ordenado / badges agrupados
========================================================= */

.hc-page .hc-contact-head {
  align-items: flex-start !important;
  gap: 16px !important;
}

.hc-page .hc-contact-main {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  align-items: flex-start !important;
}

.hc-page .hc-contact-avatar {
  margin-top: 0 !important;
}

.hc-page .hc-contact-title-wrap {
  min-width: 0 !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 11px !important;
}

.hc-page .hc-contact-identity-block {
  min-width: 0 !important;
}

.hc-page .hc-contact-title-row {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 0 5px 0 !important;
}

.hc-page .hc-contact-title-row h3 {
  margin: 0 !important;
}

.hc-page .hc-contact-vehicle-line {
  margin: 0 !important;
  color: #334155 !important;
  font-size: 13px !important;
  line-height: 1.28 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.025em !important;
  font-weight: 700 !important;
}

.hc-page .hc-contact-crm-strip {
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px !important;
  margin-top: 1px !important;
  padding: 10px 11px !important;
  border-radius: 15px !important;
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.22) 0%, transparent 38%),
    linear-gradient(135deg, rgba(255,255,255,0.96) 0%, rgba(248,250,252,0.90) 58%, rgba(255,247,214,0.58) 100%) !important;
  border: 1px solid rgba(226,232,240,0.95) !important;
  box-shadow:
    0 6px 15px rgba(15,23,42,0.045),
    inset 0 1px 0 rgba(255,255,255,0.96),
    inset 0 -1px 0 rgba(255,189,89,0.10) !important;
}

.hc-page .hc-contact-crm-strip::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12px;
  right: 12px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--vmms-red) 0%, var(--vmms-yellow) 100%);
  opacity: 0.62;
  pointer-events: none;
}

.hc-page .hc-contact-crm-strip > * {
  position: relative;
  z-index: 1;
}

.hc-page .hc-contact-crm-group {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: 74px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
}

.hc-page .hc-crm-mini-label,
.hc-page .hc-channel-label {
  color: #64748b !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.055em !important;
  white-space: nowrap !important;
}

.hc-page .hc-contact-meta-badges {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 0 !important;
}

.hc-page .hc-contact-crm-group--channels .hc-channel-row {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 0 !important;
}

.hc-page .hc-contact-crm-group--channels .hc-channel-label {
  width: 74px !important;
  min-width: 74px !important;
}

.hc-page .hc-meta-pill {
  width: auto !important;
  min-height: 24px !important;
  padding: 0 9px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  border: 1px solid #dbe3ec !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%) !important;
  color: #334155 !important;
  box-shadow:
    0 2px 6px rgba(15,23,42,0.03),
    inset 0 1px 0 rgba(255,255,255,0.92) !important;
}

.hc-page .hc-meta-pill--origen {
  background:
    linear-gradient(180deg, #ffffff 0%, #eef2f6 100%) !important;
  color: #111827 !important;
  border-color: #d7dce3 !important;
}

.hc-page .hc-meta-pill--evento {
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  color: #475569 !important;
  border-color: #e1e8f0 !important;
}

.hc-page .hc-meta-pill.hc-meta-pill--auto-servicio,
.hc-page .hc-meta-pill.hc-meta-pill--auto-proximo,
.hc-page .hc-meta-pill.hc-meta-pill--auto-vencido,
.hc-page .hc-meta-pill.hc-meta-pill--auto-postventa {
  background: #f8fafc !important;
  color: #1f2937 !important;
  border-color: #dbe3ec !important;
}

.hc-page .hc-meta-pill.hc-medium-badge--whatsapp {
  background: #dcfce7 !important;
  color: #166534 !important;
  border-color: #bbf7d0 !important;
}

.hc-page .hc-meta-pill.hc-medium-badge--email {
  background: #fff7d6 !important;
  color: #7a4f00 !important;
  border-color: #f5deb3 !important;
}

.hc-page .hc-meta-pill.hc-medium-badge--phone {
  background: #dbeafe !important;
  color: #1d4ed8 !important;
  border-color: #bfdbfe !important;
}

.hc-page .hc-meta-pill.hc-medium-badge--presencial {
  background: #f3e8ff !important;
  color: #6b21a8 !important;
  border-color: #e9d5ff !important;
}

.hc-page .hc-contact-status-wrap--single {
  width: auto !important;
  min-width: 140px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  gap: 0 !important;
}

.hc-page .hc-contact-status-wrap--single .hc-contact-status {
  min-height: 30px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  box-shadow:
    0 4px 10px rgba(15,23,42,0.045),
    inset 0 1px 0 rgba(255,255,255,0.70) !important;
}

.hc-page .hc-info-card:first-child small {
  margin-top: 6px !important;
  display: inline-flex !important;
  width: fit-content !important;
  min-height: 22px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  background: #f8fafc !important;
  border: 1px solid #e1e8f0 !important;
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

@media (max-width: 760px) {
  .hc-page .hc-contact-head {
    flex-direction: column !important;
    gap: 12px !important;
    padding: 16px 14px 14px !important;
  }

  .hc-page .hc-contact-main {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 10px !important;
  }

  .hc-page .hc-contact-title-wrap {
    align-items: center !important;
    gap: 10px !important;
  }

  .hc-page .hc-contact-title-row {
    justify-content: center !important;
    margin-bottom: 6px !important;
  }

  .hc-page .hc-contact-vehicle-line {
    text-align: center !important;
  }

  .hc-page .hc-contact-crm-strip {
    padding: 9px !important;
  }

  .hc-page .hc-contact-crm-group {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 7px !important;
  }

  .hc-page .hc-contact-meta-badges,
  .hc-page .hc-contact-crm-group--channels .hc-channel-row {
    justify-content: center !important;
  }

  .hc-page .hc-contact-crm-group--channels .hc-channel-label {
    width: auto !important;
    min-width: 0 !important;
  }

  .hc-page .hc-contact-status-wrap--single {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
  }

  .hc-page .hc-contact-status-wrap--single .hc-contact-status {
    min-height: 29px !important;
  }

  .hc-page .hc-meta-pill,
  .hc-page .hc-channel-chip {
    min-height: 24px !important;
    font-size: 10.8px !important;
  }
}

/* =========================================================
   HISTORIAL CONTACTOS — TIMELINE CLEAN + ÚLTIMA GESTIÓN
========================================================= */

.hc-page .hc-info-card--gestion {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
}

.hc-page .hc-info-card--gestion strong {
  margin-bottom: 0 !important;
}

.hc-page .hc-info-card--gestion span {
  font-size: 15px !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
  color: #111827 !important;
}

.hc-page .hc-timeline-content--clean {
  padding: 18px !important;
}

.hc-page .hc-timeline-top--clean {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 14px !important;
  margin-bottom: 10px !important;
}

.hc-page .hc-timeline-main-info {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.hc-page .hc-timeline-main-info strong {
  color: #111111 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
}

.hc-page .hc-timeline-meta-row {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  line-height: 1.25 !important;
}

.hc-page .hc-timeline-meta-row b {
  color: #cbd5e1 !important;
  font-weight: 900 !important;
}

.hc-page .hc-timeline-top--clean > .hc-contact-status {
  min-height: 28px !important;
  padding: 0 11px !important;
  border-radius: 999px !important;
  font-size: 11.5px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  box-shadow:
    0 4px 10px rgba(15,23,42,0.04),
    inset 0 1px 0 rgba(255,255,255,0.70) !important;
}

.hc-page .hc-timeline-content--clean p {
  margin: 0 !important;
  color: #334155 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

@media (max-width: 760px) {
  .hc-page .hc-timeline-top--clean {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .hc-page .hc-timeline-top--clean > .hc-contact-status {
    width: fit-content !important;
  }

  .hc-page .hc-info-card--gestion {
    min-height: 96px !important;
  }
}

/* =========================================================
   VMMS — Automatizaciones: diagnóstico técnico de canales
   FASE 14.3.15.5.3
========================================================= */

.auto-channels-panel {
  margin: 18px 0 22px;
  padding: 20px;
  border-radius: 24px;
  background:
    radial-gradient(circle at top left, rgba(220, 38, 38, 0.10), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
  border: 1px solid rgba(148, 163, 184, 0.25);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.10);
}

.auto-channels-loading {
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(248, 250, 252, 0.95);
  color: #475569;
  font-size: 0.92rem;
  font-weight: 700;
}

.auto-channels-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
  margin-top: 14px;
}

.auto-channels-head h2 {
  margin: 4px 0 4px;
  color: #0f172a;
  font-size: 1.18rem;
  font-weight: 900;
}

.auto-channels-head p {
  margin: 0;
  color: #64748b;
  font-size: 0.9rem;
}

.auto-global-security {
  min-width: 190px;
  padding: 12px 14px;
  border-radius: 18px;
  text-align: right;
  border: 1px solid rgba(148, 163, 184, 0.25);
}

.auto-global-security strong {
  display: block;
  color: #475569;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.auto-global-security span {
  display: block;
  margin-top: 4px;
  font-size: 0.9rem;
  font-weight: 950;
}

.auto-global-security--off {
  background: rgba(254, 226, 226, 0.72);
  color: #991b1b;
}

.auto-global-security--on {
  background: rgba(220, 252, 231, 0.72);
  color: #166534;
}

.auto-channels-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.auto-channel-card {
  padding: 17px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
}

.auto-channel-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 15px;
}

.auto-channel-card-head h3 {
  margin: 7px 0 0;
  color: #111827;
  font-size: 1rem;
  font-weight: 950;
}

.auto-channel-icon {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: linear-gradient(145deg, #111827, #374151);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.20);
}

.auto-channel-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  white-space: normal;
  text-align: center;
  line-height: 1.15;
  max-width: 118px;
  flex-shrink: 1;
}

.auto-channel-status--ok {
  background: #dcfce7;
  color: #166534;
}

.auto-channel-status--blocked {
  background: #fee2e2;
  color: #991b1b;
}

.auto-channel-status--warning {
  background: #fef3c7;
  color: #92400e;
}

.auto-channel-status--pending {
  background: #e0f2fe;
  color: #075985;
}

.auto-channel-status--disabled,
.auto-channel-status--default {
  background: #f1f5f9;
  color: #475569;
}

.auto-channel-meta {
  display: grid;
  gap: 9px;
}

.auto-channel-meta div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.92);
  border: 1px solid rgba(226, 232, 240, 0.85);
}

.auto-channel-meta strong {
  color: #475569;
  font-size: 0.74rem;
  font-weight: 900;
}

.auto-channel-meta span {
  color: #0f172a;
  font-size: 0.78rem;
  font-weight: 800;
  text-align: right;
  word-break: break-word;
}

.auto-pill {
  display: inline-flex;
  min-width: 38px;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.68rem !important;
  font-weight: 750 !important;
  text-transform: uppercase;
}

.auto-pill--ok {
  background: #dcfce7;
  color: #166534 !important;
}

.auto-pill--off {
  background: #fee2e2;
  color: #991b1b !important;
}

@media (max-width: 1100px) {
  .auto-channels-grid {
    grid-template-columns: 1fr;
  }

  .auto-channels-head {
    flex-direction: column;
  }

  .auto-global-security {
    width: 100%;
    text-align: left;
  }
}

@media (max-width: 640px) {
  .auto-channels-panel {
    padding: 15px;
    border-radius: 20px;
  }

  .auto-channel-card {
    padding: 14px;
    border-radius: 18px;
  }

  .auto-channel-card-head {
    flex-direction: column;
  }

  .auto-channel-status {
    align-self: flex-start;
  }

  .auto-channel-meta div {
    align-items: flex-start;
    flex-direction: column;
  }

  .auto-channel-meta span {
    text-align: left;
  }
}

/* =========================================================
   FASE 14.3.16.2 — STATS BAR + NUEVO CLIENTE EN CENTRO
========================================================= */

.cv-stats-bar {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 42px !important;
  padding: 8px 12px !important;
}

.cv-stats-count {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  color: #334155 !important;
  font-size: 13px !important;
  font-weight: 650 !important;
}

.cv-stats-count strong {
  color: #111111 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

.cv-stats-count--clientes {
  justify-self: start !important;
}

.cv-stats-count--vehiculos {
  justify-self: end !important;
}

.cv-stats-new-client {
  justify-self: center !important;
  width: auto !important;
  min-width: 160px !important;
  max-width: 190px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 16px !important;
  border-radius: 10px !important;

  background:
    linear-gradient(180deg, rgba(208, 2, 27, 0.92) 0%, rgba(176, 0, 23, 0.92) 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(145, 0, 20, 0.34) !important;

  font-size: 12px !important;
  font-weight: 750 !important;
  line-height: 1 !important;

  box-shadow:
    0 2px 7px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;

  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease !important;
}

.cv-stats-new-client:hover {
  background:
    linear-gradient(180deg, rgba(220, 16, 42, 0.96) 0%, rgba(208, 2, 27, 0.96) 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow:
    0 6px 14px rgba(208, 2, 27, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.20) !important;
}

.cv-stats-new-client:active {
  transform: translateY(0) !important;
  box-shadow:
    0 2px 6px rgba(15, 23, 42, 0.08),
    inset 0 2px 4px rgba(15, 23, 42, 0.10) !important;
}

/* Acción peligrosa dentro del dropdown */
.cv-actions-item--danger {
  color: #991b1b !important;
}

.cv-actions-item--danger:hover {
  background: #fee2e2 !important;
  color: #7f1d1d !important;
}

@media (max-width: 768px) {
  .cv-stats-bar {
    grid-template-columns: 1fr !important;
    justify-items: stretch !important;
  }

  .cv-stats-count--clientes,
  .cv-stats-count--vehiculos {
    justify-self: stretch !important;
    justify-content: center !important;
  }

  .cv-stats-new-client {
    width: 100% !important;
    max-width: none !important;
  }
}

/* =========================================================
   FASE 14.3.16.3 — ELIMINAR CLIENTE DESDE MODAL EDITAR
========================================================= */

.cv-modal-actions-split {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.cv-modal-actions-left,
.cv-modal-actions-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.cv-modal-actions-left {
  justify-content: flex-start !important;
}

.cv-modal-actions-right {
  justify-content: flex-end !important;
}

.cv-btn-delete-client {
  width: auto !important;
  min-width: 145px !important;
  min-height: 36px !important;
  padding: 0 14px !important;
  border-radius: 11px !important;

  background:
    linear-gradient(180deg, rgba(185, 28, 28, 0.94) 0%, rgba(127, 29, 29, 0.96) 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(127, 29, 29, 0.45) !important;

  font-size: 12px !important;
  font-weight: 800 !important;

  box-shadow:
    0 7px 16px rgba(185, 28, 28, 0.16),
    inset 0 1px 0 rgba(255,255,255,0.18) !important;

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease !important;
}

.cv-btn-delete-client:hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.02) !important;
  box-shadow:
    0 10px 22px rgba(185, 28, 28, 0.20),
    inset 0 1px 0 rgba(255,255,255,0.20) !important;
}

.cv-btn-delete-client:active {
  transform: translateY(0) !important;
  box-shadow:
    0 3px 8px rgba(185, 28, 28, 0.14),
    inset 0 2px 4px rgba(0,0,0,0.16) !important;
}

.cv-modal-danger-card {
  border-color: rgba(185, 28, 28, 0.18) !important;
  background:
    radial-gradient(circle at top right, rgba(248, 113, 113, 0.10) 0%, transparent 32%),
    linear-gradient(180deg, #ffffff 0%, #fff8f8 100%) !important;
}

.cv-delete-warning-box {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid rgba(185, 28, 28, 0.16);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

.cv-btn-danger-final {
  background:
    linear-gradient(180deg, rgba(185, 28, 28, 0.94) 0%, rgba(127, 29, 29, 0.96) 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(127, 29, 29, 0.45) !important;
  box-shadow:
    0 8px 18px rgba(185, 28, 28, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.18) !important;
}

.cv-btn-danger-final:hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.02) !important;
}

@media (max-width: 768px) {
  .cv-modal-actions-split {
    flex-direction: column-reverse !important;
    align-items: stretch !important;
  }

  .cv-modal-actions-left,
  .cv-modal-actions-right {
    width: 100% !important;
    justify-content: stretch !important;
    flex-direction: column !important;
  }

  .cv-btn-delete-client,
  .cv-modal-actions-right .btn-doc {
    width: 100% !important;
  }
}

/* =========================================================
   FIX DROPDOWN ACCIONES — CLIENTES / VEHÍCULOS
========================================================= */

.clientes-vehiculos-lista,
.cv-list-wrap,
.cv-list,
.cliente-card,
.cliente-header,
.cliente-header-main,
.cliente-header-info,
.cliente-header-topline,
.cliente-header-actions,
.cv-actions-menu {
  overflow: visible !important;
}

.cv-actions-menu {
  position: relative !important;
  z-index: 100 !important;
}

.cv-actions-menu.is-open {
  z-index: 10060 !important;
}

.cv-actions-dropdown {
  z-index: 10050 !important;
}

.cv-actions-dropdown.is-floating {
  position: fixed !important;
  right: auto !important;
  display: grid !important;
  gap: 6px !important;
  z-index: 10080 !important;
  max-height: min(70vh, 420px) !important;
  overflow-y: auto !important;
  pointer-events: auto !important;
}

/* =========================================================
   GLOBAL — BOTÓN SCROLL TO TOP
========================================================= */

.vmms-scroll-top-btn {
  position: fixed !important;
  right: 22px !important;
  bottom: 22px !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  border-radius: 999px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: rgba(17, 17, 17, 0.58) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;

  font-size: 22px !important;
  font-weight: 900 !important;
  line-height: 1 !important;

  box-shadow:
    0 10px 24px rgba(15, 23, 42, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(10px) scale(0.96) !important;

  z-index: 10010 !important;
  cursor: pointer !important;

  transition:
    opacity 0.22s ease,
    visibility 0.22s ease,
    transform 0.22s ease,
    background 0.18s ease,
    box-shadow 0.18s ease !important;
}

.vmms-scroll-top-btn.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
}

.vmms-scroll-top-btn:hover {
  background: rgba(208, 2, 27, 0.86) !important;
  transform: translateY(-2px) scale(1) !important;
  box-shadow:
    0 14px 28px rgba(208, 2, 27, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
}

.vmms-scroll-top-btn:active {
  transform: translateY(0) scale(0.98) !important;
}

@media (max-width: 768px) {
  .vmms-scroll-top-btn {
    right: 16px !important;
    bottom: 16px !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    font-size: 21px !important;
  }
}

/* =========================================================
   HISTORIAL CONTACTOS — AUTOMATIZACIONES LIMPIAS
========================================================= */

.hc-auto-note-title {
  display: inline-block;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 800;
  color: var(--vmms-text);
}

.hc-auto-note-text {
  display: inline-block;
  color: var(--vmms-text-soft);
  line-height: 1.45;
}

.hc-note-modal-box textarea:disabled {
  background: #f8fafc;
  color: var(--vmms-text-soft);
  cursor: default;
}

/* =========================================================
   HISTORIAL CONTACTOS — BADGES AUTOMÁTICOS PREMIUM
========================================================= */

.hc-meta-pill--auto-servicio {
  background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%) !important;
  color: #1f2937 !important;
  border: 1px solid #d7dce3 !important;
}

.hc-meta-pill--auto-servicio::before {
  content: "✓";
  margin-right: 5px;
  font-weight: 900;
  color: #15803d;
}

.hc-meta-pill--auto-proximo {
  background: linear-gradient(180deg, #fff8e1 0%, #fff1bd 100%) !important;
  color: #8a5a00 !important;
  border: 1px solid #f3d28b !important;
}

.hc-meta-pill--auto-proximo::before {
  content: "⏱";
  margin-right: 5px;
  font-weight: 900;
}

.hc-meta-pill--auto-vencido {
  background: linear-gradient(180deg, #fee2e2 0%, #fecaca 100%) !important;
  color: #991b1b !important;
  border: 1px solid #f0b4b4 !important;
}

.hc-meta-pill--auto-vencido::before {
  content: "!";
  margin-right: 5px;
  font-weight: 900;
}

.hc-meta-pill--auto-postventa {
  background: linear-gradient(180deg, #eef2ff 0%, #e0e7ff 100%) !important;
  color: #3730a3 !important;
  border: 1px solid #c7d2fe !important;
}

.hc-meta-pill--auto-postventa::before {
  content: "★";
  margin-right: 5px;
  font-weight: 900;
}

.hc-meta-pill--origen {
  background: linear-gradient(180deg, #ecfdf5 0%, #dcfce7 100%) !important;
  color: #166534 !important;
  border: 1px solid #bbf7d0 !important;
}

.hc-meta-pill--origen::before {
  content: "AUTO";
  margin-right: 6px;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(22, 101, 52, 0.10);
  color: #166534;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.03em;
}

/* =========================================================
   HISTORIAL CONTACTOS — BOTONES NOTA / MENSAJE
========================================================= */

.hc-note-action--manual {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.86) 0%, rgba(255,248,223,0.92) 42%, rgba(255,189,89,0.72) 100%) !important;
  color: #7a4f00 !important;
  border: 1px solid rgba(238, 199, 92, 0.90) !important;
  box-shadow:
    0 6px 14px rgba(255, 189, 89, 0.20),
    inset 0 1px 0 rgba(255,255,255,0.88),
    inset 0 -1px 0 rgba(122, 79, 0, 0.10) !important;
}

.hc-note-action--manual::before {
  content: "✎";
  margin-right: 5px;
  font-weight: 900;
  opacity: 0.78;
}

.hc-note-action--manual:hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(255,243,199,0.96) 42%, rgba(255,189,89,0.86) 100%) !important;
  color: #6b4300 !important;
  border-color: rgba(217, 158, 35, 0.95) !important;
  transform: translateY(-1px);
  box-shadow:
    0 9px 18px rgba(255, 189, 89, 0.26),
    inset 0 1px 0 rgba(255,255,255,0.92) !important;
}

.hc-note-action--auto {
  background:
    linear-gradient(180deg, #ffffff 0%, #f3f4f6 100%) !important;
  color: #374151 !important;
  border: 1px solid #d7dce3 !important;
  box-shadow:
    0 4px 10px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255,255,255,0.90) !important;
}

.hc-note-action--auto::before {
  content: "👁";
  margin-right: 5px;
  font-size: 12px;
}

.hc-note-action--auto:hover {
  background:
    linear-gradient(180deg, #ffffff 0%, #e9edf3 100%) !important;
  color: #111827 !important;
  transform: translateY(-1px);
}

/* =========================================================
   AUTOMATIZACIONES — MOD-AUTO-12C BOTONES MONITOR TÉCNICO
========================================================= */

.auto-page #autoBtnActualizar {
  background:
    linear-gradient(180deg, rgba(17,17,17,0.96) 0%, rgba(39,39,42,0.96) 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(17,17,17,0.40) !important;
  border-radius: 12px !important;
  min-height: 38px !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  box-shadow:
    0 8px 18px rgba(15, 23, 42, 0.14),
    inset 0 1px 0 rgba(255,255,255,0.16) !important;
}

.auto-page #autoBtnActualizar::before {
  content: "↻";
  margin-right: 6px;
  font-size: 13px;
  font-weight: 900;
}

.auto-page #autoBtnActualizar:hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.03) !important;
  box-shadow:
    0 11px 22px rgba(15, 23, 42, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.20) !important;
}

.auto-page #autoBtnLimpiar {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.90) 0%, rgba(248,250,252,0.78) 100%) !important;
  color: #374151 !important;
  border: 1px solid rgba(203, 213, 225, 0.95) !important;
  border-radius: 12px !important;
  min-height: 38px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  box-shadow:
    0 5px 12px rgba(15, 23, 42, 0.055),
    inset 0 1px 0 rgba(255,255,255,0.92) !important;
}

.auto-page #autoBtnLimpiar::before {
  content: "×";
  margin-right: 6px;
  font-size: 15px;
  font-weight: 900;
  opacity: 0.72;
}

.auto-page #autoBtnLimpiar:hover {
  background:
    linear-gradient(180deg, #ffffff 0%, #eef2f6 100%) !important;
  color: #111827 !important;
  border-color: rgba(148, 163, 184, 0.95) !important;
  transform: translateY(-1px) !important;
}

.auto-page #autoBtnActualizarPlantillas {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,248,223,0.94) 42%, rgba(255,189,89,0.74) 100%) !important;
  color: #7a4f00 !important;
  border: 1px solid rgba(238, 199, 92, 0.92) !important;
  border-radius: 999px !important;
  min-height: 36px !important;
  padding: 0 14px !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  box-shadow:
    0 7px 15px rgba(255, 189, 89, 0.20),
    inset 0 1px 0 rgba(255,255,255,0.90),
    inset 0 -1px 0 rgba(122, 79, 0, 0.10) !important;
}

.auto-page #autoBtnActualizarPlantillas::before {
  content: "↻";
  margin-right: 6px;
  font-weight: 900;
}

.auto-page #autoBtnActualizarPlantillas:hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(255,243,199,0.98) 42%, rgba(255,189,89,0.88) 100%) !important;
  color: #6b4300 !important;
  transform: translateY(-1px) !important;
  box-shadow:
    0 10px 20px rgba(255, 189, 89, 0.26),
    inset 0 1px 0 rgba(255,255,255,0.94) !important;
}

.auto-page .auto-toolbar-grid {
  align-items: end !important;
}

.auto-page .auto-filter-btn {
  letter-spacing: 0 !important;
  line-height: 1 !important;
}

@media (max-width: 768px) {
  .auto-page #autoBtnActualizar,
  .auto-page #autoBtnLimpiar,
  .auto-page #autoBtnActualizarPlantillas {
    width: 100% !important;
  }
}

/* =========================================================
   AUTOMATIZACIONES — MOD-AUTO-12C.1 BOTONES CLEAN + RESPONSIVE
========================================================= */

/* La barra NO debe romper a 1200px.
   Mantenemos 5 columnas compactas mientras haya espacio real. */
.auto-page .auto-toolbar-grid {
  display: grid !important;
  grid-template-columns:
    minmax(130px, 1fr)
    minmax(130px, 1fr)
    86px
    104px
    84px !important;
  gap: 8px !important;
  align-items: end !important;
}

/* Cada bloque del filtro más compacto */
.auto-page .auto-toolbar-grid > div {
  min-width: 0 !important;
}

/* Labels más limpios */
.auto-page .auto-toolbar-grid label {
  margin-bottom: 4px !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  color: #374151 !important;
  line-height: 1.1 !important;
}

/* Inputs/selects compactos para que no empujen botones */
.auto-page .auto-toolbar-grid select,
.auto-page .auto-toolbar-grid input {
  min-height: 32px !important;
  height: 32px !important;
  padding: 5px 9px !important;
  border-radius: 9px !important;
  font-size: 12px !important;
}

/* Base clean compartida */
.auto-page #autoBtnActualizar,
.auto-page #autoBtnLimpiar,
.auto-page #autoBtnActualizarPlantillas {
  min-height: 32px !important;
  height: 32px !important;
  padding: 0 10px !important;
  border-radius: 9px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-shadow:
    0 3px 8px rgba(15, 23, 42, 0.045),
    inset 0 1px 0 rgba(255,255,255,0.82) !important;
}

/* Actualizar: oscuro, pero más delicado */
.auto-page #autoBtnActualizar {
  background:
    linear-gradient(180deg, #2a2a2d 0%, #171719 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(17,17,17,0.28) !important;
}

.auto-page #autoBtnActualizar::before {
  content: "↻";
  margin-right: 5px;
  font-size: 12px;
  font-weight: 800;
  opacity: 0.82;
}

.auto-page #autoBtnActualizar:hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.03) !important;
  box-shadow:
    0 5px 12px rgba(15, 23, 42, 0.10),
    inset 0 1px 0 rgba(255,255,255,0.18) !important;
}

/* Limpiar: gris claro clean */
.auto-page #autoBtnLimpiar {
  background:
    linear-gradient(180deg, #ffffff 0%, #f1f4f7 100%) !important;
  color: #4b5563 !important;
  border: 1px solid #d9e0e8 !important;
}

.auto-page #autoBtnLimpiar::before {
  content: "×";
  margin-right: 5px;
  font-size: 13px;
  font-weight: 800;
  opacity: 0.60;
}

.auto-page #autoBtnLimpiar:hover {
  background:
    linear-gradient(180deg, #ffffff 0%, #e9eef4 100%) !important;
  color: #111827 !important;
  transform: translateY(-1px) !important;
}

/* Plantillas: amarillo suave, no pesado */
.auto-page #autoBtnActualizarPlantillas {
  width: auto !important;
  min-width: 0 !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #fff7df 58%, #ffe3a6 100%) !important;
  color: #6f4700 !important;
  border: 1px solid #efd18d !important;
}

.auto-page #autoBtnActualizarPlantillas::before {
  content: "↻";
  margin-right: 5px;
  font-size: 12px;
  font-weight: 800;
  opacity: 0.75;
}

.auto-page #autoBtnActualizarPlantillas:hover {
  background:
    linear-gradient(180deg, #ffffff 0%, #fff3cf 58%, #ffd983 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow:
    0 5px 12px rgba(255, 189, 89, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.88) !important;
}

/* Refuerzo: botones viejos ocultos */
.auto-page #autoBtnProcesarSeguro,
.auto-page #autoBtnGenerarCola {
  display: none !important;
}

/* Evita que el responsive viejo de 1200px convierta la toolbar en 2 columnas */
@media (max-width: 1200px) {
  .auto-page .auto-toolbar-grid {
    grid-template-columns:
      minmax(120px, 1fr)
      minmax(120px, 1fr)
      78px
      100px
      78px !important;
    gap: 7px !important;
  }
}

/* Recién acá compactamos a 3 columnas, no antes */
@media (max-width: 900px) {
  .auto-page .auto-toolbar-grid {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr)
      82px !important;
  }

  .auto-page .auto-toolbar-grid > div:nth-child(4),
  .auto-page .auto-toolbar-grid > div:nth-child(5) {
    grid-column: auto !important;
  }
}

/* Mobile real: una columna ordenada */
@media (max-width: 640px) {
  .auto-page .auto-toolbar-grid {
    grid-template-columns: 1fr !important;
  }

  .auto-page #autoBtnActualizar,
  .auto-page #autoBtnLimpiar,
  .auto-page #autoBtnActualizarPlantillas {
    width: 100% !important;
  }
}

/* =========================================================
   AUTOMATIZACIONES — MOD-AUTO-12C.2 OCULTAR PLANTILLAS
========================================================= */

.auto-page .auto-templates-card,
.auto-page #autoTemplatesToggle,
.auto-page #autoTemplatesPanel,
.auto-page #autoBtnActualizarPlantillas {
  display: none !important;
}

/* =========================================================
   HISTORIAL CONTACTOS — AJUSTE FINO TOOLBAR FILTROS
========================================================= */

.hc-page .hc-advanced-toolbar-grid {
  display: grid !important;
  grid-template-columns:
    minmax(140px, 0.95fr)
    minmax(210px, 1.45fr)
    minmax(130px, 0.8fr)
    minmax(130px, 0.8fr)
    minmax(150px, 0.9fr);
  gap: 10px !important;
  align-items: end !important;
}

.hc-page .hc-filter-actions-cell {
  grid-column: 4 / 6 !important;
  min-width: 0 !important;
}

.hc-page .hc-filter-actions-inline {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  align-items: end !important;
}

.hc-page .hc-filter-actions-inline .hc-filter-action-btn {
  width: 100% !important;
  min-height: 32px !important;
  height: 32px !important;
  padding: 0 10px !important;
  border-radius: 9px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

@media (max-width: 1100px) {
  .hc-page .hc-advanced-toolbar-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .hc-page .hc-filter-actions-cell {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 640px) {
  .hc-page .hc-advanced-toolbar-grid {
    grid-template-columns: 1fr !important;
  }

  .hc-page .hc-filter-actions-cell {
    grid-column: 1 / -1 !important;
  }

  .hc-page .hc-filter-actions-inline {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* =========================================================
   FASE 14.3.16.7 — FILTROS PROXIMOS SERVICIOS CLEAN FIX
   Layout flexible sin superposición en desktop/tablet/mobile
========================================================= */

.ps-page .ps-advanced-toolbar-card {
  padding: 12px !important;
  overflow: visible !important;
}

.ps-page .ps-toolbar-card,
.ps-page .ps-advanced-toolbar-card {
  overflow: visible !important;
}

.ps-page .ps-toolbar-head {
  margin-bottom: 10px !important;
  padding-bottom: 10px !important;
}

.ps-page .ps-toolbar-kicker {
  font-size: 10.5px !important;
  margin-bottom: 4px !important;
}

.ps-page .ps-toolbar-head h2 {
  font-size: 16px !important;
  margin-bottom: 3px !important;
}

.ps-page .ps-toolbar-head p {
  font-size: 12.5px !important;
  line-height: 1.35 !important;
}

/* Reset total del grid anterior */
.ps-page .ps-advanced-toolbar-grid.ps-filter-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-end !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  grid-template-columns: none !important;
}

.ps-page .ps-advanced-toolbar-grid.ps-filter-grid > div {
  min-width: 0 !important;
  max-width: 100% !important;
  grid-column: auto !important;
  grid-row: auto !important;
}

/* Anchos flexibles por campo */
.ps-page .ps-filter-field--tipo {
  flex: 1 1 145px !important;
}

.ps-page .ps-filter-field--busqueda {
  flex: 2 1 280px !important;
}

.ps-page .ps-filter-field--estado {
  flex: 1 1 135px !important;
}

.ps-page .ps-filter-field--contacto {
  flex: 1 1 135px !important;
}

.ps-page .ps-filter-field--limit {
  flex: 0 1 90px !important;
}

.ps-page .ps-filter-buttons-wrap {
  flex: 0 0 auto !important;
  min-width: 176px !important;
  max-width: 220px !important;
  display: flex !important;
  flex-direction: column !important;
}

.ps-page .ps-filter-grid label,
.ps-page .ps-filter-buttons-label {
  display: block !important;
  margin: 0 0 4px 0 !important;
  font-size: 10.5px !important;
  line-height: 1.15 !important;
  font-weight: 850 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.035em !important;
  color: #111111 !important;
}

.ps-page .ps-filter-grid input,
.ps-page .ps-filter-grid select {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 34px !important;
  height: 34px !important;
  padding: 6px 9px !important;
  border-radius: 10px !important;
  font-size: 12.5px !important;
  line-height: 1.2 !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  border: 1px solid #d7dce3 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.88) !important;
}

.ps-page .ps-filter-grid input:focus,
.ps-page .ps-filter-grid select:focus {
  border-color: rgba(208, 2, 27, 0.35) !important;
  box-shadow: var(--vmms-focus-ring) !important;
}

.ps-page .ps-filter-buttons {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 7px !important;
  min-height: 34px !important;
}

.ps-page .ps-filter-action-btn {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 11px !important;
  border-radius: 10px !important;

  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  box-shadow:
    0 2px 7px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255,255,255,0.18) !important;

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease !important;
}

.ps-page .ps-filter-action-btn--buscar {
  background:
    linear-gradient(180deg, rgba(208, 2, 27, 0.92) 0%, rgba(176, 0, 23, 0.94) 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(145, 0, 20, 0.34) !important;
}

.ps-page .ps-filter-action-btn--buscar:hover {
  background:
    linear-gradient(180deg, rgba(220, 16, 42, 0.96) 0%, rgba(208, 2, 27, 0.96) 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow:
    0 6px 14px rgba(208, 2, 27, 0.16),
    inset 0 1px 0 rgba(255,255,255,0.20) !important;
}

.ps-page .ps-filter-action-btn--limpiar {
  background:
    linear-gradient(180deg, #ffffff 0%, #eef2f6 100%) !important;
  color: #111827 !important;
  border: 1px solid #d5dce5 !important;
}

.ps-page .ps-filter-action-btn--limpiar:hover {
  background:
    linear-gradient(180deg, #ffffff 0%, #e8edf3 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow:
    0 5px 12px rgba(15, 23, 42, 0.09),
    inset 0 1px 0 rgba(255,255,255,0.90) !important;
}

.ps-page .ps-filter-action-btn:active {
  transform: translateY(0) !important;
  box-shadow:
    0 2px 6px rgba(15, 23, 42, 0.08),
    inset 0 2px 4px rgba(15, 23, 42, 0.10) !important;
}

/* Rango medio: sidebar + ventana achicada */
@media (max-width: 1120px) {
  .ps-page .ps-filter-field--tipo,
  .ps-page .ps-filter-field--estado,
  .ps-page .ps-filter-field--contacto {
    flex: 1 1 calc(33.333% - 8px) !important;
  }

  .ps-page .ps-filter-field--busqueda {
    flex: 1 1 calc(66.666% - 8px) !important;
  }

  .ps-page .ps-filter-field--limit {
    flex: 1 1 calc(33.333% - 8px) !important;
  }

  .ps-page .ps-filter-buttons-wrap {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    align-items: flex-end !important;
  }

  .ps-page .ps-filter-buttons {
    width: auto !important;
    min-width: 176px !important;
    max-width: 220px !important;
  }
}

/* Tablet angosta */
@media (max-width: 900px) {
  .ps-page .ps-filter-field--tipo,
  .ps-page .ps-filter-field--estado,
  .ps-page .ps-filter-field--contacto,
  .ps-page .ps-filter-field--limit {
    flex: 1 1 calc(50% - 8px) !important;
  }

  .ps-page .ps-filter-field--busqueda {
    flex: 1 1 100% !important;
  }

  .ps-page .ps-filter-buttons-wrap {
    flex: 1 1 100% !important;
    align-items: stretch !important;
  }

  .ps-page .ps-filter-buttons {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Mobile real */
@media (max-width: 680px) {
  .ps-page .ps-advanced-toolbar-card {
    padding: 11px !important;
    border-radius: 16px !important;
  }

  .ps-page .ps-filter-field--tipo,
  .ps-page .ps-filter-field--busqueda,
  .ps-page .ps-filter-field--estado,
  .ps-page .ps-filter-field--contacto,
  .ps-page .ps-filter-field--limit,
  .ps-page .ps-filter-buttons-wrap {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .ps-page .ps-filter-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Mobile extremo */
@media (max-width: 380px) {
  .ps-page .ps-filter-buttons {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   FASE 14.3.16.7.1 — CENTRAR SOLO BOTONES FILTRO PS
========================================================= */

/* Desktop achicado / tablet: los botones bajan a una fila propia y quedan centrados */
@media (max-width: 1120px) {
  .ps-page .ps-filter-buttons-wrap {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .ps-page .ps-filter-buttons-label {
    width: auto !important;
    text-align: center !important;
  }

  .ps-page .ps-filter-buttons {
    width: auto !important;
    min-width: 176px !important;
    max-width: 220px !important;
    margin-left: auto !important;
    margin-right: auto !important;

    display: grid !important;
    grid-template-columns: repeat(2, minmax(82px, 1fr)) !important;
    gap: 7px !important;
    justify-content: center !important;
  }
}

/* Tablet angosta y mobile: siguen centrados, pero ocupan mejor el ancho disponible */
@media (max-width: 900px) {
  .ps-page .ps-filter-buttons-wrap {
    align-items: center !important;
  }

  .ps-page .ps-filter-buttons {
    width: 100% !important;
    max-width: 320px !important;
    min-width: 0 !important;
  }
}

/* Mobile real: botones centrados y full responsive */
@media (max-width: 680px) {
  .ps-page .ps-filter-buttons {
    width: 100% !important;
    max-width: 420px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Mobile extremo */
@media (max-width: 380px) {
  .ps-page .ps-filter-buttons {
    max-width: 100% !important;
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   FASE 14.3.16.8 — HISTORIAL CRM FILTROS CLEAN RESPONSIVE
   Corrige desborde, huecos y deformación de botones
========================================================= */

.hc-page .hc-advanced-toolbar-card {
  padding: 12px !important;
  overflow: visible !important;
}

.hc-page .hc-toolbar-card,
.hc-page .hc-advanced-toolbar-card {
  overflow: visible !important;
}

.hc-page .hc-toolbar-head {
  margin-bottom: 10px !important;
  padding-bottom: 10px !important;
}

.hc-page .hc-toolbar-kicker {
  font-size: 10.5px !important;
  margin-bottom: 4px !important;
}

.hc-page .hc-toolbar-head h2 {
  font-size: 16px !important;
  margin-bottom: 3px !important;
}

.hc-page .hc-toolbar-head p {
  font-size: 12.5px !important;
  line-height: 1.35 !important;
}

/* Reset total del grid viejo */
.hc-page .hc-advanced-toolbar-grid.hc-filter-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  gap: 8px !important;

  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  grid-template-columns: none !important;
  grid-auto-flow: unset !important;
}

.hc-page .hc-advanced-toolbar-grid.hc-filter-grid > div {
  min-width: 0 !important;
  max-width: 100% !important;
  grid-column: auto !important;
  grid-row: auto !important;
}

/* Anchos base desktop */
.hc-page .hc-filter-field--buscar-por {
  flex: 0 1 176px !important;
}

.hc-page .hc-filter-field--busqueda {
  flex: 1 1 300px !important;
}

.hc-page .hc-filter-field--medio {
  flex: 0 1 178px !important;
}

.hc-page .hc-filter-field--estado {
  flex: 0 1 178px !important;
}

.hc-page .hc-filter-field--evento {
  flex: 0 1 220px !important;
}

.hc-page .hc-filter-field--desde,
.hc-page .hc-filter-field--hasta {
  flex: 0 1 145px !important;
}

.hc-page .hc-filter-field--limit {
  flex: 0 1 118px !important;
}

.hc-page .hc-filter-actions-cell {
  flex: 0 0 168px !important;
  min-width: 168px !important;
  max-width: 190px !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: stretch !important;

  grid-column: auto !important;
}

/* Labels */
.hc-page .hc-filter-grid label,
.hc-page .hc-filter-actions-label {
  display: block !important;
  margin: 0 0 4px 0 !important;
  font-size: 10.5px !important;
  line-height: 1.15 !important;
  font-weight: 850 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.035em !important;
  color: #111111 !important;
}

/* Inputs / selects */
.hc-page .hc-filter-grid input,
.hc-page .hc-filter-grid select {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  min-height: 34px !important;
  height: 34px !important;
  padding: 6px 9px !important;
  border-radius: 10px !important;

  font-size: 12.5px !important;
  line-height: 1.2 !important;

  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  border: 1px solid #d7dce3 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.88) !important;
}

.hc-page .hc-filter-grid input:focus,
.hc-page .hc-filter-grid select:focus {
  border-color: rgba(208, 2, 27, 0.35) !important;
  box-shadow: var(--vmms-focus-ring) !important;
}

/* Botones */
.hc-page .hc-filter-actions-inline {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 7px !important;
  align-items: center !important;
}

.hc-page .hc-filter-action-btn {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;

  height: 34px !important;
  min-height: 34px !important;
  padding: 0 11px !important;
  border-radius: 10px !important;

  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  box-shadow:
    0 2px 7px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255,255,255,0.18) !important;

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease !important;
}

.hc-page .hc-filter-action-btn--buscar {
  background:
    linear-gradient(180deg, rgba(208, 2, 27, 0.92) 0%, rgba(176, 0, 23, 0.94) 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(145, 0, 20, 0.34) !important;
}

.hc-page .hc-filter-action-btn--buscar:hover {
  background:
    linear-gradient(180deg, rgba(220, 16, 42, 0.96) 0%, rgba(208, 2, 27, 0.96) 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow:
    0 6px 14px rgba(208, 2, 27, 0.16),
    inset 0 1px 0 rgba(255,255,255,0.20) !important;
}

.hc-page .hc-filter-action-btn--limpiar {
  background:
    linear-gradient(180deg, #ffffff 0%, #eef2f6 100%) !important;
  color: #111827 !important;
  border: 1px solid #d5dce5 !important;
}

.hc-page .hc-filter-action-btn--limpiar:hover {
  background:
    linear-gradient(180deg, #ffffff 0%, #e8edf3 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow:
    0 5px 12px rgba(15, 23, 42, 0.09),
    inset 0 1px 0 rgba(255,255,255,0.90) !important;
}

.hc-page .hc-filter-action-btn:active {
  transform: translateY(0) !important;
}

/* Pantalla intermedia: botones bajan a fila propia y quedan centrados */
@media (max-width: 1180px) {
  .hc-page .hc-filter-actions-cell {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    align-items: center !important;
  }

  .hc-page .hc-filter-actions-label {
    text-align: center !important;
  }

  .hc-page .hc-filter-actions-inline {
    width: 100% !important;
    max-width: 230px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Tablet */
@media (max-width: 900px) {
  .hc-page .hc-filter-field--buscar-por,
  .hc-page .hc-filter-field--medio,
  .hc-page .hc-filter-field--estado,
  .hc-page .hc-filter-field--evento,
  .hc-page .hc-filter-field--desde,
  .hc-page .hc-filter-field--hasta,
  .hc-page .hc-filter-field--limit {
    flex: 1 1 calc(50% - 8px) !important;
  }

  .hc-page .hc-filter-field--busqueda {
    flex: 1 1 100% !important;
  }

  .hc-page .hc-filter-actions-inline {
    max-width: 320px !important;
  }
}

/* Mobile */
@media (max-width: 680px) {
  .hc-page .hc-advanced-toolbar-card {
    padding: 11px !important;
    border-radius: 16px !important;
  }

  .hc-page .hc-filter-field--buscar-por,
  .hc-page .hc-filter-field--busqueda,
  .hc-page .hc-filter-field--medio,
  .hc-page .hc-filter-field--estado,
  .hc-page .hc-filter-field--evento,
  .hc-page .hc-filter-field--desde,
  .hc-page .hc-filter-field--hasta,
  .hc-page .hc-filter-field--limit,
  .hc-page .hc-filter-actions-cell {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .hc-page .hc-filter-actions-inline {
    width: 100% !important;
    max-width: 420px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Mobile extremo */
@media (max-width: 380px) {
  .hc-page .hc-filter-actions-inline {
    max-width: 100% !important;
    grid-template-columns: 1fr !important;
  }
}

.auto-channels-panel {
  margin: 12px 0 14px !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.auto-channels-details {
  border-radius: 18px;
  background:
    radial-gradient(circle at top left, rgba(220, 38, 38, 0.07), transparent 30%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
  border: 1px solid rgba(148, 163, 184, 0.25);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07);
  overflow: hidden;
}

.auto-channels-summary {
  list-style: none;
  cursor: pointer;
  min-height: 74px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.auto-channels-summary::-webkit-details-marker {
  display: none;
}

.auto-channels-summary-left {
  min-width: 0;
}

.auto-channels-summary-left strong {
  display: block;
  margin-top: 3px;
  color: #0f172a;
  font-size: 15px;
  font-weight: 950;
}

.auto-channels-summary-left small {
  display: block;
  margin-top: 2px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.25;
}

.auto-channels-summary-pills {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px;
}

.auto-channels-summary-pills .auto-channel-status {
  min-height: 24px;
  padding: 4px 8px;
  font-size: 10px;
}

.auto-channels-chevron {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: rgba(17, 24, 39, 0.10);
  color: #111827;
  border: 1px solid rgba(17, 24, 39, 0.12);

  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.auto-channels-chevron::before {
  content: "+";
  transform: translateY(-1px);
}

.auto-channels-summary:hover .auto-channels-chevron {
  background: rgba(17, 24, 39, 0.18);
  color: #111827;
  border-color: rgba(17, 24, 39, 0.22);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
}

.auto-channels-details[open] .auto-channels-chevron {
  background: rgba(17, 24, 39, 0.92);
  color: #ffffff;
  border-color: rgba(17, 24, 39, 0.92);
  transform: none;
}

.auto-channels-details[open] .auto-channels-chevron::before {
  content: "−";
  transform: translateY(-1px);
}

.auto-channels-body {
  padding: 0 18px 18px;
  border-top: 1px solid rgba(226, 232, 240, 0.85);
}

@media (max-width: 900px) {
  .auto-channels-summary {
    flex-direction: column;
    align-items: flex-start;
  }

  .auto-channels-summary-pills {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .auto-channels-summary {
    min-height: auto;
    padding: 12px;
  }

  .auto-channels-body {
    padding: 0 12px 12px;
  }

  .auto-channels-summary-pills .auto-channel-status {
    font-size: 9.5px;
  }
}

/* =========================================================
   HISTORIAL CONTACTOS — SOPORTE VISUAL MULTICANAL CRM
   FASE 14.4.1
========================================================= */

.hc-page .hc-channel-row {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 8px !important;
}

.hc-page .hc-channel-label {
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.045em !important;
}

.hc-page .hc-channel-chip {
  width: auto !important;
  min-height: 25px !important;
  padding: 0 9px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  border: 1px solid #dbe3ec !important;
  background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%) !important;
  color: #334155 !important;
  font-size: 11.5px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-shadow:
    0 3px 8px rgba(15, 23, 42, 0.035),
    inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

.hc-page .hc-channel-chip small {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 18px !important;
  padding: 0 6px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.72) !important;
  color: inherit !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  opacity: 0.86 !important;
}

.hc-page .hc-channel-dot {
  width: 7px !important;
  height: 7px !important;
  min-width: 7px !important;
  border-radius: 999px !important;
  background: #94a3b8 !important;
  box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.14) !important;
}

.hc-page .hc-channel-chip--whatsapp {
  background: #dcfce7 !important;
  color: #166534 !important;
  border-color: #bbf7d0 !important;
}

.hc-page .hc-channel-chip--whatsapp .hc-channel-dot {
  background: #16a34a !important;
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.14) !important;
}

.hc-page .hc-channel-chip--email {
  background: #dbeafe !important;
  color: #1d4ed8 !important;
  border-color: #bfdbfe !important;
}

.hc-page .hc-channel-chip--email .hc-channel-dot {
  background: #2563eb !important;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.14) !important;
}

.hc-page .hc-channel-chip--telefono {
  background: #f3e8ff !important;
  color: #6b21a8 !important;
  border-color: #e9d5ff !important;
}

.hc-page .hc-channel-chip--presencial {
  background: #fff7d6 !important;
  color: #7a4f00 !important;
  border-color: #f5deb3 !important;
}

.hc-page .hc-channel-chip--error {
  background: #fee2e2 !important;
  color: #991b1b !important;
  border-color: #fecaca !important;
}

.hc-page .hc-channel-chip--error .hc-channel-dot {
  background: #dc2626 !important;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.14) !important;
}

.hc-page .hc-channel-chip--omitido,
.hc-page .hc-channel-chip--pendiente {
  background: #f8fafc !important;
  color: #64748b !important;
  border-color: #d7dce3 !important;
}

.hc-page .hc-timeline-content .hc-channel-row {
  margin-top: 6px !important;
}

@media (max-width: 760px) {
  .hc-page .hc-channel-row {
    align-items: flex-start !important;
  }

  .hc-page .hc-channel-chip {
    min-height: 24px !important;
    font-size: 11px !important;
  }
}

/* =========================================================
   FASE 16.5 — DASHBOARD OPERATIVO VMMS / VISUAL PREMIUM BRAND LS
   ========================================================= */

.dash-page .container {
  max-width: var(--vmms-container-max);
}

.dash-operativo-topbar {
  position: relative;
  overflow: hidden;
  align-items: center;
  margin-bottom: 16px;
  padding: 18px 20px;
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(255, 189, 89, 0.18) 0%, transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,0.86) 0%, rgba(248,250,252,0.72) 100%);
  border: 1px solid rgba(208, 2, 27, 0.10);
  box-shadow:
    0 16px 38px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.86);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.dash-operativo-topbar::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 0;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--vmms-red) 0%, var(--vmms-yellow) 100%);
}

.dash-operativo-topbar .page-topbar-icon {
  background:
    linear-gradient(180deg, rgba(208, 2, 27, 0.12) 0%, rgba(255, 189, 89, 0.18) 100%);
  color: var(--vmms-red);
  font-weight: 650;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.75),
    0 8px 18px rgba(208, 2, 27, 0.10);
}

.dash-operativo-topbar .titulo-principal {
  font-weight: 720;
  letter-spacing: -0.025em;
}

.dash-operativo-topbar p {
  margin-top: 3px;
  color: #555;
  font-size: 0.92rem;
  font-weight: 400;
  line-height: 1.42;
}

/* Secciones como bloques de página */

.dash-section {
  position: relative;
  overflow: hidden;
  margin-top: 16px;
  padding: 18px;
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(255, 189, 89, 0.10) 0%, transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,0.78) 0%, rgba(248,250,252,0.64) 100%);
  border: 1px solid rgba(229, 231, 235, 0.92);
  box-shadow:
    0 18px 42px rgba(15, 23, 42, 0.07),
    inset 0 1px 0 rgba(255,255,255,0.86);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.dash-section::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 0;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(208,2,27,0.82) 0%, rgba(255,189,89,0.82) 100%);
  opacity: 0.86;
}

.dash-section-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.dash-section-head h2 {
  margin: 4px 0 4px;
  color: #111111;
  font-size: 1.12rem;
  font-weight: 680;
  letter-spacing: -0.025em;
}

.dash-section-head p {
  margin: 0;
  max-width: 760px;
  color: #666;
  font-size: 0.84rem;
  font-weight: 400;
  line-height: 1.45;
}

.dash-section-head--compact {
  align-items: flex-start;
  margin-bottom: 14px;
}

.dash-section-head--compact h2 {
  margin-bottom: 0;
}

.dash-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--vmms-red);
  font-size: 0.68rem;
  font-weight: 680;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.dash-kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--vmms-red), var(--vmms-yellow));
  box-shadow: 0 0 0 5px rgba(208, 2, 27, 0.08);
}

.dash-date-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.70);
  border: 1px solid rgba(229, 231, 235, 0.92);
  color: #111111;
  font-size: 0.77rem;
  font-weight: 650;
  box-shadow:
    0 8px 18px rgba(15, 23, 42, 0.05),
    inset 0 1px 0 rgba(255,255,255,0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  white-space: nowrap;
}

/* KPI Cards */

.dash-kpi-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.dash-kpi-card {
  position: relative;
  overflow: hidden;
  min-height: 118px;
  padding: 17px 17px 15px;
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(255, 189, 89, 0.12), transparent 36%),
    linear-gradient(145deg, rgba(255,255,255,0.82) 0%, rgba(248,250,252,0.70) 100%);
  border: 1px solid rgba(226, 232, 240, 0.90);
  box-shadow:
    0 14px 32px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255,255,255,0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.dash-kpi-card::before {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: 0;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--vmms-red), var(--vmms-yellow));
  opacity: 0.78;
}

.dash-kpi-card::after {
  content: "";
  position: absolute;
  right: -42px;
  bottom: -48px;
  width: 122px;
  height: 122px;
  border-radius: 999px;
  background: rgba(255, 189, 89, 0.08);
  pointer-events: none;
}

.dash-kpi-card span {
  position: relative;
  z-index: 1;
  display: block;
  margin-bottom: 8px;
  color: #666;
  font-size: 0.74rem;
  font-weight: 620;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

.dash-kpi-card strong {
  position: relative;
  z-index: 1;
  display: block;
  color: #111111;
  font-size: clamp(1.48rem, 1.9vw, 2rem);
  font-weight: 760;
  line-height: 1;
  letter-spacing: -0.045em;
}

.dash-kpi-card small {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 10px;
  color: #555;
  font-size: 0.78rem;
  font-weight: 420;
  line-height: 1.35;
}

.dash-kpi-card--primary {
  background:
    radial-gradient(circle at top right, rgba(255, 189, 89, 0.20), transparent 36%),
    linear-gradient(135deg, rgba(8, 8, 10, 0.96), rgba(24, 24, 28, 0.90));
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow:
    0 18px 42px rgba(15, 23, 42, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.10);
}

.dash-kpi-card--primary::before {
  background: linear-gradient(90deg, var(--vmms-red), var(--vmms-yellow));
  opacity: 1;
}

.dash-kpi-card--primary span,
.dash-kpi-card--primary small {
  color: rgba(255,255,255,0.68);
}

.dash-kpi-card--primary strong {
  color: #ffffff;
}

.dash-kpi-card--primary::after {
  background: rgba(208, 2, 27, 0.16);
}

.dash-kpi-card--money {
  background:
    radial-gradient(circle at top right, rgba(208, 2, 27, 0.09), transparent 35%),
    radial-gradient(circle at bottom right, rgba(255, 189, 89, 0.13), transparent 38%),
    linear-gradient(145deg, rgba(255,255,255,0.84) 0%, rgba(248,250,252,0.72) 100%);
}

/* Bloques inferiores */

.dash-grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.82fr);
  gap: 16px;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.dash-grid-2::before {
  display: none;
}

.dash-attention-card,
.dash-system-card,
.dash-reports-card {
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(255, 189, 89, 0.10), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,0.80), rgba(248,250,252,0.66));
  border: 1px solid rgba(226, 232, 240, 0.90);
  box-shadow:
    0 18px 42px rgba(15, 23, 42, 0.07),
    inset 0 1px 0 rgba(255,255,255,0.84);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* Alertas operativas */

.dash-alert-list {
  display: grid;
  gap: 10px;
}

.dash-alert-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 70px;
  padding: 13px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,0.70);
  border: 1px solid rgba(226,232,240,0.86);
  color: inherit;
  text-decoration: none;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}

.dash-alert-item:hover {
  transform: translateY(-1px);
  border-color: rgba(208, 2, 27, 0.20);
  background: rgba(255,255,255,0.88);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.07);
}

.dash-alert-item strong {
  display: block;
  color: #111111;
  font-size: 0.86rem;
  font-weight: 680;
  letter-spacing: -0.015em;
}

.dash-alert-item span {
  display: block;
  margin-top: 3px;
  color: #666;
  font-size: 0.76rem;
  font-weight: 400;
  line-height: 1.32;
}

.dash-alert-item b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, #151515 0%, #050505 100%);
  color: #ffffff;
  font-size: 0.92rem;
  font-weight: 720;
  box-shadow:
    0 10px 22px rgba(15, 23, 42, 0.15),
    inset 0 1px 0 rgba(255,255,255,0.12);
}

/* Sistema */

.dash-system-grid {
  display: grid;
  gap: 10px;
}

.dash-system-grid div {
  padding: 13px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,0.70);
  border: 1px solid rgba(226,232,240,0.86);
}

.dash-system-grid strong {
  display: block;
  margin-bottom: 4px;
  color: #666;
  font-size: 0.68rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.065em;
}

.dash-system-grid span {
  display: block;
  color: #111111;
  font-size: 0.83rem;
  font-weight: 500;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* Tabla de reportes */

.dash-reports-card {
  padding: 0;
  overflow: hidden;
}

.dash-reports-table-wrap {
  width: 100%;
  overflow: visible;
}

.dash-reports-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 0;
}

.dash-reports-table th,
.dash-reports-table td {
  padding: 9px 8px;
  text-align: left;
  border-bottom: 1px solid rgba(226, 232, 240, 0.82);
  vertical-align: middle;
}

.dash-reports-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(17,17,17,0.94) 0%, rgba(31,31,34,0.92) 100%);
  color: rgba(255,255,255,0.74);
  font-size: 0.62rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.065em;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.dash-reports-table td {
  color: #111111;
  font-size: 0.76rem;
  font-weight: 430;
  background: rgba(255,255,255,0.54);
}

.dash-reports-table tbody tr:hover td {
  background: rgba(255, 247, 214, 0.54);
}

.dash-reports-table tbody tr:last-child td {
  border-bottom: 0;
}

.dash-report-view-btn {
  width: auto !important;
  min-height: 26px !important;
  padding: 0 9px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background:
    linear-gradient(180deg, rgba(208, 2, 27, 0.92) 0%, rgba(145, 0, 20, 0.94) 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(120, 0, 18, 0.34) !important;
  font-size: 0.66rem !important;
  font-weight: 550 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  box-shadow:
    0 8px 16px rgba(208, 2, 27, 0.14),
    inset 0 1px 0 rgba(255,255,255,0.18) !important;
  transition:
    transform 0.18s ease,
    filter 0.18s ease,
    box-shadow 0.18s ease !important;
}

.dash-report-view-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow:
    0 10px 20px rgba(208, 2, 27, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.20) !important;
}

.dash-page .dash-report-date-cell {
  font-weight: 750;
  white-space: nowrap;
}

.dash-page .dash-report-money-cell {
  font-weight: 750;
  white-space: nowrap;
}

.dash-page .dash-report-state-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(220,252,231,0.82);
  color: #166534;
  border: 1px solid rgba(187,247,208,0.95);
  font-size: 0.68rem;
  font-weight: 850;
  white-space: nowrap;
}

.dash-page .dash-report-empty-cell {
  text-align: center !important;
  color: #64748b !important;
  font-weight: 750 !important;
}

/* FASE 17.9.1 — Filtros históricos de reportes diarios */

.dash-page .dash-report-filter-panel {
  margin-bottom: 12px;
  padding: 12px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(248,250,252,0.82) 100%);
  border: 1px solid rgba(226,232,240,0.95);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.82),
    0 4px 12px rgba(15,23,42,0.045);
}

.dash-page .dash-report-filter-grid {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr) 110px;
  gap: 10px;
  align-items: end;
}

.dash-page .dash-report-filter-grid > div {
  min-width: 0;
}

.dash-page .dash-report-filter-grid button {
  width: 100%;
  min-height: 36px;
  border-radius: 11px;
  font-size: 12px;
  white-space: nowrap;
}

.dash-page .dash-report-filter-status {
  width: fit-content;
  max-width: 100%;
  margin: 10px auto 0;
  padding: 5px 8px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,248,223,0.72) 0%, rgba(255,243,199,0.48) 100%);
  border: 1px solid rgba(245,222,179,0.82);
  color: #7a4f00;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}

@media (max-width: 900px) {
  .dash-page .dash-report-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dash-page .dash-report-filter-grid > div:last-child {
    grid-column: 1 / -1;
    max-width: 180px;
    justify-self: center;
    width: 100%;
  }
}

@media (max-width: 620px) {
  .dash-page .dash-report-filter-grid {
    grid-template-columns: 1fr;
  }
}

/* Responsive */

@media (max-width: 1180px) {
  .dash-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dash-grid-2 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .dash-operativo-topbar {
    align-items: stretch;
    padding: 16px;
  }

  .dash-section {
    padding: 15px;
    border-radius: 22px;
  }

  .dash-section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .dash-date-pill {
    width: 100%;
  }

  .dash-kpi-grid {
    grid-template-columns: 1fr;
  }

  .dash-kpi-card {
    min-height: 112px;
    border-radius: 21px;
  }

  .dash-alert-item {
    align-items: flex-start;
  }

  .dash-alert-item b {
    min-width: 36px;
    height: 36px;
  }
}

@media (max-width: 480px) {
  .dash-section-head h2 {
    font-size: 1.02rem;
  }

  .dash-kpi-card strong {
    font-size: 1.62rem;
  }

  .dash-reports-table th,
  .dash-reports-table td {
    padding: 8px 5px;
    font-size: 0.68rem;
  }

  .dash-report-view-btn {
    min-height: 24px !important;
    padding: 0 7px !important;
    font-size: 0.62rem !important;
  }
}


/* =========================================================
   FASE 16.6 — REPORTE DASHBOARD PDF IMPRIMIBLE A4
   ========================================================= */

@page {
  size: A4;
  margin: 8mm;
}

.rd-page {
  min-height: 100vh;
  margin: 0;
  padding: 18px;
  font-family: var(--vmms-font-family);
  background:
    radial-gradient(circle at top left, rgba(208, 2, 27, 0.08) 0%, transparent 30%),
    radial-gradient(circle at top right, rgba(255, 189, 89, 0.14) 0%, transparent 28%),
    linear-gradient(180deg, #f3f4f6 0%, #e9edf2 100%);
  color: #111111;
}

.rd-page * {
  box-sizing: border-box;
}

.rd-toolbar {
  width: 210mm;
  max-width: 100%;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.rd-btn {
  width: auto !important;
  min-width: 180px;
  min-height: 38px;
  padding: 0 15px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  font-size: 13px;
  font-weight: 650;
  line-height: 1;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease;
}

.rd-btn:hover {
  transform: translateY(-1px);
}

.rd-btn--primary {
  background:
    linear-gradient(180deg, rgba(208, 2, 27, 0.94) 0%, rgba(145, 0, 20, 0.96) 100%);
  color: #ffffff;
  border-color: rgba(120, 0, 18, 0.34);
  box-shadow:
    0 10px 22px rgba(208, 2, 27, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.20);
}

.rd-btn--soft {
  background:
    linear-gradient(180deg, #ffffff 0%, #eef2f6 100%);
  color: #111111;
  border-color: #d5dce5;
  box-shadow:
    0 6px 14px rgba(15,23,42,0.06),
    inset 0 1px 0 rgba(255,255,255,0.92);
}

/* Documento A4 */

.rd-document {
  width: 210mm;
  max-width: 100%;
  min-height: 297mm;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 22px;
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
  border: 1px solid rgba(17, 17, 17, 0.14);
  outline: 1px solid rgba(208, 2, 27, 0.10);
  outline-offset: -8px;
  box-shadow:
    0 24px 50px rgba(15, 23, 42, 0.10),
    0 6px 18px rgba(15, 23, 42, 0.05),
    inset 0 0 0 8px rgba(248, 250, 252, 0.72),
    inset 0 1px 0 rgba(255,255,255,0.94);
}

.rd-hero {
  position: relative;
  overflow: hidden;
  min-height: 126px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.18) 0%, transparent 34%),
    linear-gradient(135deg, #08080a 0%, #16161a 58%, #0b0b0d 100%);
  color: #ffffff;
  border-bottom: 4px solid var(--vmms-red);
}

.rd-hero::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 6px;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(180deg, var(--vmms-red) 0%, var(--vmms-yellow) 100%);
  box-shadow: 0 0 18px rgba(208, 2, 27, 0.28);
}

.rd-brand {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}

.rd-logo-wrap {
  width: 66px;
  height: 66px;
  min-width: 66px;
  border-radius: 18px;
  padding: 4px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(245,245,245,0.92) 100%);
  border: 1px solid rgba(255,255,255,0.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 12px 26px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -1px 0 rgba(0,0,0,0.06);
}

.rd-logo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.rd-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  margin-bottom: 7px;
  border-radius: 999px;
  background: rgba(208, 2, 27, 0.22);
  border: 1px solid rgba(208, 2, 27, 0.26);
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.rd-hero h1 {
  margin: 0 0 5px;
  color: #ffffff;
  font-size: 30px;
  line-height: 1.05;
  font-weight: 720;
  letter-spacing: -0.03em;
}

.rd-hero p {
  margin: 0;
  max-width: 560px;
  color: rgba(255,255,255,0.74);
  font-size: 13px;
  line-height: 1.4;
}

.rd-hero-side {
  position: relative;
  z-index: 1;
  min-width: 170px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.rd-date-chip,
.rd-state-chip {
  min-height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
}

.rd-date-chip {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.08) 100%);
  border: 1px solid rgba(255,255,255,0.14);
  color: #ffffff;
}

.rd-state-chip {
  background: rgba(255,189,89,0.16);
  border: 1px solid rgba(255,189,89,0.22);
  color: var(--vmms-yellow);
}

/* Contenido */

.rd-content {
  padding: 18px 22px 20px;
}

.rd-section {
  margin-bottom: 15px;
}

.rd-section-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
  padding-bottom: 7px;
  border-bottom: 1px solid #e5e7eb;
}

.rd-section-title span {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(208, 2, 27, 0.10) 0%, rgba(255, 189, 89, 0.16) 100%);
  color: var(--vmms-red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 650;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.78),
    0 4px 10px rgba(15,23,42,0.045);
}

.rd-section-title h2 {
  margin: 0;
  color: #111111;
  font-size: 15.5px;
  line-height: 1.15;
  font-weight: 680;
  letter-spacing: -0.01em;
}

.rd-kpi-grid {
  display: grid;
  gap: 10px;
}

.rd-kpi-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rd-kpi {
  position: relative;
  overflow: hidden;
  min-height: 88px;
  padding: 14px;
  border-radius: 16px;
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.10) 0%, transparent 34%),
    linear-gradient(145deg, #ffffff 0%, #f8fafc 58%, #eef2f6 100%);
  border: 1px solid #dfe7f0;
  box-shadow:
    0 8px 18px rgba(15, 23, 42, 0.045),
    inset 0 1px 0 rgba(255,255,255,0.92),
    inset 0 -3px 8px rgba(15,23,42,0.02);
}

.rd-kpi::before {
  content: "";
  position: absolute;
  top: 0;
  left: 14px;
  right: 14px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--vmms-red) 0%, var(--vmms-yellow) 100%);
  opacity: 0.90;
}

.rd-kpi small {
  display: block;
  margin-bottom: 8px;
  color: #666;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

.rd-kpi strong {
  display: block;
  color: #111111;
  font-size: 24px;
  line-height: 1;
  font-weight: 720;
  letter-spacing: -0.035em;
}

.rd-kpi--dark {
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.18) 0%, transparent 34%),
    linear-gradient(135deg, #111111 0%, #1c1c20 100%);
  border-color: rgba(255,255,255,0.10);
}

.rd-kpi--dark small {
  color: rgba(255,255,255,0.68);
}

.rd-kpi--dark strong {
  color: #ffffff;
}

.rd-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.rd-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rd-box {
  position: relative;
  overflow: hidden;
  min-height: 74px;
  padding: 11px 12px;
  border-radius: 14px;
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.07) 0%, transparent 34%),
    linear-gradient(145deg, #ffffff 0%, #f8fafc 58%, #eef2f6 100%);
  border: 1px solid #dfe7f0;
  box-shadow:
    0 6px 14px rgba(15, 23, 42, 0.04),
    inset 0 1px 0 rgba(255,255,255,0.92),
    inset 0 -3px 8px rgba(15,23,42,0.02);
}

.rd-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12px;
  right: 12px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--vmms-red) 0%, var(--vmms-yellow) 100%);
  opacity: 0.78;
}

.rd-box strong {
  display: block;
  margin-bottom: 6px;
  color: #666;
  font-size: 10.8px;
  line-height: 1.15;
  font-weight: 550;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

.rd-box p {
  margin: 0;
  color: #111111;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 680;
  word-break: break-word;
}

.rd-note {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 15px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px dashed #cbd5e1;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.92);
}

.rd-note strong {
  display: block;
  margin-bottom: 6px;
  color: #111111;
  font-size: 12px;
  font-weight: 680;
}

.rd-note p,
.rd-note li {
  color: #555;
  font-size: 12.5px;
  line-height: 1.4;
}

.rd-note p {
  margin: 0;
}

.rd-note ul {
  margin: 0;
  padding-left: 18px;
}

.rd-footer {
  margin: 0 22px 20px;
  padding-top: 12px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: #666;
  font-size: 11px;
  line-height: 1.35;
}

.rd-footer strong {
  color: #111111;
  font-weight: 680;
}

/* Impresión / Guardar PDF */

@media print {
  @page {
    size: A4;
    margin: 8mm;
  }

  html,
  body {
    width: 210mm !important;
    min-height: 297mm !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .rd-toolbar {
    display: none !important;
  }

  .rd-page {
    width: 210mm !important;
    min-height: 297mm !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .rd-document {
    width: 210mm !important;
    max-width: 210mm !important;
    min-height: 297mm !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    box-shadow:
      inset 0 0 0 8px rgba(248, 250, 252, 0.72),
      inset 0 1px 0 rgba(255,255,255,0.94) !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .rd-hero,
  .rd-logo-wrap,
  .rd-date-chip,
  .rd-state-chip,
  .rd-content,
  .rd-section,
  .rd-kpi,
  .rd-box,
  .rd-note,
  .rd-footer {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .rd-document,
  .rd-hero,
  .rd-section,
  .rd-kpi,
  .rd-box,
  .rd-note {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .rd-content {
    padding: 15px 18px 16px !important;
  }

  .rd-section {
    margin-bottom: 11px !important;
  }

  .rd-hero {
    min-height: 108px !important;
    padding: 16px 20px !important;
  }

  .rd-logo-wrap {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
  }

  .rd-hero h1 {
    font-size: 26px !important;
  }

  .rd-hero p {
    font-size: 11.5px !important;
  }

  .rd-kpi {
    min-height: 74px !important;
    padding: 11px 12px !important;
  }

  .rd-kpi strong {
    font-size: 20px !important;
  }

  .rd-box {
    min-height: 58px !important;
    padding: 9px 10px !important;
  }

  .rd-box p {
    font-size: 13px !important;
  }

  .rd-footer {
    margin: 0 18px 16px !important;
  }
}

/* Responsive pantalla */

@media screen and (max-width: 760px) {
  .rd-page {
    padding: 12px;
  }

  .rd-toolbar {
    width: 100%;
    flex-direction: column;
  }

  .rd-btn {
    width: 100% !important;
    min-width: 0;
  }

  .rd-document {
    width: 100%;
    min-height: auto;
    border-radius: 20px;
  }

  .rd-hero {
    align-items: flex-start;
    flex-direction: column;
    padding: 18px;
  }

  .rd-brand {
    align-items: center;
  }

  .rd-logo-wrap {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 16px;
  }

  .rd-hero h1 {
    font-size: 25px;
  }

  .rd-hero-side {
    min-width: 0;
    width: 100%;
    align-items: flex-start;
  }

  .rd-content {
    padding: 16px;
  }

  .rd-kpi-grid--2,
  .rd-grid,
  .rd-grid--2 {
    grid-template-columns: 1fr;
  }

  .rd-footer {
    margin: 0 16px 18px;
  }
}

/* =========================================================
   FIX ICONOS ROTOS — HISTORIAL CONTACTOS + AUTOMATIZACIONES
   Usa escapes CSS en lugar de caracteres Unicode directos
========================================================= */

/* Base segura para pseudo-iconos */
.hc-page .hc-meta-pill::before,
.hc-page .hc-note-action--manual::before,
.hc-page .hc-note-action--auto::before,
.auto-page #autoBtnActualizar::before,
.auto-page #autoBtnLimpiar::before,
.auto-page #autoBtnActualizarPlantillas::before {
  font-family: Arial, sans-serif !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  text-rendering: auto !important;
}

/* Historial CRM — badges automáticos */
.hc-page .hc-meta-pill--auto-servicio::before {
  content: "\2713" !important;
  margin-right: 5px !important;
  font-weight: 900 !important;
  color: #15803d !important;
}

.hc-page .hc-meta-pill--auto-proximo::before {
  content: "\25B6" !important;
  margin-right: 5px !important;
  font-weight: 900 !important;
  font-size: 10px !important;
}

.hc-page .hc-meta-pill--auto-vencido::before {
  content: "\0021" !important;
  margin-right: 5px !important;
  font-weight: 900 !important;
}

.hc-page .hc-meta-pill--auto-postventa::before {
  content: "\2605" !important;
  margin-right: 5px !important;
  font-weight: 900 !important;
}

.hc-page .hc-meta-pill--origen::before {
  content: "AUTO" !important;
  margin-right: 6px !important;
  padding: 1px 5px !important;
  border-radius: 999px !important;
  background: rgba(22, 101, 52, 0.10) !important;
  color: #166534 !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: 0.03em !important;
}

/* Historial CRM — botones nota / mensaje */
.hc-page .hc-note-action--manual::before {
  content: "\270E" !important;
  margin-right: 5px !important;
  font-weight: 900 !important;
  opacity: 0.78 !important;
}

.hc-page .hc-note-action--auto::before {
  content: "\25C9" !important;
  margin-right: 5px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

/* Automatizaciones — botones de filtros */
.auto-page #autoBtnActualizar::before {
  content: "\21BB" !important;
  margin-right: 5px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  opacity: 0.82 !important;
}

.auto-page #autoBtnLimpiar::before {
  content: "\00D7" !important;
  margin-right: 5px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  opacity: 0.60 !important;
}

.auto-page #autoBtnActualizarPlantillas::before {
  content: "\21BB" !important;
  margin-right: 5px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  opacity: 0.75 !important;
}


/* =========================================================
   FASE 17.8 — CONSULTAS TÉCNICAS + SUGERENCIAS PREMIUM
========================================================= */

/* =========================
   CONSULTAS TÉCNICAS
========================= */

.cap-page .cap-layout-premium {
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

.cap-page .cap-search-panel-premium {
  display: grid;
  grid-template-columns: minmax(150px, 0.9fr) minmax(220px, 1.15fr) minmax(118px, 0.35fr) minmax(118px, 0.35fr);
  gap: 10px;
  align-items: end;
  padding: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.88) 0%, rgba(248,250,252,0.78) 100%);
  border: 1px solid rgba(226,232,240,0.95);
  box-shadow:
    0 8px 20px rgba(15,23,42,0.055),
    inset 0 1px 0 rgba(255,255,255,0.90);
}

.cap-page .cap-search-panel-premium .cap-form-grid {
  display: contents;
}

.cap-page .cap-actions-premium {
  display: contents;
}

.cap-page .cap-actions-premium .btn,
.cap-page .cap-actions-premium button {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 42px;
  padding: 8px 10px;
  font-size: 12px;
  border-radius: 11px;
  white-space: nowrap;
}

.cap-page #respuestaBusqueda {
  grid-column: 1 / -1;
  margin-top: 0;
}

.cap-page .cap-results-panel-premium {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(248,250,252,0.82) 100%);
  border: 1px solid rgba(226,232,240,0.95);
  box-shadow:
    0 8px 20px rgba(15,23,42,0.055),
    inset 0 1px 0 rgba(255,255,255,0.90);
}

.cap-page .cap-results-list {
  max-height: none;
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 0;
}

.cap-page .cap-result-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid rgba(226,232,240,0.95);
  box-shadow: 0 3px 10px rgba(15,23,42,0.04);
}

.cap-page .cap-result-item::before {
  display: none !important;
}

.cap-page .cap-result-title {
  margin-bottom: 0;
  font-size: 14px;
  line-height: 1.15;
  font-weight: 700;
  min-width: 260px;
}

.cap-page .cap-result-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px 8px;
  font-size: 12px;
  color: #536179;
  text-align: right;
  line-height: 1.2;
}

/* Acordeón técnico compacto */
.cap-page .cap-maintenance-card--compact {
  padding: 0;
  overflow: hidden;
  border: 1px solid #111111;
  background: #ffffff;
  box-shadow: var(--vmms-shadow-xs);
}

.cap-page .cap-maintenance-toggle {
  width: 100%;
  min-height: 56px;
  padding: 12px 14px;
  border: none;
  background: linear-gradient(180deg, #111111 0%, #1b1b1f 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: none;
  text-align: left;
}

.cap-page .cap-maintenance-toggle:hover {
  background: linear-gradient(180deg, #151515 0%, #242428 100%);
  color: #ffffff;
  filter: none;
}

.cap-page .cap-maintenance-toggle:hover strong {
  color: #ffffff;
}

.cap-page .cap-maintenance-toggle:hover small {
  color: rgba(255,255,255,0.68);
}

.cap-page .cap-maintenance-toggle-main {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.cap-page .cap-maintenance-mini-icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(180,83,9,0.10);
  color: var(--vmms-warning);
}

.cap-page .cap-maintenance-toggle strong {
  display: block;
  font-size: 13px;
  line-height: 1.15;
  color: #ffffff;
}

.cap-page .cap-maintenance-toggle small {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.25;
  color: rgba(255,255,255,0.62);
}

.cap-page .cap-maintenance-chevron {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #4b5563;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.22s ease;
}

.cap-page .cap-maintenance-card--compact.is-open .cap-maintenance-chevron {
  transform: rotate(180deg);
}

.cap-page .cap-maintenance-card--compact .cap-maintenance-body {
  padding: 0 13px 13px;
}

/* =========================================================
   FASE 17.12.2 / 17.12.3 — Consolidar modelos
========================================================= */

.cap-page .cap-consolidar-modelos-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(226,232,240,0.96);
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.12) 0%, transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
}

.cap-page .cap-consolidar-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(226,232,240,0.92);
}

.cap-page .cap-consolidar-head h2 {
  margin: 0 0 5px 0;
  padding: 0;
  border: none;
  font-size: 17px;
  line-height: 1.15;
}

.cap-page .cap-consolidar-head p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.35;
}

.cap-page .cap-consolidar-safe-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0 11px;
  border-radius: 999px;
  background: #fff7d6;
  color: #7a4f00;
  border: 1px solid #f5deb3;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

.cap-page .cap-consolidar-search-grid {
  display: grid;
  grid-template-columns: minmax(120px, 0.75fr) minmax(180px, 1fr) 118px;
  gap: 10px;
  align-items: end;
}

.cap-page .cap-consolidar-final-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 180px;
  gap: 10px;
  align-items: end;
}

.cap-page .cap-consolidar-final-grid button {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 42px;
  padding: 8px 10px;
  font-size: 12px;
  border-radius: 11px;
  white-space: nowrap;
}

.cap-page .cap-consolidar-status {
  width: fit-content;
  max-width: 100%;
  margin: 12px auto 0;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(248,250,252,0.92);
  border: 1px solid rgba(226,232,240,0.95);
  color: #475569;
  font-size: 12px;
  font-weight: 750;
  text-align: center;
}

.cap-page .cap-consolidar-status--ok {
  background: #dcfce7;
  color: #166534;
  border-color: #bbf7d0;
}

.cap-page .cap-consolidar-status--error {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fecaca;
}

.cap-page .cap-consolidar-results {
  margin-top: 12px;
  display: grid;
  gap: 8px;
}

.cap-page .cap-consolidar-variant-item {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin: 0;
  padding: 10px 11px;
  border-radius: 14px;
  border: 1px solid rgba(226,232,240,0.95);
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  box-shadow:
    0 4px 10px rgba(15,23,42,0.035),
    inset 0 1px 0 rgba(255,255,255,0.90);
  cursor: pointer;
}

.cap-page .cap-consolidar-variant-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--vmms-red);
}

.cap-page .cap-consolidar-variant-body {
  min-width: 0;
}

.cap-page .cap-consolidar-variant-body strong {
  display: block;
  color: #111111;
  font-size: 13px;
  line-height: 1.15;
}

.cap-page .cap-consolidar-variant-body small {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 11.5px;
  line-height: 1.2;
}


.cap-page .cap-consolidar-final-panel {
  margin-top: 12px;
  padding: 12px;
  border-radius: 15px;
  border: 1px solid rgba(245,222,179,0.92);
  background:
    linear-gradient(180deg, rgba(255,248,223,0.82) 0%, rgba(255,255,255,0.92) 100%);
}

.cap-page .cap-consolidar-note {
  margin-top: 9px;
  color: #7a4f00;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 700;
  text-align: center;
}

@media (max-width: 1000px) {
  .cap-page .cap-consolidar-search-grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr) 118px;
  }

  .cap-page .cap-consolidar-search-grid > div:last-child {
    grid-column: auto;
    display: block;
  }

  .cap-page .cap-consolidar-final-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .cap-page .cap-consolidar-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .cap-page .cap-consolidar-search-grid,
  .cap-page .cap-consolidar-variant-item {
    grid-template-columns: 1fr;
  }

  .cap-page .cap-consolidar-search-grid > div:last-child {
    grid-column: auto;
    display: block;
  }

  .cap-page .cap-consolidar-search-grid button {
    width: 100% !important;
  }
}

/* =========================================================
   FASE 17.12.4.1 — Modal premium consolidar modelos
========================================================= */

.cap-page .cap-consolidar-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--vmms-z-modal);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(17, 24, 39, 0.58);
}

.cap-page .cap-consolidar-modal-box {
  width: 100%;
  max-width: 620px;
  overflow: hidden;
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.13) 0%, transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
  border: 1px solid rgba(226,232,240,0.96);
  box-shadow:
    0 28px 70px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.92);
}

.cap-page .cap-consolidar-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px;
  background:
    linear-gradient(135deg, #08080a 0%, #151519 60%, #0b0b0d 100%);
  color: #ffffff;
  border-bottom: 4px solid var(--vmms-red);
}

.cap-page .cap-consolidar-modal-title-wrap {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}

.cap-page .cap-consolidar-modal-icon {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.08) 100%);
  border: 1px solid rgba(255,255,255,0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    0 10px 18px rgba(0,0,0,0.14);
}

.cap-page .cap-consolidar-modal-kicker {
  display: inline-flex;
  margin-bottom: 5px;
  color: var(--vmms-yellow);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cap-page .cap-consolidar-modal-header h3 {
  margin: 0;
  color: #ffffff;
  font-size: 19px;
  line-height: 1.1;
}

.cap-page .cap-consolidar-modal-header p {
  margin: 5px 0 0;
  color: rgba(255,255,255,0.68);
  font-size: 12.5px;
  line-height: 1.35;
}

.cap-page .cap-consolidar-modal-close {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.10) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  font-size: 22px !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

.cap-page .cap-consolidar-modal-close:hover {
  background: rgba(255,255,255,0.18) !important;
}

.cap-page .cap-consolidar-modal-content {
  padding: 18px 20px 0;
}

.cap-page .cap-consolidar-modal-alert {
  padding: 13px 14px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,248,223,0.88) 0%, rgba(255,255,255,0.94) 100%);
  border: 1px solid #f5deb3;
  color: #7a4f00;
}

.cap-page .cap-consolidar-modal-alert strong {
  display: block;
  margin-bottom: 5px;
  color: #111111;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

.cap-page .cap-consolidar-modal-alert p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.4;
}

.cap-page .cap-consolidar-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.cap-page .cap-consolidar-modal-grid > div,
.cap-page .cap-consolidar-modal-section {
  border-radius: 15px;
  border: 1px solid #e2e8f0;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  padding: 12px;
  box-shadow:
    0 5px 13px rgba(15,23,42,0.04),
    inset 0 1px 0 rgba(255,255,255,0.90);
}

.cap-page .cap-consolidar-modal-grid strong,
.cap-page .cap-consolidar-modal-section > strong {
  display: block;
  margin-bottom: 6px;
  color: #111111;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

.cap-page .cap-consolidar-modal-grid span {
  color: #111111;
  font-size: 13px;
  font-weight: 800;
  word-break: break-word;
}

.cap-page .cap-consolidar-modal-section {
  margin-top: 12px;
}

.cap-page .cap-consolidar-modal-lista {
  display: grid;
  gap: 7px;
}

.cap-page .cap-consolidar-modal-lista span {
  display: block;
  padding: 8px 10px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #111111;
  font-size: 12.5px;
  font-weight: 750;
}

.cap-page .cap-consolidar-modal-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 13px 0 0;
  padding: 12px;
  border-radius: 15px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  cursor: pointer;
}

.cap-page .cap-consolidar-modal-check input {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--vmms-red);
  flex-shrink: 0;
}

.cap-page .cap-consolidar-modal-check span {
  color: #374151;
  font-size: 12.5px;
  line-height: 1.35;
  font-weight: 700;
}

.cap-page .cap-consolidar-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 20px 20px;
}

.cap-page .cap-consolidar-modal-actions .btn,
.cap-page .cap-consolidar-modal-actions button {
  width: auto;
  min-width: 150px;
  min-height: 36px;
  font-size: 12.5px;
}

@media (max-width: 620px) {
  .cap-page .cap-consolidar-modal-overlay {
    padding: 12px;
  }

  .cap-page .cap-consolidar-modal-header {
    padding: 16px;
  }

  .cap-page .cap-consolidar-modal-title-wrap {
    align-items: flex-start;
  }

  .cap-page .cap-consolidar-modal-content {
    padding: 15px 16px 0;
  }

  .cap-page .cap-consolidar-modal-grid {
    grid-template-columns: 1fr;
  }

  .cap-page .cap-consolidar-modal-actions {
    flex-direction: column;
    padding: 14px 16px 16px;
  }

  .cap-page .cap-consolidar-modal-actions .btn,
  .cap-page .cap-consolidar-modal-actions button {
    width: 100%;
  }
}

/* =========================================================
   FASE 17.12.6 — Editar filtros técnicos detectados
========================================================= */

.cap-page .cap-filter-option-chip--editable {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  text-align: left !important;
}

.cap-page .cap-filter-edit-btn {
  width: auto !important;
  min-width: 58px !important;
  min-height: 24px !important;
  padding: 0 9px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(208, 2, 27, 0.18) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(255,248,223,0.78) 100%) !important;
  color: #7a4f00 !important;
  font-size: 10.8px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  box-shadow:
    0 2px 6px rgba(15,23,42,0.045),
    inset 0 1px 0 rgba(255,255,255,0.88) !important;
}

.cap-page .cap-filter-edit-btn:hover {
  background:
    linear-gradient(180deg, rgba(255,248,223,0.98) 0%, rgba(255,239,190,0.92) 100%) !important;
  border-color: rgba(208, 2, 27, 0.28) !important;
  transform: translateY(-1px) !important;
}

/* Modal */

.cap-page .cap-filter-edit-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--vmms-z-modal);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(17, 24, 39, 0.58);
}

.cap-page .cap-filter-edit-modal-box {
  width: 100%;
  max-width: 620px;
  overflow: hidden;
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.13) 0%, transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
  border: 1px solid rgba(226,232,240,0.96);
  box-shadow:
    0 28px 70px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.92);
}

.cap-page .cap-filter-edit-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px;
  background:
    linear-gradient(135deg, #08080a 0%, #151519 60%, #0b0b0d 100%);
  color: #ffffff;
  border-bottom: 4px solid var(--vmms-red);
}

.cap-page .cap-filter-edit-title-wrap {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}

.cap-page .cap-filter-edit-icon {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.08) 100%);
  border: 1px solid rgba(255,255,255,0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cap-page .cap-filter-edit-kicker {
  display: inline-flex;
  margin-bottom: 5px;
  color: var(--vmms-yellow);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cap-page .cap-filter-edit-modal-header h3 {
  margin: 0;
  color: #ffffff;
  font-size: 19px;
  line-height: 1.1;
}

.cap-page .cap-filter-edit-modal-header p {
  margin: 5px 0 0;
  color: rgba(255,255,255,0.68);
  font-size: 12.5px;
  line-height: 1.35;
}

.cap-page .cap-filter-edit-close {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.10) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  font-size: 22px !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

.cap-page .cap-filter-edit-content {
  padding: 18px 20px 0;
}

.cap-page .cap-filter-edit-context {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.cap-page .cap-filter-edit-context > div {
  border-radius: 15px;
  border: 1px solid #e2e8f0;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  padding: 12px;
}

.cap-page .cap-filter-edit-context strong {
  display: block;
  margin-bottom: 6px;
  color: #111111;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

.cap-page .cap-filter-edit-context span {
  color: #111111;
  font-size: 13px;
  font-weight: 800;
  word-break: break-word;
}

.cap-page .cap-filter-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.cap-page .cap-filter-edit-message {
  margin-top: 12px;
  padding: 11px 12px;
  border-radius: 13px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #374151;
  font-size: 12.5px;
  font-weight: 750;
}

.cap-page .cap-filter-edit-message--error {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fecaca;
}

.cap-page .cap-filter-edit-note {
  margin-top: 12px;
  padding: 11px 12px;
  border-radius: 14px;
  background: #fff8e8;
  border: 1px solid #f0dfb5;
  color: #7a4f00;
  font-size: 12.5px;
  line-height: 1.35;
  font-weight: 650;
}

.cap-page .cap-filter-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 20px 20px;
}

.cap-page .cap-filter-edit-actions .btn,
.cap-page .cap-filter-edit-actions button {
  width: auto;
  min-width: 150px;
  min-height: 36px;
  font-size: 12.5px;
}

@media (max-width: 620px) {
  .cap-page .cap-filter-option-chip--editable {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    text-align: center !important;
  }

  .cap-page .cap-filter-edit-btn {
    width: 100% !important;
    max-width: 160px !important;
  }

  .cap-page .cap-filter-edit-modal-overlay {
    padding: 12px;
  }

  .cap-page .cap-filter-edit-context,
  .cap-page .cap-filter-edit-grid {
    grid-template-columns: 1fr;
  }

  .cap-page .cap-filter-edit-modal-header,
  .cap-page .cap-filter-edit-content,
  .cap-page .cap-filter-edit-actions {
    padding-left: 16px;
    padding-right: 16px;
  }

  .cap-page .cap-filter-edit-actions {
    flex-direction: column;
  }

  .cap-page .cap-filter-edit-actions .btn,
  .cap-page .cap-filter-edit-actions button {
    width: 100%;
  }
}

/* =========================
   NUEVO SERVICIO — SUGERENCIAS
========================= */

.ns-page .ns-tech-suggestions-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(208,2,27,0.10);
  background:
    radial-gradient(circle at top right, rgba(255,189,89,0.13) 0%, transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
  box-shadow:
    0 10px 26px rgba(15,23,42,0.075),
    inset 0 1px 0 rgba(255,255,255,0.92);
}

.ns-page .ns-tech-suggestions-card::before {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: 0;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--vmms-red) 0%, var(--vmms-yellow) 100%);
}

.ns-page .ns-tech-suggestions-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  padding-top: 4px;
}

.ns-page .ns-tech-suggestions-head h2 {
  margin-bottom: 0;
}

.ns-page .ns-tech-kicker {
  display: inline-flex;
  margin-bottom: 5px;
  color: var(--vmms-red);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ns-page .ns-tech-suggestions-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 6px;
}

.ns-page .ns-tech-suggestion-tile {
  min-width: 0;
  padding: 9px 10px;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(248,250,252,0.82) 100%);
  border: 1px solid rgba(226,232,240,0.95);
  box-shadow:
    0 5px 13px rgba(15,23,42,0.045),
    inset 0 1px 0 rgba(255,255,255,0.90);
}

.ns-page .ns-tech-suggestion-tile--capacity {
  border-color: rgba(208,2,27,0.14);
  background:
    radial-gradient(circle at top right, rgba(208,2,27,0.07) 0%, transparent 32%),
    linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
}

.ns-page .ns-tech-suggestion-tile--empty {
  opacity: 0.72;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.82) 0%, rgba(243,244,246,0.76) 100%);
}

.ns-page .ns-tech-tile-label {
  display: block;
  margin-bottom: 4px;
  color: var(--vmms-text-soft);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

.ns-page .ns-tech-suggestion-tile strong {
  display: block;
  color: #111111;
  font-size: 13px;
  line-height: 1.15;
  margin-bottom: 0;
  word-break: break-word;
  font-weight: 750;
}

.ns-page .ns-tech-suggestion-tile small {
  display: block;
  color: #64748b;
  font-size: 12px;
  line-height: 1.25;
}

.ns-page .ns-tech-suggestion-actions {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

.ns-page .ns-tech-suggestion-actions .btn,
.ns-page .ns-tech-suggestion-actions button {
  width: auto;
  min-width: 210px;
  min-height: 40px;
  border-radius: 13px;
}

.ns-page #btnAplicarSugerenciasTecnicas {
  background:
    linear-gradient(180deg, rgba(34,197,94,0.96) 0%, rgba(21,128,61,0.96) 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(20, 83, 45, 0.34) !important;
  box-shadow:
    0 10px 20px rgba(21,128,61,0.18),
    0 3px 7px rgba(15,23,42,0.08),
    inset 0 1px 0 rgba(255,255,255,0.32),
    inset 0 -3px 7px rgba(0,0,0,0.13) !important;
  font-weight: 850;
  letter-spacing: 0.01em;
}

.ns-page #btnAplicarSugerenciasTecnicas:hover {
  background:
    linear-gradient(180deg, rgba(44,210,105,0.98) 0%, rgba(22,163,74,0.98) 100%) !important;
  transform: translateY(-1px);
  box-shadow:
    0 14px 26px rgba(21,128,61,0.22),
    0 4px 9px rgba(15,23,42,0.10),
    inset 0 1px 0 rgba(255,255,255,0.36),
    inset 0 -3px 7px rgba(0,0,0,0.12) !important;
}

.ns-page #btnAplicarSugerenciasTecnicas:active {
  transform: translateY(0);
  box-shadow:
    0 5px 12px rgba(21,128,61,0.16),
    inset 0 2px 5px rgba(0,0,0,0.16) !important;
}

.ns-page .ns-tech-helper {
  margin-top: 8px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 11px;
  line-height: 1.3;
  opacity: 0.72;
}

.ns-page .ns-tech-helper p {
  margin: 0;
  color: #7a4f00;
  font-weight: 700;
}

.ns-page .ns-tech-helper--warning {
  background:
    linear-gradient(180deg, rgba(255,248,223,0.46) 0%, rgba(255,243,199,0.30) 100%);
  border: 1px solid rgba(245,222,179,0.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
}

/* Mensajes clean / glass para Nuevo Servicio */
.ns-page .ns-glass-message {
  width: fit-content;
  max-width: 100%;
  margin: 8px auto 0;
  padding: 9px 16px;
  border-radius: 999px;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.70),
    0 5px 14px rgba(15,23,42,0.055);
}

.ns-page .ns-glass-message--success,
.ns-page .respuesta.ok.ns-glass-message--success {
  background:
    linear-gradient(180deg, rgba(220,252,231,0.82) 0%, rgba(240,253,244,0.72) 100%);
  color: #166534;
  border: 1px solid rgba(187,247,208,0.95);
}

.ns-page .ns-status-chip-message {
  display: block;
}

.ns-page .ns-glass-message--neutral {
  background:
    linear-gradient(180deg, rgba(248,250,252,0.88) 0%, rgba(241,245,249,0.74) 100%);
  color: #475569;
  border: 1px solid rgba(226,232,240,0.95);
}

@media (max-width: 1200px) {
  .ns-page .ns-tech-suggestions-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .cap-page .cap-search-panel-premium {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

  .cap-page .cap-actions-premium {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

    .cap-page .cap-result-item {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
    }
    
    .cap-page .cap-result-title {
      min-width: 0;
      width: 100%;
    }
    
    .cap-page .cap-result-meta {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-start;
      gap: 4px 8px;
      text-align: left;
      line-height: 1.2;
    }

  .ns-page .ns-tech-suggestions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ns-page .ns-tech-suggestions-head {
    flex-direction: column;
  }
}

@media (max-width: 620px) {
  .cap-page .cap-search-panel-premium {
      grid-template-columns: 1fr;
    }
    
    .ns-page .ns-tech-suggestions-grid {
      grid-template-columns: 1fr;
    }

  .ns-page .ns-tech-suggestion-actions .btn,
  .ns-page .ns-tech-suggestion-actions button {
    width: 100%;
    min-width: 0;
  }
  
  .cap-page .cap-result-item {
      padding: 10px 11px;
    }
    
    .cap-page .cap-result-title {
      font-size: 14px;
    }
    
    .cap-page .cap-result-meta {
      font-size: 12px;
      gap: 3px 7px;
    }
}

/* =========================================================
   FASE 17.13.2 — Variantes múltiples de filtros en Nuevo Servicio
========================================================= */

.ns-page .ns-tech-suggestion-tile--variants {
  align-items: stretch !important;
}

.ns-page .ns-tech-filter-options-head {
  display: grid;
  gap: 3px;
  margin-bottom: 9px;
}

.ns-page .ns-tech-filter-options-head strong {
  color: #111111;
  font-size: 13px;
  line-height: 1.15;
}

.ns-page .ns-tech-filter-options-head small {
  color: #64748b;
  font-size: 11.5px;
  line-height: 1.25;
  font-weight: 650;
}

.ns-page .ns-tech-filter-options-list {
  display: grid;
  gap: 7px;
}

.ns-page .ns-tech-filter-option {
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0 !important;
  padding: 8px 9px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(248,250,252,0.82) 100%);
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.ns-page .ns-tech-filter-option:hover {
  border-color: rgba(208, 2, 27, 0.18);
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.055);
  transform: translateY(-1px);
}

.ns-page .ns-tech-filter-option input[type="radio"] {
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  margin: 0 !important;
  accent-color: var(--vmms-red);
}

.ns-page .ns-tech-filter-option-main {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.ns-page .ns-tech-filter-option-main strong {
  color: #111111;
  font-size: 12.5px;
  line-height: 1.15;
  word-break: break-word;
}


/* =========================================================
   FASE 17.12.7 — Consolidación técnica marca + modelo
========================================================= */

.cap-page .cap-consolidar-final-grid--pair {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto !important;
  align-items: end !important;
}

.cap-page .cap-consolidar-separator {
  color: #94a3b8 !important;
  font-weight: 900 !important;
  margin: 0 4px !important;
}

@media (max-width: 820px) {
  .cap-page .cap-consolidar-final-grid--pair {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   NS-SAFE-01.2.1 — Botón peligro abandonar carga
========================================================= */

.ns-page .ns-btn-abandonar-carga {
  background: #dc2626 !important;
  color: #ffffff !important;
  border: 1px solid rgba(153, 27, 27, 0.55) !important;
  box-shadow:
    0 10px 22px rgba(220, 38, 38, 0.22),
    inset 0 1px 0 rgba(255,255,255,0.18) !important;
}

.ns-page .ns-btn-abandonar-carga:hover {
  background: #b91c1c !important;
  color: #ffffff !important;
  border-color: rgba(127, 29, 29, 0.70) !important;
  transform: translateY(-1px);
  box-shadow:
    0 14px 28px rgba(220, 38, 38, 0.28),
    inset 0 1px 0 rgba(255,255,255,0.20) !important;
}

.ns-page .ns-btn-abandonar-carga:active {
  transform: translateY(0);
  box-shadow:
    0 6px 14px rgba(220, 38, 38, 0.20),
    inset 0 2px 4px rgba(0,0,0,0.18) !important;
}


/* =========================================================
   FASE 17.14.1 — NUEVO SERVICIO / VALIDACIÓN MARCA MODELO
========================================================= */

.ns-page .ns-mm-guard-card {
  margin-top: 10px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background:
    radial-gradient(circle at top right, rgba(255, 189, 89, 0.10) 0%, transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(248,250,252,0.88) 100%);
  box-shadow:
    0 8px 18px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255,255,255,0.90);
}

.ns-page .ns-mm-guard-card--warning {
  border-color: rgba(245, 158, 11, 0.34);
  background:
    radial-gradient(circle at top right, rgba(255, 189, 89, 0.20) 0%, transparent 34%),
    linear-gradient(180deg, rgba(255,251,235,0.96) 0%, rgba(255,255,255,0.90) 100%);
}

.ns-page .ns-mm-guard-card--info {
  border-color: rgba(96, 165, 250, 0.30);
  background:
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.12) 0%, transparent 34%),
    linear-gradient(180deg, rgba(239,246,255,0.96) 0%, rgba(255,255,255,0.90) 100%);
}

.ns-page .ns-mm-guard-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.ns-page .ns-mm-guard-kicker {
  display: inline-flex;
  margin-bottom: 4px;
  color: var(--vmms-red);
  font-size: 10.5px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.055em;
}

.ns-page .ns-mm-guard-head strong {
  display: block;
  color: #111111;
  font-size: 13px;
  line-height: 1.15;
  font-weight: 700;
}

.ns-page .ns-mm-guard-head p {
  margin: 4px 0 0 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 650;
}

.ns-page .ns-mm-guard-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.ns-page .ns-mm-guard-compare > div {
  min-width: 0;
  padding: 9px 10px;
  border-radius: 12px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: rgba(255, 255, 255, 0.72);
}

.ns-page .ns-mm-guard-compare small {
  display: block;
  margin-bottom: 4px;
  color: #64748b;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ns-page .ns-mm-guard-compare b {
  display: block;
  color: #111111;
  font-size: 12px;
  line-height: 1.2;
  word-break: break-word;
}

.ns-page .ns-mm-guard-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.ns-page .ns-mm-guard-btn {
  width: auto !important;
  min-height: 32px !important;
  padding: 7px 12px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
}

@media (max-width: 620px) {
  .ns-page .ns-mm-guard-compare {
    grid-template-columns: 1fr;
  }

  .ns-page .ns-mm-guard-actions {
    justify-content: stretch;
  }

  .ns-page .ns-mm-guard-btn {
    width: 100% !important;
  }
}

/* =========================================================
   FASE 17.14.1.1 — Variantes múltiples marca/modelo sugeridas
========================================================= */

.ns-page .ns-mm-guard-compare--single {
  grid-template-columns: 1fr;
}

.ns-page .ns-mm-suggestion-list {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

.ns-page .ns-mm-suggestion-option {
  width: 100% !important;
  min-height: 42px !important;
  padding: 9px 10px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.90) 0%, rgba(248,250,252,0.78) 100%) !important;
  color: #111111 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  text-align: left !important;
  box-shadow:
    0 3px 8px rgba(15, 23, 42, 0.04),
    inset 0 1px 0 rgba(255,255,255,0.90) !important;
}

.ns-page .ns-mm-suggestion-option:hover {
  border-color: rgba(208, 2, 27, 0.20) !important;
  background:
    linear-gradient(180deg, #ffffff 0%, rgba(255,248,223,0.72) 100%) !important;
  transform: translateY(-1px);
  box-shadow:
    0 7px 16px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.95) !important;
}

.ns-page .ns-mm-suggestion-option span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.ns-page .ns-mm-suggestion-option small {
  color: #64748b;
  font-size: 10.5px;
  font-weight: 850;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ns-page .ns-mm-suggestion-option b {
  color: #111111;
  font-size: 12.5px;
  line-height: 1.15;
  font-weight: 850;
  word-break: break-word;
}

.ns-page .ns-mm-suggestion-option em {
  width: auto;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(208, 2, 27, 0.08);
  color: var(--vmms-red);
  border: 1px solid rgba(208, 2, 27, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-size: 10.5px;
  font-weight: 850;
  white-space: nowrap;
}

@media (max-width: 620px) {
  .ns-page .ns-mm-suggestion-option {
    grid-template-columns: 1fr;
  }

  .ns-page .ns-mm-suggestion-option em {
    justify-self: start;
  }
}

/* =========================================================
   AUTO-RESEND-01.1 — Botón reenvío aviso servicio
========================================================= */

.cv-btn-resend-notice {
  background:
    radial-gradient(circle at top right, rgba(255, 189, 89, 0.30) 0%, transparent 42%),
    linear-gradient(180deg, rgba(255, 247, 237, 0.88) 0%, rgba(251, 146, 60, 0.30) 100%) !important;
  color: #9a3412 !important;
  border: 1px solid rgba(249, 115, 22, 0.38) !important;
  box-shadow:
    0 7px 16px rgba(249, 115, 22, 0.13),
    inset 0 1px 0 rgba(255,255,255,0.78),
    inset 0 -1px 0 rgba(249,115,22,0.10) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease !important;
}

.cv-btn-resend-notice:hover {
  background:
    radial-gradient(circle at top right, rgba(255, 189, 89, 0.38) 0%, transparent 42%),
    linear-gradient(180deg, rgba(255, 247, 237, 0.96) 0%, rgba(251, 146, 60, 0.42) 100%) !important;
  color: #7c2d12 !important;
  border-color: rgba(249, 115, 22, 0.58) !important;
  transform: translateY(-1px);
  box-shadow:
    0 10px 22px rgba(249, 115, 22, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.88),
    inset 0 -1px 0 rgba(249,115,22,0.12) !important;
}

.cv-btn-resend-notice:active {
  transform: translateY(0);
  box-shadow:
    0 4px 10px rgba(249, 115, 22, 0.13),
    inset 0 2px 4px rgba(124,45,18,0.12) !important;
}

/* =========================================================
   AUTO-RESEND-01.2 — Servicio realizado mobile ordenado
========================================================= */

@media (max-width: 640px) {
  .clientes-vehiculos-lista .historial-extra-content .lista-items-servicio {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    gap: 8px !important;
  }

  .clientes-vehiculos-lista .historial-extra-content .lista-items-servicio > li {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 9px 10px !important;
    border-radius: 13px !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.88) 0%, rgba(248,250,252,0.78) 100%) !important;
    border: 1px solid rgba(226, 232, 240, 0.92) !important;
    box-shadow:
      0 3px 8px rgba(15, 23, 42, 0.035),
      inset 0 1px 0 rgba(255,255,255,0.88) !important;
  }

  .clientes-vehiculos-lista .historial-extra-content .lista-items-servicio > li > span:first-child {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    min-width: 0 !important;
    color: #111111 !important;
    font-size: 12.5px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
  }

  .clientes-vehiculos-lista .historial-extra-content .lista-items-servicio > li > span:first-child::before {
    content: "";
    width: 6px;
    height: 6px;
    min-width: 6px;
    margin-top: 5px;
    border-radius: 999px;
    background: #111111;
    opacity: 0.82;
  }

  .clientes-vehiculos-lista .historial-extra-content .filtro-interno-historial {
    width: 100% !important;
    max-width: none !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 8px 9px !important;
    border-radius: 12px !important;
    background:
      radial-gradient(circle at top right, rgba(255, 189, 89, 0.18) 0%, transparent 42%),
      linear-gradient(180deg, rgba(255, 251, 235, 0.92) 0%, rgba(255, 247, 237, 0.78) 100%) !important;
    border: 1px solid rgba(245, 158, 11, 0.22) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.86),
      0 2px 6px rgba(245, 158, 11, 0.055) !important;
  }

  .clientes-vehiculos-lista .historial-extra-content .filtro-interno-historial span {
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    gap: 6px !important;
    align-items: center !important;
    margin: 0 !important;
    color: #111111 !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  .clientes-vehiculos-lista .historial-extra-content .filtro-interno-historial strong {
    color: #7c2d12 !important;
    font-weight: 650 !important;
  }
}

/* =========================================================
   NUEVO SERVICIO — HISTORIAL DE FILTROS ORDENADO EN MOBILE
========================================================= */

@media (max-width: 640px) {
  .ns-page .history-scroll .lista-items > li {
    display: list-item !important;
    margin-bottom: 10px;
  }

  .ns-page .history-scroll .lista-items > li > .filtro-interno-historial {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 3px !important;

    width: fit-content !important;
    max-width: 100% !important;

    margin: 6px 0 0 0 !important;
  }

  .ns-page .history-scroll .lista-items > li > .filtro-interno-historial span {
    display: block !important;
    margin: 0 !important;
  }
}