/* ==========================================================================
   La gente de MARTINICO — v1.0
   Sistema visual aprobado: editorial (base) + marco de sistema (dirección).
   ========================================================================== */
@font-face{font-family:"Kindaten";src:url("../assets/fonts/kindaten.otf") format("opentype");font-weight:400;font-display:swap}
@font-face{font-family:"Montserrat Alternates";src:url("../assets/fonts/montserrat-alternates-regular.otf") format("opentype");font-weight:400;font-display:swap}
@font-face{font-family:"Montserrat Alternates";src:url("../assets/fonts/montserrat-alternates-medium.otf") format("opentype");font-weight:500;font-display:swap}
@font-face{font-family:"Montserrat Alternates";src:url("../assets/fonts/montserrat-alternates-semibold.otf") format("opentype");font-weight:600;display:swap}
@font-face{font-family:"Montserrat Alternates";src:url("../assets/fonts/montserrat-alternates-bold.otf") format("opentype");font-weight:700;display:swap}
@font-face{font-family:"Montserrat Alternates";src:url("../assets/fonts/montserrat-alternates-extrabold.otf") format("opentype");font-weight:800;display:swap}

:root{
  --blue:#1D5BFF;
  --blue-700:#1546CC;
  --blue-200:#D7E3FF;
  --blue-100:#E7EEFF;
  --blue-050:#F2F6FF;
  --navy:#0D1C38;
  --navy-2:#122549;
  --ink:#0A0E18;
  --text:#1A1F29;
  --muted:#5B6472;
  --paper:#FFFFFF;
  --paper-2:#F4F6FA;
  --line:#E2E6EE;
  --line-strong:#C9D1DE;
  --cream:#F9EFE4;
  --sand:#FAF4C6;
  --aqua:#AFE2E5;
  --grey:#9B9B9B;
  --grey-2:#D9D9D9;
  --green:#0B6B3A; --green-bg:#E4F5EC;
  --amber:#8A5A00; --amber-bg:#FFF4D6;
  --red:#A32222; --red-bg:#FDECEC;
  --font-display:"Kindaten",Georgia,serif;
  --font-ui:"Montserrat Alternates",system-ui,-apple-system,sans-serif;
  --font-mono:Monaco,"Courier New",Courier,monospace;
  --font-geneva:Geneva,Verdana,Tahoma,"DejaVu Sans",sans-serif;
  --step--1:clamp(.82rem,.8rem + .1vw,.9rem);
  --step-0:clamp(1rem,.97rem + .15vw,1.07rem);
  --step-1:clamp(1.16rem,1.08rem + .4vw,1.4rem);
  --step-2:clamp(1.5rem,1.3rem + 1vw,2.05rem);
  --step-3:clamp(1.95rem,1.55rem + 2.1vw,3.15rem);
  --radius-lg:22px; --radius:12px; --radius-sm:6px;
  --rail:248px;
  --shadow-photo:0 20px 44px rgba(6,14,32,.20),0 2px 6px rgba(6,14,32,.10);
  --shadow-win:4px 4px 0 0 rgba(3,8,18,.55);
  --shadow-float:0 18px 50px rgba(10,14,24,.18);
  --bevel-up:inset -1px -1px 0 0 var(--grey),inset 1px 1px 0 0 #fff,0 0 0 1px var(--ink);
  --bevel-down:inset 1px 1px 0 0 var(--grey),inset -1px -1px 0 0 #fff,0 0 0 1px var(--ink);
  --checker:linear-gradient(45deg,var(--ink) 25%,transparent 25%,transparent 75%,var(--ink) 75%);
  --checker-light:linear-gradient(45deg,#fff 25%,transparent 25%,transparent 75%,#fff 75%);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --blue:#2E5FD8;
  --blue-700:#9DBBFF;
  --blue-200:#1B2B4D;
  --blue-100:#172A4D;
  --blue-050:#141F33;
  --navy:#0A1220;
  --navy-2:#101A2C;
  --ink:#EDEFF4;
  --text:#D8DCE5;
  --muted:#A2A8B4;
  --paper:#14161C;
  --paper-2:#1B1E26;
  --line:#2E333D;
  --line-strong:#3C424E;
  --cream:#1E2129;
  --sand:#2C2B1C;
  --aqua:#1B3A3F;
  --grey:#565B66;
  --grey-2:#33373F;
  --green:#6FCF97; --green-bg:#12301F;
  --amber:#F2C14E; --amber-bg:#332913;
  --red:#F08A8A; --red-bg:#3A1B1B;
  --shadow-win:4px 4px 0 0 rgba(0,0,0,.65);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
html{height:100%}
body{margin:0;background:var(--paper-2);color:var(--text);font-family:var(--font-ui);font-size:var(--step-0);line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;min-height:100vh;-webkit-tap-highlight-color:transparent}
img{display:block;max-width:100%}
a{color:var(--blue-700);text-underline-offset:3px}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:400;color:var(--ink);line-height:1.08}
p{margin:0}
button{font-family:inherit}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.small{font-size:13px}
.muted{color:var(--muted)}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}
.skip{position:fixed;left:16px;top:-60px;z-index:200;background:var(--blue);color:#fff;padding:10px 16px;border-radius:0 0 6px 6px;text-decoration:none;font-weight:700;transition:top .18s}
.skip:focus{top:0;color:#fff}

/* ---------- Estructura ---------- */
.app{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);min-height:100dvh}
.rail{position:sticky;top:0;height:100dvh;display:flex;flex-direction:column;gap:18px;padding:24px 16px 18px;background:var(--paper);border-right:1px solid var(--line);z-index:20}
.rail__brand{display:flex;align-items:center;gap:11px;padding:0 8px;text-decoration:none;color:var(--ink)}
.rail__brand img{height:26px;width:auto}
:root[data-theme="dark"] .rail__brand img,
:root[data-theme="dark"] .mobile-top img{filter:brightness(0) invert(1)}
.rail__brand span{display:block;font-family:var(--font-mono);font-size:9px;line-height:1.35;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.rail__brand b{display:block;font-family:var(--font-ui);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);font-weight:700}
.mobile-top b{font-family:var(--font-ui);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);font-weight:700}
.auth__brand b{font-family:var(--font-ui);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);font-weight:700}
.rail__rule{height:6px;margin:2px 8px 4px;background-image:var(--checker),var(--checker);background-size:12px 12px;background-position:0 0,6px 6px;background-color:var(--paper)}
.rail__nav{display:grid;gap:2px}
.navlink{display:flex;align-items:center;gap:11px;min-height:42px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:var(--text);font-size:13.5px;font-weight:600;text-align:left;text-decoration:none;cursor:pointer}
.navlink:hover{background:var(--paper-2)}
.navlink .icon{color:var(--muted)}
.navlink.is-active{background:var(--blue-100);color:var(--blue-700)}
.navlink.is-active .icon{color:var(--blue-700)}
.navlink__badge{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--blue);color:#fff;font-family:var(--font-mono);font-size:10px;display:grid;place-items:center}
.rail__section{margin:10px 10px 2px;font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.rail__foot{margin-top:auto;display:grid;gap:12px}
.role-switch{display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:3px;background:var(--paper-2);border:1px solid var(--line);border-radius:8px}
.role-switch button{min-height:32px;border:0;border-radius:5px;background:transparent;color:var(--muted);font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;cursor:pointer}
.role-switch button.is-on{background:var(--paper);color:var(--ink);box-shadow:0 1px 3px rgba(10,14,24,.12)}
.rail__user{display:flex;align-items:center;gap:10px;padding:10px;border-top:1px solid var(--line)}
.rail__user .who{min-width:0;flex:1}
.rail__user b{display:block;font-size:12px;color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail__user small{display:block;font-size:10px;color:var(--muted)}
.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:800;background:var(--blue-100);color:var(--blue-700);flex:none}
.avatar--green{background:var(--green-bg);color:var(--green)}
.avatar--amber{background:var(--amber-bg);color:var(--amber)}
.avatar--red{background:var(--red-bg);color:var(--red)}
.avatar--grey{background:var(--paper-2);color:var(--muted)}
.avatar--navy{background:var(--navy);color:#fff}

.main{min-width:0;display:flex;flex-direction:column}
.mobile-top,.bottom-nav{display:none}
.page{width:100%;max-width:1180px;margin:0 auto;padding:34px 40px 72px;flex:1}

/* ---------- Cabecera de página ---------- */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:26px;flex-wrap:wrap}
.page-head__main{min-width:0}
.kicker{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-700);margin-bottom:10px}
.kicker::before{content:"";width:18px;height:6px;background-image:repeating-linear-gradient(90deg,currentColor 0 6px,transparent 6px 12px);flex:none}
.page-head h1{font-size:clamp(30px,3.4vw,46px);line-height:1.02;letter-spacing:-.01em}
.page-head p{margin-top:8px;color:var(--muted);font-size:14px;max-width:60ch}
.page-head__actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.page-date{font-family:var(--font-mono);font-size:11px;color:var(--muted);text-align:right;line-height:1.5}
.page-date b{display:block;color:var(--ink);font-weight:400}

