:root{
    --ink:#0E151B;
    --sea:#1B5EEB;
    --sea-light:#3374F0;
    --sun:#E8A317;
    --sun-dark:#C27A00;
    --sand:#EFEFF1;
    --sand-dim:#E3E6EC;
    --card:#FFFFFF;
    --line:#DDE1E8;
    --coral:#E15B43;
    --off:#9AA6A2;
    --ok:#2E8B57;
    --warn:#F89016;
    --danger:#C0432D;
    --radius:14px;
    --radius-sm:8px;
    --shadow:0 1px 2px rgba(14,21,27,.06), 0 6px 20px rgba(14,21,27,.06);
    font-family:'Inter',ui-sans-serif,system-ui,sans-serif;
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--sand);
    color:var(--ink);
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.display{
    font-family:'Outfit','Inter', sans-serif;
    letter-spacing:-0.01em;
  }
  button{font-family:inherit;}
  button:focus-visible, .tab:focus-visible, .who:focus-visible{
    outline:2px solid var(--sea-light); outline-offset:2px;
  }
  #app{max-width:1080px;margin:0 auto;padding:0 0 60px;min-height:100vh;}
  .container{padding:0 20px;}

  /* ---------- Top bar ---------- */
  .topbar{
    display:flex;align-items:center;justify-content:space-between;
    padding:18px 20px;
  }
  .brand{display:flex;align-items:center;gap:10px;}
  .brand-mark{
    width:36px;height:36px; display:flex;align-items:center;justify-content:center; flex-shrink:0;
  }
  .brand-mark img{
    width:100%; height:100%; object-fit:contain; display:block; border-radius:22.5%;
    filter:drop-shadow(0 2px 5px rgba(14,21,27,.20));
  }
  .brand-name{font-family:'Outfit',sans-serif; font-weight:700; font-size:19px; color:var(--ink);}
  .topbar-actions{display:flex; align-items:center; gap:10px;}
  .icon-btn{
    background:var(--card); border:1px solid var(--line); border-radius:10px;
    width:38px;height:38px; display:flex;align-items:center;justify-content:center;
    cursor:pointer; position:relative; color:var(--ink);
  }
  .icon-btn:active{transform:scale(.94);}
  .badge-dot{
    position:absolute; top:-4px; right:-4px; background:var(--coral); color:#fff;
    font-size:10px; font-weight:700; min-width:16px; height:16px; border-radius:8px;
    display:flex;align-items:center;justify-content:center; padding:0 3px;
    border:2px solid var(--sand);
  }
  .who{
    display:flex; align-items:center; gap:8px; padding:6px 10px 6px 6px;
    background:var(--card); border:1px solid var(--line); border-radius:999px; cursor:pointer;
  }
  .avatar{
    width:26px;height:26px;border-radius:50%; color:#fff; font-size:11px; font-weight:700;
    display:flex;align-items:center;justify-content:center; flex-shrink:0;
  }
  .who-name{font-size:13px; font-weight:600;}

  /* ---------- Login ---------- */
  .login-wrap{
    min-height:88vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:24px 20px;
  }
  .login-hero{text-align:center; margin-bottom:26px;}
  .login-hero .brand-mark{width:96px;height:96px;margin:0 auto 10px;}
  .login-hero h1{font-size:30px; margin:0 0 6px; color:var(--ink);}
  .login-hero p{margin:0; color:var(--sea); font-size:14.5px; opacity:.85;}
  .pin-dots{display:flex; gap:14px; margin:26px 0 22px;}
  .pin-dot{
    width:16px;height:16px;border-radius:50%; border:2px solid var(--sea-light); background:transparent;
    transition:all .15s ease;
  }
  .pin-dot.filled{background:var(--sea-light); transform:scale(1.05);}
  .pin-dot.err{border-color:var(--danger); background:var(--danger);}
  .keypad{display:grid; grid-template-columns:repeat(3,72px); gap:14px;}
  .key{
    width:72px;height:72px;border-radius:50%; border:1px solid var(--line); background:var(--card);
    font-size:24px; font-weight:600; color:var(--ink); cursor:pointer; box-shadow:var(--shadow);
    display:flex;align-items:center;justify-content:center;
    transition:background .08s ease, transform .08s ease, color .08s ease;
    touch-action:manipulation;
  }
  .key:active{background:var(--sand-dim); transform:scale(.96);}
  .key.pressed{background:var(--sea); border-color:var(--sea); color:#fff; transform:scale(.92);}
  .key.func{background:transparent; box-shadow:none; border:none; color:var(--sea); font-size:14px; font-weight:600;}
  .key.func.pressed{background:var(--sand-dim); color:var(--sea);}
  .login-error{color:var(--danger); font-size:13px; height:18px; margin-top:4px; font-weight:600;}
  .admin-link{margin-top:28px; background:none; border:none; color:var(--sea); font-size:13px; text-decoration:underline; cursor:pointer; opacity:.75;}

  /* ---------- Sections / cards ---------- */
  .section-title{
    display:flex; align-items:baseline; justify-content:space-between; margin:26px 0 12px;
  }
  .section-title h2{font-size:16px; margin:0; color:var(--ink);}
  .section-title .sub{font-size:12.5px; color:var(--sea); opacity:.8;}
  .card{
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:var(--shadow); padding:18px;
  }
  .grid-2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
  @media (max-width:640px){.grid-2{grid-template-columns:1fr;}}

  /* hero shift card */
  .shift-hero{
    border-radius:18px; padding:22px; color:#fff; position:relative; overflow:hidden;
    background:linear-gradient(135deg, var(--ink), var(--sea) 65%, var(--sea-light));
  }
  .shift-hero.off{background:linear-gradient(135deg,#5b6663,#828e8a);}
  .shift-hero::after{
    content:""; position:absolute; right:-40px; top:-40px; width:180px; height:180px; border-radius:50%;
    background:rgba(252,170,31,.18);
  }
  .shift-hero .day-label{font-size:12.5px; letter-spacing:.02em; opacity:.85; font-weight:600;}
  .shift-hero .place{font-family:'Outfit',sans-serif; font-size:28px; font-weight:700; margin:6px 0 2px;}
  .shift-hero .times{font-size:15px; opacity:.95; margin-bottom:16px;}
  .shift-hero .status-pill{
    display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.16);
    padding:6px 12px; border-radius:999px; font-size:12.5px; font-weight:600;
  }
  .dot{width:7px;height:7px;border-radius:50%; background:var(--sun);}
  .dot.live{background:#6FE0A0; box-shadow:0 0 0 0 rgba(111,224,160,.6); animation:pulse-dot 1.8s infinite;}
  @keyframes pulse-dot{
    0%{box-shadow:0 0 0 0 rgba(111,224,160,.55);}
    70%{box-shadow:0 0 0 7px rgba(111,224,160,0);}
    100%{box-shadow:0 0 0 0 rgba(111,224,160,0);}
  }

  /* week strip */
  .week-strip{display:flex; gap:8px; overflow-x:auto; padding:4px 2px 8px;}
  .day-chip{
    min-width:78px; background:var(--card); border:1px solid var(--line); border-radius:12px;
    padding:10px 8px; text-align:center; flex-shrink:0;
  }
  .day-chip.today{border-color:var(--sea-light); box-shadow:0 0 0 2px rgba(28,137,129,.18);}
  .day-chip.off{background:var(--sand-dim);}
  .day-chip .dname{font-size:11px; font-weight:700; color:var(--sea); text-transform:uppercase; letter-spacing:.03em;}
  .day-chip .dnum{font-size:16px; font-weight:700; margin:3px 0;}
  .day-chip .dplace{font-size:10.5px; color:var(--ink); opacity:.7;}
  .day-chip .dtime{font-size:10.5px; color:var(--ink); opacity:.55;}
  .day-chip .doff-label{font-size:10.5px; color:var(--off); font-weight:600;}

  /* stat cards */
  .stat-card{padding:16px;}
  .stat-label{font-size:12px; color:var(--sea); font-weight:600; text-transform:uppercase; letter-spacing:.03em;}
  .stat-value{font-family:'Outfit',sans-serif; font-size:26px; margin:6px 0 4px;}
  .stat-bar{height:6px; background:var(--sand-dim); border-radius:4px; overflow:hidden; margin-top:6px;}
  .stat-bar-fill{height:100%; background:var(--sea-light); border-radius:4px;}
  .stat-bar-fill.over{background:var(--coral);}
  .stat-note{font-size:11.5px; color:var(--ink); opacity:.6;}

  /* notifications */
  .notif-item{
    display:flex; gap:12px; padding:13px 0; border-bottom:1px solid var(--line);
  }
  .notif-item:last-child{border-bottom:none;}
  .notif-ico{
    width:34px;height:34px;border-radius:50%; background:var(--sand-dim); flex-shrink:0; color:var(--sea);
    display:flex;align-items:center;justify-content:center; font-size:15px;
  }
  .notif-item.unread .notif-ico{background:var(--sun); color:var(--ink);}
  .notif-text{font-size:13.5px; line-height:1.45;}
  .notif-time{font-size:11px; color:var(--ink); opacity:.55; margin-top:2px;}
  .notif-check{flex-shrink:0; align-self:center; width:18px; height:18px; accent-color:var(--sea); cursor:pointer;}
  .empty-note{color:var(--ink); opacity:.55; font-size:13px; padding:8px 0;}
  .empty-state{
    display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; padding:26px 10px;
    color:var(--ink);
  }
  .empty-state .es-icon{
    width:42px;height:42px;border-radius:50%; background:var(--sand-dim); color:var(--sea);
    display:flex;align-items:center;justify-content:center; flex-shrink:0;
  }
  .empty-state .es-text{font-size:13px; max-width:240px; line-height:1.45; opacity:.65;}

  /* ---------- Admin ---------- */
  .tabs{display:flex; gap:6px; margin:18px 0 4px; overflow-x:auto;}
  .tab{
    padding:9px 15px; border-radius:999px; border:1px solid var(--line); background:var(--card);
    font-size:13px; font-weight:600; color:var(--ink); cursor:pointer; white-space:nowrap;
    display:inline-flex; align-items:center; justify-content:center; gap:6px; text-align:center;
  }
  .tab.active{background:var(--ink); color:var(--sand); border-color:var(--ink);}

  .status-table{width:100%; border-collapse:collapse;}
  .status-table th{
    text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:var(--sea);
    padding:8px 10px; border-bottom:1px solid var(--line); font-weight:700;
  }
  .status-table td{padding:10px 10px; border-bottom:1px solid var(--line); font-size:13.5px; vertical-align:middle;}
  .status-table tr:last-child td{border-bottom:none;}
  .name-cell{display:flex; align-items:center; gap:9px;}
  .status-pill2{
    display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px;
    font-size:11.5px; font-weight:700;
  }
  .status-pill2.ok{background:#E4F3E8; color:var(--ok);}
  .status-pill2.warn{background:#FBEED3; color:var(--warn);}
  .status-pill2.danger{background:#FBE3DE; color:var(--danger);}
  .status-pill2.off{background:var(--sand-dim); color:var(--off);}
  .status-pill2.wait{background:#EAF2F1; color:var(--sea);}

  .sched-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch;}
  .sched-table{border-collapse:collapse; width:100%; min-width:760px;}
  .sched-table th{
    text-align:center; font-size:10.5px; text-transform:uppercase; color:var(--sea); font-weight:700;
    padding:6px 4px; letter-spacing:.02em;
  }
  .sched-table td{padding:4px; text-align:center; border-top:1px solid var(--line);}
  .sched-table td.name-td{text-align:left; font-weight:600; font-size:13px; white-space:nowrap; padding-right:10px;}
  .cellbox{
    display:flex; flex-direction:column; gap:6px; align-items:center; padding:9px 6px; border-radius:10px;
    background:var(--sand-dim); min-width:150px; transition:background .15s ease;
  }
  .cellbox.off{background:transparent;}
  .mode-pills{display:flex; gap:3px; width:100%;}
  .mode-pill{
    flex:1; padding:6px 2px; border-radius:7px; border:1.5px solid var(--line); background:#fff;
    font-size:10.5px; font-weight:700; color:var(--ink); cursor:pointer; white-space:nowrap;
    transition:background .12s ease, border-color .12s ease, color .12s ease;
  }
  .cellbox input[type=time]{
    border:1px solid var(--line); border-radius:7px; font-size:11.5px; padding:5px 3px; width:68px;
    font-family:inherit; background:#fff; -webkit-appearance:none;
  }
  .cellbox select{
    border:1px solid var(--line); border-radius:7px; font-size:11.5px; padding:5px 3px; width:74px;
    font-family:inherit; background:#fff;
  }
  .cellbox input[type=time]:focus, .cellbox select:focus{
    outline:none; border-color:var(--sea-light); box-shadow:0 0 0 3px rgba(29,102,163,.18);
  }
  .off-toggle{
    font-size:10.5px; display:flex; align-items:center; gap:6px; cursor:pointer; color:var(--sea); font-weight:700;
    text-transform:uppercase; letter-spacing:.02em; padding:3px 0;
  }
  .off-toggle input{position:absolute; opacity:0; width:0; height:0;}
  .switch-track{
    width:28px; height:16px; border-radius:999px; background:var(--line); position:relative; flex-shrink:0;
    transition:background .15s ease;
  }
  .switch-track::after{
    content:""; position:absolute; top:2px; left:2px; width:12px; height:12px; border-radius:50%;
    background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.25); transition:transform .15s ease;
  }
  .off-toggle input:checked + .switch-track{background:var(--sea);}
  .off-toggle input:checked + .switch-track::after{transform:translateX(12px);}
  .off-toggle input:focus-visible + .switch-track{box-shadow:0 0 0 3px rgba(29,102,163,.25);}
  .blocks-wrap{display:flex; flex-direction:column; gap:7px; width:100%;}
  .block-row{
    display:flex; align-items:center; gap:3px; flex-wrap:wrap; justify-content:center;
    padding-bottom:6px; border-bottom:1px dashed var(--line); position:relative;
  }
  .block-row:last-of-type{border-bottom:none; padding-bottom:0;}
  .blk-sep{font-size:9px; color:var(--ink); opacity:.5;}
  .add-block-btn{
    border:none; background:none; color:var(--sea); font-size:10px; font-weight:700; cursor:pointer;
    padding:2px 0; text-decoration:underline; text-underline-offset:2px;
  }
  .blk-remove{
    border:none; background:#fff; color:var(--danger); width:15px;height:15px; border-radius:50%;
    font-size:10px; line-height:1; cursor:pointer; padding:0; flex-shrink:0; border:1px solid var(--line);
  }

  .split-tag{
    display:inline-block; font-size:10.5px; font-weight:700; background:rgba(255,255,255,.16); color:#fff;
    padding:2px 8px; border-radius:999px; margin-left:6px; vertical-align:middle;
  }

  .week-nav{display:flex; align-items:center; gap:10px; margin:14px 0 6px;}
  .week-nav button{
    border:1px solid var(--line); background:var(--card); border-radius:8px; width:32px;height:32px;
    cursor:pointer; font-size:15px;
  }
  .week-nav .wk-label{font-weight:700; font-size:13.5px;}
  .save-bar{
    position:sticky; bottom:14px; display:flex; justify-content:center; margin-top:18px; z-index:5;
  }
  .save-btn{
    background:var(--sea); color:#fff; border:none; padding:12px 26px; border-radius:999px;
    font-weight:700; font-size:14px; cursor:pointer; box-shadow:0 8px 24px rgba(13,66,111,.35);
  }
  .save-btn:active{transform:scale(.97);}

  .worker-row{
    display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line);
  }
  .worker-row:last-child{border-bottom:none;}
  .worker-row input[type=text]{
    border:1px solid var(--line); border-radius:8px; padding:8px 10px; font-size:13.5px; font-family:inherit;
    flex:1; min-width:0;
  }
  .worker-row .pin-field{width:76px; text-align:center; letter-spacing:.15em; font-weight:700;}
  .worker-row select{border:1px solid var(--line); border-radius:8px; padding:8px 6px; font-size:12.5px; font-family:inherit;}
  .small-btn{
    border:1px solid var(--line); background:var(--card); border-radius:8px; padding:8px 12px;
    font-size:12.5px; font-weight:600; cursor:pointer; color:var(--ink);
  }
  .small-btn.danger{color:var(--danger); border-color:#F0C7BC;}
  .small-btn.primary{background:var(--sea); color:#fff; border-color:var(--sea);}

  .toast{
    position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
    background:var(--ink); color:var(--sand); padding:11px 20px; border-radius:999px;
    font-size:13px; font-weight:600; box-shadow:0 10px 30px rgba(0,0,0,.25); z-index:50;
    opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease;
  }
  .toast.show{opacity:1; transform:translateX(-50%) translateY(-4px);}

  .modal-bg{
    position:fixed; inset:0; background:rgba(14,21,27,.45); display:flex; align-items:flex-end;
    justify-content:center; z-index:40; backdrop-filter:blur(2px);
  }
  @media (min-width:640px){.modal-bg{align-items:center;}}
  .modal{
    background:var(--sand); border-radius:20px 20px 0 0; padding:22px 20px 28px; width:100%; max-width:460px;
    max-height:82vh; overflow-y:auto;
  }
  @media (min-width:640px){.modal{border-radius:18px;}}
  .modal h3{margin:0 0 4px;}
  .modal-close{
    float:right; background:none; border:none; font-size:20px; cursor:pointer; color:var(--ink); opacity:.5;
  }

  ::-webkit-scrollbar{height:6px; width:6px;}
  ::-webkit-scrollbar-thumb{background:var(--line); border-radius:4px;}

  .hidden{display:none !important;}
  .loading-wrap{min-height:80vh; display:flex;align-items:center;justify-content:center; color:var(--sea); font-size:14px;}

  @keyframes screen-fade-in{
    from{opacity:0; transform:translateY(5px);}
    to{opacity:1; transform:translateY(0);}
  }
  .screen-fade{animation:screen-fade-in .22s ease;}
  @media (prefers-reduced-motion: reduce){
    .screen-fade{animation:none;}
    .dot.live{animation:none;}
  }
/* ===================== Escritorio: menú lateral ===================== */
.sidebar{display:none;}
.page-head{display:none;}
.view-toggle{display:none;}
.radio-row{display:flex; gap:10px; align-items:flex-start; font-size:14px; cursor:pointer;}
.radio-row input{margin-top:3px; accent-color:var(--sea);}

@media (min-width:1024px){
  #app:has(.admin-shell){max-width:none; padding:0;}
  .admin-shell{display:flex; min-height:100vh;}
  .sidebar{
    display:flex; flex-direction:column; width:248px; flex:0 0 248px; position:sticky; top:0; height:100vh;
    background:#0E151B; color:#C9CFDA; padding:28px 16px 20px; box-sizing:border-box;
  }
  .side-brand{display:flex; align-items:center; gap:12px; padding:0 10px 28px;}
  .side-brand img{border-radius:22.5%; display:block;}
  .side-brand-name{font-family:'Outfit',sans-serif; font-weight:500; font-size:24px; color:#fff; line-height:1.1;}
  .side-company{font-size:12px; color:#9AA3B5; margin-top:2px; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .side-nav{display:flex; flex-direction:column; gap:4px;}
  .side-item{
    display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:10px; border:none;
    background:transparent; color:#C9CFDA; font:500 15px 'Inter',sans-serif; text-align:left; cursor:pointer;
  }
  .side-item:hover{background:#18222C;}
  .side-item.active{background:#1B5EEB; color:#fff; font-weight:600;}
  .side-item:focus-visible, .side-logout:focus-visible{outline:2px solid #93C5FC; outline-offset:2px;}
  .side-spacer{flex:1;}
  .side-user{display:flex; align-items:center; gap:12px; padding:16px 10px 0; border-top:1px solid #243040;}
  .side-avatar{width:38px; height:38px; border-radius:50%; background:#1B5EEB; color:#fff; font-weight:600; display:inline-flex; align-items:center; justify-content:center;}
  .side-user-text{display:flex; flex-direction:column; line-height:1.3; flex:1; min-width:0;}
  .side-user-text strong{font-size:14px; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .side-user-text small{font-size:12px; color:#9AA3B5;}
  .side-logout{width:36px; height:36px; border-radius:10px; border:none; background:transparent; color:#C9CFDA; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;}
  .side-logout:hover{background:#18222C;}

  .admin-main{flex:1; min-width:0;}
  .admin-main > .topbar, .admin-main .tabs{display:none;}
  .admin-main > .container{padding:32px 36px 60px;}
  .page-head{display:block; margin-bottom:18px;}
  .page-head h1{margin:0; font-size:38px; font-weight:500; line-height:1.1;}
  .view-toggle{display:inline-flex; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#fff;}
  .view-toggle button{border:none; background:transparent; padding:9px 14px; font:600 13px 'Inter',sans-serif; color:var(--ink); cursor:pointer;}
  .view-toggle button.active{background:var(--ink); color:#fff;}
}

/* ===================== Línea de tiempo ===================== */
.tl-card{padding:0; overflow:hidden;}
.tl-daytabs{display:flex; gap:6px; padding:14px 16px; border-bottom:1px solid var(--line); flex-wrap:wrap;}
.tl-daytab{
  display:flex; flex-direction:column; align-items:center; gap:2px; min-width:62px; padding:8px 12px; border-radius:12px;
  border:1px solid var(--line); background:#fff; color:var(--ink); cursor:pointer; font-family:inherit;
}
.tl-daytab span{font-size:11px; font-weight:600; letter-spacing:.08em; color:#5B6376;}
.tl-daytab strong{font-size:17px;}
.tl-daytab.active{background:var(--ink); border-color:var(--ink); color:#fff;}
.tl-daytab.active span{color:#C9CFDA;}
.tl-legend{display:flex; flex-wrap:wrap; gap:14px; align-items:center; padding:12px 20px; font-size:13px;}
.tl-leg{display:inline-flex; align-items:center; gap:7px; font-weight:600;}
.tl-leg i{width:12px; height:12px; border-radius:4px; display:inline-block;}
.tl-range{margin-left:auto; color:#5B6376; font-size:12.5px;}
.tl-scroll{overflow-x:auto; padding-bottom:6px;}
.tl-grid{min-width:880px; position:relative;}
.tl-row{display:grid; grid-template-columns:190px 1fr 84px; align-items:center; gap:0 12px; padding:0 20px; border-top:1px solid #EEF0F4; min-height:54px;}
.tl-head{border-top:none; min-height:30px; border-bottom:1px solid var(--line);}
.tl-hscale{position:relative; height:24px;}
.tl-hlabel{position:absolute; top:4px; font-size:11.5px; color:#5B6376; white-space:nowrap;}
.tl-hh{font-size:11px; font-weight:600; letter-spacing:.08em; color:#5B6376; text-align:right;}
.tl-covrow{min-height:36px; background:#F7F8FA;}
.tl-covname{font-size:12px; font-weight:600; color:#5B6376; letter-spacing:.04em;}
.tl-covscale{position:relative; height:26px;}
.tl-cov{position:absolute; top:0; height:26px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; color:#3A4152; box-sizing:border-box; border-radius:6px;}
.tl-cov.low{background:#FFF1D6; color:#6B4200;}
.tl-group{padding:8px 20px; font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#5B6376; background:#F7F8FA; border-top:1px solid #EEF0F4;}
.tl-name{display:flex; align-items:center; gap:10px; min-width:0;}
.tl-av{width:30px; height:30px; border-radius:50%; color:#fff; font-size:11.5px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; flex:0 0 30px;}
.tl-nm{font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.tl-track{
  position:relative; height:42px; margin:6px 0; border:none; border-radius:8px; background-color:transparent; cursor:pointer;
  padding:0; text-align:left; font-family:inherit; display:flex; align-items:center;
}
.tl-track:hover{background-color:rgba(27,94,235,.06);}
.tl-track:focus-visible{outline:2px solid var(--sea-light); outline-offset:1px;}
.tl-bar{
  position:absolute; top:5px; bottom:5px; border-radius:8px; padding:0 9px; font-size:12px; font-weight:600;
  display:flex; align-items:center; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; box-sizing:border-box;
}
.tl-pill{margin-left:8px; padding:5px 12px; border-radius:999px; font-size:12.5px; font-weight:600;}
.tl-empty{margin-left:10px; font-size:13px; color:#5B6376;}
.tl-empty u{color:var(--sea); font-weight:600;}
.tl-hours{text-align:right; font-size:13px; font-weight:600; color:#3A4152; white-space:nowrap;}
.tl-nowwrap{position:absolute; inset:0; display:grid; grid-template-columns:190px 1fr 84px; gap:0 12px; padding:0 20px; pointer-events:none;}
.tl-nowtrack{position:relative;}
.tl-now{position:absolute; top:0; bottom:0; width:2px; background:#E15B43;}
.tl-rows{position:relative;}

/* ===== Tabla semanal en pantallas anchas: que quepa la semana entera ===== */
@media (min-width:1024px){
  .sched-table{table-layout:fixed; min-width:900px;}
  .sched-table th:first-child{width:104px; text-align:left;}
  .sched-table th:last-child{width:96px;}
  .sched-table td{padding:6px 3px; vertical-align:top;}
  .sched-table td.name-td{white-space:normal; padding-top:18px; word-break:break-word;}
  .sched-table td.week-total{padding-top:18px;}
  .sched-table .cellbox{min-width:0; width:100%; padding:7px 5px;}
  .sched-table .mode-pills{display:grid; grid-template-columns:1fr 1fr; gap:3px;}
  .sched-table .mode-pill{padding:5px 2px; font-size:10.5px;}
  .sched-table .block-row{flex-direction:column; align-items:stretch; gap:4px;}
  .sched-table .block-row .blk-sep{display:none;}
  .sched-table .cellbox select{width:100%; padding:5px 3px;}
  .sched-table .blk-remove{position:absolute; top:-2px; right:-2px;}
}

/* ===== Semana del equipo (tabla de solo lectura) ===== */
.status-table.sched-table{min-width:660px;}
.status-table.sched-table td{font-size:11.5px; line-height:1.35; padding:7px 4px; vertical-align:middle;}
.status-table.sched-table td.name-td, .status-table.sched-table th:first-child{
  position:sticky; left:0; background:var(--card); z-index:1; box-shadow:1px 0 0 var(--line);
}
.status-table.sched-table td.name-td{white-space:normal; min-width:84px; max-width:96px; font-size:12.5px;}
.status-table.sched-table tr.me-row td{background:#EAF1FE;}
.status-table.sched-table tr.me-row td.name-td{background:#EAF1FE;}
.me-tag{display:inline-block; font-size:9.5px; font-weight:700; background:var(--sea); color:#fff; border-radius:999px; padding:1px 6px; margin-left:3px; vertical-align:middle;}

/* ===== Semana del equipo ajustada a la pantalla del móvil ===== */
.week-fit{width:100%; border-collapse:collapse; table-layout:fixed;}
.week-fit th:first-child{width:21%;}
.week-fit th{font-size:9.5px; font-weight:600; color:var(--sea); text-align:center; padding:4px 0; line-height:1.25;}
.week-fit th b{font-size:12.5px; color:var(--ink);}
.week-fit td{padding:6px 0; border-top:1px solid var(--line); text-align:center; vertical-align:middle;}
.week-fit td.wf-name{text-align:left; font-size:11px; font-weight:700; padding:6px 4px 6px 6px; word-break:break-word; line-height:1.25;}
.week-fit .wf-today{background:rgba(27,94,235,.08);}
.week-fit th.wf-today{border-radius:8px 8px 0 0;}
.week-fit tr.me-row td{background:#EAF1FE;}
.week-fit tr.me-row td.wf-today{background:#D9E6FD;}
.wf-blk{display:flex; flex-direction:column; align-items:center; gap:1px; font-size:9.5px; line-height:1.2; font-variant-numeric:tabular-nums; margin-bottom:4px;}
.wf-blk:last-child{margin-bottom:0;}
.wf-blk i{display:block; width:70%; height:5px; border-radius:3px; margin-top:2px;}
.wf-off{font-size:9.5px; font-weight:600; color:var(--off);}
.wf-legend{display:flex; flex-wrap:wrap; gap:12px; padding:10px 6px 0; font-size:12px; font-weight:600;}
.wf-leg{display:inline-flex; align-items:center; gap:6px;}
.wf-leg i{width:12px; height:12px; border-radius:4px; display:inline-block;}

  /* ---------- Multiempresa: acceso, consola, ajustes ---------- */
  .company-code{
    width:240px; max-width:100%; box-sizing:border-box; text-align:center; text-transform:uppercase;
    font-family:inherit; font-size:17px; font-weight:700; letter-spacing:.18em; padding:12px 14px;
    border:1.5px solid var(--line); border-radius:12px; background:#fff; color:var(--ink);
  }
  .company-code:focus, .admin-form input:focus, .admin-form select:focus{outline:none; border-color:var(--sea); box-shadow:0 0 0 3px rgba(27,94,235,.15);}
  .company-code::placeholder{font-size:12px; letter-spacing:.12em; font-weight:600; opacity:.5;}
  .admin-form{display:flex; flex-direction:column; gap:12px; width:100%; max-width:340px;}
  .admin-form input, .admin-form select{
    width:100%; box-sizing:border-box; font-family:inherit; font-size:15px; padding:13px 14px;
    border:1.5px solid var(--line); border-radius:12px; background:#fff; color:var(--ink);
  }
  .admin-form .login-error{height:auto; min-height:18px; text-align:center;}
  .admin-form .save-btn{width:100%;}

  .console-wrap{min-height:100vh;}
  .console-top{display:flex; align-items:center; justify-content:space-between; padding:14px 20px; background:var(--card); border-bottom:1px solid var(--line);}
  .console-wrap .container{max-width:860px; margin:0 auto; padding:20px 16px 60px;}
  .co-row{display:flex; align-items:center; gap:12px; padding:14px 0; border-bottom:1px solid var(--line); flex-wrap:wrap;}
  .co-row:last-child{border-bottom:none;}
  .co-row.suspended{opacity:.7;}
  .co-main{flex:1 1 220px; min-width:0;}
  .co-name{font-weight:700; font-size:15.5px;}
  .co-meta{display:flex; gap:10px; flex-wrap:wrap; font-size:12.5px; color:var(--ink); opacity:.7; margin-top:3px; align-items:center;}
  .co-code{font-weight:700; letter-spacing:.12em; background:var(--sand-dim); padding:2px 8px; border-radius:6px; opacity:1;}
  .co-badge{font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; background:#FBE3DE; color:var(--danger); margin-left:6px;}
  .co-plan{border:1px solid var(--line); border-radius:8px; padding:8px 10px; font-family:inherit; font-size:13px; background:#fff;}
  .co-actions{display:flex; gap:8px;}

  .place-row{display:flex; align-items:center; gap:10px; margin-bottom:8px;}
  .place-row .pl-name{flex:1; min-width:0; border:1px solid var(--line); border-radius:10px; padding:10px 12px; font-size:14px; font-family:inherit; background:#fff;}
  .place-row .pl-color{width:42px; height:40px; padding:2px; border:1px solid var(--line); border-radius:10px; background:#fff; cursor:pointer;}

  .support-banner{background:#FFF4D6; border:1px solid var(--sun-dark, #E8A317); border-radius:10px; padding:10px 14px; margin-bottom:14px; font-size:13.5px; display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
  .side-switch{margin:0 12px 10px; padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.2); background:transparent; color:inherit; font:inherit; font-size:13px; font-weight:600; cursor:pointer; text-align:left;}
  .side-switch:hover{background:rgba(255,255,255,.08);}

  /* ---------- Avisos y Plan ---------- */
  .side-badge{margin-left:auto; font-style:normal; font-size:11px; font-weight:700; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:var(--amber,#E8A317); color:#1A1200; display:inline-flex; align-items:center; justify-content:center;}
  .pill{display:inline-block; font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:999px; background:#E3E6EC; color:var(--ink);}
  .pill.amber{background:#FFF1CC; color:#7A5500;}
  .pill.blue{background:#E0EAFF; color:#1B4FC4;}
  .warn-card{background:#FFF8E5; border:1px solid #F0D58A; margin-bottom:6px;}
  .notice-week{margin-bottom:12px;}
  .notice-week-h{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; opacity:.6; margin:4px 0 4px;}
  .msg-area{width:100%; box-sizing:border-box; border:1.5px solid var(--line); border-radius:12px; padding:12px 14px; font:inherit; font-size:14.5px; resize:vertical; background:#fff; color:var(--ink);}
  .msg-area:focus, .msg-select:focus{outline:none; border-color:var(--sea); box-shadow:0 0 0 3px rgba(27,94,235,.15);}
  .msg-row{display:flex; align-items:center; gap:12px; margin-top:12px; flex-wrap:wrap;}
  .msg-select{border:1px solid var(--line); border-radius:10px; padding:10px 12px; font:inherit; font-size:14px; background:#fff; max-width:100%;}
  .notice-table{display:flex; flex-direction:column;}
  .nt-row{display:grid; grid-template-columns:110px 1fr 150px 140px; gap:12px; padding:11px 0; border-bottom:1px solid var(--line); font-size:13.5px; align-items:start;}
  .nt-row:last-child{border-bottom:none;}
  .nt-head{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; opacity:.55; padding-top:2px;}
  .nt-when{opacity:.7; font-size:12.5px;}
  @media (max-width:760px){
    .nt-row{grid-template-columns:1fr; gap:3px;}
    .nt-head{display:none;}
  }
  .plan-head{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;}
  .usage-row{margin-bottom:16px;}
  .usage-row:last-child{margin-bottom:0;}
  .usage-h{display:flex; justify-content:space-between; font-size:14px; margin-bottom:6px;}
  .usage-bar{height:8px; border-radius:99px; background:#E3E6EC; overflow:hidden;}
  .usage-bar i{display:block; height:100%; background:var(--sea); border-radius:99px;}
  .usage-bar i.warn{background:var(--danger);}
  .plan-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px;}
  .plan-card{background:var(--card); border:1.5px solid var(--line); border-radius:16px; padding:20px; display:flex; flex-direction:column;}
  .plan-card.current{border-color:var(--sea); box-shadow:0 0 0 3px rgba(27,94,235,.12);}
  .plan-name{font-size:18px; font-weight:700; display:flex; gap:8px; align-items:center;}
  .plan-price{font-size:26px; font-weight:700; color:var(--sea); margin-bottom:10px;}
  .plan-price small{font-size:13px; font-weight:500; opacity:.7;}
  .plan-list{list-style:none; margin:0 0 16px; padding:0; font-size:13.5px; display:flex; flex-direction:column; gap:7px; flex:1;}
  .plan-list li.off{opacity:.45;}
  .plan-card .small-btn[disabled]{opacity:.6; cursor:default;}

  .nc-label{font-size:12.5px; font-weight:600; margin:2px 0 -4px; display:block;}
  .nc-hint{font-weight:400; opacity:.6;}
  .nc-hours{display:flex; gap:12px;}
  .nc-hours > div{flex:1; display:flex; flex-direction:column; gap:6px;}
  .modal .admin-form{max-height:70vh; overflow-y:auto; padding-right:4px;}

.seg{display:inline-flex; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#fff;}
.seg-btn{border:0; background:transparent; padding:7px 12px; font:inherit; font-size:13px; cursor:pointer;}
.seg-btn.on{background:var(--ink); color:#fff;}
.keep-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:6px 14px; max-height:260px; overflow:auto; padding:6px 2px;}
.keep-item{display:flex; align-items:center; gap:8px; font-size:14px;}