/* Base visual de Fichajes: sobria, legible y accesible. El color de marca de cada cliente
   se inyecta en --color-primario desde el layout (config('fichajes.color_primario')). */
:root {
  --color-primario: #1f5fbf;
  --fondo: #f6f7f9;
  --superficie: #ffffff;
  --texto: #1b1f24;
  --texto-suave: #5b6670;
  --borde: #dfe3e8;
  --ok: #1a7f4b;
  --aviso: #9a5b00;
  --error: #b3302a;
  --radio: 12px;
  --sombra: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sidebar: 252px;
}

.menu-movil-extra { display: none; }
.push-acciones { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 760px) {
  body { padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
  .menu-movil-extra { display: block; position: fixed; z-index: 55; right: 14px; bottom: calc(76px + env(safe-area-inset-bottom)); width: min(310px, calc(100% - 28px)); border: 1px solid var(--borde); border-radius: 12px; background: white; box-shadow: var(--sombra); }
  .menu-movil-extra summary { padding: 10px 16px; cursor: pointer; font-weight: 650; }
  .menu-movil-extra a, .menu-movil-extra form { display: block; padding: 10px 16px; }
  .menu-movil-extra[open] { max-height: 70vh; overflow-y: auto; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--fuente); font-size: 16px; line-height: 1.5;
  color: var(--texto); background: var(--fondo);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
a { color: var(--color-primario); }
button, input, select, textarea { font-family: inherit; }
:focus-visible { outline: 3px solid var(--color-primario); outline-offset: 2px; }

/* Estructura */
.contenedor { max-width: 960px; margin: 0 auto; padding: 16px; }
.cabecera {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  background: var(--superficie); border-bottom: 1px solid var(--borde);
}
.cabecera img { height: 36px; width: auto; max-width: 140px; object-fit: contain; }
.cabecera__nombre { font-weight: 600; font-size: 1.0625rem; }
h1 { font-size: 1.5rem; line-height: 1.25; margin: 0 0 16px; }
h2 { font-size: 1.125rem; line-height: 1.3; margin: 0 0 12px; }
.suave { color: var(--texto-suave); }

.tarjeta {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra); padding: 20px; margin-bottom: 16px;
}

/* Botones (alto táctil mínimo de 48 px) */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px; border: 1px solid transparent; border-radius: 10px;
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
.boton--primario { background: var(--color-primario); color: #fff; }
.boton--primario:hover { filter: brightness(.92); }
.boton--secundario { background: var(--superficie); color: var(--texto); border-color: var(--borde); }
.boton--secundario:hover { background: var(--fondo); }
.boton--peligro { background: var(--error); color: #fff; }
.boton--grande { width: 100%; min-height: 64px; font-size: 1.125rem; }
.boton:disabled { opacity: .5; cursor: not-allowed; }

/* Pantalla de fichar */
.reloj { font-size: 2.5rem; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.acciones { display: grid; gap: 12px; margin-top: 16px; }

/* Etiquetas de estado */
.estado { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .8125rem; font-weight: 600; }
.estado--ok { background: #e3f4ea; color: var(--ok); }
.estado--aviso { background: #fff1d6; color: var(--aviso); }
.estado--error { background: #fbe4e2; color: var(--error); }
.estado--neutro { background: #eceff2; color: var(--texto-suave); }

/* Formularios */
label { display: block; font-weight: 600; margin-bottom: 4px; }
input, select, textarea {
  width: 100%; min-height: 48px; padding: 10px 12px; font: inherit; color: var(--texto);
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px;
}
.campo { margin-bottom: 16px; }
.error-campo { color: var(--error); font-size: .875rem; margin-top: 4px; }

/* Tablas: desplazamiento horizontal propio, nunca de toda la página */
.tabla-contenedor { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.tabla th { text-align: left; font-size: .8125rem; text-transform: uppercase; letter-spacing: .03em; color: var(--texto-suave); }
.tabla th, .tabla td { padding: 10px 12px; border-bottom: 1px solid var(--borde); white-space: nowrap; }

/* Calendario mensual (lunes a domingo) */
.calendario { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.calendario__dia-semana { text-align: center; padding: 4px 0; font-size: .75rem; font-weight: 600; text-transform: uppercase; color: var(--texto-suave); }
.dia {
  min-height: 76px; padding: 6px; display: flex; flex-direction: column; gap: 2px;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 8px;
  font-size: .8125rem; color: inherit; text-decoration: none; overflow: hidden;
}
.dia--otro-mes { background: transparent; border-color: transparent; color: var(--texto-suave); }
.dia--hoy { border-color: var(--color-primario); box-shadow: inset 0 0 0 1px var(--color-primario); }
.dia--festivo { background: #eef0f3; }
.dia__numero { font-weight: 600; }
.dia__horas { font-weight: 600; font-variant-numeric: tabular-nums; }
.dia__marca { width: fit-content; padding: 1px 6px; border-radius: 4px; font-size: .6875rem; font-weight: 600; }
.dia__marca--aviso { background: #fff1d6; color: var(--aviso); }   /* Falta la salida */
.dia__marca--info { background: #e6eefb; color: var(--color-primario); }
.dia__marca--ok { background: #e3f4ea; color: var(--ok); }

@media (max-width: 520px) {
  .contenedor { padding: 12px; }
  .tarjeta { padding: 16px; }
  .dia { min-height: 60px; padding: 4px; }
  .dia__marca { font-size: .625rem; padding: 1px 4px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Aplicación */
.app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar) 1fr; }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 24px 16px; background: #101b2d; color: #fff; }
.marca { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.marca__simbolo { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 auto; border-radius: 13px; background: var(--color-primario); color: #fff; font-weight: 800; letter-spacing: -.04em; }
.marca strong, .marca small { display: block; }.marca strong{font-size:.94rem}.marca small{margin-top:2px;color:#9eabc0;font-size:.72rem}
.menu { display: flex; flex-direction: column; gap: 4px; margin-top: 32px; }
.menu a { padding: 10px 12px; border-radius: 9px; color: #c9d2e0; text-decoration: none; font-size: .92rem; font-weight: 550; }
.menu a:hover { color: #fff; background: #1b2940; }.menu a.activo { color: #fff; background: #263754; box-shadow: inset 3px 0 var(--color-primario); }
.menu__titulo { margin: 20px 12px 5px; color: #728099; font-size: .68rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.sidebar__pie { margin-top: auto; padding: 16px 10px 0; border-top: 1px solid #26344a; display: flex; justify-content: space-between; gap: 8px; align-items: end; }
.sidebar__pie a { color: #fff; text-decoration: none; font-size: .86rem; }.sidebar__pie small{display:block;color:#8290a6}.sidebar__pie .enlace{color:#9eabc0;font-size:.78rem}
.principal { min-width: 0; }.barra { min-height: 92px; display: flex; align-items: center; justify-content: space-between; padding: 20px clamp(20px,4vw,48px); background: rgba(255,255,255,.92); border-bottom:1px solid var(--borde); backdrop-filter:blur(10px); }
.barra small { color:var(--texto-suave); font-size:.76rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700}.barra h1{margin:4px 0 0;font-size:1.6rem}.avatar{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#e8eef8;color:var(--color-primario);font-weight:800;text-decoration:none}
.contenido { max-width: 1280px; margin: 0 auto; padding: clamp(20px,4vw,48px); }
.nav-movil { display:none; }
.eyebrow { display:block; margin-bottom:5px; color:var(--color-primario); font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.09em; }
.titulo-bloque { margin-bottom:26px}.titulo-bloque h1{font-size:1.75rem;margin:5px 0 8px}.titulo-bloque p{margin:0;color:var(--texto-suave)}
.tarjeta { margin-bottom:20px; border-color:#e3e7ed; box-shadow:0 8px 30px rgba(16,24,40,.045); }
.tarjeta__cabecera { display:flex; justify-content:space-between; align-items:start; gap:20px; margin-bottom:14px}.tarjeta__cabecera h2{margin-bottom:0}.tarjeta__cabecera>a{font-size:.85rem;font-weight:650;text-decoration:none}
.bienvenida { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:4px 2px 28px}.bienvenida h2{font-size:1.75rem;margin:0 0 4px}.bienvenida p{margin:0;color:var(--texto-suave)}
.metricas { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:22px}.metrica{display:flex;flex-direction:column;min-height:145px;padding:20px;background:#fff;border:1px solid var(--borde);border-radius:var(--radio);box-shadow:var(--sombra)}.metrica>span{color:var(--texto-suave);font-size:.82rem;font-weight:650}.metrica>strong{margin:auto 0 3px;font-size:2rem;letter-spacing:-.04em}.metrica>small{color:var(--texto-suave)}.metrica a{text-decoration:none;font-weight:650}.metrica--acento{background:#12233c;color:#fff;border-color:#12233c}.metrica--acento>span,.metrica--acento>small{color:#b6c3d7}.metrica--acento a{color:#fff}
.estado-grande{font-size:1.35rem!important;letter-spacing:0!important}.estado-grande--dentro{color:var(--ok)}.estado-grande--pausa{color:var(--aviso)}.estado-grande--fuera{color:var(--texto)}
.grid-2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px}.grid-2--form{grid-template-columns:minmax(300px,.85fr) minmax(0,1.3fr)}.grid-fichar{display:grid;grid-template-columns:minmax(320px,.8fr) minmax(0,1.2fr);gap:20px}
.evento { display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid #edf0f3}.evento:last-child{border-bottom:0}.evento__punto{width:10px;height:10px;border-radius:50%;background:#8a95a5;box-shadow:0 0 0 4px #edf0f3}.evento__punto--entrada,.evento__punto--pausa_fin{background:var(--ok);box-shadow:0 0 0 4px #e2f2e9}.evento__punto--salida{background:var(--error);box-shadow:0 0 0 4px #f8e5e4}.evento__punto--pausa_inicio{background:var(--aviso);box-shadow:0 0 0 4px #fff0d1}.evento strong,.evento small{display:block}.evento small{color:var(--texto-suave);margin-top:1px}
.atajos{display:grid;gap:9px}.atajos a,.atajos button{display:block;width:100%;padding:13px 14px;border:1px solid var(--borde);border-radius:10px;background:#fff;text-align:left;text-decoration:none;color:var(--texto);cursor:pointer}.atajos a:hover,.atajos button:hover{border-color:var(--color-primario);background:#f8faff}.atajos strong,.atajos small{display:block}.atajos small{margin-top:2px;color:var(--texto-suave)}
.alerta{margin-bottom:18px;padding:13px 16px;border-radius:10px;font-size:.9rem}.alerta ul{margin:6px 0 0;padding-left:20px}.alerta--ok{background:#e8f5ed;color:#12683c;border:1px solid #bfe3cd}.alerta--error{background:#fceae8;color:#92251f;border:1px solid #efc4c0}
.pagina-acceso{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 80% 10%,#e4edfa 0,transparent 32%),#f4f6f9}.acceso{width:min(440px,calc(100% - 28px));padding:36px 0}.marca--acceso{width:max-content;margin:0 auto 24px;color:var(--texto)}.marca--acceso small{color:var(--texto-suave)}.acceso__tarjeta{padding:34px}.acceso__pie{text-align:center;color:var(--texto-suave);font-size:.75rem}.label-linea{display:flex;justify-content:space-between;gap:12px}.label-linea a{font-size:.8rem}.check{display:flex;align-items:center;gap:9px;margin:4px 0 18px;font-weight:500}.check input{width:18px;min-height:18px}.centrado{text-align:center;margin:18px 0 0}
.campo label{font-size:.84rem}.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--color-primario);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primario) 14%,transparent);outline:none}.campos-2,.campos-3{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.campos-3{grid-template-columns:repeat(3,minmax(0,1fr))}.ancho{width:100%}.boton--icono{width:48px;padding:0}.boton{transition:transform .15s,filter .15s}.boton:active{transform:translateY(1px)}.enlace{padding:0;border:0;background:none;color:var(--color-primario);cursor:pointer}.enlace--peligro{color:var(--error)}
.fichador{text-align:center}.fichador .reloj{margin-top:18px;font-size:clamp(2.8rem,7vw,4.5rem);letter-spacing:-.05em}.fecha-reloj{margin:0 0 24px;color:var(--texto-suave)}.estado-jornada{display:flex;justify-content:space-between;padding:14px 0;border-top:1px solid var(--borde);border-bottom:1px solid var(--borde)}.nota-seguridad,.nota{margin:16px 0 0;color:var(--texto-suave);font-size:.78rem}.timeline{margin-bottom:18px}
.selector-mes{display:flex;justify-content:center;align-items:center;gap:24px;margin-bottom:18px;text-align:center}.selector-mes h2{margin:0}.tarjeta--calendario{padding:14px}.leyenda{display:flex;gap:18px;flex-wrap:wrap;color:var(--texto-suave);font-size:.78rem}.leyenda span{display:flex;align-items:center;gap:6px}.leyenda i{width:10px;height:10px;border-radius:3px;background:#fff;border:1px solid var(--borde)}.leyenda__hoy{border:2px solid var(--color-primario)!important}.leyenda__ausencia{background:#e6eefb!important}.leyenda__festivo{background:#eef0f3!important}
.solicitud{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:15px 0;border-bottom:1px solid var(--borde)}.solicitud:last-of-type{border-bottom:0}.solicitud p{margin:3px 0 0;color:var(--texto-suave);font-size:.84rem}.solicitud__acciones{display:flex;align-items:center;gap:12px}.vacio{padding:22px 0;color:var(--texto-suave);text-align:center}.nota{padding:12px;background:#f5f7fa;border-radius:8px}
.acciones-cabecera{display:flex;justify-content:space-between;gap:18px;margin-bottom:18px}.buscador{display:flex;gap:8px;flex:1;max-width:520px}.tabla__sub{display:block;color:var(--texto-suave)}.tabla__acciones{display:flex;gap:12px}.tabla__acciones a{text-decoration:none;font-weight:650}.subnav{display:flex;gap:4px;margin-bottom:18px;padding:4px;width:max-content;background:#e9edf2;border-radius:10px}.subnav a{padding:8px 14px;border-radius:7px;text-decoration:none;color:var(--texto-suave);font-size:.86rem;font-weight:650}.subnav a.activo{background:#fff;color:var(--texto);box-shadow:var(--sombra)}
.horario{display:grid;gap:9px}.horario__fila{display:grid;grid-template-columns:1fr 120px 120px;gap:8px;align-items:center}.horario__fila input{min-height:42px}.barra-acciones{position:sticky;bottom:0;display:flex;justify-content:flex-end;gap:10px;margin-top:20px;padding:14px;background:rgba(246,247,249,.94);border-top:1px solid var(--borde);backdrop-filter:blur(8px)}
.revision{padding:18px 0;border-bottom:1px solid var(--borde)}.revision p{margin:5px 0;color:var(--texto-suave)}.revision small{display:block;margin-top:3px}.revision form{margin-top:12px}.revision__botones{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}.revision input{min-height:42px}
.pagination{margin-top:18px}.pagination nav{display:flex}.pagination svg{width:18px}.pagination p{font-size:.8rem}

@media (max-width: 1000px){.metricas{grid-template-columns:repeat(2,1fr)}.sidebar{width:220px}.app-shell{grid-template-columns:220px 1fr}.grid-2,.grid-fichar,.grid-2--form{grid-template-columns:1fr}}
@media (max-width: 760px){body{padding-bottom:calc(68px + env(safe-area-inset-bottom))}.app-shell{display:block}.sidebar{display:none}.barra{min-height:72px;padding:14px 18px}.barra h1{font-size:1.3rem}.contenido{padding:18px 14px}.nav-movil{position:fixed;z-index:50;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(4,1fr);align-items:end;padding:8px 8px calc(8px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);border-top:1px solid var(--borde);box-shadow:0 -5px 24px rgba(16,24,40,.08)}.nav-movil a{text-align:center;text-decoration:none;color:var(--texto-suave);font-size:.7rem;font-weight:700}.nav-movil a.activo{color:var(--color-primario)}.nav-movil__fichar{margin-top:-22px;padding:15px 5px;border-radius:50%;background:var(--color-primario);color:#fff!important;box-shadow:0 5px 16px color-mix(in srgb,var(--color-primario) 35%,transparent)}.bienvenida{align-items:start}.metricas{gap:10px}.metrica{min-height:125px;padding:15px}.metrica>strong{font-size:1.65rem}.calendario{gap:2px}.dia{min-height:72px;border-radius:5px}.dia__horas{font-size:.7rem}.dia__marca{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.acciones-cabecera{flex-direction:column}.buscador{max-width:none}.campos-3{grid-template-columns:1fr}.tabla th,.tabla td{padding:10px 8px}.horario__fila{grid-template-columns:1fr 92px 92px}}
@media (max-width: 480px){.metricas{grid-template-columns:1fr 1fr}.bienvenida .boton{display:none}.acceso__tarjeta{padding:24px 20px}.campos-2{grid-template-columns:1fr}.solicitud{align-items:start;flex-direction:column}.solicitud__acciones{width:100%;justify-content:space-between}.dia{min-height:61px}.dia__marca{display:none}.tarjeta--calendario{padding:8px}.calendario__dia-semana{font-size:.62rem}.horario__fila{grid-template-columns:1fr 82px 82px;font-size:.75rem}}


/* v1.1: horarios con varios tramos */
.horario--multiple {
    display: grid;
    gap: 12px;
}

.horario-dia {
    padding: 14px;
    border: 1px solid var(--borde);
    border-radius: 10px;
    background: #fff;
}

.horario-dia__nombre {
    display: block;
    margin-bottom: 10px;
    color: var(--texto);
}

.horario-dia__tramos {
    display: grid;
    gap: 8px;
}

.horario-tramo {
    display: grid;
    grid-template-columns: 64px minmax(90px, 1fr) 18px minmax(90px, 1fr);
    gap: 8px;
    align-items: center;
}

.horario-tramo > span:first-child {
    color: var(--texto-suave);
    font-size: .78rem;
    font-weight: 700;
}

.horario-tramo__separador {
    text-align: center;
    color: var(--texto-suave);
}

@media (max-width: 480px) {
    .horario-tramo {
        grid-template-columns: 54px minmax(72px, 1fr) 14px minmax(72px, 1fr);
        gap: 5px;
    }

    .horario-dia {
        padding: 10px;
    }
}

/* v1.1: selector de modalidad */
.formulario-fichaje {
  display: grid;
  gap: 14px;
  width: 100%;
}

.selector-modalidad {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0 2px;
  padding: 0;
  border: 0;
  text-align: left;
}

.selector-modalidad legend {
  grid-column: 1 / -1;
  width: 100%;
  margin-bottom: 7px;
  color: var(--texto-suave);
  font-size: .82rem;
  font-weight: 700;
}

.opcion-modalidad {
  position: relative;
  margin: 0;
  cursor: pointer;
}

.opcion-modalidad input {
  position: absolute;
  width: 1px;
  min-height: 1px;
  opacity: 0;
  pointer-events: none;
}

.opcion-modalidad span {
  display: flex;
  min-height: 78px;
  flex-direction: column;
  justify-content: center;
  padding: 12px 14px;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: var(--superficie);
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}

.opcion-modalidad strong {
  font-size: .92rem;
}

.opcion-modalidad small {
  margin-top: 2px;
  color: var(--texto-suave);
  font-size: .72rem;
  font-weight: 500;
}

.opcion-modalidad input:checked + span {
  border-color: var(--color-primario);
  background: color-mix(in srgb, var(--color-primario) 7%, white);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primario) 14%, transparent);
}

.opcion-modalidad input:focus-visible + span {
  outline: 3px solid var(--color-primario);
  outline-offset: 2px;
}

@media (max-width: 380px) {
  .selector-modalidad {
    grid-template-columns: 1fr;
  }

  .opcion-modalidad span {
    min-height: 66px;
  }
}

/* v1.1: historial mensual */
.historial-mensual {
  margin-top: 22px;
}

.historial-mensual .tabla-contenedor {
  margin-bottom: 18px;
}

.total-mes {
  display: block;
  color: var(--color-primario);
  font-size: 1.45rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* v1.1.7: selección y gestiones desde el calendario */
.calendario-rango { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto; align-items: end; gap: 14px; }
.calendario-rango .campo { margin-bottom: 0; }
.calendario-rango input { min-width: 0; max-width: 100%; }
.calendario-rango label { font-size: .84rem; }
.calendario-acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.calendario-acciones[hidden], [data-ausencia-form] [hidden] { display: none !important; }
[data-ausencia-sueltos] { border: 1px solid var(--borde); border-radius: 12px; padding: 16px; margin-bottom: 16px; }
[data-ausencia-sueltos] legend { padding: 0 6px; font-size: .85rem; }
[data-ausencia-fila] { align-items: center; margin-bottom: 8px; }
.calendario-laboral [data-calendar-day] { cursor: pointer; }
.calendario-laboral .dia.dia--seleccionado { border-color: var(--color-primario); box-shadow: inset 0 0 0 2px var(--color-primario); opacity: 1; }
.calendario-laboral [data-calendar-day]:focus-visible { outline: 3px solid var(--color-primario); outline-offset: -3px; }
@media (max-width: 760px) {
  .calendario-rango { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calendario-rango > button { grid-column: 1 / -1; }
  .calendario-acciones:not([hidden]) { position: fixed; z-index: 65; bottom: calc(78px + env(safe-area-inset-bottom)); left: 14px; right: 14px; max-height: 38vh; overflow-y: auto; padding: 12px; border: 1px solid var(--borde); border-radius: 12px; background: white; box-shadow: 0 5px 25px rgba(16,24,40,.15); }
  .calendario-acciones > * { flex: 1 1 calc(50% - 10px); font-size: .8rem; padding: 8px; min-height: 44px; text-align: center; }
}

/* v1.1.4: planificación visible y contador de jornada */
[data-tiempo-trabajado] { font-variant-numeric: tabular-nums; }
.calendario-desplazable { overflow-x: auto; }
.calendario-laboral { min-width: 0; width: 100%; }
.calendario-laboral .dia { min-height: 155px; gap: 4px; padding: 10px 8px; overflow-wrap: anywhere; }
.calendario-laboral .dia--laborable { background: #f6faff; }
.calendario-laboral .dia--otro-mes { opacity: .55; }
.calendario-laboral .dia__estado { font-size: .73rem; font-weight: 650; color: var(--texto-suave); }
.calendario-laboral .dia__previsto { font-size: .73rem; font-weight: 700; color: var(--color-primario); }
.calendario-laboral .dia__tramo { font-size: .7rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.calendario-laboral .dia__horas { margin-top: 3px; font-size: .72rem; }
.calendario-laboral .dia__marca { display: block; max-width: 100%; white-space: normal; }
.dia__festividad { display: block; font-size: .7rem; font-weight: 650; color: #704900; line-height: 1.35; }
.dia__festividad--traslado { color: #7e3c10; }
.dia__origen { font-size: .65rem; color: var(--texto-suave); line-height: 1.3; }
.calendario-laboral .dia--festivo { background: #fff0c2; border-color: #d7a63d; }
.calendario-laboral .dia--vacaciones { background: #d7f4df; border-color: #70b88a; }
.calendario-laboral .dia--ausencia { background: #eee2ff; border-color: #b69ad5; }
.calendario-laboral .dia--permiso { background: #dcecff; border-color: #7ca9d7; }
.dia__estado-compacto { display: none; }
.leyenda__vacaciones { background: #d7f4df !important; border-color: #70b88a !important; }
.leyenda__ausencia { background: #eee2ff !important; border-color: #b69ad5 !important; }
.leyenda__festivo { background: #fff0c2 !important; border-color: #d7a63d !important; }
.leyenda__permiso { background: #dcecff !important; border-color: #7ca9d7 !important; }
.calendario-detalle[hidden] { display: none !important; }
.selector-dia-correccion { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: end; margin-bottom: 14px; }
.selector-dia-correccion .campo { margin-bottom: 0; }
.selector-dia-correccion input { min-width: 0; max-width: 100%; }
@media (max-width: 1100px) {
  .calendario-laboral { min-width: 0; width: 100%; gap: 2px; }
  .calendario-desplazable { overflow-x: visible; }
  .calendario-laboral .dia { min-width: 0; min-height: 76px; padding: 6px 2px; gap: 4px; overflow: hidden; }
  .calendario-laboral .dia__numero { font-size: .85rem; }
  .calendario-laboral .dia__estado, .calendario-laboral .dia__previsto,
  .calendario-laboral .dia__tramo, .calendario-laboral .dia__festividad,
  .calendario-laboral .dia__origen, .calendario-laboral .dia__etiqueta-horas,
  .calendario-laboral .dia__marca { display: none; }
  .calendario-laboral .dia__estado-compacto { display: block; font-size: .56rem; font-weight: 700; white-space: nowrap; }
  .calendario-laboral .dia__horas { font-size: .59rem; white-space: nowrap; margin-top: 0; }
  .selector-dia-correccion { grid-template-columns: minmax(0,1fr); }
  .calendario-acciones:not([hidden]) { position: static; max-height: none; padding: 0; margin-top: 12px; border: 0; box-shadow: none; }
}

/* v1.1.2: alineación de formularios y marca de empresa */
.tabla td { vertical-align: middle; }
.tabla td.tabla__acciones { display: table-cell; vertical-align: middle; }
.tabla__acciones a { display: inline-flex; align-items: center; min-height: 44px; }
.tabla__acciones a + a { margin-left: 12px; }
[data-proposal-fields] .campos-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
[data-proposal-fields] .campos-3 > .campo:last-child { grid-column: 1 / -1; }
[data-proposal-fields] input[type="datetime-local"] { width: 100%; min-width: 0; }
.modalidad-compacta { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 4px 0; text-align: left; }
.modalidad-compacta label { margin: 0; color: var(--texto-suave); font-size: .84rem; font-weight: 600; }
.modalidad-compacta select { width: min(220px, 65%); min-height: 44px; padding: 8px 12px; font-size: .9rem; }
.atajos a, .atajos button { font: inherit; line-height: 1.5; min-height: 74px; margin: 0; }
.marca__logo { display: block; width: 64px; height: 60px; flex: 0 0 auto; object-fit: contain; border-radius: 0; background: transparent; padding: 0; }
/* Navegación móvil: cuatro accesos uniformes y un panel modal independiente. */
.menu-movil-dialogo { position: fixed; inset: auto 0 0; width: 100%; max-width: 560px; max-height: 86vh; max-height: 86dvh; margin: 0 auto; padding: 0; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--borde); border-radius: 22px 22px 0 0; color: var(--texto); background: white; box-shadow: 0 -10px 40px rgba(16,24,40,.2); }
.menu-movil-dialogo:not([open]) { display: none; }
.menu-movil-dialogo::backdrop { background: rgba(13,23,39,.5); }
.menu-movil-panel { padding: 18px 18px max(18px,env(safe-area-inset-bottom)); }
.menu-movil-cabecera { position: sticky; top: 0; z-index: 1; background: white; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--borde); }
.menu-movil-cabecera h2 { margin: 0; font-size: 1.25rem; }
.menu-movil-cabecera p { margin: 4px 0 0; color: var(--texto-suave); font-size: .85rem; overflow-wrap: anywhere; }
.menu-movil-cabecera button { flex: 0 0 44px; min-height: 44px; border: 1px solid var(--borde); border-radius: 12px; background: #f4f6fa; font-size: 1.6rem; color: var(--texto); cursor: pointer; }
.menu-movil-enlaces { display: grid; gap: 4px; padding: 12px 0; }
.menu-movil-enlaces a { display: flex; align-items: center; min-height: 48px; padding: 10px 12px; border-radius: 10px; text-decoration: none; font-size: .95rem; font-weight: 550; color: var(--texto); }
.menu-movil-enlaces a:hover, .menu-movil-enlaces a.activo { background: #edf3fc; color: var(--color-primario); }
.menu-movil-enlaces h3 { margin: 14px 12px 4px; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave); }
.menu-movil-salir { padding-top: 10px; border-top: 1px solid var(--borde); }
.menu-movil-abierto { overflow: hidden; }
@media (max-width: 760px) {
  body { padding-bottom: calc(82px + env(safe-area-inset-bottom)); }
  .nav-movil { grid-template-columns: repeat(4,minmax(0,1fr)); align-items: stretch; gap: 4px; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); }
  .nav-movil a, .nav-movil button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; min-height: 60px; margin: 0; padding: 7px 2px; border: 0; border-radius: 12px; background: transparent; color: var(--texto-suave); font: inherit; font-size: .66rem; font-weight: 650; line-height: 1.2; text-decoration: none; cursor: pointer; }
  .nav-movil svg { width: 23px; height: 23px; flex: 0 0 auto; }
  .nav-movil .activo { background: #e9f0fc; color: var(--color-primario); }
  .nav-movil a:focus-visible, .nav-movil button:focus-visible { outline: 2px solid var(--color-primario); outline-offset: -2px; }
  .barra-acciones { bottom: calc(78px + env(safe-area-inset-bottom)); }
}
.fichajes-dia { border: 1px solid var(--borde); border-radius: 12px; margin: 12px 0; overflow: hidden; }
.fichajes-dia summary { padding: 16px; cursor: pointer; font-weight: 700; }
.fichajes-dia summary > span { display: inline-block; margin: 2px 12px 2px 0; }
.fichajes-dia summary .suave { font-weight: 400; font-size: .85rem; }
.fichajes-dia[open] summary { border-bottom: 1px solid var(--borde); }
[data-correction-form] [hidden] { display: none !important; }
.barra__identidad { display: flex; align-items: center; gap: 12px; min-width: 0; }
.barra__logo { display: none; }
.marca > span:last-child { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .barra__logo { display: flex; }
  .barra__identidad .marca__logo { display: block; }
  .barra__identidad h1 { overflow-wrap: anywhere; }
}
@media (max-width: 480px) {
  [data-proposal-fields] .campos-3 { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .historial-mensual .tarjeta__cabecera {
    align-items: center;
  }

  .total-mes {
    font-size: 1.2rem;
  }
}