/* CLASES GLOBALES */
.btn-global { background: var(--accent); color: white; padding: 12px 24px; border-radius: 8px; border: none; font-weight: bold; cursor: pointer; transition: 0.2s; display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem;}
.btn-global:hover { background: var(--accent-hover); transform: translateY(-2px); }
.btn-global.peligro { background: var(--error); }
.btn-global.secundario { background: var(--bg-hover); color: var(--text-main); }
.input-global { width: 100%; padding: 12px 15px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--bg-base); color: var(--text-main); margin-bottom: 15px; font-size: 0.9rem; transition: 0.3s; }
.input-global:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.1); }
.card-modulo { background: var(--bg-panel); border: 1px solid var(--border-color); border-radius: 16px; padding: 25px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); height: 100%; display: flex; flex-direction: column; box-sizing: border-box; }
.tabla-contenedor { width: 100%; overflow-x: auto; border-radius: 8px; border: 1px solid var(--border-color); margin-top: 15px; background: var(--bg-base); }
.tabla-global { width: 100%; border-collapse: collapse; min-width: 700px; }
.tabla-global th, .tabla-global td { padding: 15px; text-align: left; border-bottom: 1px solid var(--border-color); font-size: 0.9rem; }
.tabla-global th { background: var(--bg-hover); color: var(--text-muted); font-weight: 700; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.5px;}
.tabla-global tr:hover td { background: var(--bg-hover); }

