:root{
  --fondo:#faf6f2; --fondo-hondo:#f3ece5; --panel:#fffdfb; --borde:#ecdfd6;
  --texto:#34292c; --suave:#8b7a76;
  --acento:#8e2f4c; --acento-oscuro:#6d2039; --acento-claro:#fbeef1;
  --oro:#b8912f; --oro-claro:#f7f0dd;
  --ok:#1f7a5a; --ok-fondo:#e9f7f1;
  --error:#b3261e; --error-fondo:#fdecea; --alerta:#8a5a00; --alerta-fondo:#fdf5e3;
  --radio:14px; --sombra:0 1px 2px rgba(52,41,44,.05), 0 8px 24px rgba(52,41,44,.06);
  --titulo:"Playfair Display","Didot","Bodoni MT",Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--fondo);color:var(--texto);
  font:15px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
::selection{background:var(--acento-claro);color:var(--acento-oscuro)}
a{color:var(--acento);text-decoration:none}
a:hover{text-decoration:underline}
h1{font-family:var(--titulo);font-size:2rem;font-weight:600;letter-spacing:-.01em;margin:0 0 .2rem}
h2{font-size:.82rem;text-transform:uppercase;letter-spacing:.12em;font-weight:700;
  color:var(--acento);margin:1.6rem 0 .9rem;display:flex;align-items:center;gap:.7rem}
h2::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--borde),transparent)}
h2:first-child{margin-top:0}
h3{font-size:.95rem;margin:1.2rem 0 .5rem;color:var(--suave)}
main{max-width:1180px;margin:0 auto;padding:1.75rem 1.25rem 3rem}
footer{max-width:1180px;margin:0 auto;padding:0 1.25rem 2rem;color:var(--suave);
  font-size:.78rem;text-align:center;letter-spacing:.04em}
.sub{color:var(--suave);margin:.15rem 0 0;font-size:.9rem}
.vacio{color:var(--suave);background:var(--fondo);border:1px dashed var(--borde);
  border-radius:var(--radio);padding:1.4rem;text-align:center;margin:.6rem 0;font-size:.9rem}
.parrafo{white-space:pre-wrap;margin:.3rem 0}

