/* ============================================================
   ARMdocs 2.0 — main.css
   Tres portales: Mandante / Subcontratista / Colaborador
   Mobile-first · Azul U de Chile
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Barlow+Condensed:wght@600;700;800&display=swap');

:root {
  --blue-950:#00153D; --blue-900:#001F5B; --blue-800:#002D80; --blue-700:#003DA5;
  --blue-600:#0047C0; --blue-500:#1B5EE6; --blue-400:#4880F0;
  --blue-200:#A8C4FA; --blue-100:#D4E2FD; --blue-50:#EBF1FF;
  --teal:#0D9488; --teal-bg:#CCFBF1; --teal-tx:#115E59;
  --green:#059669; --green-bg:#D1FAE5; --green-tx:#065F46;
  --amber:#D97706; --amber-bg:#FEF3C7; --amber-tx:#92400E;
  --red:#DC2626; --red-bg:#FEE2E2; --red-tx:#991B1B;
  --gray-50:#F9FAFB; --gray-100:#F3F4F6; --gray-200:#E5E7EB;
  --gray-300:#D1D5DB; --gray-400:#9CA3AF; --gray-500:#6B7280;
  --gray-600:#4B5563; --gray-700:#374151; --gray-800:#1F2937;
  --white:#FFFFFF;
  --sidebar-w:228px; --topbar-h:52px;
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px;
  --sh-sm:0 1px 3px rgba(0,0,0,.08); --sh-md:0 4px 20px rgba(0,0,0,.10); --sh-lg:0 12px 40px rgba(0,0,0,.16);
  --font:'Barlow','Segoe UI',system-ui,sans-serif;
  --font-cond:'Barlow Condensed','Segoe UI',sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font);font-size:14px;color:var(--gray-800);background:var(--gray-100);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{cursor:pointer;font-family:var(--font);border:none}
input,select,textarea{font-family:var(--font)}

/* ══ PORTAL DE SELECCIÓN ══ */
#portal-screen{min-height:100vh;display:none;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(145deg,var(--blue-950) 0%,var(--blue-800) 60%,var(--blue-600) 100%);padding:24px}
#portal-screen.visible{display:flex}
.portal-logo{font-family:var(--font-cond);font-size:42px;font-weight:800;color:var(--white);letter-spacing:2px;margin-bottom:4px}
.portal-logo span{color:var(--blue-400)}
.portal-tagline{font-size:11px;color:var(--blue-200);letter-spacing:1.2px;margin-bottom:44px;text-align:center;text-transform:uppercase}
.portal-cards{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;width:100%;max-width:760px}
.portal-card{background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.12);border-radius:var(--r-xl);padding:32px 24px;cursor:pointer;transition:all .2s;text-align:center;flex:1;min-width:200px;max-width:230px;backdrop-filter:blur(10px)}
.portal-card:hover{transform:translateY(-6px);background:rgba(255,255,255,.13)}
.portal-card-icon{font-size:44px;margin-bottom:14px}
.portal-card-title{font-family:var(--font-cond);font-size:20px;font-weight:700;color:var(--white);letter-spacing:.5px}
.portal-card-desc{font-size:11px;color:rgba(255,255,255,.55);margin-top:6px;line-height:1.5}
.portal-card.mandante{border-color:rgba(72,128,240,.5)}.portal-card.mandante:hover{border-color:var(--blue-400);background:rgba(72,128,240,.18)}
.portal-card.subcontrato{border-color:rgba(13,148,136,.5)}.portal-card.subcontrato:hover{border-color:var(--teal);background:rgba(13,148,136,.18)}
.portal-card.colaborador{border-color:rgba(217,119,6,.5)}.portal-card.colaborador:hover{border-color:var(--amber);background:rgba(217,119,6,.18)}

