/* ============================================================
   styles.css — versión profesional · 100% responsive
   Breakpoints: 1280 · 1024 · 768 · 540 · 380
   ============================================================ */

:root {
    /* Fondos */
    --bg:        #0f1117;
    --surface:   #171b26;
    --surface2:  #1e2332;
    --surface3:  #252b3b;

    /* Bordes */
    --border:    #2c3347;
    --border2:   #3a4258;

    /* Acento — azul índigo */
    --accent:    #4f7ef8;
    --accent2:   #7aa3ff;
    --accent-bg: rgba(79,126,248,.10);

    /* Semánticos */
    --green:      #34d399;  --green-bg:  rgba(52,211,153,.10);
    --yellow:     #f4c950;  --yellow-bg: rgba(244,201,80,.10);
    --red:        #f47171;  --red-bg:    rgba(244,113,113,.10);
    --orange:     #fb9a3c;  --orange-bg: rgba(251,154,60,.10);
    --cyan:       #38bdf8;  --cyan-bg:   rgba(56,189,248,.10);

    /* Texto */
    --text:   #dce4f5;
    --text2:  #8b98b8;
    --text3:  #4e5a76;

    /* Geometría */
    --r:         10px;
    --r-sm:      6px;
    --r-lg:      14px;

    /* Layout */
    --sidebar-w: 248px;
    --topbar-h:  56px;
    --main-pad:  32px;

    /* Tipografía fluida con clamp() */
    --fs-xs:    clamp(10px, 1.2vw, 11px);
    --fs-sm:    clamp(12px, 1.4vw, 13px);
    --fs-base:  clamp(13px, 1.5vw, 14px);
    --fs-md:    clamp(14px, 1.7vw, 15px);
    --fs-lg:    clamp(16px, 2vw, 18px);
    --fs-xl:    clamp(20px, 2.5vw, 26px);
    --fs-2xl:   clamp(22px, 3vw, 32px);

    /* Sombras */
    --shadow-sm: 0 2px 8px rgba(0,0,0,.25);
    --shadow-md: 0 8px 24px rgba(0,0,0,.35);
    --shadow-lg: 0 20px 50px rgba(0,0,0,.50);
}

/* ─── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
    background:var(--bg);
    color:var(--text);
    font-family:'DM Sans', sans-serif;
    font-size:var(--fs-base);
    min-height:100vh;
    line-height:1.55;
    overflow-x:hidden;
}
img, video { max-width:100%; display:block; }
button, input, select, textarea { font-family:inherit; }
a { color:var(--accent2); text-decoration:none; }
a:hover { color:var(--accent); }

/* ─── Scrollbar ─────────────────────────────────────────── */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border2); border-radius:6px; }
::-webkit-scrollbar-thumb:hover { background:var(--text3); }

/* ======================================================
   LAYOUT BASE
   ====================================================== */
.app { display:flex; min-height:100vh; }

/* Sidebar overlay */
.sidebar-overlay {
    display:none; position:fixed; inset:0; z-index:199;
    background:rgba(0,0,0,.7);
    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px);
}
.sidebar-overlay.open { display:block; }

/* ─── Sidebar ───────────────────────────────────────────── */
.sidebar {
    width:var(--sidebar-w); flex-shrink:0;
    background:var(--surface);
    border-right:1px solid var(--border);
    display:flex; flex-direction:column;
    padding:24px 0 0;
    position:fixed; top:0; left:0; height:100vh;
    z-index:200;
    transition:transform .25s cubic-bezier(.4,0,.2,1), width .2s ease;
    overflow:hidden;
}
.sidebar::before {
    content:''; position:absolute; top:0; left:0; right:0; height:2px;
    background:linear-gradient(90deg, var(--accent), var(--accent2)); z-index:1;
}
.sidebar-logo {
    padding:0 20px 20px; border-bottom:1px solid var(--border);
    font-family:'Syne', sans-serif; font-weight:800; font-size:var(--fs-lg);
    color:var(--text);
    display:flex; align-items:center; justify-content:space-between;
    flex-shrink:0;
}
.sidebar-logo span { color:var(--accent2); }
.sidebar-logo-txt { display:flex; align-items:center; gap:8px; }
.sidebar-logo-txt::before {
    content:''; width:8px; height:8px; border-radius:50%; flex-shrink:0;
    background:var(--accent); box-shadow:0 0 8px rgba(79,126,248,.6);
}
.sidebar-close {
    display:none; background:none; border:none;
    color:var(--text3); cursor:pointer; padding:6px; line-height:1;
    font-size:20px; border-radius:4px; transition:.15s;
    min-width:36px; min-height:36px; align-items:center; justify-content:center;
}
.sidebar-close:hover { color:var(--text); background:var(--surface2); }

