/* ============================================================ ClickDocente (beta) · Estilos Réplica fiel del look del original (bundle-pretty.js): paleta d, gradiente de cielo, hojas con sombra rosa, botones Baloo, cursor de lápiz, brillitos ✨ e impresión. ============================================================ */ :root{ --cielo1:#BFE3F7; --cielo2:#E9F7FF; --rosa:#F06BA8; --rosaFuerte:#E44E92; --rosaMoteado:#F48FBC; --rosaBg:#FDE9F3; --tinta:#4A3B50; --tintaSuave:#8A7A93; --blanco:#FFFFFF; --papel:#FFFDF9; --renglon:#BFD9F2; --dorado:#D9A94E; --doradoClaro:#F2CE8A; --sol:#FFC531; --solBg:#FFF4D2; --lima:#5FBF63; --limaBg:#E5F6E4; --coral:#F05A5A; --coralBg:#FDE4E1; --azul:#4FB3E8; --azulBg:#E3F3FC; --morado:#B57BE0; --moradoBg:#F3E9FB; --naranja:#FF9A3C; --naranjaBg:#FFEEDB; --borde:#F3DCE8; --vacioBg:#F4F0F2; /* Sombras "de papel". Estos valores son solo el respaldo del tema rosa: aplicarTema() (ui.js) los reescribe en según el tema elegido. */ --sombra08:#E44E9214; --sombra10:#E44E921A; --sombra15:#E44E9226; --sombra16:#E44E9229; --sombra22:#E44E9238; --sombraSuave:#F06BA877; } *{box-sizing:border-box} html,body{margin:0;padding:0;min-height:100vh;color:var(--tinta); font-family:'Nunito',system-ui,sans-serif; background:linear-gradient(180deg,var(--cielo1),var(--cielo2) 60%)} h1,h2,h3,h4{font-family:'Baloo 2','Nunito',sans-serif;color:var(--tinta)} .script{font-family:'Pacifico',cursive;font-weight:400} button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{ outline:3px solid var(--rosa);outline-offset:2px} ::placeholder{color:#C9B8CE} .oculto{display:none !important} /* Cursor de lápiz — solo donde hay mouse de verdad */ @media (pointer: fine){ .app-mk{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cg transform='rotate(40 13 13)'%3E%3Crect x='10' y='1' width='6' height='14' rx='1.5' fill='%23F06BA8'/%3E%3Crect x='10' y='1' width='6' height='4' rx='1.5' fill='%23FFC531'/%3E%3Cpolygon points='10,15 16,15 13,22' fill='%23FBD9A0'/%3E%3Cpolygon points='12,19.8 14,19.8 13,22' fill='%234A3B50'/%3E%3C/g%3E%3C/svg%3E") 4 22, auto} } /* ---------- Animaciones del original ---------- */ @keyframes brillito{ from{opacity:1;transform:translateY(0) scale(1) rotate(0deg)} to{opacity:0;transform:translateY(-18px) scale(.4) rotate(25deg)} } @keyframes apareceFondo{from{opacity:0}to{opacity:1}} @keyframes apareceModal{ from{opacity:0;transform:scale(.94) translateY(14px)} to{opacity:1;transform:scale(1) translateY(0)} } @media (prefers-reduced-motion: no-preference){ .flot{animation:flotar 3.6s ease-in-out infinite;display:inline-block} @keyframes flotar{0%,100%{transform:translateY(0) rotate(8deg)}50%{transform:translateY(-7px) rotate(8deg)}} button:not(:disabled):active{transform:scale(.96)} .modal-fondo{animation:apareceFondo .18s ease} .modal-tarjeta{animation:apareceModal .22s cubic-bezier(.2,.8,.3,1)} } /* El "hover" solo debe existir donde de verdad hay mouse */ @media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine){ .hoja,.panel,.ficha{transition:transform .16s ease, box-shadow .16s ease} .hoja:hover,.ficha:hover{transform:translateY(-4px);box-shadow:0 9px 0 var(--sombra16)} .navboton{transition:transform .12s ease, background .12s ease} .navboton:hover{transform:translateX(3px)} } #carga-inicial{position:fixed;inset:0;display:flex;align-items:center;justify-content:center; flex-direction:column;gap:10px;background:linear-gradient(180deg,var(--cielo1),var(--cielo2) 60%); color:var(--tinta);font-weight:800} #carga-inicial span{font-size:42px} /* ---------- Autenticación ---------- */ .pantalla-auth{min-height:100vh;display:flex;align-items:center;justify-content:center; flex-direction:column;gap:0;padding:20px; background:linear-gradient(180deg,var(--cielo1),var(--cielo2) 60%)} .logo{font-family:'Pacifico',cursive;font-size:34px;color:var(--rosaFuerte);margin:0; text-align:center;line-height:1;font-weight:400} .tarjeta-auth{position:relative;background:var(--papel);border:3px solid var(--rosa); border-radius:26px;padding:30px 26px 26px;max-width:430px;width:100%; box-shadow:0 12px 0 var(--sombra22)} .tarjeta-auth h2{margin:4px 0 2px;font-size:21px;text-align:center} .nota-auth{text-align:center;font-size:11.5px;color:var(--tintaSuave);font-weight:700; margin:14px 0 0;max-width:430px} .nota-auth a{color:var(--tintaSuave)} /* ---------- Campos y botones ---------- */ .campo{margin-bottom:13px} .campo label{display:block;font-weight:800;font-size:12.5px;color:var(--rosaFuerte);margin-bottom:5px} .campo input,.campo select,.campo textarea{width:100%;box-sizing:border-box; border:2px solid var(--borde);border-radius:14px;padding:10px 13px;font-size:14.5px; font-family:'Nunito',sans-serif;color:var(--tinta);background:#fff;outline:none} .campo input:focus,.campo select:focus,.campo textarea:focus{outline:3px solid var(--rosa);outline-offset:2px} .fila{display:flex;gap:12px;flex-wrap:wrap} .fila .campo{flex:1;min-width:150px;margin-bottom:0} .btn{background:var(--rosa);color:#fff;border:2.5px solid var(--rosa);border-radius:999px; padding:10px 18px;font-size:14.5px;font-weight:800;cursor:pointer; font-family:'Baloo 2',sans-serif;box-shadow:0 3px 0 var(--sombraSuave)} .btn:disabled{opacity:.6;pointer-events:none} .btn.sec{background:var(--blanco);color:var(--rosa);box-shadow:0 2px 0 var(--sombra15)} .btn.mini{padding:5px 11px;font-size:12px} .btn.peligro{background:var(--coral);border-color:var(--coral);box-shadow:0 3px 0 #F05A5A77} .btn.peligro.sec,.btn.sec.peligro{background:var(--blanco);color:var(--coral)} .enlace{background:transparent;border:none;cursor:pointer;color:var(--rosaFuerte); font-weight:800;font-size:13.5px;font-family:'Baloo 2',sans-serif;padding:4px} .enlace.suave{color:var(--tintaSuave);font-weight:700;font-size:12.5px} .error{background:var(--coralBg);border:2px solid #F05A5A66;border-radius:14px; padding:10px 14px;font-size:13.5px;font-weight:800;color:var(--coral);margin-bottom:12px} .exito{background:var(--limaBg);border:2px solid #5FBF6366;border-radius:14px; padding:10px 14px;font-size:13.5px;font-weight:800;color:#2E7D32;margin-bottom:12px} /* ---------- Layout principal ---------- */ .disposicion{display:flex;min-height:100vh;position:relative} aside.lado{width:226px;background:var(--blanco);border-right:3px solid var(--borde); padding:18px 12px;flex-shrink:0;position:sticky;top:0;height:100vh;overflow-y:auto; display:flex;flex-direction:column;z-index:2} .separador{height:2px;background:repeating-linear-gradient(90deg,var(--rosa) 0 8px,transparent 8px 14px); margin:8px 4px 12px;border-radius:2px} .navboton{display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer; background:transparent;border:none;border-left:5px solid transparent;color:var(--tintaSuave); font-weight:800;font-size:14px;padding:9px 10px;border-radius:4px 14px 14px 4px; margin-bottom:3px;font-family:'Baloo 2',sans-serif} .navboton .emoji{font-size:18px} .navboton.on{color:var(--color-mod,var(--rosaFuerte));border-left-color:var(--color-mod,var(--rosaFuerte)); background:color-mix(in srgb, var(--color-mod,var(--rosaFuerte)) 9%, transparent)} main.principal{flex:1;padding:26px 26px 70px;max-width:1120px;margin:0 auto;width:100%; position:relative;z-index:1} .navmovil{display:none;gap:8px;margin-bottom:16px;overflow-x:auto; -webkit-overflow-scrolling:touch;padding-bottom:6px} .navmovil::-webkit-scrollbar,.chip-scroll::-webkit-scrollbar{display:none} .navmovil,.chip-scroll{scrollbar-width:none} .navmovil button{background:var(--blanco);color:var(--tinta);border:2px solid var(--borde); border-radius:999px;padding:9px 15px;font-size:13px;font-weight:800; font-family:'Baloo 2',sans-serif;flex-shrink:0;white-space:nowrap;cursor:pointer} .navmovil button.on{color:#fff;background:var(--color-mod,var(--rosaFuerte)); border-color:var(--color-mod,var(--rosaFuerte))} @media (max-width:780px){ aside.lado,.lado{display:none !important} .navmovil{display:flex !important} .barra-movil{display:flex !important} input,select,textarea{font-size:16px !important} .form-grid{grid-template-columns:1fr !important} main.principal{padding:16px 14px 70px} } @media (max-width:480px){ .portada{padding:16px 16px 16px 28px !important} .modal-tarjeta{padding:20px 18px 18px !important} } /* ---------- Barra de arriba en celular ---------- La barra lateral se esconde abajo de 780px y ahí viven el chip de guardado y el botón de cerrar sesión. Esta barra se los devuelve. */ .barra-movil{display:none;align-items:center;gap:8px;margin-bottom:12px; background:var(--blanco);border:2px solid var(--borde);border-radius:16px; padding:8px 10px;box-shadow:0 4px 0 var(--sombra10)} .barra-movil .marca{font-family:'Pacifico',cursive;font-size:19px;color:var(--rosaFuerte); line-height:1;flex-shrink:0} .barra-movil .quien{font-size:11.5px;font-weight:800;color:var(--tintaSuave); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1} .barra-movil .chip-guardado{flex-shrink:0;font-size:11.5px;padding:3px 9px} .barra-movil .salir{flex-shrink:0;background:transparent;border:2px solid var(--borde); border-radius:999px;padding:6px 12px;font-size:12px;font-weight:800; color:var(--tintaSuave);cursor:pointer;font-family:'Baloo 2',sans-serif} /* Chip de estado de guardado */ .chip-guardado{display:inline-block;background:var(--limaBg);color:var(--lima); border:2px solid #5FBF6344;border-radius:999px;padding:4px 12px;font-size:12.5px; font-weight:800;white-space:nowrap} /* ---------- Componentes ---------- */ .panel,.hoja{position:relative;background:var(--blanco);border:2px solid var(--borde); border-radius:18px;padding:20px;margin-bottom:14px;box-shadow:0 5px 0 var(--sombra10)} .titulo-mod{margin:0 0 4px;font-size:22px} .sub{font-size:13.5px;color:var(--tintaSuave);font-weight:700;margin:0 0 14px} .rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px} .ficha{position:relative;border:2px solid var(--borde);border-radius:18px;padding:14px; background:var(--blanco);cursor:pointer;box-shadow:0 5px 0 var(--sombra10)} .ficha b{font-family:'Baloo 2',sans-serif;font-size:15px} .etiqueta{display:inline-block;border-radius:999px;padding:4px 12px;font-size:12.5px; font-weight:800;white-space:nowrap;background:var(--azulBg);color:var(--azul); border:2px solid #4FB3E844} .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:14px} .kpi{border:2px solid var(--borde);border-radius:18px;padding:14px;text-align:center; background:var(--blanco);box-shadow:0 5px 0 var(--sombra10)} .kpi b{display:block;font-family:'Baloo 2',sans-serif;font-size:26px} .kpi span{font-size:12px;font-weight:800;color:var(--tintaSuave)} table.tabla{width:100%;border-collapse:collapse;font-size:13.5px} table.tabla th{background:var(--rosaBg);color:var(--rosaFuerte);font-family:'Baloo 2',sans-serif; padding:8px 6px;border:1.5px solid var(--borde);font-size:12.5px} table.tabla td{border:1.5px solid var(--borde);padding:6px;text-align:center;font-weight:700} table.tabla td.izq{text-align:left} .aviso{background:var(--solBg);border:2px solid var(--sol);border-radius:14px; padding:12px 14px;font-size:13px;font-weight:700;margin:12px 0} /* Modal */ .modal-fondo{position:fixed;inset:0;background:rgba(46,30,54,.55);z-index:100;display:flex; align-items:center;justify-content:center;padding:16px} .modal-tarjeta{background:#fff;border-radius:22px;padding:22px;max-width:560px;width:100%; max-height:90vh;overflow-y:auto;box-shadow:0 18px 50px rgba(74,59,80,.35)} .modal-tarjeta h3{margin:0 0 12px} /* Asistencia */ .btn-asis{border:2px solid var(--borde);background:#fff;border-radius:12px;width:44px;height:38px; cursor:pointer;font-weight:900;font-size:14px;font-family:'Baloo 2',sans-serif;color:var(--tintaSuave)} .btn-asis.P{background:var(--limaBg);border-color:var(--lima);color:#2E7D32} .btn-asis.R{background:var(--solBg);border-color:var(--sol);color:#C08A00} .btn-asis.F{background:var(--coralBg);border-color:var(--coral);color:#B4483C} /* ---------- Impresión (mecanismo global del original) ---------- */ @media print{ .lado,aside.lado,.navmovil,.no-print{display:none !important} html,body,.app-mk{background:#fff !important;cursor:auto !important} main,main.principal{padding:0 !important;max-width:none !important} }