/* LOADER MÁQUINA DE COSER */
:root { --brand-green: var(--accent); --machine-color: #9CA3AF; --accent-metal: #D1D5DB; }
.loader-sewing-side { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.machine-wrapper { position: relative; width: 140px; height: 90px; }
.needle { position: absolute; top: 35px; right: 39px; width: 2px; height: 24px; background: var(--accent-metal); z-index: 1; animation: stitchEffect 0.4s infinite ease-in-out; }
.machine-body div { background: var(--machine-color); position: absolute; z-index: 3; }
.back-pillar { top: 15px; left: 25px; width: 25px; height: 55px; }
.top-arm { top: 15px; left: 25px; width: 90px; height: 20px; border-radius: 15px 8px 0 0; }
.head-unit { top: 15px; right: 25px; width: 30px; height: 40px; border-radius: 0 5px 8px 5px; }
.hand-wheel { position: absolute; top: 20px; left: 15px; width: 10px; height: 35px; background: #4B5563; border-radius: 4px; z-index: 5; animation: rotateWheel 0.8s infinite linear; }
.machine-base { position: absolute; bottom: 0; width: 140px; height: 10px; background: var(--machine-color); border-radius: 4px; z-index: 4; }
.fabric-conveyor { width: 120px; height: 4px; overflow: hidden; position: absolute; bottom: 12px; left: 10px; z-index: 5; }
.green-stitch { width: 200%; height: 100%; background-image: linear-gradient(to right, var(--brand-green) 40%, transparent 40%); background-size: 15px 100%; animation: slideFabric 0.8s infinite linear; }
.brand-text { font-family: sans-serif; font-size: 14px; font-weight: bold; color: var(--text-main); margin-top: 15px; letter-spacing: 1px; animation: pulseText 1.5s infinite; }

@keyframes stitchEffect { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(14px); } }
@keyframes rotateWheel { 0% { transform: scaleY(1); } 50% { transform: scaleY(0.4); } 100% { transform: scaleY(1); } }
@keyframes slideFabric { from { transform: translateX(0); } to { transform: translateX(-30px); } }
@keyframes pulseText { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }  

/* WIDGET LOOMY */
.loomy-wrapper { position: relative; display: flex; align-items: center; justify-content: center; height: 100%; width: 50px; cursor: pointer; margin-left: 10px;}
.loomy-container { display: flex; flex-direction: column; align-items: center; transform: scale(0.35); transform-origin: center center; animation: floatLoomy 4s ease-in-out infinite; }
.head { width: 120px; height: 90px; background: var(--bg-panel); border-radius: 20px; z-index: 2; border: 4px solid var(--accent); box-shadow: 0 0 20px rgba(45, 212, 160, 0.4); display: flex; justify-content: center; align-items: center; }
.screen { width: 100px; height: 70px; background: var(--bg-base); border-radius: 12px; display: flex; justify-content: space-around; align-items: center; }
.eye { width: 16px; height: 30px; background: var(--accent); border-radius: 10px; box-shadow: 0 0 10px var(--accent); animation: blinkLoomy 4s infinite; }
.body-robot { width: 80px; height: 60px; background: var(--bg-panel); margin-top: -10px; border-radius: 10px 10px 40px 40px; border: 4px solid var(--accent); position: relative; }
.arm { width: 18px; height: 45px; background: var(--bg-panel); position: absolute; top: 10px; border: 3px solid var(--accent); border-radius: 10px; }
.arm.left { left: -25px; transform: rotate(20deg); }
.arm.right { right: -25px; transform: rotate(-20deg); }
.thought-bubble { position: absolute; right: 100%; top: 50%; transform: translateY(-50%); background: var(--bg-panel); padding: 10px 15px; border-radius: 12px; border: 1px solid var(--accent); box-shadow: 0 5px 15px rgba(0,0,0,0.3); color: var(--text-main); font-size: 11px; font-weight: 500; white-space: nowrap; opacity: 0; visibility: hidden; transition: 0.3s; margin-right: 10px; pointer-events: none; z-index: 50; }
.thought-bubble::after { content: ''; position: absolute; top: 50%; right: -6px; transform: translateY(-50%); border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 6px solid var(--accent); }
.loomy-wrapper:hover .thought-bubble { opacity: 1; visibility: visible; }

@keyframes floatLoomy { 0%, 100% { transform: scale(0.35) translateY(0); } 50% { transform: scale(0.35) translateY(-15px); } }
@keyframes blinkLoomy { 0%, 90%, 100% { height: 30px; } 95% { height: 2px; } }

.sparkle { position: absolute; font-size: 45px; opacity: 0; user-select: none; pointer-events: none; animation: sparkle-float 3s linear infinite; text-shadow: 0 0 10px var(--accent); }
.s1 { left: -40px; top: 20px; animation-delay: 0s; }
.s2 { right: -50px; top: 0px; animation-delay: 1s; }
.s3 { left: -30px; bottom: 10px; animation-delay: 2s; }
.s4 { right: -30px; bottom: -10px; animation-delay: 0.5s; }

@keyframes sparkle-float {
    0% { transform: translateY(0) scale(0.5); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateY(-80px) scale(1.2); opacity: 0; }
}

.border-loomy-alert { border: 1px solid rgba(45, 212, 160, 0.3) !important; box-shadow: 0 0 20px rgba(0, 0, 0, 0.5) !important; border-radius: 15px !important; }
.swal2-timer-progress-bar { background: var(--accent) !important; }


/* ========================================================
   AJUSTES COMPACTOS PARA SWEETALERT2 (Modo SaaS)
   ======================================================== */
.swal2-popup.border-loomy-alert {
  width: 360px !important; /* Alerta más esbelta */
  padding: 1.5em 1em 1.2em !important; /* Menos espacio vacío (padding) */
  border-radius: 16px !important; 
}

.swal2-icon {
  transform: scale(0.65) !important; /* Hace el icono un 35% más pequeño */
  margin: 0 auto 0 auto !important; /* Quita los enormes márgenes por defecto */
}

.alerta-titulo-pro {
  font-size: 1.15rem !important; /* Título más discreto */
  margin-top: -15px !important;
}

.swal2-html-container {
  font-size: 0.85rem !important; /* Texto descriptivo más ejecutivo */
  margin-top: 5px !important;
  line-height: 1.4 !important;
}

.swal2-actions {
  margin-top: 15px !important;
}

.swal2-confirm, .swal2-cancel {
  padding: 8px 24px !important; /* Botones más delgados */
  font-size: 0.85rem !important;
  border-radius: 8px !important;
}