/* ══ LOGIN ══ */
#login-screen{display:none;min-height:100vh;align-items:center;justify-content:center;padding:24px}
#login-screen.visible{display:flex}
#login-screen.mandante{background:linear-gradient(145deg,var(--blue-950),var(--blue-700))}
#login-screen.subcontrato{background:linear-gradient(145deg,#042f2e,var(--teal))}
#login-screen.colaborador{background:linear-gradient(145deg,#3d1a00,var(--amber))}
.login-card{background:var(--white);border-radius:var(--r-xl);padding:36px 32px;width:100%;max-width:420px;box-shadow:var(--sh-lg)}
.login-back{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--gray-400);cursor:pointer;margin-bottom:18px;background:none;border:none;font-family:var(--font)}
.login-back:hover{color:var(--blue-600)}
.login-rol-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 14px;border-radius:20px;font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;margin-bottom:10px}
.login-rol-chip.mandante{background:var(--blue-100);color:var(--blue-800)}
.login-rol-chip.subcontrato{background:var(--teal-bg);color:var(--teal-tx)}
.login-rol-chip.colaborador{background:var(--amber-bg);color:var(--amber-tx)}
.login-title{font-family:var(--font-cond);font-size:28px;font-weight:800;color:var(--blue-900);margin-bottom:2px}
.login-title span{color:var(--blue-500)}
.login-sub{font-size:11px;color:var(--gray-400);margin-bottom:24px}

/* ══ FORMULARIOS ══ */
.form-group{margin-bottom:14px}
.form-group label{display:block;font-size:11px;font-weight:700;color:var(--gray-600);text-transform:uppercase;letter-spacing:.8px;margin-bottom:5px}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:10px 14px;border:1.5px solid var(--gray-200);border-radius:var(--r-md);font-size:14px;color:var(--gray-800);outline:none;transition:border-color .15s,box-shadow .15s;background:var(--white)}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--blue-500);box-shadow:0 0 0 3px var(--blue-100)}
.form-group textarea{resize:vertical;min-height:80px}
.form-group input.rut-ok{border-color:var(--green)}
.form-group input.rut-bad{border-color:var(--red)}
.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.form-section-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--blue-700);margin-bottom:10px;padding-bottom:6px;border-bottom:2px solid var(--blue-100);margin-top:6px}

/* ══ BOTONES ══ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:var(--font);font-weight:700;border-radius:var(--r-md);transition:all .15s;cursor:pointer;border:none}
.btn-primary{width:100%;padding:12px;background:var(--blue-700);color:var(--white);font-size:14px;letter-spacing:.4px;margin-top:6px}
.btn-primary:hover{background:var(--blue-900)}
.btn-primary:disabled{background:var(--gray-300);cursor:not-allowed}
.btn-primary.teal{background:var(--teal)}.btn-primary.teal:hover{background:var(--teal-tx)}
.btn-primary.amber{background:var(--amber)}.btn-primary.amber:hover{background:var(--amber-tx)}
.btn-secondary{padding:8px 16px;border:1.5px solid var(--gray-200);background:var(--white);color:var(--gray-600);font-size:13px;font-weight:600;font-family:var(--font);border-radius:var(--r-md)}
.btn-secondary:hover{background:var(--gray-100)}
.btn-sm{padding:5px 12px;font-size:11px;border-radius:var(--r-sm)}
.btn-icon{width:30px;height:30px;border-radius:var(--r-sm);border:1.5px solid var(--gray-200);background:var(--white);display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--gray-500);transition:all .1s;cursor:pointer}
.btn-icon:hover{background:var(--blue-50);border-color:var(--blue-400);color:var(--blue-700)}
.btn-danger{background:var(--red);color:var(--white);padding:8px 16px;border-radius:var(--r-md);font-size:13px;font-weight:700;font-family:var(--font)}

/* ══ ALERTAS ══ */
.alert{padding:10px 14px;border-radius:var(--r-md);font-size:13px;margin-top:10px;display:none}
.alert.visible{display:block}
.alert-error{background:var(--red-bg);color:var(--red-tx)}
.alert-success{background:var(--green-bg);color:var(--green-tx)}
.alert-info{background:var(--blue-100);color:var(--blue-800)}

/* ══ APP LAYOUT ══ */
#app-screen{display:none;height:100vh;overflow:hidden}
#app-screen.visible{display:flex}

/* SIDEBAR */
#sidebar{width:var(--sidebar-w);background:var(--blue-900);display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto;transition:left .25s}
body.rol-subcontrato #sidebar{background:#042f2e}
body.rol-colaborador #sidebar{background:#3d1a00}