.sidebar-nav { flex:1; min-height:0; padding:10px 0; overflow-y:auto; overflow-x:hidden; }
.nav-section-label {
    padding:16px 20px 6px; font-size:var(--fs-xs); font-weight:700;
    letter-spacing:.8px; text-transform:uppercase; color:var(--text3); white-space:nowrap;
}
.nav-item {
    display:flex; align-items:center; gap:10px; padding:10px 20px;
    color:var(--text2); font-size:var(--fs-sm); font-weight:500;
    transition:all .15s ease; border-left:2px solid transparent;
    min-height:44px; cursor:pointer; white-space:nowrap; overflow:hidden;
    -webkit-tap-highlight-color:transparent;
}
.nav-item:hover  { color:var(--text); background:var(--accent-bg); border-left-color:rgba(79,126,248,.4); }
.nav-item.active { color:var(--accent2); background:var(--accent-bg); border-left-color:var(--accent); }
.nav-item svg { width:16px; height:16px; flex-shrink:0; opacity:.75; }
.nav-item.active svg { opacity:1; }
.nav-item span { overflow:hidden; text-overflow:ellipsis; }

.sidebar-user {
    padding:16px 20px 20px; border-top:1px solid var(--border);
    font-size:var(--fs-sm); color:var(--text2);
    flex-shrink:0; /* NUNCA se comprime — siempre visible */
}
.sidebar-user strong { display:block; color:var(--text); font-size:var(--fs-base); margin-bottom:3px; font-weight:600; }
.sidebar-user .badge-rol {
    display:inline-block; font-size:var(--fs-xs); font-weight:700;
    letter-spacing:.6px; padding:2px 8px; border-radius:20px; text-transform:uppercase;
    background:var(--accent-bg); color:var(--accent2);
    border:1px solid rgba(79,126,248,.2); margin-bottom:12px;
}
.btn-logout {
    display:flex; align-items:center; justify-content:center; gap:6px;
    padding:9px 12px; border-radius:var(--r-sm);
    background:transparent; color:var(--text3);
    font-size:var(--fs-sm); font-weight:500; border:1px solid var(--border);
    cursor:pointer; width:100%; transition:.15s; min-height:44px;
    font-family:'DM Sans', sans-serif;
    -webkit-tap-highlight-color:transparent;
}
.btn-logout:hover { background:var(--red-bg); color:var(--red); border-color:rgba(244,113,113,.25); }

