:root{
  --accent: #10b981; /* verde base */
  --accent-2: #059669;
  --muted: #6b7280;
  --card-bg: #ffffff;
  --card-shadow: 0 2px 12px rgba(6,95,70,0.06);
}
/* Ajustes para inputs con icono (horizontal) */
.horizontal-icons .form-row{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.horizontal-icons .form-row label{width:160px;font-weight:600;color:#064e3b}
.horizontal-icons .form-row .input-wrap{flex:1;position:relative}
.horizontal-icons .form-row .input-wrap i{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--accent);font-size:1.05rem}
.horizontal-icons .form-row .input-wrap input,
.horizontal-icons .form-row .input-wrap textarea{width:100%;padding:10px 12px;padding-left:38px;border-radius:8px;border:1px solid #cbd5e1;background:#f8fafc}
.horizontal-icons .actions-wrap{display:flex;align-items:center;gap:8px;margin-top:6px}
.horizontal-icons .actions-wrap .spacer{width:160px}
.card.btn-accept{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;font-weight:600}

/* Spinner pequeño para botones */
.btn-spinner{display:inline-flex;align-items:center;gap:8px}
.btn-spinner .dot{width:8px;height:8px;border-radius:50%;background:#fff;opacity:0.9;animation:spin 1s linear infinite}
@keyframes spin{0%{transform:translateX(0)}50%{transform:translateX(6px)}100%{transform:translateX(0)}}

/* Indicadores de estado de campo */
.field-error{border-color:#ef4444!important;box-shadow:0 0 0 4px rgba(239,68,68,0.06)}

/* Estilos para ordenamiento de tabla */
thead th[data-col]{cursor:pointer;}
thead th.sorted-asc::after{content:' ▲';font-size:0.8em;}
thead th.sorted-desc::after{content:' ▼';font-size:0.8em;}

/* Tabla demo: filas más compactas y estilos contextuales */
#demo-table{border-collapse:separate;border-spacing:0;overflow:hidden}
#demo-table thead th{padding:10px 12px;font-weight:700;border-bottom:1px solid rgba(15,23,42,0.06)}
#demo-table tbody td{padding:6px 10px;vertical-align:middle;font-size:0.95rem;border-bottom:1px solid rgba(15,23,42,0.03)}
#demo-table tbody tr:hover{background:linear-gradient(90deg,rgba(96,165,250,0.03),rgba(192,132,252,0.02))}
#demo-table .card{font-size:0.85rem;padding:4px 8px}

/* Contextual row backgrounds (light) */
#demo-table tbody tr.table-success{background:rgba(16,185,129,0.06)}
#demo-table tbody tr.table-warning{background:rgba(245,158,11,0.06)}
#demo-table tbody tr.table-info{background:rgba(56,189,248,0.06)}
#demo-table tbody tr.table-danger{background:rgba(239,68,68,0.06)}

/* Make action column compact */
#demo-table td:last-child{white-space:nowrap;width:220px}

/* Responsive tweaks */
@media(max-width:720px){
  #demo-table thead{display:none}
  #demo-table tbody td{display:block;padding:8px;border-bottom:1px solid rgba(15,23,42,0.04)}
  #demo-table tbody tr{margin-bottom:12px;display:block;border-radius:8px;background:#fff}
}

/* Animación y micro-interacciones para las tarjetas */
.feature-card, .card-panel{
  transition: transform 260ms cubic-bezier(.2,.9,.2,1), box-shadow 260ms ease, opacity 300ms ease;
  will-change: transform, box-shadow, opacity;
  /* start hidden; animation will add .vd-animate to play entry */
  opacity: 0;
  transform: translateY(6px);
}
.feature-card:hover, .card-panel:hover{
   transform: translateY(-8px) scale(1.01);
   box-shadow: 0 14px 34px rgba(2,6,23,0.12);
   opacity: 1;
 }
/* Entrada sutil (aparece al cargar) */
@keyframes fadeUp { from { transform: translateY(6px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
/* class applied by JS to trigger the entry animation */
.vd-animate{ animation: fadeUp 420ms ease both !important; opacity: 1 !important; transform: translateY(0) !important; }
 
 /* Modal specific styles: overlay, dialog and nicer close button */
 .demo-modal-overlay{ display:flex; align-items:center; justify-content:center; }
 .demo-modal-dialog{ border-radius:12px; overflow:hidden; transform: translateY(8px) scale(0.995); opacity:0; animation: modalIn 220ms cubic-bezier(.2,.9,.2,1) forwards; }
 @keyframes modalIn { from { transform: translateY(8px) scale(0.995); opacity: 0 } to { transform: translateY(0) scale(1); opacity: 1 } }
 .demo-modal-actions{ padding-top:8px };
-.demo-modal-close{ border-radius:999px; padding:8px 12px; background:transparent; border:1px solid rgba(15,23,42,0.06); color:#071133; font-weight:600; cursor:pointer }
-.demo-modal-close:hover{ background:rgba(2,6,23,0.04) };
-.demo-modal-close:focus{ outline:2px solid rgba(37,99,235,0.16); outline-offset:2px }
+.demo-modal-close{ border-radius:999px; padding:8px 12px; background: linear-gradient(90deg,var(--accent),var(--accent-2)) !important; border:none !important; color:#fff !important; font-weight:700; cursor:pointer; box-shadow: 0 8px 20px rgba(2,6,23,0.12); }
+.demo-modal-close:hover{ transform: translateY(-2px); box-shadow: 0 18px 36px rgba(2,6,23,0.14); }
+.demo-modal-close:focus{ outline:3px solid rgba(37,99,235,0.18); outline-offset:2px }

/* accessibility: reduce motion rule */
 @media (prefers-reduced-motion: reduce){
   .vd-animate, .feature-card, .card-panel{ animation: none !important; transition: none !important; transform: none !important; opacity: 1 !important; }
 }

/* ============================
   MOCKUP VIEWER SYSTEM
   Controles de zoom y visualización para mockups interactivos
   ============================ */

/* Contenedor principal del mockup */
.mockup-viewer {
  margin: 16px 0;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(16,185,129,0.04), rgba(5,150,105,0.02));
  border: 1px solid rgba(16,185,129,0.12);
  padding: 16px;
}

/* Barra de controles */
.mockup-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 10px 16px;
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(16,185,129,0.15);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(6,95,70,0.04);
}

.mockup-controls .zoom-label {
  font-size: 12px;
  color: var(--muted, #6b7280);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.mockup-controls .zoom-btn {
  width: 34px;
  height: 34px;
  border: 1px solid #d1d5db;
  background: #fff;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 700;
  color: #374151;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 180ms ease;
}

.mockup-controls .zoom-btn:hover {
  background: linear-gradient(90deg, var(--accent, #10b981), var(--accent-2, #059669));
  color: #fff;
  border-color: transparent;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16,185,129,0.25);
}

.mockup-controls .zoom-btn:active {
  transform: translateY(0);
}

.mockup-controls .zoom-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent, #10b981);
  min-width: 55px;
  text-align: center;
  padding: 6px 10px;
  background: rgba(16,185,129,0.08);
  border-radius: 6px;
}

.mockup-controls .zoom-reset {
  padding: 8px 12px;
  background: transparent;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted, #6b7280);
  cursor: pointer;
  transition: all 150ms ease;
}

.mockup-controls .zoom-reset:hover {
  background: #f3f4f6;
  color: #374151;
}

.mockup-controls .fullscreen-btn {
  margin-left: auto;
  padding: 10px 18px;
  background: linear-gradient(90deg, var(--accent, #10b981), var(--accent-2, #059669));
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 180ms ease;
  box-shadow: 0 4px 12px rgba(16,185,129,0.2);
}

.mockup-controls .fullscreen-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(16,185,129,0.3);
}

.mockup-controls .fullscreen-btn:active {
  transform: translateY(0);
}

/* Contenedor de scroll */
.mockup-outer {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  position: relative;
  border-radius: 12px;
  padding-bottom: 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--accent, #10b981) #e5e7eb;
}

.mockup-outer::-webkit-scrollbar {
  height: 8px;
}

.mockup-outer::-webkit-scrollbar-track {
  background: #e5e7eb;
  border-radius: 4px;
}

.mockup-outer::-webkit-scrollbar-thumb {
  background: var(--accent, #10b981);
  border-radius: 4px;
}

/* Pantalla del mockup */
.mockup-screen {
  transform-origin: top left;
  transition: transform 220ms cubic-bezier(.2,.9,.2,1);
}

/* Modal de pantalla completa */
.mockup-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: rgba(2,6,23,0.94);
  padding: 24px;
  overflow: auto;
  backdrop-filter: blur(4px);
}

.mockup-modal.active {
  display: block;
  animation: modalFadeIn 220ms ease forwards;
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.mockup-modal-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: linear-gradient(180deg, rgba(2,6,23,0.95), transparent);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  z-index: 10002;
}

.mockup-modal-title {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  opacity: 0.9;
}

.mockup-modal-close {
  width: 44px;
  height: 44px;
  background: linear-gradient(90deg, var(--accent, #10b981), var(--accent-2, #059669));
  border: none;
  border-radius: 50%;
  font-size: 20px;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(2,6,23,0.4);
  transition: all 180ms ease;
}

.mockup-modal-close:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 28px rgba(2,6,23,0.5);
}

.mockup-modal-content {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 100%;
  padding: 80px 0 40px;
}

.mockup-modal .mockup-screen {
  transform: none !important;
  box-shadow: 0 50px 120px rgba(0,0,0,0.6);
  border-radius: 12px;
}

/* Info pill en modal */
.mockup-modal-info {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 999px;
  padding: 10px 20px;
  color: rgba(255,255,255,0.8);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  backdrop-filter: blur(8px);
}

.mockup-modal-info kbd {
  background: rgba(255,255,255,0.15);
  padding: 4px 8px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 11px;
}

/* Responsive */
@media (max-width: 768px) {
  .mockup-controls {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
  }

  .mockup-controls .fullscreen-btn {
    margin-left: 0;
    width: 100%;
    justify-content: center;
    margin-top: 8px;
  }

  .mockup-controls .zoom-reset {
    display: none;
  }
}