.sidebar-logo{padding:18px 16px 14px;border-bottom:1px solid rgba(255,255,255,.08)}
.sidebar-brand{font-family:var(--font-cond);font-size:22px;font-weight:800;color:var(--white);letter-spacing:1px}
.sidebar-brand span{color:var(--blue-400)}
body.rol-subcontrato .sidebar-brand span{color:var(--teal)}
body.rol-colaborador .sidebar-brand span{color:var(--amber)}
.sidebar-sub{font-size:9px;color:rgba(255,255,255,.35);letter-spacing:.8px;margin-top:2px;text-transform:uppercase}

.nav{flex:1;padding:8px 0}
.nav-section{padding:10px 16px 3px;font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.28)}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 16px;color:rgba(255,255,255,.5);font-size:13px;font-weight:500;cursor:pointer;transition:all .12s;border-left:3px solid transparent;user-select:none}
.nav-item:hover{background:rgba(255,255,255,.07);color:var(--white)}
.nav-item.active{background:rgba(255,255,255,.11);color:var(--white);border-left-color:var(--blue-400)}
body.rol-subcontrato .nav-item.active{border-left-color:var(--teal)}
body.rol-colaborador .nav-item.active{border-left-color:var(--amber)}
.nav-item svg{flex-shrink:0}
.nav-badge{margin-left:auto;background:var(--red);color:var(--white);font-size:9px;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 5px}

.sidebar-user{padding:12px 16px;border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:10px}
.s-avatar{width:32px;height:32px;border-radius:50%;background:var(--blue-600);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--white);flex-shrink:0}
body.rol-subcontrato .s-avatar{background:var(--teal)}
body.rol-colaborador .s-avatar{background:var(--amber)}
.s-name{font-size:12px;font-weight:600;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-rol{font-size:9px;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.5px}
.btn-logout{margin-left:auto;background:none;border:none;color:rgba(255,255,255,.35);font-size:16px;padding:4px;border-radius:4px;flex-shrink:0;cursor:pointer}
.btn-logout:hover{color:var(--white)}

/* MAIN */
#main-content{flex:1;display:flex;flex-direction:column;overflow:hidden}
#topbar{height:var(--topbar-h);background:var(--white);border-bottom:1px solid var(--gray-200);padding:0 20px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.topbar-left{display:flex;align-items:center;gap:12px}
.btn-ham{display:none;background:none;border:none;font-size:22px;color:var(--gray-500);cursor:pointer}
.topbar-title{font-family:var(--font-cond);font-size:17px;font-weight:700;color:var(--blue-900)}
.topbar-right{display:flex;align-items:center;gap:10px}
.rol-chip{padding:3px 12px;border-radius:20px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.rol-chip.mandante{background:var(--blue-100);color:var(--blue-800)}
.rol-chip.subcontrato{background:var(--teal-bg);color:var(--teal-tx)}
.rol-chip.colaborador{background:var(--amber-bg);color:var(--amber-tx)}
.sync-pill{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--gray-400)}
.sync-dot{width:7px;height:7px;border-radius:50%;background:var(--gray-300)}
.sync-dot.online{background:var(--green)}
.sync-dot.offline{background:var(--red)}

.panel{display:none;flex:1;overflow-y:auto;padding:20px}
.panel.active{display:block}

/* ══ CARDS & TABLES ══ */
.card{background:var(--white);border-radius:var(--r-lg);border:1px solid var(--gray-200);box-shadow:var(--sh-sm);overflow:hidden;margin-bottom:18px}
.card-header{display:flex;align-items:center;justify-content:space-between;padding:13px 18px;border-bottom:1px solid var(--gray-200);flex-wrap:wrap;gap:8px}
.card-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--gray-700)}
.card-body{padding:18px}

.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-bottom:20px}
.stat-card{background:var(--white);border-radius:var(--r-md);padding:14px 16px;border:1px solid var(--gray-200)}
.stat-val{font-family:var(--font-cond);font-size:28px;font-weight:700;line-height:1}
.stat-label{font-size:10px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--gray-400);margin-top:4px}
.c-green{color:var(--green)}.c-amber{color:var(--amber)}.c-red{color:var(--red)}.c-blue{color:var(--blue-500)}.c-teal{color:var(--teal)}