/* ─── Topbar ────────────────────────────────────────────── */
.topbar {
    display:none;
    position:fixed; top:0; left:0; right:0; height:var(--topbar-h);
    background:var(--surface); border-bottom:1px solid var(--border);
    z-index:150; align-items:center; justify-content:space-between;
    padding:0 16px;
}
.topbar::after {
    content:''; position:absolute; bottom:0; left:0; right:0; height:1px;
    background:linear-gradient(90deg, var(--accent) 0%, transparent 60%); opacity:.5;
}
.topbar-logo { font-family:'Syne', sans-serif; font-weight:800; font-size:var(--fs-lg); color:var(--text); }
.topbar-logo span { color:var(--accent2); }
.topbar-right { display:flex; align-items:center; gap:8px; }
.hamburger {
    background:none; border:1px solid var(--border);
    border-radius:6px; padding:7px 9px; cursor:pointer;
    color:var(--text2); display:flex; align-items:center; justify-content:center;
    min-width:44px; min-height:44px; transition:.15s;
    -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.hamburger:hover { color:var(--text); background:var(--surface2); border-color:var(--border2); }
.hamburger svg { width:18px; height:18px; pointer-events:none; }

/* ─── Main content ──────────────────────────────────────── */
.main {
    margin-left:var(--sidebar-w);
    flex:1; padding:var(--main-pad);
    min-width:0; width:100%;
}
.main-inner { max-width:1160px; width:100%; }

.page-header { margin-bottom:clamp(16px, 3vw, 28px); }
.page-title { font-family:'Syne', sans-serif; font-weight:800; font-size:var(--fs-xl); color:var(--text); letter-spacing:-.3px; }
.page-sub { color:var(--text2); font-size:var(--fs-sm); margin-top:5px; line-height:1.6; }

/* ======================================================
   CARDS
   ====================================================== */
.card {
    background:var(--surface); border:1px solid var(--border);
    border-radius:var(--r); padding:clamp(14px, 2vw, 20px);
    box-shadow:var(--shadow-sm); transition:border-color .2s;
}
.card:hover { border-color:var(--border2); }
.card-title {
    font-family:'Syne', sans-serif; font-weight:700; font-size:var(--fs-base);
    margin-bottom:16px; color:var(--text); display:flex; align-items:center; gap:8px;
}
.card-title::before { content:''; width:3px; height:16px; border-radius:2px; background:var(--accent); flex-shrink:0; }

/* ======================================================
   GRID — automático con auto-fit
   ====================================================== */
.grid-2 { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap:clamp(10px, 1.5vw, 16px); }
.grid-3 { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap:clamp(10px, 1.5vw, 16px); }
.grid-4 { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap:clamp(10px, 1.5vw, 16px); }

/* ======================================================
   STATS
   ====================================================== */
.stat-card {
    background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
    padding:clamp(14px, 2vw, 20px); display:flex; align-items:center; gap:clamp(10px, 1.5vw, 16px);
    box-shadow:var(--shadow-sm); transition:all .2s ease; position:relative; overflow:hidden;
}
.stat-card::after {
    content:''; position:absolute; bottom:0; left:0; right:0; height:2px;
    background:linear-gradient(90deg, var(--accent), transparent); opacity:0; transition:.2s;
}
.stat-card:hover { border-color:var(--border2); }
.stat-card:hover::after { opacity:1; }
.stat-icon {
    width:clamp(36px, 5vw, 44px); height:clamp(36px, 5vw, 44px);
    border-radius:10px; display:flex; align-items:center; justify-content:center;
    font-size:var(--fs-lg); flex-shrink:0;
}
.stat-num { font-family:'Syne', sans-serif; font-weight:800; font-size:clamp(20px, 2.5vw, 26px); letter-spacing:-.5px; color:var(--text); }
.stat-lbl { font-size:var(--fs-xs); color:var(--text2); margin-top:2px; }

/* ======================================================
   BUTTONS
   ====================================================== */
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    padding:clamp(8px,1.2vw,10px) clamp(12px,1.8vw,18px);
    border-radius:var(--r-sm); font-size:var(--fs-sm); font-weight:600;
    cursor:pointer; border:none; transition:all .15s ease;
    font-family:'DM Sans', sans-serif; min-height:44px; white-space:nowrap;
    -webkit-tap-highlight-color:transparent; touch-action:manipulation; user-select:none;
}
.btn-primary { background:var(--accent); color:#fff; box-shadow:0 2px 10px rgba(79,126,248,.3); }
.btn-primary:hover { background:#3d6de8; box-shadow:0 4px 14px rgba(79,126,248,.4); transform:translateY(-1px); }
.btn-primary:active { transform:translateY(0); box-shadow:none; }
.btn-sm { padding:6px 12px; font-size:var(--fs-xs); min-height:34px; }
.btn-lg { padding:12px 24px; font-size:var(--fs-md); min-height:52px; }
.btn-ghost { background:transparent; color:var(--text2); border:1px solid var(--border); }
.btn-ghost:hover { background:var(--surface2); color:var(--text); border-color:var(--border2); }
.btn-danger { background:var(--red-bg); color:var(--red); border:1px solid rgba(244,113,113,.2); }
.btn-danger:hover { background:rgba(244,113,113,.18); border-color:rgba(244,113,113,.35); }
.btn-success { background:var(--green-bg); color:var(--green); border:1px solid rgba(52,211,153,.2); }
.btn-success:hover { background:rgba(52,211,153,.18); border-color:rgba(52,211,153,.35); }
.btn-warning { background:var(--yellow-bg); color:var(--yellow); border:1px solid rgba(244,201,80,.2); }
.btn-warning:hover { background:rgba(244,201,80,.18); }
.btn-group { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

/* ======================================================
   FORMS
   ====================================================== */
.form-group { margin-bottom:clamp(12px, 1.8vw, 16px); }
.form-label {
    display:block; font-size:var(--fs-xs); font-weight:700; color:var(--text2);
    margin-bottom:6px; letter-spacing:.5px; text-transform:uppercase;
}
.form-control {
    width:100%; padding:clamp(10px,1.5vw,12px) 13px;
    background:var(--surface2); border:1px solid var(--border);
    border-radius:var(--r-sm); color:var(--text);
    font-size:16px; /* 16px previene zoom automático en iOS */
    font-family:'DM Sans', sans-serif;
    transition:border-color .15s, box-shadow .15s;
    -webkit-appearance:none; appearance:none;
    min-height:44px;
}
.form-control::placeholder { color:var(--text3); }
.form-control:focus {
    outline:none; border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(79,126,248,.12); background:var(--surface);
}
textarea.form-control { resize:vertical; min-height:90px; font-size:15px; }
select.form-control {
    cursor:pointer;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b98b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 12px center; padding-right:36px;
}
.form-row { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap:12px; }
.form-hint { font-size:var(--fs-xs); color:var(--text3); margin-top:4px; }

/* ======================================================
   TABLA
   ====================================================== */
.table-wrap {
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    border-radius:var(--r);
    /* Indicador visual de scroll horizontal */
    background:
        linear-gradient(to right, var(--surface) 30%, transparent) left/30px 100% no-repeat,
        linear-gradient(to left,  var(--surface) 30%, transparent) right/30px 100% no-repeat;
    background-attachment:local, local;
}
table { width:100%; border-collapse:collapse; font-size:var(--fs-sm); min-width:480px; }
thead { background:var(--surface2); }
thead th {
    text-align:left; padding:11px 14px;
    font-size:var(--fs-xs); font-weight:700; letter-spacing:.6px;
    text-transform:uppercase; color:var(--text3);
    border-bottom:1px solid var(--border); white-space:nowrap;
    position:sticky; top:0; background:var(--surface2); z-index:1;
}
tbody td { padding:12px 14px; border-bottom:1px solid var(--border); color:var(--text2); vertical-align:middle; }
tbody tr:last-child td { border-bottom:none; }
tbody tr:hover td { background:rgba(79,126,248,.04); color:var(--text); }
td.td-actions { white-space:nowrap; }

/* ======================================================
   BADGES
   ====================================================== */
.badge {
    display:inline-flex; align-items:center; gap:5px; padding:3px 9px;
    border-radius:20px; font-size:var(--fs-xs); font-weight:600;
    letter-spacing:.3px; white-space:nowrap;
}
.badge::before { content:''; width:5px; height:5px; border-radius:50%; flex-shrink:0; }
.badge-vista     { background:rgba(139,152,184,.10); color:var(--text2); border:1px solid rgba(139,152,184,.15); }
.badge-vista::before     { background:var(--text3); }
.badge-dev       { background:var(--yellow-bg); color:var(--yellow); border:1px solid rgba(244,201,80,.18); }
.badge-dev::before       { background:var(--yellow); }
.badge-fin       { background:var(--cyan-bg);   color:var(--cyan);   border:1px solid rgba(56,189,248,.18); }
.badge-fin::before       { background:var(--cyan); }
.badge-aprobada  { background:var(--green-bg);  color:var(--green);  border:1px solid rgba(52,211,153,.18); }
.badge-aprobada::before  { background:var(--green); }
.badge-correccion{ background:var(--red-bg);    color:var(--red);    border:1px solid rgba(244,113,113,.18); }
.badge-correccion::before{ background:var(--red); }

/* ======================================================
   TAREA CARD
   ====================================================== */
.tarea-list { display:flex; flex-direction:column; gap:10px; }
.tarea-card {
    background:var(--surface2); border:1px solid var(--border);
    border-radius:var(--r); padding:clamp(12px, 2vw, 16px);
    transition:all .15s ease; position:relative;
}
.tarea-card:hover { border-color:var(--border2); background:var(--surface3); }
.tarea-card.aprobada { border-left:3px solid var(--green); }
.tarea-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px; flex-wrap:wrap; }
.tarea-desc { font-size:var(--fs-md); color:var(--text); font-weight:500; line-height:1.55; }
.tarea-meta { font-size:var(--fs-xs); color:var(--text3); margin-top:4px; font-family:'DM Mono', monospace; }
.tarea-actions { display:flex; gap:6px; flex-wrap:wrap; margin-top:12px; }
.tarea-img { margin-top:10px; }
.tarea-img img { width:100%; max-height:220px; object-fit:cover; border-radius:8px; border:1px solid var(--border); cursor:pointer; transition:border-color .15s; }
.tarea-img img:hover { border-color:var(--border2); }
.tarea-comentario {
    margin-top:10px; padding:10px 13px; background:var(--red-bg);
    border:1px solid rgba(244,113,113,.18); border-left:3px solid var(--red);
    border-radius:6px; font-size:var(--fs-sm); color:var(--red); line-height:1.5;
}
.tarea-comentario.aprobado {
    background:var(--green-bg); border-color:rgba(52,211,153,.18);
    border-left-color:var(--green); color:var(--green);
}
.estado-btns { display:flex; gap:6px; flex-wrap:wrap; }

/* ======================================================
   LOGIN
   ====================================================== */
.login-wrap {
    min-height:100vh; display:flex; align-items:center; justify-content:center;
    padding:clamp(16px, 4vw, 32px); background:var(--bg);
    background-image:
        radial-gradient(ellipse at 25% 35%, rgba(79,126,248,.09) 0%, transparent 55%),
        radial-gradient(ellipse at 75% 65%, rgba(56,189,248,.05) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 100%, rgba(52,211,153,.04) 0%, transparent 45%);
}
.login-box {
    width:100%; max-width:390px; background:var(--surface);
    border:1px solid var(--border); border-radius:var(--r-lg);
    padding:clamp(24px, 5vw, 38px) clamp(20px, 4vw, 34px);
    box-shadow:var(--shadow-lg); position:relative; overflow:hidden;
}
.login-box::before {
    content:''; position:absolute; top:0; left:0; right:0; height:2px;
    background:linear-gradient(90deg, var(--accent), var(--accent2), var(--cyan));
}
.login-logo { font-family:'Syne', sans-serif; font-weight:800; font-size:clamp(20px, 3vw, 24px); text-align:center; margin-bottom:6px; }
.login-logo span { color:var(--accent2); }
.login-sub { text-align:center; color:var(--text2); font-size:var(--fs-sm); margin-bottom:28px; line-height:1.6; }
.error-msg {
    background:var(--red-bg); border:1px solid rgba(244,113,113,.22);
    border-left:3px solid var(--red); color:var(--red);
    border-radius:6px; padding:9px 13px; font-size:var(--fs-sm); margin-bottom:14px; line-height:1.5;
}

/* ======================================================
   MODAL — centrado en desktop · bottom sheet en móvil
   ====================================================== */
.modal-overlay {
    display:none; position:fixed; inset:0; z-index:1000;
    background:rgba(0,0,0,.80); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
    align-items:center; justify-content:center; padding:24px;
}
.modal-overlay.open { display:flex; }
.modal-box {
    background:var(--surface); border:1px solid var(--border);
    border-top:2px solid var(--accent); border-radius:var(--r-lg);
    padding:28px; width:100%; max-width:560px;
    position:relative; max-height:90vh;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    box-shadow:var(--shadow-lg);
}
.modal-box img { max-width:100%; border-radius:8px; }
.modal-close {
    position:absolute; top:14px; right:14px;
    background:var(--surface2); border:1px solid var(--border);
    color:var(--text2); border-radius:6px; padding:6px 12px;
    cursor:pointer; font-size:16px; min-width:40px; min-height:40px;
    display:flex; align-items:center; justify-content:center; transition:.15s;
}
.modal-close:hover { color:var(--text); background:var(--surface3); border-color:var(--border2); }

/* ======================================================
   MISC
   ====================================================== */
.divider { border:none; border-top:1px solid var(--border); margin:clamp(14px, 2vw, 20px) 0; }
.dev-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:clamp(14px, 2vw, 20px); flex-wrap:wrap; gap:10px; }
.breadcrumb { font-size:var(--fs-sm); color:var(--text3); margin-bottom:6px; }
.breadcrumb a { color:var(--text2); }
.breadcrumb a:hover { color:var(--accent2); }
.breadcrumb span { color:var(--text3); margin:0 4px; }
.cliente-name {
    display:inline-block; padding:3px 10px; border-radius:20px;
    background:var(--accent-bg); color:var(--accent2);
    font-size:var(--fs-xs); font-weight:600; border:1px solid rgba(79,126,248,.18);
}
.empty-state { text-align:center; padding:clamp(28px, 5vw, 48px) 20px; color:var(--text3); font-size:var(--fs-base); line-height:1.7; }
.empty-state svg { width:48px; height:48px; opacity:.25; margin-bottom:14px; display:block; margin-inline:auto; }
.check { color:var(--green); }
.tag-num {
    font-family:'DM Mono', monospace; font-size:var(--fs-xs);
    color:var(--text3); background:var(--surface2);
    border:1px solid var(--border); padding:2px 7px; border-radius:4px;
}
.progress-wrap { margin-top:10px; }
.progress-bar { height:5px; background:var(--surface3); border-radius:5px; overflow:hidden; margin-top:6px; }
.progress-fill { height:100%; background:linear-gradient(90deg, var(--accent), var(--accent2)); border-radius:5px; transition:.3s ease; }
.progress-lbl { font-size:var(--fs-xs); color:var(--text3); display:flex; justify-content:space-between; }

/* Tooltip */
[data-tip] { position:relative; cursor:default; }
[data-tip]:hover::after {
    content:attr(data-tip); position:absolute; bottom:calc(100% + 6px); left:50%;
    transform:translateX(-50%); background:var(--surface3); border:1px solid var(--border2);
    color:var(--text); font-size:var(--fs-xs); white-space:nowrap;
    padding:4px 9px; border-radius:5px; pointer-events:none; z-index:999; box-shadow:var(--shadow-sm);
}

/* ======================================================
   RESPONSIVE ≤ 1280px — desktop grande
   ====================================================== */
@media (max-width:1280px) {
    :root { --main-pad:24px; }
}

/* ======================================================
   RESPONSIVE ≤ 1024px — tablet landscape · sidebar compacta
   ====================================================== */
@media (max-width:1024px) {
    :root { --sidebar-w:64px; --main-pad:20px; }

    /* Solo íconos */
    .nav-item span, .nav-section-label,
    .sidebar-user strong, .sidebar-user .badge-rol,
    .sidebar-logo-txt > span { display:none; }

    .sidebar { overflow:hidden; } /* keep hidden so sidebar-user stays contained */
    .sidebar-logo { padding:0 12px 20px; justify-content:center; }
    .nav-item { padding:12px; justify-content:center; border-left:none; min-height:48px; }
    .nav-item:hover  { border-left:none; background:var(--accent-bg); }
    .nav-item.active { border-left:none; background:var(--accent-bg); }
    .nav-item svg { width:18px; height:18px; }
    .sidebar-user { padding:12px 8px 16px; display:flex; flex-direction:column; align-items:center; }
    .btn-logout { padding:10px; }

    /* Tooltip al pasar cursor en modo ícono */
    .nav-item[data-label]:hover::after {
        content:attr(data-label);
        position:absolute; left:calc(100% + 12px); top:50%;
        transform:translateY(-50%);
        background:var(--surface3); border:1px solid var(--border2);
        color:var(--text); font-size:var(--fs-xs); white-space:nowrap;
        padding:5px 10px; border-radius:6px; pointer-events:none; z-index:999;
        box-shadow:var(--shadow-md);
    }
}

/* ======================================================
   RESPONSIVE ≤ 768px — tablet portrait · drawer
   ====================================================== */
@media (max-width:768px) {
    :root { --main-pad:16px; }

    /* Sidebar como drawer deslizante */
    .sidebar { width:260px; transform:translateX(-100%); padding-top:16px; }
    .sidebar.open { transform:translateX(0); }
    .sidebar-close { display:flex; }

    /* Restaurar nav completo dentro del drawer */
    .nav-item span, .nav-section-label,
    .sidebar-user strong, .sidebar-user .badge-rol,
    .sidebar-logo-txt > span { display:block; }
    .sidebar-logo { padding:0 20px 20px; justify-content:space-between; }
    .nav-item { padding:10px 20px; justify-content:flex-start; border-left:2px solid transparent; }
    .nav-item:hover  { border-left-color:rgba(79,126,248,.4); }
    .nav-item.active { border-left-color:var(--accent); }
    .sidebar-user { padding:16px 20px 20px; align-items:stretch; flex-direction:column; }

    /* Topbar */
    .topbar { display:flex; }
    .main { margin-left:0; margin-top:var(--topbar-h); }

    /* Modal → bottom sheet */
    .modal-overlay { align-items:flex-end; padding:0; }
    .modal-box { border-radius:18px 18px 0 0; padding:24px 20px; max-width:100%; width:100%; max-height:90vh; }

    .page-title { font-size:clamp(18px, 4vw, 22px); }
}

/* ======================================================
   RESPONSIVE ≤ 540px — móvil
   ====================================================== */
@media (max-width:540px) {
    :root { --main-pad:14px; }

    /* Login → bottom sheet en móvil */
    .login-wrap { align-items:flex-end; padding:0; }
    .login-box { border-radius:18px 18px 0 0; max-width:100%; }

    .page-title { font-size:20px; }
    .form-row { grid-template-columns:1fr; }
    .form-control { padding:13px; }

    /* Grids */
    .grid-2 { grid-template-columns:1fr; }
    .grid-3 { grid-template-columns:1fr 1fr; }

    /* Tareas */
    .tarea-header { flex-direction:column; gap:8px; }
    .tarea-actions .btn { flex:1; min-width:0; }
    .estado-btns { width:100%; }
    .estado-btns .btn { flex:1; }

    /* dev-header */
    .dev-header { flex-direction:column; align-items:stretch; }
    .dev-header .btn { width:100%; justify-content:center; }

    /* Tabla */
    table { font-size:11.5px; }
    thead th, tbody td { padding:8px 10px; }
    td.td-actions { display:flex; flex-wrap:wrap; gap:4px; padding:8px 10px; }

    /* Stats */
    .stat-num { font-size:22px; }
    .stat-card { gap:10px; }
    .card { padding:14px; }
}

/* ======================================================
   RESPONSIVE ≤ 380px — móvil pequeño
   ====================================================== */
@media (max-width:380px) {
    :root { --main-pad:12px; }
    .grid-3 { grid-template-columns:1fr; }
    .stat-num { font-size:20px; }
    .btn { min-height:40px; padding:8px 12px; }
    .form-control { font-size:16px; }
    .topbar-logo { font-size:16px; }
    .page-title { font-size:18px; }
    .badge { font-size:10px; padding:2px 7px; }
}

/* ======================================================
   LANDSCAPE en móvil — altura reducida
   ====================================================== */
@media (max-height:480px) and (orientation:landscape) {
    :root { --topbar-h:48px; }
    .sidebar { padding-top:12px; }
    .sidebar-nav { padding:4px 0; }
    .nav-item { min-height:36px; padding:7px 20px; }
    .login-wrap { align-items:center; }
    .login-box { border-radius:var(--r-lg); max-height:90vh; overflow-y:auto; }
}

/* ======================================================
   PRINT
   ====================================================== */
@media print {
    .sidebar, .topbar, .sidebar-overlay, .btn-logout, .hamburger, .modal-overlay { display:none !important; }
    .main { margin-left:0 !important; padding:0 !important; }
    body { background:#fff; color:#111; }
    .card, .stat-card, .tarea-card { border:1px solid #ccc; box-shadow:none; }
    a { color:#111; }
}

/* ======================================================
   SAFE AREA — notch / home bar
   ====================================================== */
@supports (padding: max(0px)) {
    .topbar {
        padding-left:max(16px, env(safe-area-inset-left));
        padding-right:max(16px, env(safe-area-inset-right));
        height:calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
        padding-top:env(safe-area-inset-top, 0px);
    }
    .main { padding-bottom:max(var(--main-pad), env(safe-area-inset-bottom)); }
    .modal-box { padding-bottom:max(24px, env(safe-area-inset-bottom)); }
    .sidebar { padding-bottom:env(safe-area-inset-bottom, 0px); }

    @media (max-width:768px) {
        .main { margin-top:calc(var(--topbar-h) + env(safe-area-inset-top, 0px)); }
    }
}

/* ======================================================
   PREFERS REDUCED MOTION
   ====================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }
}