/* ---------- Botones ---------- */
button,a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:44px;padding:.8em 1.25em;border:1.5px solid transparent;border-radius:6px;background:transparent;font-family:var(--font-ui);font-size:13.5px;font-weight:700;line-height:1;letter-spacing:.01em;cursor:pointer;text-decoration:none;transition:background .16s,border-color .16s,color .16s,transform .1s;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--blue);border-color:var(--blue);color:#fff}
.btn--primary:hover{background:var(--blue-700);border-color:var(--blue-700)}
.btn--ghost{border-color:var(--line-strong);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink)}
.btn--soft{background:var(--blue-100);color:var(--blue-700);border-color:transparent}
.btn--soft:hover{background:var(--blue-200)}
.btn--danger{border-color:var(--red-bg);color:var(--red)}
.btn--danger:hover{background:var(--red-bg)}
.btn--small{min-height:34px;padding:.5em .8em;font-size:11.5px}
.btn--icon{width:40px;min-height:40px;padding:0;border-color:var(--line);color:var(--ink)}
.btn--icon:hover{border-color:var(--ink)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn .icon{width:17px;height:17px}
.linkbtn{border:0;background:transparent;padding:0;color:var(--blue-700);font-family:var(--font-ui);font-size:12px;font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:3px;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- Pills y etiquetas ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:2px 10px;border-radius:999px;font-size:11.5px;font-weight:600;white-space:nowrap}
.pill i{width:6px;height:6px;border-radius:50%;background:currentColor;display:block;flex:none}
.pill--work{background:var(--green-bg);color:var(--green)}
.pill--break{background:var(--amber-bg);color:var(--amber)}
.pill--absent{background:var(--blue-100);color:var(--blue-700)}
.pill--pending{background:var(--amber-bg);color:var(--amber)}
.pill--ok{background:var(--blue-100);color:var(--blue-700)}
.pill--no{background:var(--red-bg);color:var(--red)}
.pill--off{background:var(--paper-2);color:var(--muted)}
.pill--system{background:var(--blue);color:#fff}

/* ---------- Tarjetas y superficies ---------- */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.card--flush{padding:0;overflow:hidden}
.card--soft{background:var(--paper-2)}
.card__head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}
.card__head h2{font-size:22px}
.card__head .meta{font-family:var(--font-mono);font-size:10px;color:var(--muted)}
.card__title{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.divider{height:1px;background:var(--line);border:0;margin:0}

/* ---------- Formularios ---------- */
.field{display:grid;gap:6px}
.field label{font-size:12px;font-weight:600;color:var(--ink)}
.field input,.field select,.field textarea{width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--line-strong);border-radius:6px;background:var(--paper);color:var(--ink);font-family:var(--font-ui);font-size:13.5px}
.field textarea{min-height:88px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(29,91,255,.16)}
.field small{font-size:11px;color:var(--muted)}
.field--error input{border-color:var(--red)}
.field--error small{color:var(--red)}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* ---------- Aviso ---------- */
.note{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;border-left:3px solid var(--amber);border-radius:0 6px 6px 0;background:var(--amber-bg);color:var(--text);font-size:12px;line-height:1.5}
.note .icon{width:16px;height:16px;color:var(--amber);margin-top:2px}
.note--blue{border-color:var(--blue);background:var(--blue-050)}
.note--blue .icon{color:var(--blue-700)}
.note--sand{border-color:#D9C86A;background:var(--sand);color:var(--ink)}
.note--sand .icon{color:var(--ink)}

/* ---------- Toast ---------- */
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);z-index:300;display:flex;align-items:center;gap:10px;max-width:min(520px,calc(100vw - 32px));padding:12px 16px;border-radius:8px;background:var(--navy);color:#fff;border:1px solid rgba(255,255,255,.16);box-shadow:0 18px 50px rgba(0,0,0,.42);font-size:13px;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s}
.toast.is-on{opacity:1;transform:translate(-50%,0)}
.toast .icon{color:#9DBBFF;width:18px;height:18px}

/* ---------- Modal ---------- */
.overlay{position:fixed;inset:0;z-index:250;display:none;place-items:center;padding:20px;background:rgba(6,14,32,.5);backdrop-filter:blur(3px)}
.overlay.is-on{display:grid}
.sheet{width:100%;max-width:520px;max-height:calc(100dvh - 40px);overflow:auto;background:var(--paper);border:1px solid var(--ink);border-radius:16px;box-shadow:var(--shadow-float);padding:24px;-webkit-overflow-scrolling:touch}
.sheet h2{font-size:26px;margin-bottom:6px}
.sheet > p{color:var(--muted);font-size:13px;margin-bottom:18px}
.sheet__actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;flex-wrap:wrap}
.sheet__actions .btn{flex:1;min-width:120px}

/* ---------- Utilidades ---------- */
.row{display:flex;align-items:center;gap:10px}
.row--between{justify-content:space-between}
.stack{display:grid;gap:16px}
.stack--sm{display:grid;gap:8px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid-2 > *{min-width:0}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.hide{display:none!important}
.css-checker{background-image:var(--checker),var(--checker);background-size:12px 12px;background-position:0 0,6px 6px;background-color:var(--paper)}

/* ---------- Inicio / fichaje ---------- */
.home-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:22px;align-items:start}
.clock-card{padding:26px 24px 22px;text-align:center;position:relative;overflow:hidden}
.clock-card::before{content:"";position:absolute;left:0;right:0;top:0;height:7px;background-image:var(--checker),var(--checker);background-size:12px 12px;background-position:0 0,6px 6px;background-color:var(--paper)}
.clock-card .card__title{margin-top:6px}
.clock-hint{font-size:12.5px;color:var(--muted);max-width:36ch;margin:0 auto 18px}
.clock-wrap{display:grid;place-items:center;padding:8px 0 4px}
.clock{position:relative;width:184px;height:184px;border-radius:50%;border:6px solid #fff;background:radial-gradient(circle at 50% 32%,#3d74ff,#1D5BFF 56%,#1546CC);color:#fff;display:grid;place-content:center;text-align:center;cursor:pointer;box-shadow:0 0 0 1px var(--blue-200),0 20px 44px rgba(29,91,255,.28);transition:transform .15s,box-shadow .15s}
.clock:hover{transform:translateY(-1px)}
.clock:active{transform:scale(.985)}
.clock b{display:block;font-family:var(--font-ui);font-size:15px;font-weight:800;letter-spacing:.1em;line-height:1.2}
.clock span{display:block;font-family:var(--font-mono);font-size:13px;opacity:.95;margin-top:5px}
.clock small{display:block;font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;opacity:.75;margin-top:7px}
.clock--working::before{content:"";position:absolute;inset:-15px;border-radius:50%;background:conic-gradient(#fff 0turn .68turn,rgba(255,255,255,.28) .68turn 1turn);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px))}
.clock--break{background:radial-gradient(circle at 50% 32%,#fff8cf,#FAF4C6 60%,#E8DE9C);color:var(--ink);box-shadow:0 0 0 1px #E4D897,0 18px 36px rgba(138,90,0,.16)}
.clock--idle{background:radial-gradient(circle at 50% 32%,#3d74ff,#1D5BFF 56%,#1546CC)}
.clock-actions{display:flex;justify-content:center;gap:10px;margin-top:22px;flex-wrap:wrap}
.clock-status{display:inline-flex;align-items:center;gap:7px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line);font-size:12px;color:var(--muted);width:100%;justify-content:center}
.clock-status b{color:var(--ink);font-weight:600}
.shift-line{margin-top:14px;font-size:12px;color:var(--muted);display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.shift-line b{font-family:var(--font-mono);color:var(--ink);font-weight:400}

.today-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat{background:var(--paper-2);border:1px solid var(--line);border-radius:10px;padding:13px 14px}
.stat small{display:block;font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.stat b{display:block;font-family:var(--font-display);font-size:30px;line-height:1;color:var(--ink);margin-top:8px}
.stat em{display:block;font-style:normal;font-size:10.5px;color:var(--muted);margin-top:3px}
.who-list{display:grid}
.who-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.who-row:first-child{border-top:0}
.who-row .who{flex:1;min-width:0}
.who-row .who b{display:block;font-size:12.5px;font-weight:600;color:var(--ink)}
.who-row .who small{display:block;font-size:10.5px;color:var(--muted)}
.who-row .num{font-family:var(--font-mono);font-size:10.5px;color:var(--muted)}
.pending-row{display:flex;align-items:center;gap:12px;justify-content:space-between;padding:12px 0;border-top:1px solid var(--line)}
.pending-row:first-child{border-top:0}
.pending-row b{display:block;font-size:12.5px;font-weight:600;color:var(--ink)}
.pending-row small{display:block;font-size:10.5px;color:var(--muted);margin-top:2px}

/* ---------- Fichajes ---------- */
.tabs{display:inline-flex;gap:2px;padding:3px;background:var(--paper-2);border:1px solid var(--line);border-radius:8px;margin-bottom:20px}
.tabs button{min-height:34px;padding:0 14px;border:0;border-radius:5px;background:transparent;color:var(--muted);font-size:12px;font-weight:700;cursor:pointer}
.tabs button.is-on{background:var(--paper);color:var(--ink);box-shadow:0 1px 3px rgba(10,14,24,.1)}
.timeline{display:grid;gap:0;position:relative;padding-left:6px}
.tl-item{display:grid;grid-template-columns:56px 18px 1fr;gap:12px;align-items:start;min-height:56px;position:relative}
.tl-time{font-family:var(--font-mono);font-size:12px;color:var(--ink);padding-top:2px}
.tl-dot{width:11px;height:11px;border-radius:50%;background:var(--blue);margin-top:4px;position:relative;z-index:1;border:2px solid var(--paper);box-shadow:0 0 0 1px var(--blue)}
.tl-item + .tl-item .tl-dot::before{content:"";position:absolute;left:50%;top:-46px;width:1px;height:46px;background:var(--line);transform:translateX(-50%);z-index:-1}
.tl-body{padding-bottom:18px}
.tl-body b{display:block;font-size:13px;color:var(--ink);font-weight:600}
.tl-body small{display:block;font-size:11px;color:var(--muted)}
.tl-dot--break{background:var(--amber);box-shadow:0 0 0 1px var(--amber)}
.tl-dot--done{background:var(--muted);box-shadow:0 0 0 1px var(--muted)}
.table-wrap{overflow-x:auto}
.table{width:100%;border-collapse:collapse;font-size:12.5px}
.table th{text-align:left;padding:10px 12px;background:var(--paper-2);color:var(--muted);font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;font-weight:400;white-space:nowrap;border-bottom:1px solid var(--line)}
.table td{padding:13px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.table tr:last-child td{border-bottom:0}
.table .num{font-family:var(--font-mono);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.table .strong{font-weight:600;color:var(--ink)}
.table tfoot td{background:var(--blue-050);font-weight:700;color:var(--ink)}
.bar{height:5px;border-radius:99px;background:var(--blue-100);overflow:hidden;min-width:80px}
.bar i{display:block;height:100%;background:var(--blue);border-radius:99px}

/* ---------- Vacaciones ---------- */
.vac-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:22px;align-items:start}
.balance{position:relative;overflow:hidden}
.balance__num{font-family:var(--font-display);font-size:62px;line-height:.9;color:var(--ink);margin:4px 0 6px}
.balance__num small{font-family:var(--font-ui);font-size:14px;color:var(--muted);margin-left:4px}
.balance__bar{height:8px;border-radius:99px;background:var(--blue-100);overflow:hidden;margin:14px 0 8px}
.balance__bar i{display:block;height:100%;background:var(--blue)}
.balance__legend{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted)}
.balance__mark{position:absolute;right:-18px;bottom:-18px;width:96px;height:96px;background-image:var(--checker),var(--checker);background-size:32px 32px;background-position:0 0,16px 16px;opacity:.08;pointer-events:none}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal__dow{text-align:center;font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:4px 0 8px}
.cal__day{position:relative;aspect-ratio:1/1;border:1px solid transparent;border-radius:7px;background:transparent;color:var(--ink);font-family:var(--font-mono);font-size:12px;cursor:pointer;display:grid;place-items:center;min-height:44px;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.cal__day:hover{background:var(--paper-2)}
.cal__day.is-empty{cursor:default;pointer-events:none}
.cal__day.is-weekend{color:var(--muted);background:var(--paper-2)}
.cal__day.is-holiday::after{content:"";position:absolute;bottom:5px;width:4px;height:4px;border-radius:50%;background:var(--muted)}
.cal__day:disabled{opacity:.3;cursor:not-allowed}
.cal__day.is-selected{background:var(--blue);color:#fff;border-color:var(--blue)}
.cal__day.is-inrange{background:var(--blue-100);color:var(--blue-700)}
.cal__day.is-today{box-shadow:inset 0 0 0 1.5px var(--blue)}
.cal__day.is-conflict::before{content:"";position:absolute;top:5px;right:5px;width:4px;height:4px;border-radius:50%;background:var(--amber)}
.cal__legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;font-size:10.5px;color:var(--muted)}
.cal__legend span{display:inline-flex;align-items:center;gap:5px}
.cal__legend i{width:8px;height:8px;border-radius:2px;background:var(--blue);display:block}
.cal__legend i.lg-range{background:var(--blue-100)}
.cal__legend i.lg-conflict{background:var(--amber);border-radius:50%}
.vac-summary{display:grid;gap:10px;margin-top:16px}
.vac-summary__row{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:9px}
.vac-summary__row b{color:var(--ink);font-weight:600;text-align:right}
.myreq{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid var(--line)}
.myreq:first-child{border-top:0}
.myreq b{display:block;font-size:12.5px;color:var(--ink);font-weight:600}
.myreq small{display:block;font-size:10.5px;color:var(--muted)}

/* ---------- Dashboard / ventana de sistema ---------- */
.sys-window{background:var(--paper);border:1px solid var(--ink);border-radius:8px;box-shadow:var(--shadow-win);overflow:hidden}
.sys-bar{display:flex;align-items:center;gap:8px;height:26px;padding:0 7px 0 10px;background-color:var(--cream);background-image:repeating-linear-gradient(180deg,rgba(0,0,0,.06) 0 1px,transparent 1px 2px);border-bottom:1px solid var(--ink);font-family:var(--font-mono);font-size:11px;color:var(--ink);user-select:none}
.sys-bar__name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sys-bar__dots{margin-left:auto;display:flex;gap:6px;flex:none}
.sys-dot{width:17px;height:17px;display:grid;place-items:center;background:var(--cream);box-shadow:var(--bevel-up);border-radius:4px;font-family:var(--font-mono);font-size:9px;line-height:1}
.sys-dot:active{box-shadow:var(--bevel-down)}
.sys-body{padding:26px}
.sys-status{display:flex;justify-content:space-between;gap:10px;align-items:center;height:22px;padding:0 10px;background-color:var(--cream);background-image:repeating-linear-gradient(180deg,rgba(0,0,0,.06) 0 1px,transparent 1px 2px);border-top:1px solid var(--ink);font-family:var(--font-mono);font-size:9px;color:var(--muted)}
.dash-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:20px;flex-wrap:wrap}
.dash-head h1{font-size:clamp(28px,3vw,38px)}
.dash-head p{font-size:12.5px;color:var(--muted);margin-top:5px}
.dash-head__tools{display:flex;gap:16px;align-items:center;font-family:var(--font-mono);font-size:10px;color:var(--muted)}
.dash-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px}
.dash-stat{background:var(--paper-2);border:1px solid var(--line);border-radius:10px;padding:13px 14px}
.dash-stat small{display:block;font-family:var(--font-mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.dash-stat b{display:block;font-family:var(--font-display);font-size:36px;line-height:1;color:var(--ink);margin-top:8px}
.dash-stat em{display:block;font-style:normal;font-size:10px;color:var(--muted)}
.dash-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:14px}
.dcard{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--paper)}
.dcard__head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 13px;border-bottom:1px solid var(--line);background:var(--paper-2);font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.dcard__head a{font-family:var(--font-ui);font-size:9.5px;font-weight:700;letter-spacing:0;text-transform:none;text-decoration:none}
.drow{display:flex;align-items:center;gap:10px;padding:10px 13px;border-top:1px solid var(--line);font-size:11.5px}
.drow:first-child{border-top:0}
.drow .who{flex:1;min-width:0}
.drow .who b{display:block;font-weight:600;color:var(--ink)}
.drow .who small{display:block;color:var(--muted);font-size:10px}
.drow .num{font-family:var(--font-mono);font-size:10.5px;color:var(--muted);white-space:nowrap}
.dpending{padding:12px 13px;border-top:1px solid var(--line);font-size:11.5px}
.dpending:first-child{border-top:0}
.dpending b{display:block;color:var(--ink);font-weight:600}
.dpending small{display:block;color:var(--muted);font-size:10px;margin:2px 0 8px}
.hours{display:grid;gap:10px}
.hours__row{display:grid;grid-template-columns:70px 1fr 70px;gap:10px;align-items:center;font-size:11px;color:var(--muted)}
.hours__row b{font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hours__row .num{text-align:right;font-family:var(--font-mono);font-size:10px;white-space:nowrap}
.coverage{display:grid;gap:0}
.cov-row{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-top:1px solid var(--line);font-size:11.5px}
.cov-row:first-child{border-top:0}
.cov-row b{color:var(--ink);font-weight:600}
.cov-row span{font-family:var(--font-mono);color:var(--muted);font-size:10.5px}
.cov-row .warn{color:var(--amber)}

/* ---------- Solicitudes ---------- */
.req-list{display:grid;gap:14px}
.request{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:20px 22px}
.request--sensitive{border-left:4px solid var(--blue)}
.request__top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.request__type{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.request__person{font-family:var(--font-display);font-size:24px;color:var(--ink);line-height:1.05}
.request__when{font-family:var(--font-mono);font-size:10px;color:var(--muted);white-space:nowrap;padding-top:4px}
.request__data{display:flex;flex-wrap:wrap;gap:8px 18px;margin:12px 0;font-size:12.5px;color:var(--muted)}
.request__data b{color:var(--ink);font-weight:600}
.request__reason{margin:10px 0 14px;font-size:12.5px;color:var(--text);padding-left:12px;border-left:2px solid var(--line)}
.request__reason i{color:var(--muted);font-style:normal}
.request__actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--line)}
.request__actions .btn{min-width:110px}
.request.is-resolved{opacity:.75}
.request.is-resolved .request__actions{display:none}

/* ---------- Equipo ---------- */
.team-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.person{display:flex;gap:12px;align-items:flex-start;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:16px;overflow:hidden}
.person .avatar{width:42px;height:42px;font-size:13px;flex:none}
.person__body{min-width:0;flex:1;overflow:hidden}
.person__body b{display:block;font-size:14px;color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.person__body small{display:block;font-size:11px;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.person__body .row{margin-top:9px;flex-wrap:wrap}
.person__meta{font-family:var(--font-mono);font-size:10px;color:var(--muted);margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- Perfil ---------- */
.profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.kv{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-top:1px solid var(--line);font-size:12.5px}
.kv:first-child{border-top:0}
.kv span{color:var(--muted)}
.kv b{color:var(--ink);font-weight:600;text-align:right}
.switchrow{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:11px 0;border-top:1px solid var(--line);font-size:12.5px}
.switchrow:first-child{border-top:0}
.switch{width:40px;height:23px;border-radius:99px;background:var(--line-strong);border:0;position:relative;cursor:pointer;flex:none;transition:background .15s}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:left .15s}
.switch.is-on{background:var(--blue)}
.switch.is-on::after{left:20px}

/* ---------- Calendario de dirección ---------- */
.shiftcal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.shiftcal__dow{text-align:center;font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding-bottom:4px}
.shiftcal__day{min-height:72px;border:1px solid var(--line);border-radius:8px;padding:6px;background:var(--paper);font-size:10px}
.shiftcal__day.is-muted{background:var(--paper-2);color:var(--muted)}
.shiftcal__day.is-today{box-shadow:inset 0 0 0 1.5px var(--blue)}
.shiftcal__num{font-family:var(--font-mono);font-size:10.5px;color:var(--ink)}
.shiftcal__event{margin-top:3px;padding:1px 4px;border-radius:3px;background:var(--blue-100);color:var(--blue-700);font-size:8.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev-short{display:none}
.shiftcal__event--off{background:var(--amber-bg);color:var(--amber)}
.shiftcal__event--close{background:var(--navy);color:#fff}

/* ---------- Tabletas ---------- */
.mobile-top{position:sticky;top:0;z-index:40;background:var(--paper);backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line);padding:0 18px;align-items:center;gap:12px;min-height:58px}
.mobile-top::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:6px;background-image:var(--checker),var(--checker);background-size:12px 12px;background-position:0 0,6px 6px;background-color:var(--paper);pointer-events:none}
.mobile-top img{height:19px;width:auto}
.mobile-top__spacer{flex:1}
.bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;grid-template-columns:repeat(5,1fr);gap:2px;padding:8px 6px calc(8px + env(safe-area-inset-bottom,0px));background:var(--paper);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line)}
.bottom-nav a{display:grid;place-items:center;gap:3px;min-height:46px;border-radius:7px;text-decoration:none;color:var(--muted);font-size:8.5px;font-weight:600}
.bottom-nav a .icon{width:19px;height:19px}
.bottom-nav a.is-active{color:var(--blue-700);background:var(--blue-050)}

@media(max-width:1100px){
  .home-grid{grid-template-columns:1fr}
  .vac-grid{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .dash-grid{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr 1fr}
  .dash-stats{grid-template-columns:1fr 1fr}
  .profile-grid{grid-template-columns:1fr}
}
@media(max-width:900px){
  .app{grid-template-columns:1fr}
  .rail{display:none}
  .mobile-top{display:flex}
  .bottom-nav{display:grid}
  .page{padding:26px 20px calc(92px + env(safe-area-inset-bottom,0px))}
  .page-head{gap:16px}
  .page-head h1{font-size:clamp(28px,7vw,38px)}
  .page-date{display:none}
  .sys-window{border-radius:10px;box-shadow:var(--shadow-float)}
  .sys-body{padding:18px}
  .sheet{border-radius:16px 16px 0 0;max-width:none;margin-top:auto;max-height:92dvh}
  .overlay{align-items:end;padding:0}
  .toast{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:640px){
  .formgrid,.grid-2,.grid-3,.team-grid{grid-template-columns:1fr}
  .home-grid,.vac-grid,.profile-grid{gap:16px}
  .card{padding:18px}
  .clock{width:168px;height:168px}
  .balance__num{font-size:54px}
  .request{padding:16px 16px 18px}
  .request__actions .btn{flex:1;min-width:0}
  .table--cards thead{display:none}
  .table--cards,.table--cards tbody,.table--cards tr,.table--cards td{display:block;width:100%}
  .table--cards tr{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:10px}
  .table--cards td{border:0;padding:3px 0;display:flex;justify-content:space-between;gap:14px;text-align:right}
  .table--cards td::before{content:attr(data-label);font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:left;flex:none}
  .table--cards td:first-child{font-size:14px;color:var(--ink);font-weight:600}
  .table--cards td:first-child::before{display:none}
  .table--cards tfoot{display:block;background:transparent}
  .table--cards tfoot tr{background:var(--blue-050);border-color:var(--blue-200)}
  .hours__row{grid-template-columns:62px 1fr 58px}
  .dash-head__tools{width:100%;justify-content:space-between}
  .shiftcal__day{min-height:54px;padding:4px}
  .shiftcal__event{font-size:9px;padding:1px 3px;text-align:center}
  .shiftcal__event .ev-long{display:none}
  .shiftcal__event .ev-short{display:inline}
  /* Equipo móvil: tarjetas legibles en pantallas estrechas */
  .team-grid{gap:10px}
  .person{padding:12px;gap:10px}
  .person .avatar{width:34px;height:34px;font-size:11px}
  .person__body{padding-right:6px}
  .person__body b{font-size:13px;white-space:normal;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-width:none}
  .person__body small{font-size:10px;white-space:normal;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-width:none}
  .person__body .row{flex-wrap:wrap;gap:6px;margin-top:6px}
  .person__meta{font-size:9px;white-space:normal;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-width:none}
  .person__body .linkbtn{font-size:11px;padding:0;margin-top:6px}
  .mobile-top{padding:0 16px}
}
@media(max-width:420px){
  .page{padding-left:16px;padding-right:16px}
  .clock{width:154px;height:154px}
  .stat b{font-size:27px}
  .dash-stat b{font-size:32px}
  .dash-stats{grid-template-columns:1fr 1fr}
  .cal{gap:2px}
  .cal__day{min-height:30px;font-size:11px}
  .bottom-nav a{font-size:8px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ==========================================================================
   GENTE v2 — acceso, ventanas, horarios, nóminas y móvil
   ========================================================================== */

/* ---------- Ventanas de martinicoOS en tarjetas ---------- */
.win-bar{display:flex;align-items:center;gap:8px;height:30px;padding:0 8px 0 10px;background-color:var(--cream);background-image:repeating-linear-gradient(180deg,rgba(0,0,0,.06) 0 1px,transparent 1px 2px);border-bottom:1px solid var(--line-strong);font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);user-select:none;pointer-events:none}
.win-bar__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.win-bar__dots{margin-left:auto;display:flex;gap:4px;flex:none}
.win-bar__dots span{width:16px;height:16px;display:grid;place-items:center;border:1px solid var(--line-strong);background:var(--paper);border-radius:3px;font-size:9px;line-height:1;color:var(--muted)}
.card--win{padding-top:0}
.card--win > .win-bar{margin:0 -22px 16px}
.card--flush.card--win > .win-bar{margin:0;border-radius:var(--radius) var(--radius) 0 0}
.clock-card.card--win > .win-bar{margin-left:-24px;margin-right:-24px}
.clock-card.card--win::before{display:none}
.person.card--win,.request.card--win{padding-top:0}
.person.card--win > .win-bar{margin:0 -16px 12px}
.request.card--win > .win-bar{margin:0 -22px 14px}
.dcard.card--win > .win-bar{margin:0;border-radius:9px 9px 0 0}
.dcard.card--win{border-color:var(--line-strong)}
.dcard.card--win > .dcard__head{border-top:0}
.sys-window .win-bar{display:none}

/* ---------- Acceso ---------- */
body[data-auth="true"]{background:var(--paper-2)}
body[data-auth="true"] .app{grid-template-columns:1fr}
body[data-auth="true"] .rail,
body[data-auth="true"] .mobile-top,
body[data-auth="true"] .bottom-nav{display:none!important}
body[data-auth="true"] .page{max-width:none;padding:0}
.auth{position:relative;min-height:100dvh;height:100dvh;display:grid;place-items:start center;gap:18px;padding:calc(28px + env(safe-area-inset-top,0px)) 20px calc(28px + env(safe-area-inset-bottom,0px));background:radial-gradient(circle at 50% 0%,var(--blue-050),transparent 100%),var(--paper-2);overflow-y:auto}
.auth__checker{position:absolute;inset:auto -20px -30px;height:150px;background-image:var(--checker),var(--checker);background-size:28px 28px;background-position:0 0,14px 14px;opacity:.05;pointer-events:none}
.auth__brand{display:flex;align-items:center;justify-content:center;gap:12px;position:relative;z-index:1}
.auth__brand img{height:30px;width:auto}
.auth__brand span{font-family:var(--font-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);font-weight:700}
.auth__card{position:relative;z-index:1;width:min(430px,100%);padding:26px;box-shadow:var(--shadow-float)}
.auth__card.card--win{padding-top:0}
.auth__card.card--win > .win-bar{margin:0 -26px 18px}
.auth__head{margin-bottom:18px}
.auth__kicker{font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.auth__head h1{font-family:var(--font-display);font-size:44px;line-height:1;color:var(--ink);margin:6px 0 8px}
.auth__head p{font-size:12.5px;color:var(--muted);line-height:1.55}
.auth__submit{width:100%;margin-top:20px}
.auth__switch{margin-top:14px;text-align:center;font-size:12px;color:var(--muted)}
.auth__demo{display:grid;gap:6px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.auth__demo-title{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.auth__demo-row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;min-height:44px;padding:9px 11px;border:1px solid var(--line);border-radius:7px;background:var(--paper);color:var(--ink);font-family:var(--font-ui);font-size:10.5px;text-align:left;cursor:pointer}
.auth__demo-row:hover{border-color:var(--line-strong);background:var(--paper-2)}
.auth__demo-row b{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--blue-700)}
.auth__demo-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.auth__demo-row .mono{font-family:var(--font-mono);font-size:9px;color:var(--muted)}
.auth-error{min-height:18px;margin:0 0 8px;font-size:11.5px;font-weight:600;color:var(--red)}
.auth__note{position:relative;z-index:1;max-width:430px;text-align:center;font-size:10.5px;line-height:1.5;color:var(--muted)}
.auth__warning{color:var(--red);border:1px solid var(--red-bg);background:var(--red-bg);padding:10px 12px;border-radius:6px;margin-top:10px;font-weight:600}

/* ---------- Barra lateral ---------- */
.rail__logout{min-height:38px;border:1px solid var(--line);border-radius:6px;background:transparent;color:var(--muted);font-family:var(--font-ui);font-size:11px;font-weight:600;cursor:pointer}
.rail__logout:hover{border-color:var(--ink);color:var(--ink)}

/* ---------- Horarios ---------- */
.shift-list{display:grid}
.shift-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:14px;align-items:center;padding:12px 22px;border-top:1px solid var(--line)}
.shift-row:first-child{border-top:0}
.shift-row__day b{display:block;font-size:12.5px;color:var(--ink);font-weight:600}
.shift-row__day small{display:block;font-size:10px;color:var(--muted)}
.shift-row__time{font-size:12px;color:var(--ink)}
.shift-row__break{font-size:10px;color:var(--muted);white-space:nowrap}
.dropzone{display:grid;place-items:center;gap:5px;min-height:132px;padding:20px;border:1.5px dashed var(--line-strong);border-radius:10px;background:var(--paper-2);text-align:center;cursor:pointer}
.dropzone:hover{border-color:var(--blue);background:var(--blue-050)}
.dropzone__icon{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--blue-100);color:var(--blue-700)}
.dropzone b{font-size:12.5px;color:var(--ink)}
.dropzone small{font-size:10.5px;color:var(--muted)}
.import-preview{margin-top:16px;padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--paper-2)}
.import-preview__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.import-preview__head b{display:block;font-size:12px;color:var(--ink)}
.import-preview__head small{display:block;font-size:10px;color:var(--muted)}
.import-preview__range{font-family:var(--font-mono);font-size:9.5px;color:var(--muted);margin:8px 0}
.import-errors{margin-top:12px;padding:10px 12px;border-radius:7px;background:var(--red-bg);color:var(--red);font-size:10.5px}
.import-errors--warn{background:var(--amber-bg);color:var(--amber)}
.import-errors b{display:block;margin-bottom:4px}
.import-errors ul{margin:0;padding-left:16px}
.import-errors li{margin:2px 0}
.table--compact th,.table--compact td{padding:7px 9px;font-size:11px}
.hours__row--person{grid-template-columns:26px minmax(0,1fr) 80px 46px;gap:8px}
.hours__row--person .who{min-width:0}
.hours__row--person .who b{display:block;font-size:11px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hours__row--person .who small{display:block;font-size:9px;color:var(--muted)}
.shiftcal__day.is-weekend{background:var(--paper-2)}

/* ---------- Nóminas ---------- */
.payslip-file{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:9px;background:var(--paper-2)}
.payslip-file__icon{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:8px;background:var(--blue-100);color:var(--blue-700)}
.payslip-file__body{min-width:0}
.payslip-file__body b{display:block;font-size:12px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.payslip-file__body small{display:block;font-size:10px;color:var(--muted)}
.payslip-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--line);font-size:11.5px}
.payslip-row:first-child{border-top:0}
.payslip-row b{display:block;font-size:11.5px;color:var(--ink)}
.payslip-row small{display:block;font-size:9.5px;color:var(--muted)}
.sheet-section h3{font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}

/* ---------- Móvil e iPhone ---------- */
@media(max-width:900px){
  .btn--icon{width:44px;min-height:44px}
  .field input,.field select,.field textarea{font-size:16px}
  .mobile-top{padding-top:env(safe-area-inset-top,0px);min-height:calc(58px + env(safe-area-inset-top,0px))}
  .sheet{padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
  .auth{place-content:start center;padding-top:calc(34px + env(safe-area-inset-top,0px))}
  .auth__head h1{font-size:38px}
  .card--win > .win-bar{margin-left:-18px;margin-right:-18px;margin-bottom:14px}
  .clock-card.card--win > .win-bar{margin-left:-18px;margin-right:-18px}
  .person.card--win > .win-bar{margin-left:-16px;margin-right:-16px}
  .request.card--win > .win-bar{margin-left:-16px;margin-right:-16px}
  .shift-row{padding:11px 18px;grid-template-columns:minmax(0,1fr) auto}
  .shift-row__break{display:none}
  .rail__logout{display:none}
}
@media(max-width:640px){
  .auth__card{padding:20px}
  .auth__card.card--win > .win-bar{margin:0 -20px 16px}
  .auth__demo-row{grid-template-columns:auto 1fr}
  .auth__demo-row .mono{display:none}
  .win-bar{height:28px;font-size:8px}
  .card--flush.card--win > .win-bar{border-radius:10px 10px 0 0}
  .payslip-row{align-items:flex-start}
}
@media(max-width:420px){
  .auth__head h1{font-size:34px}
  .auth__card{padding:16px}
  .auth__card.card--win > .win-bar{margin:0 -16px 14px}
  .shift-row{padding:10px 16px}
}