.data-table{width:100%}
.t-head{display:grid;padding:9px 16px;background:var(--blue-900);gap:8px}
body.rol-subcontrato .t-head{background:#042f2e}
body.rol-colaborador .t-head{background:#3d1a00}
.t-th{font-size:9px;font-weight:700;color:var(--blue-200);text-transform:uppercase;letter-spacing:1px}
.t-row{display:grid;padding:10px 16px;border-top:1px solid var(--gray-200);gap:8px;align-items:center;transition:background .1s}
.t-row:hover{background:var(--blue-50)}
.t-name{font-size:13px;font-weight:600;color:var(--gray-800)}
.t-sub{font-size:11px;color:var(--gray-400);margin-top:1px}
.t-cell{font-size:12px;color:var(--gray-600)}

.pill{display:inline-flex;align-items:center;padding:2px 10px;border-radius:12px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;white-space:nowrap}
.pill-ok{background:var(--green-bg);color:var(--green-tx)}
.pill-pend{background:var(--amber-bg);color:var(--amber-tx)}
.pill-rej{background:var(--red-bg);color:var(--red-tx)}
.pill-info{background:var(--blue-100);color:var(--blue-800)}

/* Upload zone */
.upload-zone{border:2px dashed var(--gray-200);border-radius:var(--r-md);padding:22px;text-align:center;cursor:pointer;transition:all .15s;background:var(--gray-50);position:relative}
.upload-zone:hover{border-color:var(--blue-400);background:var(--blue-50)}
.upload-zone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}

/* Obras grid */
.obras-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.obra-card{background:var(--white);border-radius:var(--r-lg);border:1px solid var(--gray-200);overflow:hidden;transition:box-shadow .15s,transform .15s}
.obra-card:hover{box-shadow:var(--sh-md);transform:translateY(-2px)}
.obra-card-top{padding:16px;border-bottom:1px solid var(--gray-100)}
.obra-nombre{font-size:15px;font-weight:700;color:var(--blue-900)}
.obra-dir{font-size:11px;color:var(--gray-400);margin-top:3px}
.obra-stats{display:grid;grid-template-columns:repeat(3,1fr);text-align:center;border-top:1px solid var(--gray-100)}
.obra-stat{padding:10px 4px;border-right:1px solid var(--gray-100)}
.obra-stat:last-child{border-right:none}
.obra-stat-val{font-family:var(--font-cond);font-size:18px;font-weight:700;color:var(--blue-900)}
.obra-stat-lbl{font-size:9px;color:var(--gray-400);font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.obra-pct-bar{height:4px;background:var(--gray-200);margin:0 16px 12px}
.obra-pct-fill{height:100%;background:var(--blue-500);border-radius:2px;transition:width .5s}
.obra-actions{padding:10px 16px;display:flex;gap:6px;flex-wrap:wrap}

/* Avatar */
.avatar{width:34px;height:34px;border-radius:50%;background:var(--blue-700);color:var(--white);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.avatar-lg{width:48px;height:48px;font-size:17px}
body.rol-colaborador .avatar{background:var(--amber)}

/* Tag riesgo */
.tag{display:inline-flex;align-items:center;gap:4px;background:var(--blue-50);color:var(--blue-700);border:1px solid var(--blue-100);border-radius:4px;padding:2px 8px;font-size:10px;font-weight:600}

/* Riesgo checkbox */
.riesgo-lbl{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1.5px solid var(--gray-200);border-radius:var(--r-sm);cursor:pointer;font-size:12px;font-weight:500;transition:all .12s;user-select:none}
.riesgo-lbl input[type=checkbox]{display:none}
.riesgo-lbl:hover{border-color:var(--blue-400);background:var(--blue-50)}
.riesgo-lbl.checked{border-color:var(--blue-600);background:var(--blue-50);color:var(--blue-800);font-weight:700}

/* ══ MÓDULO COLABORADOR — Documentos pendientes ══ */
.doc-item{display:flex;align-items:center;gap:14px;padding:14px 16px;border-top:1px solid var(--gray-200);cursor:pointer;transition:background .12s}
.doc-item:hover:not(.firmado){background:var(--amber-bg)}
.doc-item.firmado{opacity:.6;cursor:default}
.doc-item-icon{font-size:26px;flex-shrink:0}
.doc-item-info{flex:1}
.doc-item-nombre{font-size:13px;font-weight:700;color:var(--gray-800)}
.doc-item-desc{font-size:11px;color:var(--gray-400);margin-top:1px}

/* Completado banner */
.completado-banner{background:linear-gradient(135deg,var(--green),#047857);border-radius:var(--r-lg);padding:28px;text-align:center;color:var(--white);margin-bottom:20px}
.completado-banner .cb-icon{font-size:52px;margin-bottom:10px}
.completado-banner h2{font-family:var(--font-cond);font-size:26px;font-weight:700}
.completado-banner p{font-size:13px;margin-top:6px;opacity:.85}
.btn-whatsapp{display:inline-flex;align-items:center;gap:8px;background:#25D366;color:var(--white);padding:12px 24px;border-radius:var(--r-lg);font-size:14px;font-weight:700;margin-top:14px;cursor:pointer;border:none;font-family:var(--font)}

/* ══ PANTALLA FIRMA FULLSCREEN ══ */
#firma-screen{display:none;position:fixed;inset:0;background:var(--white);z-index:500;flex-direction:column}
#firma-screen.visible{display:flex}
.firma-topbar{background:var(--blue-900);padding:12px 16px;display:flex;align-items:center;gap:12px;flex-shrink:0}
body.rol-colaborador .firma-topbar{background:#3d1a00}
.firma-topbar-title{font-size:14px;font-weight:700;color:var(--white);flex:1}
.firma-topbar-sub{font-size:10px;color:rgba(255,255,255,.5)}
.firma-close{background:none;border:none;color:rgba(255,255,255,.7);font-size:22px;cursor:pointer}

.firma-doc-viewer{flex:1;overflow-y:auto;background:var(--gray-100);display:flex;flex-direction:column;align-items:center;padding:12px;gap:8px}
#pdf-frame{width:100%;max-width:800px;border:none;border-radius:var(--r-md);box-shadow:var(--sh-md);background:var(--white)}

.firma-bottom{background:var(--white);border-top:2px solid var(--gray-200);padding:14px 16px;flex-shrink:0}
.firma-bottom-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--gray-500);margin-bottom:8px}
.canvas-wrap{border:2px solid var(--gray-200);border-radius:var(--r-md);overflow:hidden;background:#FAFBFF;position:relative;touch-action:none}
.canvas-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--gray-300);pointer-events:none;font-style:italic}
#firma-canvas{display:block;width:100%;height:110px;cursor:crosshair;touch-action:none}
.firma-btns{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.btn-firma-ok{flex:1;padding:13px;background:var(--green);color:var(--white);border-radius:var(--r-md);font-size:15px;font-weight:700;border:none;cursor:pointer;transition:background .15s}
.btn-firma-ok:disabled{background:var(--gray-300);cursor:not-allowed}
.btn-firma-ok:not(:disabled):hover{background:var(--green-tx)}
.btn-firma-bio{padding:13px 16px;background:var(--blue-700);color:var(--white);border-radius:var(--r-md);font-size:13px;font-weight:700;border:none;cursor:pointer;display:flex;align-items:center;gap:6px}
.btn-firma-bio:hover{background:var(--blue-900)}
.btn-firma-limpiar{padding:13px 14px;border:1.5px solid var(--gray-200);background:var(--white);border-radius:var(--r-md);font-size:13px;color:var(--gray-500);cursor:pointer}
.firma-progreso{background:var(--blue-50);border-radius:var(--r-md);padding:10px 14px;margin-top:10px;font-size:12px;color:var(--blue-800);display:flex;align-items:center;gap:10px}
.firma-progreso-bar-wrap{flex:1;height:6px;background:var(--blue-200);border-radius:3px;overflow:hidden}
.firma-progreso-bar{height:100%;background:var(--blue-600);border-radius:3px;transition:width .4s}

/* ══ MODALES ══ */
#modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:400;align-items:center;justify-content:center;padding:16px}
#modal-overlay.visible{display:flex}
.modal{background:var(--white);border-radius:var(--r-xl);box-shadow:var(--sh-lg);width:100%;max-width:580px;max-height:92vh;display:flex;flex-direction:column;overflow:hidden}
.modal-lg{max-width:720px}.modal-sm{max-width:420px}
.modal-header{padding:16px 20px;border-bottom:1px solid var(--gray-200);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.modal-title{font-family:var(--font-cond);font-size:18px;font-weight:700;color:var(--blue-900)}
.modal-close{background:none;border:none;font-size:20px;color:var(--gray-400);padding:4px 6px;border-radius:4px;line-height:1;cursor:pointer}
.modal-close:hover{background:var(--gray-100);color:var(--gray-800)}
.modal-body{padding:20px;overflow-y:auto;flex:1}
.modal-footer{padding:14px 20px;border-top:1px solid var(--gray-200);display:flex;justify-content:flex-end;gap:8px;flex-shrink:0}

/* ══ TOAST ══ */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--blue-900);color:var(--white);padding:12px 24px;border-radius:var(--r-lg);font-size:13px;font-weight:600;box-shadow:var(--sh-lg);opacity:0;transition:transform .3s,opacity .3s;z-index:700;pointer-events:none;white-space:nowrap}
.toast.visible{transform:translateX(-50%) translateY(0);opacity:1}
.toast.ok{background:var(--green)}
.toast.err{background:var(--red)}

/* Overlay móvil */
.mob-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:199}
.mob-overlay.visible{display:block}

/* ══ RESPONSIVE ══ */
@media(max-width:768px){
  #sidebar{position:fixed;left:calc(-1 * var(--sidebar-w));top:0;bottom:0;z-index:200}
  #sidebar.open{left:0}
  .btn-ham{display:block}
  .form-grid-2,.form-grid-3{grid-template-columns:1fr}
  .panel{padding:14px}
  .obras-grid{grid-template-columns:1fr}
  .firma-btns{flex-direction:column}
  #firma-canvas{height:100px}
}
@media(max-width:460px){
  .stats-grid{grid-template-columns:1fr 1fr}
  .portal-card{max-width:100%}
}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--gray-200);border-radius:3px}

/* ══════════════════════════════════════════════
   MOBILE-FIRST — Versión accesible para todos
   Tamaños grandes, fácil de tocar, fácil de leer
══════════════════════════════════════════════ */

/* Base global para móvil: fuente más grande */
@media (max-width: 768px) {
  html { font-size: 16px; }
  body { font-size: 16px; }

  /* ── PORTAL: tarjetas apiladas, grandes y fáciles de tocar ── */
  #portal-screen { padding: 20px 16px; justify-content: flex-start; padding-top: 40px; }
  .portal-logo   { font-size: 52px; margin-bottom: 6px; }
  .portal-tagline{ font-size: 13px; letter-spacing: .8px; margin-bottom: 28px; }

  .portal-cards  {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    max-width: 100%;
  }
  .portal-card {
    min-width: unset;
    max-width: 100%;
    padding: 22px 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 16px;
    border-radius: 16px;
    /* Mínimo 72px de alto = fácil de tocar con el dedo */
    min-height: 80px;
  }
  .portal-card-icon  { font-size: 38px; margin-bottom: 0; flex-shrink: 0; }
  .portal-card-title { font-size: 22px; }
  .portal-card-desc  { font-size: 13px; color: rgba(255,255,255,.7); margin-top: 3px; }

  /* ── LOGIN: ocupa toda la pantalla, sin scrollear ── */
  #login-screen  { padding: 0; align-items: stretch; }
  .login-card    {
    border-radius: 0;
    padding: 28px 20px 32px;
    max-width: 100%;
    min-height: 100vh;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .login-back       { font-size: 15px; margin-bottom: 20px; }
  .login-rol-chip   { font-size: 13px; padding: 6px 18px; margin-bottom: 14px; }
  .login-title      { font-size: 38px; margin-bottom: 4px; }
  .login-sub        { font-size: 14px; margin-bottom: 28px; }

  /* ── FORMULARIOS: inputs grandes, fácil de tocar ── */
  .form-group       { margin-bottom: 18px; }
  .form-group label {
    font-size: 14px;
    letter-spacing: .5px;
    margin-bottom: 8px;
  }
  .form-group input,
  .form-group select,
  .form-group textarea {
    padding: 16px 18px;
    font-size: 18px;        /* grande para leer */
    border-radius: 12px;
    border-width: 2px;
    min-height: 56px;       /* fácil de tocar */
  }

  /* ── BOTÓN PRINCIPAL: enorme, no falla ── */
  .btn-primary {
    padding: 18px;
    font-size: 18px;
    border-radius: 14px;
    margin-top: 10px;
    min-height: 60px;
    letter-spacing: .5px;
  }

  /* ── ALERTAS: texto legible ── */
  .alert { font-size: 14px; padding: 14px 16px; }

  /* ── SIDEBAR: más ancho y letras más grandes en móvil ── */
  --sidebar-w: 260px;
  .nav-item  { font-size: 16px; padding: 14px 18px; gap: 12px; }
  .nav-section { font-size: 11px; padding: 12px 18px 4px; }
  .s-name    { font-size: 14px; }
  .s-rol     { font-size: 11px; }
  .s-avatar  { width: 38px; height: 38px; font-size: 15px; }

  /* ── TOPBAR ── */
  #topbar    { height: 58px; padding: 0 14px; }
  .topbar-title { font-size: 18px; }

  /* ── PANELES: más padding ── */
  .panel { padding: 16px; }

  /* ── STATS: 2 columnas siempre ── */
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-val   { font-size: 32px; }
  .stat-label { font-size: 11px; }

  /* ── TABLAS: texto más grande ── */
  .t-name    { font-size: 15px; }
  .t-sub     { font-size: 12px; }
  .t-cell    { font-size: 13px; }
  .t-th      { font-size: 10px; }

  /* ── DOCS TRABAJADOR: más grandes para tocar ── */
  .doc-item         { padding: 18px 14px; gap: 16px; }
  .doc-item-icon    { font-size: 34px; }
  .doc-item-nombre  { font-size: 16px; }
  .doc-item-desc    { font-size: 13px; margin-top: 3px; }

  /* ── PILLS: más visibles ── */
  .pill { font-size: 11px; padding: 4px 12px; }

  /* ── BOTONES ACCIÓN: más grandes ── */
  .btn-icon { width: 38px; height: 38px; font-size: 16px; }
  .btn-secondary { padding: 12px 18px; font-size: 14px; }
  .btn-sm { padding: 10px 16px; font-size: 13px; }

  /* ── FIRMA: canvas más alto ── */
  #firma-canvas       { height: 130px; }
  .firma-topbar       { padding: 16px; }
  .firma-topbar-title { font-size: 16px; }
  .firma-bottom-title { font-size: 13px; }
  .btn-firma-ok       { padding: 18px; font-size: 18px; min-height: 60px; border-radius: 14px; }
  .btn-firma-bio      { padding: 18px 16px; font-size: 15px; }
  .btn-firma-limpiar  { padding: 18px 16px; font-size: 15px; }

  /* ── MODAL: full screen en móvil ── */
  #modal-overlay { padding: 0; align-items: flex-end; }
  .modal {
    border-radius: 20px 20px 0 0;
    max-height: 92vh;
    max-width: 100%;
  }
  .modal-title  { font-size: 20px; }
  .modal-body   { padding: 20px 18px; }

  /* ── CANVAS FIRMA ── */
  .canvas-hint { font-size: 16px; }

  /* ── COMPLETADO BANNER ── */
  .completado-banner { padding: 28px 20px; }
  .completado-banner .cb-icon { font-size: 60px; }
  .completado-banner h2 { font-size: 28px; }
  .completado-banner p  { font-size: 15px; }
  .btn-whatsapp { font-size: 16px; padding: 16px 24px; }

  /* ── TOAST: más grande y visible ── */
  .toast {
    font-size: 15px;
    padding: 16px 28px;
    bottom: 20px;
    white-space: normal;
    text-align: center;
    max-width: 90vw;
  }

  /* ── OBRAS CARDS ── */
  .obra-nombre    { font-size: 17px; }
  .obra-dir       { font-size: 13px; }
  .obra-stat-val  { font-size: 22px; }
  .obra-stat-lbl  { font-size: 10px; }

  /* ── CARD HEADERS ── */
  .card-title     { font-size: 13px; }
  .form-section-title { font-size: 13px; }
}

/* ── Pantallas muy pequeñas (< 380px, ej iPhone SE) ── */
@media (max-width: 380px) {
  .login-title    { font-size: 32px; }
  .btn-primary    { font-size: 16px; padding: 16px; }
  .form-group input,
  .form-group select { font-size: 16px; padding: 14px 16px; }
  .portal-card-title { font-size: 20px; }
}

/* ── Tablets (769px - 1024px) ── */
@media (min-width: 769px) and (max-width: 1024px) {
  .login-card  { max-width: 480px; padding: 36px 32px; }
  .login-title { font-size: 32px; }
  .form-group input,
  .form-group select { padding: 13px 16px; font-size: 16px; }
  .btn-primary { padding: 15px; font-size: 16px; }
  .portal-card { min-width: 180px; }
}