/* Shared styles for the existing attendance form and its offline shell. */
:root {
      --bg:#f4f6fc;
      --card:#fff;
      --primary:#004ca8;
      --success:#28a745;
      --danger:#dc3545;
      --text:#1f2937;
      --radius:12px;
      --shadow:0 4px 12px rgba(0,0,0,0.1);
      --focus:#7b92f5;
    }
    * { box-sizing:border-box; margin:0; padding:0; }
    body {
      font-family:'Inter',sans-serif;
      background:var(--bg);
      display:flex;
      justify-content:center;
      align-items:flex-start;
      padding:2rem;
      min-height:100dvh;
    }
    .card {
      position: relative; 
      background:var(--card);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      max-width:480px;
      width:100%;
      padding:1.25rem;
    }
    .card-topbar{
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      gap:.9rem;
      margin-bottom:.35rem;
    }
    .topbar-left,
    .topbar-right{
      display:flex;
      align-items:flex-start;
      gap:.75rem;
      min-width:0;
    }
    .topbar-left{
      flex:1;
      flex-direction:column;
    }
    .topbar-right{
      margin-left:auto;
      display:flex;
      flex-direction:column;
      align-items:flex-end;
      gap:.65rem;
    }
    .brand-stack{
      display:flex;
      flex-direction:column;
      align-items:flex-start;
      gap:.45rem;
    }
    h1, h2 { color:var(--text); text-align:center; }
    h1 { font-size:1.75rem; margin-bottom:.25rem; }
    h2 { font-size:1.2rem; margin-bottom:.8rem; }
    .title-row{ display:block; }
    .desktop-welcome{ display:none; }
    .desktop-weekday{ display:none; }
    .status { font-weight:600; text-align:center; margin-bottom:1rem; }
    .status.entrada { color:var(--success); }
    .status.salida  { color:var(--danger); }
    .shift-missed-exit{
      display:flex;align-items:flex-start;gap:10px;
      margin:0 auto 14px;padding:11px 13px;max-width:620px;
      border:1px solid #f5c56f;border-radius:12px;
      background:#fff8e7;color:#805300;text-align:left;
      box-shadow:0 5px 14px rgba(128,83,0,.08);
    }
    .shift-missed-exit i{font-size:18px;margin-top:1px;color:#d97706}
    .shift-missed-exit strong{display:block;font-size:13px}
    .shift-missed-exit span{display:block;margin-top:2px;font-size:11px;line-height:1.35}
    .shift-missed-exit a{display:inline-block;margin-top:5px;color:#92400e;font-size:11px;font-weight:800}

    canvas {
      width:100%;
      height:200px;
      border:2px dashed #cbd5e1;
      border-radius:var(--radius);
      margin-bottom:1rem;
      touch-action:none;
    }
    .options { display:grid; gap:1rem; }
    .options-grid{
      display:grid;
      grid-template-columns:1fr;
      gap:1rem;
    }
    .opt-block label{
      display:block;
      margin-bottom:.45rem;
    }
    .toggle-container { display:flex; align-items:center; gap:.5rem; }
    .toggle-switch { position:relative; display:inline-block; width:50px; height:24px; }
    .toggle-switch input { opacity:0; width:0; height:0; }
    .slider {
      position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0;
      background:#e5e7eb; transition:.4s; border-radius:24px;
    }
    .slider:before {
      position:absolute; content:""; height:18px; width:18px; left:3px; bottom:3px;
      background:white; transition:.4s; border-radius:50%;
    }
    .toggle-switch input:checked + .slider { background:var(--primary); }
    .toggle-switch input:checked + .slider:before { transform:translateX(26px); }

    .textarea-modern {
      width:100%; padding:.75rem; border:2px solid #d1d5db; border-radius:8px;
      resize:vertical; font-size:1rem; transition:border-color .3s; min-height:80px;
    }
    .textarea-modern:focus {
      outline:none; border-color:var(--focus);
      box-shadow:0 0 0 2px rgba(123,146,245,0.2);
    }

    .file-upload { position:relative; overflow:hidden; display:inline-block; }
    .file-upload input[type=file] {
      font-size:100px; position:absolute; left:0; top:0; opacity:0;
    }
    .file-label {
      display:inline-block; padding:.5rem .75rem; font-size:.85rem;
      background:#eef2ff; border:2px dashed #c7d2fe; border-radius:8px; color:#4f46e5; cursor:pointer;
    }
    .file-label:hover { background:#e0e7ff; }
    .file-name { font-size:.85rem; color:var(--text); margin-top:.25rem; }

    .incident-toolbar{
      display:flex;
      align-items:center;
      gap:.75rem;
      flex-wrap:wrap;
    }
    .incident-open-btn{
      border:none;
      border-radius:12px;
      background:#fed7aa;
      color:#9a3412;
      padding:.62rem .9rem;
      font-weight:800;
      font-size:.92rem;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.45rem;
      cursor:pointer;
      box-shadow:0 8px 18px rgba(249,115,22,.14);
    }
    .incident-toolbar-hint{
      color:#64748b;
      font-size:.9rem;
      font-weight:600;
    }
    .incident-preview{
      border:1px solid #bfdbfe;
      background:#eff6ff;
      border-radius:12px;
      padding:.75rem;
      color:#1e293b;
    }
    .incident-preview-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.75rem;
      margin-bottom:.35rem;
    }
    .incident-clear-mini{
      border:none;
      background:#dbeafe;
      color:#1d4ed8;
      border-radius:999px;
      padding:.25rem .6rem;
      font-weight:700;
      cursor:pointer;
    }
    .incident-preview-text{
      margin:.2rem 0 .35rem;
      white-space:pre-wrap;
      overflow-wrap:anywhere;
    }
    .incident-preview-file{
      color:#334155;
      font-size:.9rem;
      font-weight:700;
      overflow-wrap:anywhere;
    }
    .incident-modal{
      position:fixed;
      inset:0;
      z-index:120;
      display:none;
      align-items:center;
      justify-content:center;
      padding:16px;
    }
    .incident-modal.is-open{ display:flex; }
    .incident-backdrop{
      position:absolute;
      inset:0;
      background:rgba(15,23,42,.58);
    }
    .incident-card{
      position:relative;
      width:min(560px, 100%);
      max-height:calc(100dvh - 32px);
      overflow:auto;
      background:#fff;
      border-radius:18px;
      padding:1rem;
      box-shadow:0 24px 60px rgba(15,23,42,.28);
    }
    .incident-card-head{
      display:flex;
      justify-content:space-between;
      gap:1rem;
      margin-bottom:1rem;
    }
    .incident-card-head h3{
      margin:0 0 .25rem;
      color:#0f172a;
      font-size:1.15rem;
    }
    .incident-card-head p{
      color:#64748b;
      font-size:.9rem;
    }
    .incident-close{
      width:38px;
      height:38px;
      border:none;
      border-radius:999px;
      background:#f1f5f9;
      color:#0f172a;
      font-size:1.45rem;
      line-height:1;
      cursor:pointer;
      flex:0 0 auto;
    }
    .incident-label{
      display:block;
      margin:.85rem 0 .4rem;
      font-weight:800;
      color:#1e293b;
    }
    .incident-textarea{
      width:100%;
      min-height:120px;
      resize:vertical;
      padding:.8rem;
      border:2px solid #d1d5db;
      border-radius:12px;
      font:inherit;
    }
    .incident-textarea:focus{
      outline:none;
      border-color:var(--focus);
      box-shadow:0 0 0 3px rgba(123,146,245,.2);
    }
    .incident-file-btn{
      position:relative;
      overflow:hidden;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border:2px dashed #c7d2fe;
      background:#eef2ff;
      color:#4f46e5;
      border-radius:12px;
      padding:.7rem .9rem;
      font-weight:800;
      cursor:pointer;
    }
    .incident-file-btn input[type=file]{
      position:absolute;
      inset:0;
      opacity:0;
      cursor:pointer;
    }
    .incident-file-note{
      color:#475569;
      font-size:.9rem;
      margin-top:.45rem;
      overflow-wrap:anywhere;
    }
    .incident-modal-preview{
      margin-top:.75rem;
      border:1px solid #e2e8f0;
      border-radius:12px;
      padding:.6rem;
      background:#f8fafc;
    }
    .incident-modal-preview img{
      display:block;
      width:100%;
      max-height:220px;
      object-fit:contain;
      border-radius:10px;
      background:#fff;
    }
    .incident-file-preview-icon{
      padding:.8rem;
      border-radius:10px;
      background:#fff;
      color:#334155;
      font-weight:700;
      overflow-wrap:anywhere;
    }
    .incident-actions{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:.75rem;
      margin-top:1rem;
    }
    .incident-secondary,
    .incident-primary{
      border:none;
      border-radius:12px;
      padding:.85rem;
      font-weight:800;
      cursor:pointer;
      font-size:.95rem;
    }
    .incident-secondary{
      background:#e2e8f0;
      color:#334155;
    }
    .incident-primary{
      background:#2563eb;
      color:#fff;
    }

    .actions { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1rem; }
    .btn { padding:1rem; font-size:1.1rem; font-weight:700; color:#fff; border:none; border-radius:var(--radius); cursor:pointer; transition:.2s; }
    .btn:disabled { filter:brightness(.7); cursor:not-allowed; }
    .btn-clear  { background:#64748b; }
    .btn-success { background:var(--success); }
    .btn-danger  { background:var(--danger); }
    .actions .btn{
      min-height:56px;
      display:flex;
      align-items:center;
      justify-content:center;
    }

    .location-banner{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:12px 14px;
      border-radius:12px;
      border:1px dashed #cbd5f5;
      background:#eef2ff;
      color:#1e293b;
      font-size:.95rem;
      margin:12px 0 18px;
    }
    .location-banner.is-outside{
      justify-content:flex-start;
      border:1px solid #fdba74;
      background:linear-gradient(135deg, #fff7ed 0%, #fffbeb 100%);
      color:#9a3412;
      box-shadow:0 10px 24px rgba(249,115,22,.1);
      font-weight:750;
    }
    .location-banner.is-outside::before{
      content:"!";
      flex:0 0 auto;
      display:grid;
      place-items:center;
      width:38px;
      height:38px;
      border-radius:12px;
      color:#fff;
      background:#f97316;
      font-size:1.05rem;
      font-weight:900;
      box-shadow:0 7px 16px rgba(249,115,22,.24);
    }
    .location-banner.is-hidden{ display:none; }
    .geo-loading-spinner{
      display:inline-block;
      width:1em;
      height:1em;
      margin-right:.42em;
      border:2px solid currentColor;
      border-right-color:transparent;
      border-radius:50%;
      vertical-align:-.13em;
      animation:geoSpinner .72s linear infinite;
    }
    .geo-loading-spinner.is-hidden{ display:none; }
    @keyframes geoSpinner{ to{ transform:rotate(360deg); } }
    @media(prefers-reduced-motion:reduce){ .geo-loading-spinner{ animation:none; } }
    .location-banner button{
      background:#2563eb;
      color:#fff;
      border:none;
      border-radius:10px;
      min-height:44px;
      padding:.55rem .9rem;
      font-weight:700;
      cursor:pointer;
      white-space:nowrap;
      touch-action:manipulation;
    }
    .location-banner.is-outside button{ display:none; }

    .shift-notice-modal.location-outside-modal{
      z-index:140;
      padding:
        max(16px, env(safe-area-inset-top))
        max(16px, env(safe-area-inset-right))
        max(16px, env(safe-area-inset-bottom))
        max(16px, env(safe-area-inset-left));
    }
    .shift-notice-card.location-outside-card{
      width:min(450px, 100%);
      max-height:calc(100vh - 32px);
      max-height:calc(100dvh - 32px);
      overflow-y:auto;
      padding:30px 25px 22px;
      border-top:6px solid #f97316;
      border-radius:22px;
      text-align:center;
    }
    .location-outside-icon{
      width:76px;
      height:76px;
      margin:0 auto 18px;
      display:grid;
      place-items:center;
      border-radius:24px;
      color:#fff;
      background:linear-gradient(145deg, #fb923c, #ea580c);
      box-shadow:0 14px 30px rgba(234,88,12,.25);
      transform:rotate(-3deg);
    }
    .location-outside-icon i{
      font-size:2.15rem;
      transform:rotate(3deg);
    }
    .location-outside-card .shift-notice-title{
      margin-bottom:10px;
      color:#9a3412;
      font-size:1.4rem;
      line-height:1.2;
      text-align:center;
    }
    .location-outside-card .shift-notice-text{
      color:#475569;
      line-height:1.5;
      text-align:center;
    }
    .location-outside-distance{
      margin:18px 0 0;
      padding:15px 16px;
      border:1px solid #fed7aa;
      border-radius:15px;
      color:#9a3412;
      background:#fff7ed;
      font-size:1rem;
      line-height:1.4;
    }
    .location-outside-distance strong{
      display:block;
      margin-bottom:2px;
      font-size:1.35rem;
      color:#c2410c;
    }
    .location-outside-card .shift-notice-actions{
      justify-content:center;
      margin-top:20px;
    }
    .location-outside-card .shift-notice-btn-main{
      min-width:150px;
      min-height:48px;
      background:#ea580c;
    }

    .perm-modal{
      position:fixed;
      inset:0;
      display:none;
      align-items:center;
      justify-content:center;
      padding:
        max(16px, env(safe-area-inset-top))
        max(16px, env(safe-area-inset-right))
        max(16px, env(safe-area-inset-bottom))
        max(16px, env(safe-area-inset-left));
      z-index:70;
    }
    .perm-modal.is-open{ display:flex; }
    .perm-backdrop{
      position:absolute;
      inset:0;
      background:rgba(15,23,42,.55);
    }
    .perm-card{
      position:relative;
      z-index:1;
      background:#fff;
      border-radius:16px;
      padding:0;
      width:min(820px, 100%);
      max-height:calc(100vh - 32px);
      max-height:calc(100dvh - 32px);
      display:flex;
      flex-direction:column;
      min-height:0;
      overflow:hidden;
      box-shadow:0 18px 50px rgba(15,23,42,.3);
    }
    .perm-card h3{ margin:0 0 6px; font-size:1.05rem; }
    .perm-card p{ margin:0 0 10px; font-size:.9rem; color:#475569; }
    body.permission-help-open{ overflow:hidden; }
    .perm-header{ flex:0 0 auto; padding:20px 62px 14px 22px; border-bottom:1px solid #e2e8f0; background:#f8fbff; }
    .perm-header h3{ margin:0; }
    .perm-body{ min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; scrollbar-gutter:stable; padding:18px 22px; }
    .perm-body:focus-visible{ outline:3px solid #93c5fd; outline-offset:-3px; }
    .perm-body::-webkit-scrollbar{ width:7px; }
    .perm-body::-webkit-scrollbar-track{ background:#f1f5f9; }
    .perm-body::-webkit-scrollbar-thumb{ background:#94a3b8; border-radius:8px; }
    .perm-detected{
      display:flex;
      align-items:center;
      gap:11px;
      margin:14px 0;
      padding:11px 12px;
      border:1px solid #bfdbfe;
      border-radius:12px;
      background:#eff6ff;
      color:#1e3a8a;
    }
    .perm-detected-icon{
      width:40px;
      height:40px;
      display:grid;
      place-items:center;
      flex:0 0 auto;
      border-radius:11px;
      background:#2563eb;
      color:#fff;
      font-size:1.15rem;
    }
    .perm-detected > div{ min-width:0; overflow-wrap:anywhere; }
    .perm-device-picker[hidden],.perm-guide-content[hidden],.perm-change-device[hidden]{ display:none!important; }
    .perm-device-picker{ margin:14px 0; padding:16px; border:1px solid #bfdbfe; border-radius:12px; background:#f8fbff; }
    .perm-device-picker h4{ margin:0 0 7px; color:#1e3a8a; font-size:1rem; }
    .perm-picker-fields{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:14px 0; }
    .perm-picker-fields label{ display:grid; gap:6px; color:#334155; font-size:.85rem; font-weight:650; }
    .perm-picker-fields select{ width:100%; min-width:0; min-height:44px; padding:9px; border:1px solid #cbd5e1; border-radius:9px; background:#fff; color:#1e293b; font:inherit; }
    .perm-picker-submit{ width:100%; min-height:44px; padding:10px 14px; border:0; border-radius:9px; background:#2563eb; color:#fff; font:inherit; font-weight:700; cursor:pointer; }
    .perm-change-device{ margin-top:5px; padding:4px 0; border:0; background:transparent; color:#2563eb; font-size:.8rem; text-decoration:underline; cursor:pointer; }
    @media(max-width:560px){ .perm-picker-fields{ grid-template-columns:1fr; } }
    .perm-detected small{
      display:block;
      margin-bottom:2px;
      color:#64748b;
      font-size:.7rem;
      font-weight:800;
      letter-spacing:.06em;
      text-transform:uppercase;
    }
    .perm-detected strong{
      display:block;
      color:#1e3a8a;
      font-size:.94rem;
    }
    .perm-steps{ display:grid; gap:10px; font-size:.9rem; }
    .perm-steps h4{
      font-size:.78rem;
      text-transform:uppercase;
      letter-spacing:.06em;
      color:#64748b;
      margin:0 0 4px;
    }
    .perm-steps ol{ margin:0 0 0 16px; display:grid; gap:6px; }
    .perm-visual-guide{
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:10px;
      margin-top:15px;
    }
    .perm-visual-step{
      min-width:0;
      margin:0;
      padding:10px;
      border:1px solid #dbe3ef;
      border-radius:14px;
      background:#fff;
      box-shadow:0 7px 18px rgba(15,23,42,.07);
    }
    .perm-visual-screen{
      position:relative;
      min-height:100px;
      display:grid;
      place-items:center;
      overflow:hidden;
      border:1px solid #dbeafe;
      border-radius:12px;
      background:linear-gradient(145deg, #eff6ff, #f8fafc);
      color:#2563eb;
    }
    .perm-visual-screen::before,
    .perm-visual-screen::after{
      content:"";
      position:absolute;
      left:12px;
      right:12px;
      height:7px;
      border-radius:999px;
      background:#dbeafe;
    }
    .perm-visual-screen::before{ top:12px; right:42px; }
    .perm-visual-screen::after{ bottom:12px; left:34px; }
    .perm-visual-number{
      position:absolute;
      top:7px;
      right:7px;
      z-index:2;
      width:26px;
      height:26px;
      display:grid;
      place-items:center;
      border-radius:50%;
      background:#2563eb;
      color:#fff;
      font-size:.75rem;
      font-weight:900;
      box-shadow:0 4px 10px rgba(37,99,235,.25);
    }
    .perm-visual-icon{
      position:relative;
      z-index:1;
      width:54px;
      height:54px;
      display:grid;
      place-items:center;
      border-radius:16px;
      background:#fff;
      color:#2563eb;
      font-size:1.75rem;
      box-shadow:0 8px 20px rgba(30,64,175,.14);
    }
    .perm-visual-step figcaption{
      padding-top:8px;
      text-align:center;
      overflow-wrap:anywhere;
    }
    .perm-visual-step figcaption strong{
      display:block;
      color:#1e293b;
      font-size:.78rem;
      line-height:1.25;
    }
    .perm-visual-step figcaption span{
      display:block;
      margin-top:3px;
      color:#64748b;
      font-size:.68rem;
      line-height:1.25;
    }
    .perm-visual-guide.has-images{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
    .perm-visual-guide.has-images .perm-visual-screen{ aspect-ratio:3/2; min-height:0; padding:0; background:#f1f5f9; }
    .perm-visual-guide.has-images .perm-visual-screen::before,.perm-visual-guide.has-images .perm-visual-screen::after{ display:none; }
    .perm-visual-image{ display:block; width:100%; height:100%; object-fit:contain; background:#fff; }
    .perm-photo-link{ display:block; width:100%; height:100%; }
    .perm-photo-link:focus-visible{ outline:3px solid #2563eb; outline-offset:-3px; }
    .perm-visual-guide.has-images figcaption{ text-align:left; padding:10px 3px 2px; }
    .perm-visual-guide.has-images figcaption strong{ font-size:.9rem; }
    .perm-visual-guide.has-images figcaption span{ font-size:.8rem; line-height:1.5; }
    .perm-visual-step.is-check-step .perm-visual-screen::after{ content:''; display:block; position:absolute; top:40%; left:12%; right:auto; bottom:auto; width:76%; height:27%; border:3px solid #ef4444; border-radius:10px; background:transparent; }
    .perm-visual-step.is-check-step .perm-visual-screen::before{ content:''; display:block; position:absolute; top:15%; left:47%; right:auto; width:20px; height:25%; border-radius:0; background:#ef4444; clip-path:polygon(40% 0,60% 0,60% 72%,100% 72%,50% 100%,0 72%,40% 72%); }
    @media(min-width:700px){
      .perm-visual-guide{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
    }
    @media(max-width:350px){
      .perm-visual-guide{ grid-template-columns:1fr; }
      .perm-visual-screen{ min-height:88px; }
    }
    .perm-device-note{
      margin:11px 0 0 !important;
      padding:9px 10px;
      border-radius:10px;
      background:#f8fafc;
      color:#64748b !important;
      font-size:.8rem !important;
      line-height:1.4;
    }
    .perm-official{
      margin-top:13px;
      padding:11px;
      border:1px solid #dbe3ef;
      border-radius:12px;
      background:#f8fafc;
    }
    .perm-official-title{
      display:flex;
      align-items:center;
      gap:7px;
      margin-bottom:8px;
      color:#334155;
      font-size:.76rem;
      font-weight:900;
      letter-spacing:.04em;
      text-transform:uppercase;
    }
    .perm-official-links{
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:8px;
    }
    .perm-official-link{
      min-height:44px;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:7px;
      padding:.55rem .7rem;
      border:1px solid #bfdbfe;
      border-radius:10px;
      background:#fff;
      color:#1d4ed8;
      font-size:.78rem;
      font-weight:800;
      line-height:1.25;
      text-align:center;
      text-decoration:none;
      overflow-wrap:anywhere;
      touch-action:manipulation;
    }
    .perm-official-link:hover{ background:#eff6ff; }
    .perm-official-link:focus-visible{ outline:3px solid rgba(37,99,235,.25); outline-offset:2px; }
    @media(max-width:420px){
      .perm-official-links{ grid-template-columns:1fr; }
    }
    .perm-close{
      position:absolute;
      top:10px;
      right:10px;
      border:none;
      background:#e2e8f0;
      border-radius:999px;
      width:30px;
      height:30px;
      cursor:pointer;
      color:#334155;
    }
    .perm-actions{
      display:grid;
      gap:9px;
      flex:0 0 auto;
      margin-top:0;
      padding:14px 22px;
      border-top:1px solid #e2e8f0;
      background:#fff;
    }
    .perm-retry{
      min-height:48px;
      padding:.7rem 1rem;
      border:0;
      border-radius:12px;
      background:#2563eb;
      color:#fff;
      font-size:.92rem;
      font-weight:800;
      cursor:pointer;
      touch-action:manipulation;
    }
    .perm-retry:disabled{
      opacity:.68;
      cursor:wait;
    }
    .perm-status{
      min-height:20px;
      margin:0 !important;
      color:#475569;
      font-size:.83rem !important;
      font-weight:650;
      text-align:center;
    }
    .perm-status.is-ok{ color:#15803d; }
    .perm-status.is-error{ color:#b91c1c; }
    @media(max-width:560px){
      .location-banner{
        align-items:stretch;
        flex-direction:column;
      }
      .location-banner button{ width:100%; }
      .perm-card{
        max-height:calc(100vh - 24px);
        max-height:calc(100dvh - 24px);
        padding:0;
        border-radius:18px;
      }
      .perm-close{
        width:40px;
        height:40px;
      }
      .perm-card h3{ padding-right:42px; }
      .perm-header{ padding:16px 54px 14px 16px; }
      .perm-header h3{ padding-right:0; }
      .perm-body{ padding:16px; }
      .perm-actions{ padding:12px 16px; }
      .perm-visual-guide.has-images{ grid-template-columns:1fr; }
    }
    .shift-notice-modal{
      position:fixed;
      inset:0;
      display:none;
      align-items:center;
      justify-content:center;
      padding:18px;
      z-index:80;
    }
    .shift-notice-modal.show{ display:flex; }
    .shift-notice-backdrop{
      position:absolute;
      inset:0;
      background:rgba(15,23,42,.55);
    }
    .shift-notice-card{
      position:relative;
      background:#fff;
      border-radius:16px;
      padding:18px 16px 14px;
      width:min(430px, 100%);
      box-shadow:0 18px 50px rgba(15,23,42,.3);
      z-index:1;
    }
    .shift-notice-title{
      margin:0 0 6px;
      font-size:1.08rem;
      font-weight:800;
      color:#0f172a;
      text-align:left;
    }
    .shift-notice-text{
      margin:0;
      color:#334155;
      font-size:.95rem;
      line-height:1.35;
    }
    .shift-notice-actions{
      margin-top:14px;
      display:flex;
      justify-content:flex-end;
      gap:8px;
      flex-wrap:wrap;
    }
    .shift-notice-btn{
      border:none;
      border-radius:10px;
      padding:.55rem .95rem;
      font-weight:700;
      cursor:pointer;
    }
    .shift-notice-btn-soft{
      background:#e2e8f0;
      color:#1e293b;
    }
    .shift-notice-btn-main{
      background:#1d4ed8;
      color:#fff;
    }
    .pause-success-modal{
      z-index:130;
      padding:
        max(16px, env(safe-area-inset-top))
        max(16px, env(safe-area-inset-right))
        max(16px, env(safe-area-inset-bottom))
        max(16px, env(safe-area-inset-left));
    }
    .pause-success-card{
      --pause-accent:#f97316;
      width:min(430px, 100%);
      max-height:calc(100vh - 32px);
      max-height:calc(100dvh - 32px);
      overflow-y:auto;
      overflow-wrap:anywhere;
      padding:30px 24px 22px;
      text-align:center;
      border-top:6px solid var(--pause-accent);
      border-radius:20px;
    }
    .pause-success-icon{
      width:72px;
      height:72px;
      margin:0 auto 17px;
      display:grid;
      place-items:center;
      color:#fff;
      background:var(--pause-accent);
      border-radius:50%;
      box-shadow:0 12px 28px rgba(15,23,42,.18);
      animation:pauseSuccessPop .34s ease-out both;
    }
    .pause-success-icon i{
      font-size:2rem;
    }
    .pause-success-card .shift-notice-title{
      color:var(--pause-accent);
      text-align:center;
      font-size:1.35rem;
    }
    .pause-success-card .shift-notice-text{
      text-align:center;
      color:#64748b;
    }
    .pause-success-card .shift-notice-actions{
      justify-content:center;
      margin-top:20px;
    }
    .pause-success-card .shift-notice-btn-main{
      min-width:132px;
      min-height:46px;
      background:var(--pause-accent);
    }
    @keyframes pauseSuccessPop{
      from{ opacity:0; transform:scale(.72); }
      to{ opacity:1; transform:scale(1); }
    }
    @media(max-width:480px){
      .pause-success-modal{
        align-items:center;
        padding:
          max(12px, env(safe-area-inset-top))
          max(12px, env(safe-area-inset-right))
          max(12px, env(safe-area-inset-bottom))
          max(12px, env(safe-area-inset-left));
      }
      .pause-success-card{
        max-height:calc(100vh - 24px);
        max-height:calc(100dvh - 24px);
        padding:27px 18px 18px;
        border-top-width:5px;
        border-radius:18px;
      }
      .pause-success-icon{
        width:64px;
        height:64px;
        margin-bottom:14px;
      }
      .pause-success-icon i{ font-size:1.75rem; }
      .pause-success-card .shift-notice-title{
        font-size:clamp(1.15rem, 6vw, 1.35rem);
        line-height:1.2;
      }
      .pause-success-card .shift-notice-text{
        font-size:.9rem;
        line-height:1.45;
      }
      .pause-success-card .shift-notice-actions{
        margin-top:17px;
      }
      .pause-success-card .shift-notice-btn-main{
        width:100%;
        min-height:48px;
        font-size:.95rem;
      }
    }
    @media(max-height:500px) and (orientation:landscape){
      .pause-success-modal{
        padding:
          max(8px, env(safe-area-inset-top))
          max(14px, env(safe-area-inset-right))
          max(8px, env(safe-area-inset-bottom))
          max(14px, env(safe-area-inset-left));
      }
      .pause-success-card{
        width:min(520px, 100%);
        max-height:calc(100dvh - 16px);
        padding:14px 22px 12px;
      }
      .pause-success-icon{
        width:48px;
        height:48px;
        margin-bottom:8px;
      }
      .pause-success-icon i{ font-size:1.4rem; }
      .pause-success-card .shift-notice-title{ margin-bottom:4px; font-size:1.15rem; }
      .pause-success-card .shift-notice-text{ font-size:.84rem; }
      .pause-success-card .shift-notice-actions{ margin-top:10px; }
      .pause-success-card .shift-notice-btn-main{ min-height:42px; }
    }
    .reject-notice-modal{
      z-index:90;
    }
    .superadmin-message-modal{
      z-index:110;
    }
    .superadmin-message-card{
      border-top:5px solid #2563eb;
    }
    .superadmin-message-date{
      margin:0 0 8px;
      color:#64748b;
      font-size:.82rem;
      font-weight:700;
    }
    .superadmin-message-body{
      white-space:pre-wrap;
      max-height:min(52vh, 360px);
      overflow:auto;
    }
    .superadmin-message-body p{ margin:.35rem 0; }
    .superadmin-message-body ul,
    .superadmin-message-body ol{ margin:.35rem 0 .35rem 1.2rem; padding-left:1rem; }
    .reject-notice-meta{
      margin:0 0 8px;
      color:#0f172a;
      font-size:.9rem;
      font-weight:700;
      line-height:1.35;
    }
    .reject-notice-list{
      margin:8px 0 0;
      padding:0;
      list-style:none;
      max-height:min(55vh, 380px);
      overflow:auto;
      display:grid;
      gap:8px;
    }
    .reject-notice-item{
      border:1px solid #fecdd3;
      border-radius:12px;
      background:#fff1f2;
      padding:8px 10px;
    }
    .reject-notice-item .reject-notice-meta{
      margin:0 0 4px;
      font-size:.84rem;
      color:#881337;
      font-weight:800;
    }
    .reject-notice-reason{
      white-space:pre-wrap;
      font-size:.9rem;
    }

    .footer { display:flex; gap:.5rem; margin-top:1.2rem; }
    .footer a {
      flex:1; padding:.75rem; text-decoration:none; color:#fff;
      background:var(--primary); text-align:center; border-radius:var(--radius);
      min-height:56px;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:1.1rem;
      font-weight:700;
    }

    .pending-btn{
      display:flex;
      align-items:center;
      gap:.7rem;
      width:100%;
      padding:.65rem .8rem;
      background:linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%);
      color:#9f1239;
      border:1px solid #fecdd3;
      border-radius:16px;
      text-decoration:none;
      box-shadow:0 12px 24px rgba(159, 18, 57, 0.12);
      margin:0 0 1rem;
    }
    .pending-icon-wrap{
      width:38px;
      height:38px;
      border-radius:12px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      background:#e11d48;
      color:#fff;
      flex:0 0 auto;
      box-shadow:0 8px 18px rgba(225, 29, 72, 0.28);
    }
    .pending-icon-wrap i{
      font-size:1rem;
      line-height:1;
    }
    .pending-copy{
      display:flex;
      flex-direction:column;
      min-width:0;
      line-height:1.1;
    }
    .pending-copy strong{
      font-size:.9rem;
      color:#881337;
      font-weight:800;
    }
    .pending-copy span{
      font-size:.75rem;
      color:#be123c;
    }
    .pending-count{
      min-width:30px;
      height:30px;
      padding:0 .45rem;
      border-radius:999px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      background:#fff;
      border:1px solid #fda4af;
      color:#9f1239;
      font-weight:800;
      font-size:.82rem;
      margin-left:auto;
      flex:0 0 auto;
    }
    .profile-btn {
      width: 48px; height: 48px;
      border-radius: 50%; overflow: hidden; box-shadow: 0 2px 6px rgba(0,0,0,0.15);
      cursor: pointer; flex:0 0 auto;
      background:#14b8a6;
    }
    .profile-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .company-logo-spot{
      width:46px;
      height:46px;
      object-fit:contain;
      border-radius:12px;
      background:#fff;
      pointer-events:none;
      flex:0 0 auto;
      padding:.2rem;
      box-shadow:0 4px 12px rgba(15,23,42,.08);
    }
    /* Globo azul de tareas */
    .tasks-btn{
      background:#2563eb;
      color:#fff;
      padding:.5rem 1rem;
      display:flex;
      align-items:center;
      gap:.35rem;
      border-radius:var(--radius);
      text-decoration:none;
      font-size:.9rem;
      white-space:nowrap;
      box-shadow:var(--shadow);
      min-width:0;
    }
    .tasks-btn .badge{
      background:rgba(255,255,255,.15);
      border:1px solid rgba(255,255,255,.35);
      padding:.1rem .45rem;
      border-radius:999px;
      font-weight:700;
    }
    .tasks-btn i{ font-size:1rem; line-height:1; }
    .neochat-notice{
      display:flex;
      align-items:center;
      gap:.55rem;
      width:min(100%,290px);
      padding:.55rem .65rem;
      border:1px solid rgba(129,140,248,.5);
      border-radius:16px;
      background:linear-gradient(135deg,#eef2ff 0%,#f5f3ff 52%,#ede9fe 100%);
      color:#3730a3;
      text-decoration:none;
      box-shadow:0 10px 24px rgba(79,70,229,.14);
      transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    }
    .neochat-notice:hover{ transform:translateY(-2px); border-color:#818cf8; box-shadow:0 14px 28px rgba(79,70,229,.2); }
    .neochat-notice.is-hidden{ display:none; }
    .neochat-notice__icon{
      position:relative;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:36px;
      height:36px;
      flex:0 0 36px;
      border-radius:12px;
      background:linear-gradient(135deg,#1261b5 0%,#1d83d4 52%,#38bdf8 100%);
      color:#fff;
      font-size:1rem;
      box-shadow:0 7px 15px rgba(79,70,229,.28);
    }
    .neochat-notice__icon .neochat-symbol{ position:relative; display:grid; place-items:center; width:100%; height:100%; }
    .neochat-notice__icon .neochat-symbol>.bi-chat-dots-fill{ font-size:1.05rem; filter:drop-shadow(0 2px 3px rgba(8,47,107,.3)); }
    .neochat-notice__icon::after{ content:''; position:absolute; right:-2px; top:-3px; width:7px; height:7px; border:2px solid #f5f3ff; border-radius:50%; background:#22c55e; }
    .neochat-notice__copy{ display:flex; flex-direction:column; min-width:0; line-height:1.15; }
    .neochat-notice__copy strong{ font-size:.78rem; font-weight:850; color:#312e81; }
    .neochat-notice__copy span{ margin-top:2px; color:#6366a8; font-size:.68rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .neochat-notice__count{ min-width:26px; height:26px; margin-left:auto; padding:0 .4rem; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; background:#4f46e5; color:#fff; font-size:.75rem; font-weight:850; box-shadow:0 5px 12px rgba(79,70,229,.25); }
    @media(max-width:640px){
      body{
        padding:
          max(.45rem, env(safe-area-inset-top))
          max(.45rem, env(safe-area-inset-right))
          max(.6rem, env(safe-area-inset-bottom))
          max(.45rem, env(safe-area-inset-left));
      }
      .card{
        max-width:none;
        width:min(100%, calc(100vw - max(.9rem, env(safe-area-inset-left) + env(safe-area-inset-right))));
        padding:.95rem;
      }
      .options-grid{
        grid-template-columns:1fr;
      }
      .incident-toolbar{
        justify-content:flex-start;
        gap:.45rem;
      }
      .incident-open-btn{
        width:auto;
        min-height:38px;
        padding:.48rem .78rem;
        font-size:.86rem;
      }
      .incident-toolbar-hint{
        width:auto;
        font-size:.78rem;
      }
      .incident-modal{
        align-items:center;
        padding:14px;
      }
      .incident-card{
        width:100%;
        max-height:calc(100dvh - 28px);
        border-radius:18px;
        padding:1rem .95rem;
      }
      .incident-actions{
        grid-template-columns:1fr;
      }
    }
    @media(max-width:480px){
      .card{
        width:100%;
        padding:.85rem;
        border-radius:10px;
      }
      .card-topbar{
        align-items:flex-start;
      }
      .topbar-left,
      .topbar-right{
        width:auto;
      }
      .topbar-right{
        gap:.5rem;
      }
      .brand-stack{
        gap:.4rem;
      }
      .tasks-btn{
        padding:.3rem .6rem;
        font-size:.8rem;
        white-space:normal;
        line-height:1.15;
      }
      .pending-btn{
        padding:.55rem .7rem;
      }
      .pending-copy strong{
        font-size:.84rem;
      }
      .pending-copy span{
        font-size:.72rem;
      }
      .profile-btn{
        width:40px;
        height:40px;
      }
      .company-logo-spot{
        width:44px;
        height:44px;
      }
      .options-grid{
        grid-template-columns:1fr;
      }
    }

    /* ==== Botón y popup de pausa ==== */
    .pause-toggle-btn{
      margin-bottom:.5rem;
      min-height:44px;
      padding:.55rem 1rem;
      font-size:.86rem;
      font-weight:700;
      border-radius:999px;
      border:1px solid #dbeafe;
      background:#eff6ff;
      color:#1d4ed8;
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      cursor:pointer;
      touch-action:manipulation;
    }
    .pause-toggle-btn i{
      font-size:.9rem;
    }

    /* ==== Popup para iniciar o terminar pausa ==== */
    .pause-card{
      position:fixed;
      inset:0;
      z-index:125;
      display:none;
      align-items:center;
      justify-content:center;
      margin:0;
      padding:
        max(16px, env(safe-area-inset-top))
        max(16px, env(safe-area-inset-right))
        max(16px, env(safe-area-inset-bottom))
        max(16px, env(safe-area-inset-left));
      font-size:.9rem;
    }
    .pause-card.is-open{
      display:flex !important;
    }
    .pause-card-backdrop{
      position:absolute;
      inset:0;
      background:rgba(15,23,42,.62);
      backdrop-filter:blur(3px);
    }
    .pause-form{
      --pause-form-accent:#f97316;
      position:relative;
      z-index:1;
      width:min(460px, 100%);
      max-height:calc(100vh - 32px);
      max-height:calc(100dvh - 32px);
      overflow-y:auto;
      padding:28px 24px 22px;
      background:#fff;
      border:1px solid #e2e8f0;
      border-top:6px solid var(--pause-form-accent);
      border-radius:20px;
      box-shadow:0 22px 65px rgba(15,23,42,.34);
      animation:pauseFormOpen .25s ease-out both;
    }
    .pause-form.is-stop{ --pause-form-accent:var(--danger); }
    .pause-modal-close{
      position:absolute;
      top:12px;
      right:12px;
      width:40px;
      height:40px;
      display:grid;
      place-items:center;
      padding:0;
      border:0;
      border-radius:50%;
      background:#f1f5f9;
      color:#475569;
      font-size:1.35rem;
      cursor:pointer;
      touch-action:manipulation;
    }
    .pause-header{
      padding-right:42px;
      margin-bottom:18px;
    }
    .pause-title{
      font-size:1.25rem;
      font-weight:800;
      line-height:1.2;
      color:var(--pause-form-accent);
      display:flex;
      align-items:center;
      gap:.5rem;
    }
    .pause-title i{ font-size:1.2rem; }
    .pause-timer{
      color:#64748b;
      margin-top:.55rem;
      line-height:1.45;
    }
    .pause-motivo{
      font-size:.85rem;
      color:#4b5563;
      margin-top:.55rem;
      padding:.6rem .7rem;
      background:#f8fafc;
      border-radius:10px;
    }
    .pause-reason-label{
      display:block;
      margin-bottom:.5rem;
      color:#1e293b;
      font-size:.9rem;
      font-weight:750;
    }
    .pause-form textarea{
      width:100%;
      min-height:105px;
      margin:0;
      padding:.8rem .9rem;
      border-radius:12px;
      border:1px solid #cbd5e1;
      background:#f8fafc;
      color:#0f172a;
      font:inherit;
      font-size:16px;
      line-height:1.4;
      resize:vertical;
    }
    .pause-form textarea:focus{
      outline:none;
      border-color:var(--focus);
      box-shadow:0 0 0 2px rgba(123,146,245,0.15);
    }
    .pause-optional-note{
      margin:.55rem 0 0;
      color:#64748b;
      font-size:.8rem;
      line-height:1.4;
    }
    .pause-modal-actions{
      display:flex;
      justify-content:flex-end;
      margin-top:20px;
    }
    .btn-xs{
      min-height:48px;
      padding:.7rem 1.1rem;
      font-size:.92rem;
      font-weight:750;
      border-radius:12px;
      border:none;
      display:inline-flex;
      justify-content:center;
      align-items:center;
      gap:.4rem;
      cursor:pointer;
      white-space:nowrap;
      touch-action:manipulation;
    }
    .btn-pause-start{
      background:#f97316;
      color:#fff;
    }
    .btn-pause-stop{
      background:var(--danger); /* Terminar pausa en rojo */
      color:#fff;
    }
    .btn-xs i{ font-size:.9rem; }
    @keyframes pauseFormOpen{
      from{ opacity:0; transform:translateY(10px) scale(.98); }
      to{ opacity:1; transform:translateY(0) scale(1); }
    }
    @media(max-width:480px){
      .pause-card{
        padding:
          max(12px, env(safe-area-inset-top))
          max(12px, env(safe-area-inset-right))
          max(12px, env(safe-area-inset-bottom))
          max(12px, env(safe-area-inset-left));
      }
      .pause-form{
        max-height:calc(100vh - 24px);
        max-height:calc(100dvh - 24px);
        padding:25px 18px 18px;
        border-top-width:5px;
        border-radius:18px;
      }
      .pause-title{ font-size:1.15rem; }
      .pause-modal-actions{ margin-top:17px; }
      .btn-xs{ width:100%; }
    }
    @media(max-height:500px) and (orientation:landscape){
      .pause-form{
        width:min(620px, 100%);
        max-height:calc(100dvh - 16px);
        padding:16px 20px 14px;
      }
      .pause-header{ margin-bottom:10px; }
      .pause-form textarea{ min-height:65px; }
      .pause-modal-actions{ margin-top:10px; }
      .btn-xs{ min-height:42px; }
    }

    .desktop-shell{
      width:100%;
      max-width:480px;
    }
    .desktop-side{
      display:none;
    }
    .desk-panel{
      background:#f8fafc;
      border:1px solid #dbe3f0;
      border-radius:14px;
      padding:.95rem;
    }
    .desk-panel h3{
      font-size:1.02rem;
      color:#1e293b;
      margin-bottom:.65rem;
    }
    .desk-kpis{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:.55rem;
      margin-bottom:.55rem;
    }
    .desk-kpi{
      border:1px solid #d8e2ee;
      background:#fff;
      border-radius:10px;
      padding:.6rem .65rem;
    }
    .desk-kpi-label{
      font-size:.66rem;
      color:#64748b;
      text-transform:uppercase;
      letter-spacing:.04em;
      margin-bottom:.15rem;
    }
    .desk-kpi-value{
      font-size:1.7rem;
      line-height:1;
      font-weight:800;
      color:#0f172a;
    }
    .desk-kpi-sub{
      font-size:.78rem;
      color:#475569;
      margin-top:.2rem;
    }
    .desk-pause-wrap{
      display:flex;
      justify-content:space-between;
      align-items:stretch;
      gap:.6rem;
    }
    .desk-pause-main{
      min-width:0;
      flex:1;
    }
    .desk-pause-time{
      min-width:122px;
      border:2px solid #22d3ee;
      border-radius:8px;
      background:#f0fdff;
      padding:.32rem .5rem;
      display:flex;
      flex-direction:column;
      justify-content:center;
      align-items:center;
      text-align:center;
    }
    .desk-pause-time-label{
      font-size:.62rem;
      color:#0f766e;
      text-transform:uppercase;
      letter-spacing:.05em;
    }
    .desk-pause-time-value{
      font-size:1.1rem;
      color:#0f172a;
      font-weight:800;
      line-height:1.05;
      margin-top:.1rem;
    }
    .desk-pause-time-sub{
      font-size:.68rem;
      color:#0f766e;
      margin-top:.08rem;
    }
    .desk-field{
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      gap:.7rem;
      font-size:.92rem;
      color:#0f172a;
      padding:.22rem 0;
    }
    .desk-field-label{
      font-weight:700;
    }
    .desk-field-value{
      color:#475569;
      text-align:right;
    }
    .desk-field-note{
      margin-top:-.08rem;
      font-size:.77rem;
      color:#64748b;
      text-align:right;
      word-break:break-word;
    }
    .desk-turno{
      margin:.55rem 0;
      border-radius:12px;
      border:1px solid #d5b4ff;
      background:#f3e8ff;
      padding:.7rem .8rem;
    }
    .desk-turno-name{
      font-weight:800;
      color:#4c1d95;
      font-size:.95rem;
    }
    .desk-turno-time{
      color:#312e81;
      font-size:.92rem;
      margin-top:.15rem;
      font-weight:600;
      white-space:normal;
      word-break:break-word;
      overflow-wrap:anywhere;
      line-height:1.35;
    }
    .desk-turno.off{
      border-color:#e2e8f0;
      background:#f8fafc;
    }
    .desk-turno.off .desk-turno-name{
      color:#334155;
    }
    .desk-turno.off .desk-turno-time{
      color:#64748b;
    }
    .desk-est-item{
      border:1px solid #d8e2ee;
      background:#fff;
      border-radius:10px;
      padding:.6rem .7rem;
    }
    .desk-est-item + .desk-est-item{
      margin-top:.45rem;
    }
    .desk-est-name{
      font-size:.94rem;
      font-weight:700;
      color:#0f172a;
      margin-bottom:.12rem;
    }
    .desk-est-sub{
      font-size:.8rem;
      color:#64748b;
    }
    @media(min-width:1024px){
      body{
        padding:1rem;
      }
      .desktop-shell{
        max-width:1280px;
        display:grid;
        grid-template-columns:minmax(640px,1fr) 370px;
        gap:1rem;
        align-items:start;
      }
      .desktop-side{
        display:grid;
        gap:1rem;
      }
      .card{
        max-width:none;
        border:1px solid #dbe3f0;
        box-shadow:0 10px 24px rgba(15,23,42,.08);
      }
      h1,h2,.status{
        text-align:left;
      }
      .title-row{
        display:flex;
        align-items:baseline;
        gap:.65rem;
      }
      .title-row h1{
        margin-bottom:0;
      }
      .desktop-welcome{
        display:inline-block;
        font-size:1.03rem;
        font-weight:700;
        color:#0f766e;
      }
      .desktop-weekday{
        display:inline;
        margin-left:.45rem;
        font-size:1rem;
        color:#475569;
        font-weight:600;
      }
      .options-grid{
        grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
        align-items:start;
      }
    }