/* barra superior */
.barra{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;padding:.8rem 1.4rem;
  background:linear-gradient(115deg,#3d1523,var(--acento-oscuro) 55%,var(--acento));
  color:#f7ece9;box-shadow:0 1px 0 rgba(184,145,47,.55), 0 6px 20px rgba(52,41,44,.13)}
.marca{font-family:var(--titulo);font-size:1.25rem;font-weight:600;letter-spacing:.06em;
  color:#fff;display:flex;align-items:center;gap:.6rem}
.logo{font-size:1rem;width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 30% 25%,#e8c76a,var(--oro));box-shadow:0 2px 8px rgba(0,0,0,.2)}
.barra nav{display:flex;gap:.2rem;flex:1;flex-wrap:wrap}
.barra nav a{padding:.45rem .9rem;border-radius:999px;color:rgba(255,255,255,.8);
  font-weight:500;font-size:.92rem;transition:background .12s ease,color .12s ease}
.barra nav a:hover{background:rgba(255,255,255,.14);color:#fff;text-decoration:none}
.barra nav a.activo{background:#fffdfb;color:var(--acento-oscuro);font-weight:600}
.usuario{display:flex;align-items:center;gap:.9rem;font-size:.88rem;color:rgba(255,255,255,.7)}
.usuario a{color:#fff;font-weight:600}
.barra .enlace{color:rgba(255,255,255,.7)}
.barra .enlace:hover{color:#fff}

/* avisos */
.aviso{padding:.8rem 1.05rem;border-radius:var(--radio);margin:0 0 1.2rem;font-size:.92rem;
  border:1px solid;border-left-width:4px}
.aviso.ok{background:var(--ok-fondo);border-color:#c4e6d8;color:var(--ok)}
.aviso.error{background:var(--error-fondo);border-color:#f4c7c3;color:var(--error)}
.aviso.alerta{background:var(--alerta-fondo);border-color:#ecd9a8;color:var(--alerta)}

/* estructura */
.cabecera{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;
  margin-bottom:1.4rem;flex-wrap:wrap}
.botonera{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.panel{background:var(--panel);border:1px solid var(--borde);border-radius:var(--radio);
  padding:1.4rem;box-shadow:var(--sombra);margin-bottom:1.25rem}
.dos-columnas{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;align-items:start}
@media(max-width:900px){.dos-columnas{grid-template-columns:1fr}}

/* accesos grandes de la pantalla de inicio */
.accesos{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.4rem 0 .9rem}
@media(max-width:700px){.accesos{grid-template-columns:1fr}}
.acceso{background:var(--panel);border:1px solid var(--borde);border-radius:18px;
  padding:2rem 1.5rem;display:flex;flex-direction:column;align-items:center;gap:.4rem;
  text-align:center;box-shadow:var(--sombra);color:var(--texto);position:relative;overflow:hidden;
  transition:transform .12s ease, box-shadow .12s ease;min-height:180px;justify-content:center}
.acceso::before{content:"";position:absolute;inset:0 0 auto;height:3px;
  background:linear-gradient(90deg,var(--acento),var(--oro))}
.acceso:hover{text-decoration:none;border-color:var(--acento);transform:translateY(-3px);
  box-shadow:0 4px 12px rgba(52,41,44,.10), 0 16px 34px rgba(52,41,44,.10)}
.acceso:active{transform:translateY(0)}
.acceso .icono{font-size:2.7rem;line-height:1;margin-bottom:.2rem}
.acceso strong{font-family:var(--titulo);font-size:1.5rem;font-weight:600;line-height:1.2}
.acceso .pie{color:var(--suave);font-size:.92rem}
.acceso.destacado{background:linear-gradient(155deg,#a03755,#6d2039);
  border-color:var(--acento-oscuro);color:#fff}
.acceso.destacado::before{background:linear-gradient(90deg,var(--oro),#e8c76a)}
.acceso.destacado:hover{border-color:#5a1a2f}
.acceso.destacado .pie{color:rgba(255,255,255,.85)}
.accesos-secundarios{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1.6rem}

/* tablas */
.tabla{width:100%;border-collapse:collapse;font-size:.92rem}
.tabla th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;
  color:var(--suave);padding:.55rem .6rem;border-bottom:1px solid var(--borde);font-weight:700}
.tabla td{padding:.65rem .6rem;border-bottom:1px solid var(--borde);vertical-align:middle}
.tabla tbody tr{transition:background .1s ease}
.tabla tbody tr:hover{background:var(--acento-claro)}
.tabla tfoot td{border-top:2px solid var(--borde);border-bottom:none;padding-top:.7rem}
.tabla.pequena td{padding:.35rem .5rem;font-size:.86rem}
.tabla tr.abierta td{background:var(--oro-claro)}

/* etiquetas */
.etiqueta{display:inline-block;background:var(--acento-claro);color:var(--acento);
  border-radius:999px;padding:.12rem .6rem;font-size:.7rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em}
.etiqueta.gris{background:var(--fondo-hondo);color:var(--suave)}
.contador{background:var(--acento-claro);color:var(--acento);border-radius:999px;
  padding:.05rem .55rem;font-size:.8rem;font-weight:700}
.pastilla{display:inline-block;padding:.2rem .65rem;border-radius:999px;font-size:.78rem;
  background:var(--fondo-hondo);color:var(--suave);font-weight:600}
.pastilla.dentro{background:var(--ok-fondo);color:var(--ok)}

/* formularios */
.formulario{margin:0}
.formulario.compacto .rejilla-form{gap:.6rem}
.rejilla-form{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
@media(max-width:600px){.rejilla-form{grid-template-columns:1fr}}
.campo{display:flex;flex-direction:column;gap:.3rem;font-size:.85rem}
.campo>span{color:var(--suave);font-weight:600;font-size:.76rem;
  text-transform:uppercase;letter-spacing:.07em}
.campo.mitad{grid-column:span 1}
.campo.ancho-total,.campo:has(textarea){grid-column:1/-1}
.campo small{color:var(--suave);font-size:.76rem;text-transform:none;letter-spacing:0}
input,select,textarea{font:inherit;padding:.6rem .75rem;border:1px solid var(--borde);
  border-radius:10px;background:#fff;color:var(--texto);width:100%;
  transition:border-color .12s ease, box-shadow .12s ease}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--acento);
  box-shadow:0 0 0 3px var(--acento-claro)}
textarea{resize:vertical}
.acciones{margin-top:1.3rem;display:flex;gap:.6rem}
.check{display:flex;align-items:center;gap:.4rem;font-size:.85rem;color:var(--suave);white-space:nowrap}
.check input{width:auto}
.buscador{display:flex;gap:.6rem;align-items:flex-end;margin-bottom:1.2rem;flex-wrap:wrap}
.buscador input[type=search]{flex:1;min-width:220px;border-radius:999px;padding-left:1rem}
.desplegable{margin-top:1.3rem;border-top:1px solid var(--borde);padding-top:.9rem}
.desplegable summary{cursor:pointer;color:var(--acento);font-size:.88rem;font-weight:600}

/* botones */
.btn{display:inline-block;padding:.58rem 1.2rem;border-radius:999px;border:1px solid var(--borde);
  background:var(--panel);color:var(--texto);font:inherit;font-weight:600;font-size:.88rem;
  cursor:pointer;text-align:center;text-decoration:none;
  transition:background .12s ease,border-color .12s ease,box-shadow .12s ease}
.btn:hover{background:var(--acento-claro);border-color:var(--acento);
  color:var(--acento-oscuro);text-decoration:none}
.btn.primario{background:linear-gradient(160deg,#a03755,var(--acento-oscuro));
  border-color:var(--acento-oscuro);color:#fff;box-shadow:0 2px 8px rgba(110,32,57,.22)}
.btn.primario:hover{filter:brightness(1.12);color:#fff}
.btn.peligro{border-color:#e6b4b0;color:var(--error);background:var(--panel)}
.btn.peligro:hover{background:var(--error);border-color:var(--error);color:#fff}
.btn.ancho-total{width:100%;display:block}
.btn.grande{padding:.95rem 1rem;font-size:1rem;letter-spacing:.02em}
.enlace{background:none;border:none;color:var(--suave);cursor:pointer;font:inherit;
  font-size:.82rem;padding:0;text-decoration:underline}
.enlace.peligro{color:var(--error)}
.en-linea{display:inline}

/* datos de ficha */
.datos{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
@media(max-width:600px){.datos{grid-template-columns:1fr}}
.dato{display:flex;flex-direction:column;background:var(--fondo);border:1px solid var(--borde);
  border-radius:10px;padding:.55rem .8rem}
.dato span{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--suave);font-weight:700}
.dato strong{font-weight:600;word-break:break-word}

/* notas */
.notas{display:flex;flex-direction:column;gap:.7rem;margin-top:1rem}
.nota{border:1px solid var(--borde);border-left:3px solid var(--oro);
  border-radius:10px;padding:.8rem 1rem;background:var(--panel)}
.nota header{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;margin-bottom:.35rem}
.nota header time{color:var(--suave);font-size:.8rem;margin-left:auto}
.nota p{margin:0;font-size:.92rem}
.lista-notas{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.6rem}
.lista-notas li{border-bottom:1px solid var(--borde);padding-bottom:.6rem}
.lista-notas li:last-child{border-bottom:none}
.lista-notas small{color:var(--suave);font-size:.78rem;margin-left:.4rem}
.lista-notas p{margin:.2rem 0 0;font-size:.88rem;color:var(--suave)}

/* panel de fichaje */
.reloj{font-family:var(--titulo);font-size:2.6rem;font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--acento);letter-spacing:.01em}
.rejilla-fichaje{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:1rem;margin-bottom:1.5rem}
.tarjeta-fichaje{background:var(--panel);border:1px solid var(--borde);border-radius:var(--radio);
  padding:1.2rem;display:flex;flex-direction:column;gap:.3rem;box-shadow:var(--sombra)}
.tarjeta-fichaje.dentro{border-color:#bfe3d4;background:linear-gradient(#f4fbf8,#fff)}
.tarjeta-fichaje .nombre{font-family:var(--titulo);font-weight:600;font-size:1.2rem;color:var(--texto)}
.tarjeta-fichaje .puesto{font-size:.75rem;color:var(--suave);text-transform:uppercase;letter-spacing:.07em}
.tarjeta-fichaje .estado{font-size:.85rem;margin-top:.45rem}
.tarjeta-fichaje .horas{font-size:.8rem;color:var(--suave);margin-bottom:.7rem}
.tarjeta-fichaje form{margin-top:auto}

/* login */
.pantalla-login{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:1rem;
  background:
    radial-gradient(900px 500px at 15% 10%,rgba(184,145,47,.18),transparent 60%),
    linear-gradient(160deg,#f3dde3,var(--fondo) 48%,#f6ecdf)}
.tarjeta-login{background:var(--panel);border:1px solid var(--borde);border-radius:20px;
  padding:2.4rem 2rem;width:min(380px,92vw);box-shadow:0 16px 50px rgba(52,41,44,.15);
  display:flex;flex-direction:column;gap:.85rem;text-align:center;position:relative;overflow:hidden}
.tarjeta-login::before{content:"";position:absolute;inset:0 0 auto;height:4px;
  background:linear-gradient(90deg,var(--acento),var(--oro),var(--acento))}
.tarjeta-login .logo-grande{font-size:2.4rem;width:4.2rem;height:4.2rem;margin:.2rem auto 0;
  border-radius:50%;display:grid;place-items:center;background:var(--acento-claro);
  border:1px solid var(--borde)}
.tarjeta-login h1{margin:0}
.tarjeta-login .campo{text-align:left}
.tarjeta-login .btn{margin-top:.6rem}

@media(prefers-reduced-motion:reduce){*{transition:none!important}}