/* ProGroup LS · Gestión — panel del front end.
   admin.css da los componentes; acá va lo que en el admin pone WordPress
   (botones, tipografía) y los ajustes para pantalla de celular. */

.pgls-front{
  max-width:760px; margin:0 auto; padding:0 2px;
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:#1d2327; -webkit-text-size-adjust:100%;
}
.pgls-front *{box-sizing:border-box}
.pgls-front h2{font-size:1.15rem; margin:0 0 2px; line-height:1.25}
.pgls-front p{margin:0 0 10px}

/* --- cabecera --- */
.pgls-front-top{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:12px}
.pgls-front-top p{margin:0}
.pgls-salir{font-size:.82rem; color:#646476; text-decoration:none; white-space:nowrap; padding:6px 2px}
.pgls-salir:hover{color:#1d2327; text-decoration:underline}

/* --- pestañas --- */
.pgls-front-tabs{display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap}
.pgls-front-tabs .button{flex:1 1 auto; min-width:92px}

.pgls-front-aviso{
  background:#fdeaee; color:#b4243a; border-radius:8px; padding:10px 13px;
  font-size:.86rem; font-weight:500;
}
.pgls-front-aviso a{color:#b4243a; font-weight:700}

.pgls-front-pie{margin-top:14px; text-align:center; line-height:1.7}

/* --- botones: en el front no está el CSS del admin de WordPress --- */
.pgls-front .button{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 14px; border:1px solid #dcdce3; border-radius:8px;
  background:#fff; color:#1d2327; font:inherit; font-size:.86rem; font-weight:600;
  line-height:1.2; text-decoration:none; cursor:pointer; min-height:40px; white-space:nowrap;
}
.pgls-front .button:hover{border-color:#9a97a8; color:#1d2327}
.pgls-front .button:focus-visible{outline:2px solid #6d28d9; outline-offset:1px}
.pgls-front .button-primary{background:#6d28d9; border-color:#6d28d9; color:#fff}
.pgls-front .button-primary:hover{background:#5b21b6; border-color:#5b21b6; color:#fff}
.pgls-front .button-small{padding:6px 11px; min-height:34px; font-size:.79rem; border-radius:7px}

/* --- el formulario de login que imprime WordPress --- */
.pgls-front-login{max-width:400px; margin:24px auto}
.pgls-front-login label{display:block; font-size:.78rem; font-weight:600; color:#646476;
  text-transform:uppercase; letter-spacing:.04em; margin-bottom:5px}
.pgls-front-login input[type=text],
.pgls-front-login input[type=password]{
  width:100%; padding:11px 12px; border:1px solid #dcdce3; border-radius:8px;
  font:inherit; font-size:16px; /* 16px evita que el celular haga zoom al enfocar */
}
.pgls-front-login .login-remember{font-size:.85rem; margin:10px 0}
.pgls-front-login .login-remember label{display:inline; text-transform:none; letter-spacing:0;
  font-size:.85rem; font-weight:400; color:#1d2327}
.pgls-front-login .login-submit input[type=submit]{
  width:100%; padding:11px 16px; border:0; border-radius:8px;
  background:#6d28d9; color:#fff; font:inherit; font-weight:600; font-size:.92rem;
  min-height:44px; cursor:pointer;
}
.pgls-front-login .login-submit input[type=submit]:hover{background:#5b21b6}

/* --- ajustes de los componentes de admin.css para el front --- */
.pgls-front .pgls-card{box-shadow:0 1px 2px rgba(0,0,0,.05)}
.pgls-front .pgls-clase{padding:13px 14px}
.pgls-front .pgls-dayhead{padding:8px 14px}
.pgls-front .pgls-seg button{padding:9px 12px; min-height:40px; font-size:.8rem}
.pgls-front select[data-marcar-select]{
  max-width:60px; min-height:40px; border:1px solid #dcdce3; border-radius:8px;
  background:#fff; font-size:.8rem; padding:0 4px;
}

/* En el celular: hora y alumno arriba, botones grandes abajo. */
@media (max-width:640px){
  .pgls-front{padding:0}
  .pgls-front .pgls-clase{flex-wrap:wrap; gap:10px}
  .pgls-front .pgls-hora{flex:0 0 50px}
  .pgls-front .pgls-body{flex:1 1 calc(100% - 60px)}
  .pgls-front .pgls-fila-acc{flex:1 1 100%; justify-content:flex-start; margin-top:4px}
  .pgls-front select[data-marcar-select]{order:1}
  .pgls-front .pgls-seg{flex:1 1 100%; order:2}
  .pgls-front .pgls-seg button{flex:1 1 0; padding:11px 4px}
  .pgls-front-tabs .button{flex:1 1 30%}
}