:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}:root{--color-primary: #036E7B;--color-primary-accent: #F9B833;--color-secondary-dark: #C35254;--color-secondary-light: #EDD5C7;--color-black: #000000;--color-white: #FFFFFF}body{font-family:Jost,sans-serif;margin:0;padding:80px 0 0;background:linear-gradient(135deg,#f4f4f4,#fafafa);color:#333;display:flex;flex-direction:column;min-height:100vh}.header{width:100%;height:80px;background-color:var(--color-primary);display:flex;justify-content:space-between;align-items:center;padding:0 40px;position:fixed;top:0;left:0;z-index:1000}.logo-container{display:flex;align-items:center;gap:15px}.logo-container img{max-width:120px;height:auto;filter:drop-shadow(0 3px 6px rgba(0,0,0,.3));transition:transform .3s ease}.logo-container img:hover{transform:scale(1.08) rotate(-2deg)}.logo-container p{color:var(--color-white);font-size:1.2rem;font-weight:500;margin:0}.navbar{display:flex;align-items:center;gap:20px}.navbar ul{display:flex;gap:25px;margin:0;padding:0;list-style:none}.login-container{margin-left:auto}.navbar a{text-decoration:none;color:var(--color-white);font-size:1.1rem;font-weight:700;position:relative;transition:color .3s ease}.navbar a:after{content:"";position:absolute;bottom:-5px;left:0;height:2px;width:0;background:var(--color-primary-accent);transition:width .3s ease}.navbar a:hover{color:var(--color-primary-accent)}.navbar a:hover:after{width:100%}.login-btn{background:var(--color-);color:var(--color-accent);padding:10px 20px;border:none;border-radius:50px;cursor:pointer;font-size:1rem;font-weight:600;transition:all .3s ease;margin-right:50px}.login-btn:hover{background:var(--color-accent);color:var(--color-white)!important;transform:scale(1.05);box-shadow:0 4px 12px #0000004d}.main-section{flex:1;display:flex;justify-content:center;align-items:center;flex-direction:column;text-align:center;padding:60px 20px;background:url(../assets/RecrusosGraficos/bg-pattern.svg) no-repeat center/cover}.welcome-container h1{font-size:3rem;margin-bottom:20px;color:#09555b;font-weight:700}.welcome-container p{font-size:1.3rem;margin-bottom:30px;color:#444;max-width:600px}.explore-btn{background:linear-gradient(135deg,#e9d5ca,#f3cbb6);color:#09555b;padding:12px 30px;border:none;border-radius:50px;cursor:pointer;font-size:1.2rem;font-weight:600;transition:all .3s ease;box-shadow:0 4px 10px #0003}.explore-btn:hover{transform:translateY(-3px) scale(1.05);background:#006d7a;color:#fff}body.auth-page{margin:0;padding:0;font-family:Jost,sans-serif;display:flex;justify-content:center;align-items:center;min-height:100vh;background:linear-gradient(to bottom,#09555b,#006d7a)}.auth-card{background:var(--color-white);padding:30px 25px;border-radius:20px;box-shadow:0 8px 25px #00000040;text-align:center;width:360px;max-width:90%;display:flex;flex-direction:column;align-items:center!important;position:relative}body.auth-page{display:flex;justify-content:center;align-items:center;height:100vh;background:linear-gradient(135deg,#c9d6ff,#e2e2e2)}body.auth-page,body.auth-page #root{height:100vh;display:flex;justify-content:center;align-items:center}.auth-card .logo{width:90px;height:auto;margin-bottom:20px;display:block;margin-left:auto;margin-right:auto}.auth-card h2{font-size:1.6rem;font-weight:700;color:var(--color-primary);margin-bottom:20px}.auth-card input{width:100%;padding:10px;margin-bottom:15px;border-radius:8px;border:2px solid var(--color-primary);font-size:.95rem;transition:border-color .3s ease,transform .2s ease;box-sizing:border-box}.auth-card input:focus{border-color:var(--color-accent);outline:none;transform:scale(1.01)}.auth-card button{width:100%;padding:10px;font-size:1rem;font-weight:600;color:var(--color-white);background:var(--color-primary);border:none;border-radius:8px;cursor:pointer;transition:all .3s ease}.auth-card button:hover{background:var(--color-accent);color:var(--color-black);transform:scale(1.03)}.toggle-btn{margin-top:12px;background:transparent;color:var(--color-primary);border:none;font-size:.9rem;cursor:pointer;text-decoration:underline}.toggle-btn:hover{color:var(--color-accent)}@media (max-width: 480px){.auth-card{width:90%;padding:25px 20px}.auth-card h2{font-size:1.4rem}.auth-card .logo{width:70px;margin-bottom:15px}}body.auth-page{background:linear-gradient(to bottom,#09555b,#036e7b);display:flex;justify-content:center;align-items:center;min-height:100vh;padding-top:0}:root{--color-primary: #036E7B;--color-accent: #F9B833;--color-secondary-dark: #C35254;--color-secondary-light: #EDD5C7;--color-black: #000000;--color-white: #FFFFFF;--color-text: #222;--color-text-light: #555}.main-section{font-family:Jost,sans-serif;color:var(--color-text);background:#f9f9f9;padding:60px 20px}.welcome-container{text-align:center;padding:80px 20px}.welcome-container h1{font-size:3rem;margin-bottom:20px;color:var(--color-primary);font-weight:700}.welcome-container p{font-size:1.2rem;max-width:700px;margin:0 auto 30px;line-height:1.6;color:var(--color-text-light)}.explore-btn{padding:14px 36px;font-size:1rem;background:var(--color-primary);border:none;border-radius:30px;cursor:pointer;color:var(--color-white);font-weight:600;transition:transform .2s ease,background .3s ease}.explore-btn:hover{background:var(--color-accent);color:var(--color-black);transform:scale(1.05)}.about-section{padding:80px 20px;max-width:900px;margin:0 auto;text-align:center}.about-section h2{font-size:2.2rem;margin-bottom:20px;color:var(--color-primary)}.about-section p{font-size:1.1rem;line-height:1.7;color:var(--color-text-light)}.services-section{padding:80px 20px;text-align:center;background:var(--color-white)}.services-section h2{font-size:2.2rem;margin-bottom:40px;color:var(--color-primary)}.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:25px;max-width:1000px;margin:0 auto}.service-card{background:var(--color-white);border:1px solid #eee;border-radius:15px;padding:25px;transition:transform .3s ease,box-shadow .3s ease}.service-card:hover{transform:translateY(-8px);box-shadow:0 8px 20px #0000001a}.service-card h3{font-size:1.3rem;margin-bottom:15px;color:var(--color-primary)}.service-card p{font-size:1rem;line-height:1.5;color:var(--color-text-light)}.contact-section{padding:80px 20px;text-align:center;background:#f1f1f1;border-radius:20px;margin-top:50px}.contact-section h2{font-size:2rem;margin-bottom:20px;color:var(--color-primary)}.contact-section p{font-size:1.1rem;margin-bottom:40px;color:var(--color-text-light)}.contact-form{display:flex;flex-direction:column;gap:15px;max-width:500px;margin:0 auto 30px}.contact-form input,.contact-form textarea{padding:12px 15px;border:1px solid #ddd;border-radius:10px;outline:none;font-size:1rem;background:var(--color-white)}.contact-form input:focus,.contact-form textarea:focus{border-color:var(--color-primary);box-shadow:0 0 8px #036e7b66}.submit-btn{padding:14px;font-size:1rem;background:var(--color-primary);border:none;border-radius:25px;cursor:pointer;color:var(--color-white);font-weight:600;transition:background .3s ease,transform .2s ease}.submit-btn:hover{background:var(--color-accent);color:var(--color-black);transform:scale(1.05)}.contact-info{font-size:.95rem;color:#666;line-height:1.6}.footer{position:fixed;bottom:0;left:0;width:100%;background:var(--color-primary);color:var(--color-white);text-align:center;padding:10px;font-size:.9rem;border-top:2px solid var(--color-accent);box-shadow:0 -2px 6px #0000001a;z-index:1000}.footer p{margin:0;letter-spacing:.5px;opacity:.9}.app-container{display:flex;flex-direction:column;min-height:100vh}.main-content{padding-bottom:80px}@media (max-width: 1024px){.header{padding:0 20px}.navbar ul{gap:15px}.logo-container img{max-width:100px}.login-btn{margin-right:0}}@media (max-width: 768px){.header{flex-wrap:wrap;height:auto;padding:15px 20px;justify-content:center;text-align:center}.logo-container{justify-content:center;margin-bottom:10px}.navbar{flex-direction:column;gap:15px;width:100%}.navbar ul{flex-direction:column;gap:10px}.login-btn{width:100%;text-align:center}}@media (max-width: 480px){.logo-container img{max-width:80px}.logo-container p,.navbar a{font-size:1rem}}.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer}.hamburger span{width:25px;height:3px;background:var(--color-white);border-radius:2px;transition:all .3s ease}.hamburger.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}.hamburger.active span:nth-child(2){opacity:0}.hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}@media (max-width: 768px){.hamburger{display:flex;position:absolute;top:20px;right:20px;z-index:1100}.navbar{position:fixed;top:0;right:-100%;height:100vh;width:70%;background:var(--color-primary);flex-direction:column;justify-content:center;align-items:center;transition:right .3s ease-in-out;z-index:1000}.navbar.open{right:0}.navbar ul{flex-direction:column;gap:20px}.navbar a{font-size:1.2rem}.login-btn{margin-top:20px}}.overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#ffffffb3;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:9999}.spinner-wrapper{position:relative;width:120px;height:120px;display:flex;justify-content:center;align-items:center}.spinner-circle{position:absolute;width:100%;height:100%;border:6px solid rgba(0,0,0,.1);border-top:6px solid #000;border-radius:50%;animation:spin 1.5s linear infinite}.spinner-logo{width:60px;height:60px;z-index:2}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}html,body{margin:0;padding:0;height:100%;width:100%}#root{height:100%;width:100%}.menu-lateral h2{margin-bottom:20px}.menu-lateral ul{list-style:none;padding:0}.menu-lateral li{padding:10px;margin-bottom:5px;cursor:pointer;border-radius:5px}.menu-lateral li:hover{background-color:#f9b833;color:#000}.menu-lateral li.activo{background-color:#f9b833;color:#000;font-weight:700}.contenido-principal{flex:1;height:100vh;background:#edd5c7b3;color:#000;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;overflow-y:auto}.menu-operaciones-layout{display:flex;height:100vh;margin:0;padding:0}.menu-lateral{width:240px;background:#036e7b;color:#fff;display:flex;flex-direction:column;justify-content:space-between;height:100vh}.menu-header{text-align:center;font-size:1.3rem;font-weight:700;margin:0 0 1rem;color:#f9b833}.menu-list{list-style:none;padding:0;margin:0;flex-grow:1}.menu-list li{padding:.9rem 1.2rem;cursor:pointer;transition:background .2s,padding-left .2s;border-left:4px solid transparent}.menu-list li:hover{background:#edd5c733;padding-left:1.6rem}.menu-list li.activo{background:#f9b833;color:#000;font-weight:700;border-left:4px solid #c35254}.logout-container{padding:1rem;text-align:center}.btn-logout{width:100%;padding:.7rem;background:#c35254;border:none;border-radius:6px;color:#fff;font-weight:700;cursor:pointer;transition:background .2s}.btn-logout:hover{background:#9c3f41}.contenido-principal{flex:1;min-height:100vh;background:#edd5c7b3;box-sizing:border-box;overflow-y:auto}.placeholder{flex:1;display:flex;align-items:center;justify-content:center;color:#666;font-size:1.2rem;font-style:italic}.diseno-container{display:flex;flex-direction:column;align-items:center;padding:2rem;animation:fadeIn .4s ease-in-out}body,html,#root{margin:0;padding:0;height:100%}.titulo-diseno{font-size:2rem;margin-bottom:2rem;color:#036e7b}.diseno-cards{display:flex;gap:2rem;flex-wrap:wrap;justify-content:center}.card{width:280px;padding:2rem;background:#fff;border-radius:16px;box-shadow:0 6px 14px #00000026;cursor:pointer;transition:transform .25s ease,box-shadow .25s ease}.card:hover{transform:translateY(-6px);box-shadow:0 10px 20px #036e7b4d}.card h3{margin-bottom:.5rem;color:#036e7b}.card p{color:#555;font-size:.9rem}.diseno-detalle{padding:2rem;animation:fadeIn .4s ease-in-out}.back-btn{margin-bottom:1rem;padding:.6rem 1.2rem;background:#c35254;color:#fff;border:none;border-radius:8px;cursor:pointer;transition:background .2s ease}.back-btn:hover{background:#963c3e}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem 2rem}.col-1{grid-column:1}.col-2{grid-column:2}.grupo-telas,.grupo-promedios{display:flex;flex-direction:column;gap:.5rem;background:#fafafa;padding:.8rem 1rem;border-radius:8px;box-shadow:0 2px 6px #0000000d}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.creacion-ref-container{display:flex;gap:1.5rem;animation:fadeIn .4s ease-in-out;font-size:.9rem}.formulario-ref{flex:2;background:#fff;padding:1.5rem;border-radius:12px;box-shadow:0 4px 10px #00000014}.formulario-ref h2{margin-bottom:1rem;font-size:1.2rem;color:#036e7b}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem 1.25rem}.form-grid label{display:flex;flex-direction:column;font-weight:600;color:#036e7b;font-size:.8rem}.form-grid input,.form-grid textarea{margin-top:.35rem;padding:.5rem .6rem;font-size:.9rem;border:1px solid #ddd;border-radius:6px;outline:none;transition:border .2s ease,box-shadow .2s ease}.form-grid input:focus,.form-grid textarea:focus{border:1px solid rgb(3,110,123);box-shadow:0 0 0 2px #036e7b26}.full-width{grid-column:span 2}.btn-guardar{margin-top:1.2rem;padding:.6rem 1.2rem;font-size:.9rem;background:#036e7b;color:#fff;font-weight:600;border:none;border-radius:6px;cursor:pointer;transition:background .25s ease}.btn-guardar:hover{background:#02555f}.preview-imagen{flex:1;background:#fff;padding:1.2rem;border-radius:12px;box-shadow:0 4px 10px #00000014;text-align:center}.preview-imagen h3{margin-bottom:.75rem;font-size:1rem;color:#c35254}.preview-imagen img{margin-top:.75rem;max-width:100%;border-radius:10px;box-shadow:0 3px 8px #0000001f}form.validated input:required:invalid,form.validated textarea:required:invalid{border:2px solid #e63946!important;outline:none}form.validated input:required:valid,form.validated textarea:required:valid{border:2px solid #2a9d8f!important}input,textarea{transition:border .3s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.alerta-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:2000}.alerta-card{background:#fff;padding:24px 32px;border-radius:16px;max-width:400px;text-align:center;box-shadow:0 8px 20px #0003;animation:aparecer .3s ease}.alerta-card h3{margin:0 0 10px;color:#036e7b}.alerta-card p{font-size:15px;margin-bottom:20px;color:#333}.btn-alerta{padding:10px 20px;border:none;background:#036e7b;color:#fff;border-radius:25px;font-size:14px;cursor:pointer;transition:background .3s ease}.btn-alerta:hover{background:#f9b833;border:none;text-decoration:none;outline:none}@keyframes aparecer{0%{opacity:0;transform:translateY(-15px)}to{opacity:1;transform:translateY(0)}}.historial-container{padding:0 20px}.buscador-container{position:relative;width:100%;max-width:350px;margin:16px 0}.buscador{width:100%;padding:10px 14px 10px 38px;border:1.5px solid #ccc;border-radius:25px;font-size:14px;transition:all .3s ease;background:var(--color-white);outline:none}.buscador:focus{border-color:var(--color-primary);box-shadow:0 0 6px var(--color-primary)}.icono-buscar{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#666;font-size:16px;pointer-events:none}.tabla-referencias{width:100%;margin:20px 0;border-collapse:separate;border-spacing:0;font-size:14px;background:var(--color-white);border-radius:12px;overflow:hidden;box-shadow:0 4px 12px #0000000f}.tabla-referencias thead{background:linear-gradient(90deg,var(--color-primary),var(--color-primary));color:var(--color-white);text-transform:uppercase;font-size:13px;letter-spacing:.5px}.tabla-referencias thead th{padding:12px 16px;text-align:left;font-weight:600}.tabla-referencias tbody td{padding:10px 16px;border-bottom:1px solid #f0f0f0}.tabla-referencias tbody tr:hover{background-color:var(--color-secondary-light);transition:background .2s ease-in-out}.tabla-referencias tbody tr:last-child td{border-bottom:none}.tabla-referencias td,.tabla-referencias th{white-space:nowrap}