.desk-only { display:none; }
.mobile-only { display:none; }
.signature-pad { display:contents; }
.desk-turno-link { display:block; color:inherit; text-decoration:none; border-radius:12px; }
.desk-turno-link:hover .desk-turno { border-color:#bca1f4; box-shadow:0 4px 12px #7c3aed12; }
.desk-turno-link:focus-visible { outline:3px solid #c4b5fd; outline-offset:4px; }
.desk-turno-open { display:flex; align-items:center; gap:6px; margin-top:8px; color:#7544c6; font-size:10px; font-weight:700; }
@media(min-width:1024px) {
  body { padding:38px 32px; background:radial-gradient(ellipse at 0 10%,#e4efff 0,transparent 52%),radial-gradient(ellipse at 100% 100%,#e4eeff 0,transparent 45%),#f4f7fd; }
  .desktop-shell { max-width:1490px; grid-template-columns:minmax(0,2.03fr) minmax(320px,1fr); gap:22px; }
  .desktop-shell > .card { padding:30px; border:1px solid #edf2fb; border-radius:20px; background:#ffffffed; box-shadow:0 14px 40px #214c9010; min-width:0; }
  .card-topbar { display:block; margin:0 0 24px; }
  .card-topbar > .topbar-left { display:none; }
  .card-topbar > .topbar-right { flex-direction:row; justify-content:flex-end; flex-wrap:wrap; margin-top:16px; }
  .card-topbar > .topbar-right > .profile-btn { display:none!important; }
  .card-topbar > .topbar-right:not(:has(.neochat-notice:not(.is-hidden),.tasks-btn)) { display:none; }
  .desk-signature-heading { display:grid; grid-template-columns:minmax(140px,.75fr) minmax(0,1.3fr) auto; align-items:center; gap:20px; }
  .desk-company-brand { display:flex; align-items:center; gap:12px; min-width:0; min-height:68px; padding-right:18px; border-right:1px solid #e1eafb; }
  .desk-company-logo { width:64px; height:64px; flex:0 0 64px; object-fit:contain; padding:6px; border:1px solid #edf2fb; border-radius:15px; background:#fff; box-shadow:0 5px 14px #244c8910; }
  .desk-company-name { min-width:0; color:#172a48; font-size:clamp(13px,1.15vw,18px); line-height:1.45; font-weight:700; letter-spacing:.065em; text-transform:uppercase; overflow-wrap:anywhere; }
  .desk-heading-title { min-width:0; }
  .desk-heading-user { display:flex; align-items:center; justify-content:flex-end; gap:12px; min-width:0; }
  .desk-heading-user-copy { min-width:0; max-width:165px; text-align:right; }
  .desk-heading-role { display:block; margin-top:3px; color:#869bb9; font-size:12px; }
  .desk-profile-avatar { position:relative; display:grid; place-items:center; width:64px; height:64px; flex:0 0 64px; padding:3px; border:1px solid #e7eefb; border-radius:50%; background:#f0f5ff; text-decoration:none; }
  .desk-profile-avatar img,.desk-profile-avatar > span { width:100%; height:100%; border-radius:50%; object-fit:cover; }
  .desk-profile-avatar > span { display:grid; place-items:center; color:#fff; font-size:24px; font-weight:700; }
  .desk-profile-avatar::after { content:''; position:absolute; right:1px; bottom:2px; width:16px; height:16px; border:3px solid #fff; border-radius:50%; background:var(--signature-accent,#129448); }
  .desk-signature-heading h1 { margin:0 0 8px; text-align:left; color:#101b35; font-size:clamp(24px,2.1vw,34px); letter-spacing:-.04em; line-height:1.15; text-wrap:balance; }
  .desk-heading-date { display:flex; align-items:center; flex-wrap:wrap; gap:9px; color:#354e72; font-size:16px; font-weight:600; }
  .desk-heading-date i { font-size:20px; color:#58759b; }
  .desk-heading-date .desk-date-dot { color:#8094b0; }
  .desk-heading-welcome { max-width:165px; font-size:14px; line-height:1.6; color:#2e466a; text-align:right; }
  .desk-heading-welcome strong { color:#08796b; overflow-wrap:anywhere; }
  .desktop-shell > .card > .title-row,.desktop-shell > .card > h2 { display:none; }
  .desktop-shell > .card > .status { display:flex; align-items:flex-start; gap:12px; margin-bottom:22px; text-align:left; font-size:18px; color:var(--signature-accent,#129448); }
  .signature-status-icon { display:grid; place-items:center; flex:0 0 40px; width:40px; height:40px; border-radius:50%; background:#effaf3; font-size:29px; }
  .status.salida .signature-status-icon { background:#fff1f3; }
  .status.salida { --signature-accent:#dc3545; }
  .signature-help { display:block; margin-top:5px; font-size:14px; line-height:1.6; color:#7385a4; font-weight:400; }
  .signature-pad { position:relative; display:block; margin-bottom:18px; }
  #canvasFirma { display:block; height:clamp(260px,32vh,340px); margin:0; border:2px dashed #d0e1fb; border-radius:16px; background:linear-gradient(135deg,#fbfdff,#f8fbff); }
  .signature-placeholder { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; pointer-events:none; color:#8396b5; }
  .signature-placeholder[hidden] { display:none; }
  .signature-placeholder svg { width:132px; height:88px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
  .signature-placeholder p { font-size:16px; font-weight:500; }
  .incident-open-btn { min-height:46px; padding:11px 17px; background:#fff0e7; color:#d64d09; border-radius:12px; box-shadow:none; font-size:14px; }
  .incident-open-btn i { font-size:20px; }
  .incident-toolbar-hint { padding-left:14px; border-left:1px solid #dce5f3; color:#7486a4; font-size:13px; font-weight:400; }
  .actions { gap:14px; margin-top:14px; }
  .actions .btn,.footer a { min-height:66px; border-radius:13px; gap:13px; font-size:17px; }
  .actions .btn i:not(.mobile-only),.footer a i { display:inline-block; font-size:25px; }
  .btn-success { background:linear-gradient(115deg,#129948,#07853e); }
  .btn-clear { background:linear-gradient(120deg,#e6edf7,#dce5f3); color:#3d577b; }
  .footer { gap:14px; margin-top:12px; }
  .footer a:first-child { background:linear-gradient(110deg,#075ac1,#004ca8); }
  .footer a[href="../logout.php"] { background:linear-gradient(110deg,#0874f4,#0065df); }
  .actions .btn:hover:not(:disabled),.footer a:hover { filter:brightness(.96); }
  .desktop-side { gap:18px; min-width:0; }
  .desk-panel { padding:19px; border:1px solid #edf2fa; border-radius:19px; background:#ffffffed; box-shadow:0 10px 30px #214c9009; }
  .desk-panel h3 { display:flex; align-items:center; gap:12px; margin-bottom:14px; color:#14213b; font-size:19px; letter-spacing:-.03em; }
  .desk-panel h3 > i { display:grid; place-items:center; flex:0 0 37px; width:37px; height:37px; border-radius:11px; background:#edf5ff; color:#0875f5; font-size:22px; }
  .desk-kpis { gap:10px; margin-bottom:10px; }
  .desk-kpi { position:relative; min-width:0; padding:16px 12px 16px 62px; border:1px solid #e2eafb; border-radius:13px; background:#f6f8fe; }
  .desk-kpi-icon { position:absolute; left:14px; top:50%; transform:translateY(-50%); display:grid; place-items:center; width:35px; height:35px; border-radius:50%; color:#506787; background:#e7edf7; font-size:21px; }
  .desk-kpi-state { background:#f0fbf5; border-color:#d9f1e4; }
  .desk-kpi-state .desk-kpi-icon { color:#13934c; background:#def6e7; }
  .desk-kpi-state .desk-kpi-sub { color:#2c9660; }
  .desk-kpi-state[data-state="salida"],.desk-kpi-state[data-state="bloqueado"] { background:#fff5f5; border-color:#f4dfe3; }
  .desk-kpi-state[data-state="salida"] .desk-kpi-icon,.desk-kpi-state[data-state="bloqueado"] .desk-kpi-icon,.desk-kpi-state[data-state="bloqueado"] .desk-kpi-sub { color:#ba445c; background:#ffe9ed; }
  .desk-kpi-label { margin-bottom:5px; color:#6c809f; font-size:10px; letter-spacing:0; }
  .desk-kpi-value { font-size:23px; color:#15243e; line-height:1.2; }
  .desk-kpi-sub { font-size:11px; line-height:1.5; color:#7186a6; }
  .desk-pause-wrap { gap:10px; align-items:center; }
  .desk-pause-time { min-width:95px; border-width:1px; }
  .desk-field { gap:12px; padding:7px 2px; color:#253957; font-size:13px; }
  .desk-field-label { display:inline-flex; align-items:center; gap:12px; font-weight:500; }
  .desk-field-label i { width:22px; text-align:center; flex:0 0 22px; color:#647e9f; font-size:18px; }
  .desk-field-value { min-width:0; color:#667fa3; overflow-wrap:anywhere; }
  .desk-location-mode { display:inline-flex; align-items:center; justify-content:flex-end; gap:6px; min-width:0; text-align:right; color:#2c629c; font-size:11px; font-weight:600; padding:5px 8px; border-radius:8px; background:#edf5ff; }
  [data-location-mode="teletrabajo"] .desk-location-mode { color:#7544a9; background:#f5edfc; }
  [data-location-mode="cualquiera"] .desk-location-mode { color:#148061; background:#eaf9f1; }
  .desk-location-map { margin:3px 0 10px 36px; border:1px solid #e1eafb; border-radius:12px; background:#f8fbff; overflow:hidden; }
  .desk-location-map summary { display:flex; align-items:center; gap:10px; min-height:54px; padding:11px; cursor:pointer; list-style:none; }
  .desk-location-map summary::-webkit-details-marker { display:none; }
  .desk-location-map summary:focus-visible { outline:3px solid #9cc5ff; outline-offset:-3px; }
  .desk-location-copy { display:flex; flex-direction:column; gap:4px; min-width:0; flex:1; overflow-wrap:anywhere; }
  .desk-location-copy strong { color:#294362; font-size:12px; font-weight:600; }
  .desk-location-copy > span { color:#6c829f; font-size:11px; line-height:1.5; }
  .desk-location-toggle { display:inline-flex; align-items:center; gap:5px; flex:0 0 auto; font-size:10px; font-weight:600; color:#1769c4; }
  .desk-location-map .map-hide,.desk-location-map[open] .map-show { display:none; }
  .desk-location-map[open] .map-hide { display:inline; }
  .desk-location-map iframe { display:block; width:100%; height:180px; border:0; border-top:1px solid #e1eafb; background:#eaf0f8; }
  .desk-location-map-footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; padding:10px 11px; color:#6c829f; font-size:10px; }
  .desk-location-map-footer a { color:#1769c4; font-weight:600; text-decoration:none; }
  .desk-location-map-footer a:hover { text-decoration:underline; }
  .desk-turno { position:relative; margin:2px 0 12px 36px; padding:13px 12px 13px 55px; border-color:#e3d6ff; background:linear-gradient(115deg,#f1eaff,#eae1ff); }
  .desk-turno > i { position:absolute; top:15px; left:12px; display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:#e2d2ff; color:#6c3ed2; font-size:20px; }
  .desk-turno-name { color:#5a2ac4; font-size:12px; }
  .desk-turno-time { color:#6943b7; font-size:12px; font-weight:500; }
  .desk-turno.off > i { color:#8393aa; background:#edf1f7; }
  .desk-field-separator { border-top:1px solid #edf1f8; padding-top:12px; }
  .desk-est-item { position:relative; min-height:66px; padding:13px 12px 13px 63px; border-color:#e2eafb; background:#f7f9fe; border-radius:13px; }
  .desk-est-item > i { position:absolute; left:14px; top:15px; display:grid; place-items:center; width:35px; height:35px; border-radius:50%; background:#e7effc; color:#637fa3; font-size:21px; }
  .desk-est-name { font-size:13px; line-height:1.4; }
  .desk-est-sub { margin-top:3px; font-size:11px; line-height:1.5; overflow-wrap:anywhere; }
  @media(max-width:1279px) {
    body { padding:24px 20px; }
    .desktop-shell { gap:16px; }
    .desktop-shell > .card { padding:24px; }
    .desk-signature-heading { grid-template-columns:minmax(115px,.7fr) minmax(0,1fr) auto; gap:12px; }
    .desk-company-brand { gap:8px; padding-right:10px; min-height:52px; }
    .desk-company-logo { flex-basis:46px; width:46px; height:46px; padding:4px; border-radius:12px; }
    .desk-company-name { font-size:12px; letter-spacing:.03em; }
    .desk-profile-avatar { width:46px; height:46px; flex-basis:46px; }
    .desk-profile-avatar > span { font-size:19px; }
    .desk-profile-avatar::after { width:13px; height:13px; border-width:2px; }
    .desk-heading-user { gap:8px; }
    .desk-heading-user-copy { max-width:105px; }
    .desk-heading-welcome { font-size:12px; }
    .desk-heading-role { font-size:10px; }
    .desk-signature-heading h1 { font-size:23px; }
    .desk-heading-date { font-size:13px; }
    .desk-panel { padding:15px; }
    .desk-panel h3 { font-size:17px; }
    .desk-kpi { padding-left:48px; }
    .desk-kpi-icon { width:27px; height:27px; left:11px; font-size:18px; }
    .desk-kpi-value { font-size:20px; }
    .desk-kpi-label { font-size:9px; }
    .desk-kpi-sub { font-size:10px; }
  }
}
@media(max-width:1023px) {
  body { padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left)); background:radial-gradient(ellipse at 15% 0,#e9f2ff,transparent 65%),#f4f7fd; }
  .desktop-shell { max-width:740px; min-width:0; }
  .desktop-shell > .card { width:100%; max-width:none; min-width:0; padding:clamp(14px,3.3vw,24px); border:1px solid #eef3fb; border-radius:20px; background:#ffffffed; box-shadow:0 10px 28px #244c8910; }
  .card-topbar { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; align-items:start; margin-bottom:8px; }
  .topbar-left { display:block; min-width:0; }
  .topbar-right { display:contents; }
  .brand-stack { display:block; }
  .company-logo-spot { width:clamp(46px,8vw,62px); height:clamp(46px,8vw,62px); padding:5px; border:1px solid #edf2fa; border-radius:15px; box-shadow:0 4px 15px #163f7910; }
  .topbar-right > .profile-btn { grid-column:2; grid-row:1; justify-self:end; width:clamp(46px,8vw,62px); height:clamp(46px,8vw,62px); border:2px solid #e5edf8; box-shadow:0 4px 14px #18457e15; }
  .topbar-right > .neochat-notice,.topbar-right > .tasks-btn { grid-column:1/-1; width:100%; max-width:none; min-width:0; }
  .title-row h1 { margin:0 0 7px; color:#1b273a; font-size:clamp(25px,6vw,36px); line-height:1.2; letter-spacing:-.04em; text-wrap:balance; }
  .desktop-shell > .card > h2 { margin:0 0 18px; color:#68778d; font-size:clamp(17px,4vw,23px); font-weight:700; }
  .pending-btn { margin:0 0 22px; padding:12px; gap:12px; border-color:#ffcbd7; border-radius:15px; background:linear-gradient(120deg,#fff2f5,#ffe9ee); box-shadow:0 9px 22px #e6376910; }
  .pending-icon-wrap { width:clamp(38px,8vw,54px); height:clamp(38px,8vw,54px); border-radius:12px; background:#ed1250; box-shadow:0 5px 12px #e6376920; }
  .pending-icon-wrap i { font-size:clamp(20px,4.5vw,28px); }
  .pending-copy { flex:1; gap:3px; line-height:1.3; }
  .pending-copy strong { color:#ba1747; font-size:clamp(13px,3.45vw,21px); overflow-wrap:anywhere; }
  .pending-copy span { font-size:clamp(11px,2.75vw,16px); color:#c64c6b; line-height:1.35; }
  .pending-count { min-width:clamp(32px,7vw,46px); height:clamp(32px,7vw,46px); padding:0 7px; border-color:#ffc3d1; color:#d71c51; font-size:clamp(14px,3.5vw,21px); box-shadow:0 3px 10px #e6376910; }
  .status { margin:0 0 18px; text-align:center; font-size:clamp(16px,4.2vw,23px); font-weight:700; line-height:1.4; text-wrap:balance; }
  .status.entrada { color:#11953f; }
  .signature-pad { position:relative; display:block; margin-bottom:16px; }
  #canvasFirma { display:block; height:clamp(180px,29svh,280px); margin:0; border:2px dashed #d8e2ee; border-radius:15px; background:linear-gradient(135deg,#fff,#fcfdff); }
  .signature-placeholder { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; pointer-events:none; color:#a0afc5; }
  .signature-placeholder[hidden],.signature-placeholder-desktop { display:none; }
  .signature-placeholder svg { width:clamp(92px,20vw,126px); height:clamp(65px,14vw,88px); fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
  .signature-placeholder-mobile { display:block; font-size:clamp(13px,3.4vw,18px); color:#889bb7; }
  .incident-toolbar { flex-wrap:nowrap; gap:10px; padding:8px; background:#fff8f0; border-radius:13px; }
  .incident-open-btn { flex:0 0 auto; min-height:36px; padding:8px 11px; gap:6px; background:#ffead3; color:#d65312; border-radius:22px; box-shadow:none; font-size:clamp(12px,3.15vw,18px); }
  .incident-open-btn i { font-size:clamp(17px,4.1vw,24px); }
  .incident-toolbar-hint { flex:1; min-width:0; padding-left:10px; border-left:1px solid #d7dbe1; color:#7a8798; font-size:clamp(10px,2.55vw,14px); font-weight:400; line-height:1.4; }
  .actions { gap:10px; margin-top:14px; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .actions .btn,.footer a { min-width:0; min-height:clamp(52px,12vw,72px); padding:12px 8px; border-radius:12px; gap:clamp(6px,1.5vw,10px); font-size:clamp(12px,3.5vw,20px); line-height:1.2; }
  .actions .btn .mobile-only,.actions .btn-clear i,.footer a i { display:inline-block; flex:0 0 auto; font-size:clamp(18px,4.6vw,28px); }
  .btn-success { background:linear-gradient(135deg,#29b750,#079340); box-shadow:0 5px 13px #11944816; }
  .btn-clear { background:linear-gradient(135deg,#74869f,#536987); color:#fff; }
  .footer { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:10px; }
  .footer a { background:linear-gradient(120deg,#076fe3,#0052ae); box-shadow:0 5px 13px #075ab616; }
  .footer a:only-child { grid-column:1/-1; }
  .actions .btn:hover:not(:disabled),.footer a:hover { filter:brightness(.96); }
  .pause-toggle-btn { max-width:100%; }
  @media(max-height:500px) and (orientation:landscape) {
    #canvasFirma { height:160px; }
    .card-topbar { margin-bottom:4px; }
    .pending-btn { margin-bottom:14px; }
  }
  @media(max-width:350px) {
    .pending-btn { gap:8px; padding:10px; }
    .incident-toolbar { gap:7px; padding:7px; }
    .incident-open-btn { padding:8px; }
    .incident-toolbar-hint { padding-left:7px; }
    .title-row h1 { font-size:24px; }
  }
}