/* ═══════════════════════════════════════════════════════════════
   LINKOFT TIMESHEET — Tema Linkoft (sobre Bootstrap 5.3)
   Paleta oficial: Carbon #303030 · Bubble #22D5CA · Cherry #EA0054 · Lime #E3FF65

   ARQUITECTURA:
   ┌─────────────────────────────────────────────┐
   │  Bootstrap 5.3  (base: grid, utilities,     │
   │  resets, variables)  — cargado antes        │
   ├─────────────────────────────────────────────┤
   │  styles.css (este archivo)                  │
   │  · Sobreescribe variables de Bootstrap      │
   │  · Define componentes Linkoft               │
   │  · Se carga DESPUÉS → cascada CSS gana      │
   └─────────────────────────────────────────────┘

   COMPATIBILIDAD: PHP + MySQL. Sin Node.js server.
   Los archivos estáticos (index.html, styles.css, app.js)
   son servidos directamente por Apache/Nginx/PHP built-in.
═══════════════════════════════════════════════════════════════ */

/* ── Neutralizar conflictos de Bootstrap 5 con nuestras clases ─
   Bootstrap define estas clases con propiedades que colisionan.
   Como styles.css carga DESPUÉS, nuestros valores ganan en cascada,
   pero donde Bootstrap usa !important o propiedades que nosotros no
   declaramos (como display:none en .modal), debemos ser explícitos.
────────────────────────────────────────────────────────────── */

/* .modal — el fix principal está abajo en la definición completa.
   Este bloque cubre el resto de conflictos menores.              */

/* Bootstrap añade position:relative y padding a .navbar          */
/* El nuestro ya define todo lo necesario, pero aseguramos        */
/* que Bootstrap no fuerce un flex-wrap que rompa el header.      */
.navbar { flex-wrap: nowrap !important; }

/* Bootstrap pone padding:0 en listas dentro de navbar            */
.navbar ul { padding: 0; margin: 0; }

/* Bootstrap define .badge con display:inline-flex (igual al nuestro)
   y background-color vía CSS var. El nuestro carga después → gana. */

/* ── Neutralizar conflictos específicos de Bootstrap 5 ─────────
   Bootstrap define .btn, .badge, .navbar, .modal con estilos
   propios. Como styles.css carga DESPUÉS, nuestras reglas ganan
   en la cascada. Solo necesitamos forzar herencia de fuente y
   resetear los box-model overrides de Bootstrap.
────────────────────────────────────────────────────────────── */

/* Bootstrap resetea box-sizing globalmente — lo mantenemos igual */
*, *::before, *::after { box-sizing: border-box !important; }

/* Bootstrap fuerza font-family en body — aseguramos que Inter gane */
body { font-family: var(--font-sans) !important; }

/* Bootstrap colorea los links — revertimos a nuestro sistema */
a { color: var(--bubble-dark); }
a:hover { color: var(--bubble-dark); text-decoration: underline; }

/* Bootstrap añade margin-bottom a <p> — lo quitamos para no afectar layouts */
p { margin-bottom: 0; }

/* Bootstrap colorea h1-h6 — los dejamos heredar */
h1,h2,h3,h4,h5,h6 { color: inherit; }

/* Bootstrap tiene su propio .btn — el nuestro (cargado después) lo sobreescribe.
   Añadimos !important solo donde Bootstrap usa !important interno */
.btn { font-family: var(--font-sans) !important; }

/* Bootstrap tiene su propio .badge con display:inline-flex.
   El nuestro también usa inline-flex, no hay problema. */

/* Bootstrap añade border-radius a inputs — lo mantenemos alineado */
input, select, textarea { font-family: var(--font-sans) !important; }

/* Bootstrap tiene utilidades .text-* que nos pueden servir en templates PHP */
/* Las dejamos convivir — no colisionan con nuestras clases BEM */

:root {
  /* ── Paleta de marca ── */
  --carbon:           #303030;
  --bubble:           #22D5CA;
  --bubble-dark:      #1AB8B0;
  --bubble-light:     #D0F7F5;
  --bubble-ghost:     rgba(34, 213, 202, 0.12);
  --cherry:           #EA0054;
  --cherry-dark:      #C4003F;
  --cherry-light:     #FFE8F0;
  --cherry-ghost:     rgba(234, 0, 84, 0.10);
  --lime:             #E3FF65;
  --lime-dark:        #C4E040;
  --lime-light:       #F5FFD1;
  --lime-ghost:       rgba(227, 255, 101, 0.25);

  /* ── Aliases semánticos ── */
  --color-primary:       var(--bubble);
  --color-primary-dark:  var(--bubble-dark);
  --color-primary-light: var(--bubble-light);
  --color-primary-ghost: var(--bubble-ghost);
  --color-danger:        var(--cherry);
  --color-danger-dark:   var(--cherry-dark);
  --color-danger-bg:     var(--cherry-light);
  --color-success:       #1A9E8A;
  --color-success-bg:    var(--lime-light);
  --color-warning:       #F5A623;
  --color-warning-bg:    #FEF6E7;
  --color-info:          #4A9EDB;
  --color-info-bg:       #EAF4FC;

  /* ── Neutros ── */
  --color-bg:            #FAF9F7;
  --color-surface:       #FFFFFF;
  --color-border:        #E8E6E1;
  --color-border-focus:  var(--bubble);
  --color-text-primary:  var(--carbon);
  --color-text-secondary:#6B6B6B;
  --color-text-muted:    #9E9C97;
  --color-text-on-dark:  #FAF9F7;
  --color-text-on-brand: var(--carbon);

  /* ── Sombras ── */
  --shadow-xs: 0 1px 2px rgba(48,48,48,0.06);
  --shadow-sm: 0 2px 8px rgba(48,48,48,0.08);
  --shadow-md: 0 4px 20px rgba(48,48,48,0.10);
  --shadow-lg: 0 8px 40px rgba(48,48,48,0.12);

  /* ── Espaciado ── */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px;

  /* ── Radios ── */
  --radius-sm:6px; --radius-md:10px; --radius-lg:16px;
  --radius-xl:24px; --radius-full:9999px;

  /* ── Tipografía ── */
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --text-xs:12px; --text-sm:14px; --text-base:15px; --text-md:16px;
  --text-lg:19px; --text-xl:23px; --text-2xl:28px;

  /* ── Transiciones ── */
  --t-fast:120ms ease; --t-base:200ms ease; --t-slow:350ms ease;

  --navbar-h: 64px;
}

/* ── RESET ───────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-font-smoothing:antialiased}
body{font-family:var(--font-sans);font-size:var(--text-base);color:var(--color-text-primary);background:var(--color-bg);line-height:1.5;min-height:100vh}

/* App loader */
.app-loader{position:fixed;inset:0;background:var(--color-bg);display:flex;align-items:center;justify-content:center;z-index:9999}
.app-loader[hidden]{display:none}
.app-loader__content{text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--space-5)}
.app-loader__spinner{width:32px;height:32px;border:3px solid var(--color-border);border-top-color:var(--bubble);border-radius:50%;animation:spin .8s linear infinite}
.app-loader__text{font-size:var(--text-sm);color:var(--color-text-muted);font-weight:500}
@keyframes spin{to{transform:rotate(360deg)}}
a{color:var(--bubble-dark);text-decoration:none}
a:hover{text-decoration:underline}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,select,textarea{font-family:inherit}
[hidden]{display:none!important}
.screen{min-height:100vh}

/* ═══════════════════════════════════════════════════════════════
   BOTONES
═══════════════════════════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  padding:10px var(--space-5);
  font-size:var(--text-sm);font-weight:600;
  border-radius:var(--radius-sm);
  transition:background var(--t-fast),color var(--t-fast),box-shadow var(--t-fast),transform var(--t-fast);
  white-space:nowrap;position:relative;overflow:hidden;
}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.55;cursor:not-allowed;pointer-events:none}

.btn--primary{background:var(--bubble);color:var(--carbon)}
.btn--primary:hover{background:var(--bubble-dark);color:#fff;box-shadow:0 4px 14px rgba(34,213,202,.4)}

.btn--cherry{background:var(--cherry);color:#fff}
.btn--cherry:hover{background:var(--cherry-dark);box-shadow:0 4px 14px rgba(234,0,84,.35)}

.btn--lime{background:var(--lime);color:var(--carbon)}
.btn--lime:hover{background:var(--lime-dark)}

.btn--ghost{background:transparent;color:var(--color-text-secondary);border:1.5px solid var(--color-border)}
.btn--ghost:hover{background:var(--color-bg);color:var(--color-text-primary);border-color:#ccc}

.btn--danger{background:var(--cherry);color:#fff}
.btn--danger:hover{background:var(--cherry-dark)}

.btn--full{width:100%}
.btn--sm{padding:6px 12px;font-size:var(--text-xs)}
.btn--xs{padding:4px 10px;font-size:11px}

/* ── Sección de solo lectura: ocultar botones de acción ──── */
.readonly-section .action-btn--edit,
.readonly-section .action-btn--delete,
.readonly-section .btn-edit-client,
.readonly-section .btn-delete-client,
.readonly-section .btn-edit-user,
.readonly-section .btn-delete-user,
.readonly-section .btn-edit-proj,
.readonly-section .btn-delete-proj,
.readonly-section .btn-edit-cc,
.readonly-section .btn-del-cc,
.readonly-section .btn-edit-contact,
.readonly-section .btn-del-contact-global,
.readonly-section .btn-del-contact,
.readonly-section .btn-edit-proj-from-client{display:none!important}

.btn__spinner{display:none;width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
.btn--loading .btn__label{opacity:0}
.btn--loading .btn__spinner{display:block;position:absolute}
@keyframes spin{to{transform:rotate(360deg)}}

/* ═══════════════════════════════════════════════════════════════
   CAMPOS
═══════════════════════════════════════════════════════════════ */
.field{display:flex;flex-direction:column;gap:var(--space-1)}
.field__label{font-size:var(--text-sm);font-weight:600;color:var(--color-text-primary);display:flex;align-items:center;justify-content:space-between}
.field__required{color:var(--bubble-dark);margin-left:2px}
.field__charcount{font-size:var(--text-xs);font-weight:400;color:var(--color-text-muted)}
.field__input,.field__select,.field__textarea{
  width:100%;padding:10px 14px;font-size:var(--text-sm);
  color:var(--color-text-primary);background:var(--color-surface);
  border:1.5px solid var(--color-border);border-radius:var(--radius-sm);
  transition:border-color var(--t-fast),box-shadow var(--t-fast);outline:none;
}
.field__input::placeholder,.field__textarea::placeholder{color:var(--color-text-muted)}
.field__input:focus,.field__select:focus,.field__textarea:focus{border-color:var(--bubble);box-shadow:0 0 0 3px var(--bubble-ghost)}
.field__input.is-invalid,.field__select.is-invalid,.field__textarea.is-invalid{border-color:var(--cherry);box-shadow:0 0 0 3px var(--cherry-ghost)}
.field__textarea{resize:vertical;min-height:90px}
.field__select-wrapper{position:relative;display:inline-block;width:100%}
.field__select-wrapper::after{content:'';position:absolute;right:12px;top:50%;transform:translateY(-50%);width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid var(--color-text-muted);pointer-events:none}
.field__select-wrapper:has(.field__chevron)::after{display:none}
.field__select-wrapper:has(.tkt-estado-inline)::after{border-top-color:currentColor;right:8px}
.field__select{appearance:none;padding-right:40px;width:100%}
.field__chevron{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--color-text-muted);pointer-events:none}
.field__input-wrapper{position:relative}
.field__input-wrapper .field__input{padding-right:42px}
.field__toggle-pw{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--color-text-muted);transition:color var(--t-fast);padding:2px}
.field__toggle-pw:hover{color:var(--bubble-dark)}
.field__error{font-size:var(--text-xs);color:var(--cherry);min-height:16px;display:block}

/* Stepper horas */
.field__input--hours{text-align:center;font-size:var(--text-md);font-weight:600;padding:10px 8px;width:90px}
.hours-input-group{display:flex;align-items:center;gap:var(--space-2)}
.hours-btn{width:36px;height:36px;border-radius:var(--radius-sm);background:var(--color-bg);border:1.5px solid var(--color-border);font-size:18px;font-weight:500;color:var(--color-text-secondary);display:flex;align-items:center;justify-content:center;transition:background var(--t-fast),border-color var(--t-fast)}
.hours-btn:hover{background:var(--bubble-ghost);border-color:var(--bubble);color:var(--bubble-dark)}
.hours-unit{font-size:var(--text-sm);color:var(--color-text-muted);font-weight:500}
.hours-chips{display:flex;gap:var(--space-1);flex-wrap:wrap;margin-top:var(--space-2)}
.chip{padding:4px 10px;font-size:var(--text-xs);font-weight:600;border:1.5px solid var(--color-border);border-radius:var(--radius-full);color:var(--color-text-secondary);transition:all var(--t-fast)}
.chip:hover,.chip.is-active{background:var(--bubble-ghost);border-color:var(--bubble);color:var(--bubble-dark)}

/* Toggle facturación */
.billing-toggle{display:flex;gap:0;border:1.5px solid var(--color-border);border-radius:var(--radius-sm);overflow:hidden;width:fit-content}
.billing-toggle__btn{padding:7px 14px;font-size:var(--text-xs);font-weight:600;color:var(--color-text-secondary);background:var(--color-surface);transition:background var(--t-fast),color var(--t-fast);border-right:1.5px solid var(--color-border)}
.billing-toggle__btn:last-child{border-right:none}
.billing-toggle__btn--active-bill{background:var(--bubble-ghost);color:var(--bubble-dark)}
.billing-toggle__btn--active-nobill{background:var(--cherry-ghost);color:var(--cherry)}

/* ═══════════════════════════════════════════════════════════════
   LOGIN
═══════════════════════════════════════════════════════════════ */
.screen--login{
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:var(--space-6);padding:var(--space-6);
  background:var(--color-bg);position:relative;overflow:hidden;
}
.login__bg-arc{
  position:absolute;top:-180px;right:-180px;width:560px;height:560px;
  border-radius:50%;background:radial-gradient(circle at center,var(--bubble-light) 0%,transparent 70%);
  pointer-events:none;
}
.login__bg-arc::after{
  content:'';position:absolute;bottom:-250px;left:-80px;width:400px;height:400px;
  border-radius:50%;background:radial-gradient(circle at center,rgba(34,213,202,.08) 0%,transparent 70%);
}
/* Decoración Cherry en login */
.login__bg-arc::before{
  content:'';position:absolute;top:300px;left:-200px;width:300px;height:300px;
  border-radius:50%;background:radial-gradient(circle at center,rgba(234,0,84,.06) 0%,transparent 70%);
}
.login__card{
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-xl);padding:var(--space-10) var(--space-8);
  width:100%;max-width:420px;box-shadow:var(--shadow-lg);
  position:relative;z-index:1;display:flex;flex-direction:column;gap:var(--space-5);
}
.login__brand{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-2)}
.login__title{font-size:var(--text-2xl);font-weight:700;color:var(--color-text-primary);letter-spacing:-.5px}
.login__subtitle{font-size:var(--text-sm);color:var(--color-text-secondary);line-height:1.6}
.login__form{display:flex;flex-direction:column;gap:var(--space-4)}
.login__divider{display:flex;align-items:center;gap:var(--space-3);color:var(--color-text-muted);font-size:var(--text-xs)}
.login__divider::before,.login__divider::after{content:'';flex:1;height:1px;background:var(--color-border)}
.login__forgot{font-size:var(--text-sm);text-align:center;color:var(--color-text-secondary)}
.login__hint{font-size:var(--text-xs);color:var(--color-text-muted);text-align:center;background:var(--color-bg);border-radius:var(--radius-sm);padding:var(--space-3) var(--space-4);border:1px dashed var(--color-border)}
.login__hint strong{color:var(--bubble-dark)}
.login__footer{font-size:var(--text-xs);color:var(--color-text-muted);text-align:center;position:relative;z-index:1}

/* ═══════════════════════════════════════════════════════════════
   NAVBAR (colaborador)
═══════════════════════════════════════════════════════════════ */
.navbar{
  height:var(--navbar-h);background:var(--color-surface);border-bottom:1px solid var(--color-border);
  padding:0 var(--space-8);display:flex;align-items:center;gap:var(--space-6);
  position:sticky;top:0;z-index:100;box-shadow:var(--shadow-xs);
}
.navbar__brand{display:flex;align-items:center;gap:var(--space-4)}
.navbar__module-badge{
  font-size:var(--text-xs);font-weight:600;color:var(--bubble-dark);
  background:var(--bubble-ghost);border:1px solid rgba(34,213,202,.3);
  border-radius:var(--radius-full);padding:2px 10px;margin-left:var(--space-1);
}
.navbar__nav{flex:1;display:flex;align-items:center;padding-left:var(--space-4)}
.navbar__week-label{font-size:var(--text-sm);color:var(--color-text-muted);font-weight:500}
.navbar__user{display:flex;align-items:center;gap:var(--space-3);margin-left:auto}
.navbar__user-info{display:flex;flex-direction:column;line-height:1.3}
.navbar__user-name{font-size:var(--text-sm);font-weight:600}
.navbar__user-role{font-size:var(--text-xs);color:var(--color-text-muted)}

.avatar{
  width:36px;height:36px;border-radius:50%;
  background:var(--bubble);color:var(--carbon);
  font-size:var(--text-xs);font-weight:700;
  display:flex;align-items:center;justify-content:center;letter-spacing:.5px;flex-shrink:0;
}
.avatar--sm{width:28px;height:28px;font-size:10px}
.avatar--cherry{background:var(--cherry);color:#fff}
.avatar--lime{background:var(--lime);color:var(--carbon)}

/* ═══════════════════════════════════════════════════════════════
   DASHBOARD COLABORADOR
═══════════════════════════════════════════════════════════════ */
.screen--dashboard{display:flex;flex-direction:column;min-height:100vh;background:var(--color-bg)}
.dashboard{flex:1;padding:var(--space-6) var(--space-8);max-width:1400px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:var(--space-6)}
.dashboard__footer{text-align:center;font-size:var(--text-xs);color:var(--color-text-muted);padding:var(--space-5);border-top:1px solid var(--color-border)}

/* KPI strip */
.kpi-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--space-4)}
.kpi-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5) var(--space-6);display:flex;flex-direction:column;gap:var(--space-1);box-shadow:var(--shadow-xs);transition:box-shadow var(--t-base)}
.kpi-card:hover{box-shadow:var(--shadow-sm)}
.kpi-card--accent{border-color:rgba(34,213,202,.3);background:linear-gradient(135deg,var(--color-surface) 60%,var(--bubble-light) 100%)}
.kpi-card__value{font-size:var(--text-2xl);font-weight:700;color:var(--color-text-primary);letter-spacing:-1px;line-height:1}
.kpi-card--accent .kpi-card__value{color:var(--bubble-dark)}
.kpi-card__label{font-size:var(--text-xs);font-weight:500;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.5px}
.kpi-progress{margin-top:var(--space-3);height:4px;background:var(--color-border);border-radius:var(--radius-full);overflow:hidden}
.kpi-progress__bar{height:100%;background:var(--bubble);border-radius:var(--radius-full);transition:width .6s ease}

/* Columnas */
.dashboard__columns{display:grid;grid-template-columns:380px 1fr;gap:var(--space-6);align-items:start}

/* Panel */
.panel{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-xs)}
.panel__header{padding:var(--space-5) var(--space-6);border-bottom:1px solid var(--color-border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-3)}
.panel__title{font-size:var(--text-md);font-weight:600;color:var(--color-text-primary);display:flex;align-items:center;gap:var(--space-2);white-space:nowrap}
.panel__title svg{color:var(--bubble-dark)}
.panel__header-actions{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap}

/* Formulario timesheet */
/* Navegador de semanas */
.week-nav{display:flex;align-items:center;justify-content:center;gap:var(--space-3);margin-bottom:var(--space-4)}
.view-mode-toggle{display:flex;border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;margin-right:var(--space-2)}
.view-mode-btn{padding:6px 14px;font-size:var(--text-xs);font-weight:600;border:none;background:var(--color-surface);color:var(--color-text-secondary);cursor:pointer;transition:all var(--t-fast)}
.view-mode-btn:hover{background:var(--color-bg);color:var(--color-text-primary)}
.view-mode-btn--active{background:var(--bubble);color:var(--carbon);pointer-events:none}
.week-nav__btn{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--color-text-secondary);transition:all var(--t-fast)}
.week-nav__btn:hover{background:var(--color-bg);color:var(--color-text-primary);border-color:var(--bubble)}
.week-nav__label{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-2) var(--space-5);font-size:var(--text-sm);font-weight:600;color:var(--color-text-primary);cursor:pointer;transition:all var(--t-fast);min-width:200px;text-align:center}
.week-nav__label:hover{border-color:var(--bubble);color:var(--bubble-dark)}

/* Tabs del colaborador */
.collab-tabs{display:flex;gap:var(--space-1);margin-bottom:var(--space-4);background:var(--color-bg);border-radius:var(--radius-md);padding:3px;border:1px solid var(--color-border)}
.collab-tabs__btn{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border:none;background:none;border-radius:var(--radius-sm);font-size:var(--text-sm);font-weight:500;color:var(--color-text-secondary);cursor:pointer;transition:all var(--t-fast);white-space:nowrap}
.collab-tabs__btn:hover{color:var(--color-text-primary);background:var(--color-surface)}
.collab-tabs__btn--active{background:var(--color-surface);color:var(--bubble-dark);font-weight:600;box-shadow:var(--shadow-xs)}
.collab-tabs__btn--active svg{color:var(--bubble-dark)}

/* Grilla semanal */
.ts-grid{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
.ts-grid th{padding:var(--space-2) var(--space-2);text-align:left;font-size:var(--text-xs);font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.3px;background:var(--color-bg);border-bottom:1px solid var(--color-border);white-space:nowrap}
.ts-grid td{padding:var(--space-1) var(--space-1);border-bottom:1px solid var(--color-border);vertical-align:middle}
.ts-grid tbody tr:hover td{background:var(--bubble-light)}
.ts-grid .grid-hours-input{width:100%;text-align:center;padding:6px 4px;border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:var(--text-sm);background:var(--color-surface);transition:border-color var(--t-fast)}
.ts-grid .grid-hours-input:focus{outline:none;border-color:var(--bubble);box-shadow:0 0 0 2px rgba(34,213,202,.15)}
.ts-grid .grid-hours-input::-webkit-inner-spin-button{-webkit-appearance:none}
.ts-grid .grid-desc-input{width:100%;padding:6px 8px;border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:var(--text-xs);background:var(--color-surface);resize:none}
.ts-grid .grid-desc-input:focus{outline:none;border-color:var(--bubble)}
.ts-grid .grid-row-total{font-weight:700;text-align:center;color:var(--color-text-primary)}
.ts-grid .grid-del-btn{background:none;border:none;cursor:pointer;color:var(--color-text-muted);font-size:16px;padding:4px;border-radius:var(--radius-sm)}
.ts-grid .grid-del-btn:hover{color:var(--cherry);background:var(--color-bg)}
.ts-grid tfoot td{font-weight:700;background:var(--color-bg);border-top:2px solid var(--color-border);border-bottom:none;padding:var(--space-2) var(--space-2)}

/* Carga masiva */
.bulk-step{display:flex;gap:var(--space-4);align-items:flex-start}
.bulk-step__number{width:32px;height:32px;flex-shrink:0;border-radius:var(--radius-full);background:var(--bubble);color:var(--carbon);font-weight:700;font-size:var(--text-sm);display:flex;align-items:center;justify-content:center}
.bulk-step__content{flex:1}
.bulk-step__title{font-size:var(--text-md);font-weight:600;color:var(--color-text-primary);margin-bottom:var(--space-1)}
.bulk-step__desc{font-size:var(--text-sm);color:var(--color-text-secondary);line-height:1.5}
.bulk-upload-area{border:2px dashed var(--color-border);border-radius:var(--radius-md);padding:var(--space-6);text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--space-2);margin-top:var(--space-2);transition:border-color var(--t-fast),background var(--t-fast);cursor:pointer}
.bulk-upload-area:hover,.bulk-upload-area--dragover{border-color:var(--bubble);background:var(--bubble-light)}
.bulk-upload-area p{font-size:var(--text-sm);color:var(--color-text-secondary);margin:0}

.ts-form{padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-5)}
.ts-form__actions{display:flex;gap:var(--space-3);justify-content:flex-end;padding-top:var(--space-2);border-top:1px solid var(--color-border)}

/* Tabla historial */
.table-wrapper{overflow-x:auto}
.ts-table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
.ts-table th{padding:var(--space-3) var(--space-4);text-align:left;font-size:var(--text-xs);font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.5px;background:var(--color-bg);border-bottom:1px solid var(--color-border);white-space:nowrap}
.ts-table td{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border);color:var(--color-text-primary);vertical-align:top}
.ts-table tbody tr:last-child td{border-bottom:none}
.ts-table tbody tr:hover td{background:var(--color-bg)}
.ts-table__total-row td{font-weight:700;background:var(--color-bg);border-top:2px solid var(--color-border);border-bottom:none}
.ts-selection-bar{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-4);background:var(--bubble-ghost);border:1px solid rgba(34,213,202,.25);border-radius:var(--radius-sm);margin-bottom:var(--space-3);font-size:var(--text-sm);font-weight:600;color:var(--bubble-dark)}
.ts-table tr.ts-row--selected{background:rgba(34,213,202,.06)}
.ts-table .ts-row-check{accent-color:var(--bubble);width:15px;height:15px;cursor:pointer}
.td-date{white-space:nowrap;color:var(--color-text-secondary)}
.td-project{font-weight:500}
.td-project small{display:block;font-size:var(--text-xs);color:var(--color-text-muted);font-weight:400}
.td-cc{color:var(--color-text-secondary)}
.td-hours{font-weight:700;font-variant-numeric:tabular-nums;color:var(--bubble-dark);white-space:nowrap}
.td-desc{max-width:200px}
.td-desc span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--color-text-secondary)}
.td-actions{white-space:nowrap}
.text-right{text-align:right}
.text-center{text-align:center}
.action-btn{width:30px;height:30px;border-radius:var(--radius-sm);display:inline-flex;align-items:center;justify-content:center;transition:background var(--t-fast),color var(--t-fast);color:var(--color-text-muted)}
.action-btn:hover{background:var(--color-bg);color:var(--color-text-primary)}
.action-btn--delete:hover{background:var(--cherry-light);color:var(--cherry)}

/* Empty state */
.empty-state{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);padding:var(--space-12) var(--space-6);color:var(--color-text-muted);text-align:center;font-size:var(--text-sm);line-height:1.7}

/* ═══════════════════════════════════════════════════════════════
   BADGES / STATUS
═══════════════════════════════════════════════════════════════ */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:600;white-space:nowrap}
.badge::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}

.badge--borrador   {background:var(--color-bg);           color:var(--color-text-muted);  border:1px solid var(--color-border)}
.badge--enviado    {background:var(--bubble-ghost);        color:var(--bubble-dark)}
.badge--aprobado   {background:var(--lime-ghost);          color:#1A7A6A}
.badge--rechazado  {background:var(--cherry-light);        color:var(--cherry)}
.badge--facturable {background:var(--bubble-ghost);        color:var(--bubble-dark)}
.badge--no-facturable{background:var(--cherry-ghost);      color:var(--cherry)}
.badge--pagada     {background:#E8FFF0;                    color:#15803D}

/* ═══════════════════════════════════════════════════════════════
   PORTAL ADMINISTRADOR
═══════════════════════════════════════════════════════════════ */
.screen--admin{display:flex;min-height:100vh;background:var(--color-bg)}
.screen--admin[hidden]{display:none}

/* Sidebar */
.admin-sidebar{width:248px;flex-shrink:0;background:var(--color-surface);border-right:1px solid var(--color-border);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;box-shadow:var(--shadow-sm);z-index:50;transition:width .25s cubic-bezier(.4,0,.2,1)}
.admin-sidebar__brand{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-5);border-bottom:1px solid var(--color-border);justify-content:space-between}
.admin-sidebar__brand svg[aria-label]{transition:opacity .2s;flex-shrink:0}
.sidebar-toggle{background:none;border:1px solid var(--color-border);border-radius:var(--radius-sm);width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--color-text-muted);flex-shrink:0;transition:background var(--t-fast),color var(--t-fast)}
.sidebar-toggle:hover{background:var(--color-bg);color:var(--color-text-primary)}
.sidebar-toggle svg{transition:transform .25s}
.admin-sidebar__sub{display:block;font-size:var(--text-xs);color:var(--color-text-muted);font-weight:500;margin-top:1px}
.admin-nav{flex:1;padding:var(--space-4) var(--space-3);display:flex;flex-direction:column;gap:2px}
.admin-nav__section-label{font-size:var(--text-xs);font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.6px;padding:var(--space-4) var(--space-3) var(--space-2);white-space:nowrap;overflow:hidden;transition:opacity .2s}
.admin-nav__item{display:flex;align-items:center;gap:var(--space-3);padding:9px var(--space-3);border-radius:var(--radius-sm);font-size:var(--text-sm);font-weight:500;color:var(--color-text-secondary);width:100%;text-align:left;transition:background var(--t-fast),color var(--t-fast);position:relative;white-space:nowrap;overflow:hidden}
.admin-nav__item:hover{background:var(--color-bg);color:var(--color-text-primary)}
.admin-nav__item--active{background:var(--bubble-ghost);color:var(--bubble-dark);font-weight:600}
.admin-nav__item--active svg{color:var(--bubble-dark)}
.admin-nav__item svg{flex-shrink:0}
.admin-nav__badge{margin-left:auto;background:var(--cherry);color:#fff;font-size:10px;font-weight:700;min-width:18px;height:18px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;padding:0 5px;flex-shrink:0}
.admin-sidebar__footer{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4);border-top:1px solid var(--color-border);background:var(--color-bg);overflow:hidden}
.admin-sidebar__user-info{flex:1;display:flex;flex-direction:column;font-size:var(--text-xs);line-height:1.4;overflow:hidden;transition:opacity .2s}
.admin-sidebar__user-info span:first-child{font-weight:600;color:var(--color-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-sidebar__user-info span:last-child{color:var(--color-text-muted)}

/* Sidebar colapsado */
.admin-sidebar--collapsed{width:64px;overflow:visible}
.admin-sidebar--collapsed .admin-sidebar__brand svg[aria-label]{opacity:0;width:0;overflow:hidden}
.admin-sidebar--collapsed .admin-sidebar__brand{justify-content:center;padding:var(--space-5) var(--space-3)}
.admin-sidebar--collapsed .admin-nav{padding:var(--space-4) var(--space-2)}
.admin-sidebar--collapsed .admin-nav__section-label{opacity:0;height:0;padding:0;margin:0;pointer-events:none}
.admin-sidebar--collapsed .admin-nav__item{justify-content:center;padding:9px 0;font-size:0;line-height:0;gap:0;position:relative;overflow:visible}
.admin-sidebar--collapsed .admin-nav__item svg{width:17px;height:17px;min-width:17px;min-height:17px}
.admin-sidebar--collapsed .admin-nav__badge{position:absolute;top:2px;right:4px;min-width:14px;height:14px;font-size:8px;line-height:14px;padding:0 3px}
.admin-sidebar--collapsed .admin-sidebar__user-info{opacity:0;width:0;pointer-events:none}
.admin-sidebar--collapsed .admin-sidebar__footer{justify-content:center;gap:0;padding:var(--space-3)}
.admin-sidebar--collapsed .admin-sidebar__footer .btn{display:none}
.admin-sidebar--collapsed .sidebar-toggle svg{transform:rotate(180deg)}
.admin-sidebar--collapsed .admin-nav__item::after{content:attr(data-tooltip);position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);background:var(--carbon);color:#fff;font-size:12px;font-weight:500;padding:4px 10px;border-radius:var(--radius-sm);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s;z-index:999;box-shadow:var(--shadow-md)}
.admin-sidebar--collapsed .admin-nav__item:hover::after{opacity:1}

/* Topbar admin */
.admin-main{flex:1;display:flex;flex-direction:column;min-width:0}
.admin-topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-5) var(--space-8);background:var(--color-surface);border-bottom:1px solid var(--color-border);position:sticky;top:0;z-index:40;box-shadow:var(--shadow-xs)}
.admin-topbar__title{font-size:var(--text-lg);font-weight:700;color:var(--color-text-primary);letter-spacing:-.3px}
.admin-topbar__subtitle{font-size:var(--text-sm);color:var(--color-text-muted);margin-top:2px}
.admin-topbar__actions{display:flex;gap:var(--space-3);align-items:center}
.admin-content{padding:var(--space-6) var(--space-8);flex:1}

/* KPI admin */
.admin-kpi-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--space-4);margin-bottom:var(--space-6)}
.admin-kpi-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-xs);transition:box-shadow var(--t-base)}
.admin-kpi-card:hover{box-shadow:var(--shadow-sm)}
.admin-kpi-card__icon{width:36px;height:36px;border-radius:var(--radius-sm);background:var(--bubble-ghost);display:flex;align-items:center;justify-content:center;color:var(--bubble-dark);margin-bottom:var(--space-3)}
.admin-kpi-card__icon--cherry{background:var(--cherry-light);color:var(--cherry)}
.admin-kpi-card__icon--lime  {background:var(--lime-ghost);  color:#1A7A6A}
.admin-kpi-card__icon--carbon{background:rgba(48,48,48,.08); color:var(--carbon)}
.admin-kpi-card__value{font-size:28px;font-weight:700;letter-spacing:-1px;line-height:1;color:var(--color-text-primary)}
.admin-kpi-card__label{font-size:var(--text-xs);color:var(--color-text-muted);font-weight:500;text-transform:uppercase;letter-spacing:.4px;margin-top:4px}

/* Panel admin */
.admin-panel{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-xs);margin-bottom:var(--space-5)}
.admin-panel__header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-border)}
.admin-panel__title{font-size:var(--text-md);font-weight:600;color:var(--color-text-primary);display:flex;align-items:center;gap:var(--space-2)}
.admin-panel__title svg{color:var(--bubble-dark)}
.admin-panel__hint{font-size:var(--text-xs);color:var(--color-text-muted)}

/* Tabla admin */
.admin-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.admin-table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
.admin-table th{padding:var(--space-2) var(--space-4);text-align:left;font-size:var(--text-xs);font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.5px;background:var(--color-bg);border-bottom:1px solid var(--color-border);white-space:nowrap}
.admin-table td{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border);vertical-align:middle}
.admin-table tbody tr:last-child td{border-bottom:none}
.admin-table tbody tr:hover td{background:rgba(250,249,247,.8)}
.tr-clickable{cursor:pointer}
.tr-clickable:hover td{background:var(--color-bg)!important}

/* Pagination bar */
.pag-bar{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-top:1px solid var(--color-border);font-size:12px;flex-wrap:wrap;justify-content:center}
.pag-info{color:var(--color-text-muted);white-space:nowrap}
.pag-pages{display:flex;align-items:center;gap:2px}
.pag-btn{min-width:28px;height:28px;padding:0 6px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text-primary);font-size:12px;cursor:pointer;transition:all var(--t-fast)}
.pag-btn:hover:not(:disabled):not(.pag-btn--active){background:var(--color-bg);border-color:var(--bubble)}
.pag-btn--active{background:var(--bubble);color:var(--carbon);border-color:var(--bubble);font-weight:700}
.pag-btn:disabled{opacity:.4;cursor:default}
.pag-size{height:28px;padding:0 6px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text-primary);font-size:12px;cursor:pointer}

/* Toolbar admin */
.admin-toolbar{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4);flex-wrap:wrap}
.admin-search{position:relative;flex:1;min-width:200px}
.admin-search__icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--color-text-muted);pointer-events:none}
.admin-search__input{width:100%;padding:9px 14px 9px 36px;font-size:var(--text-sm);font-family:var(--font-sans);border:1.5px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text-primary);outline:none;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.admin-search__input:focus{border-color:var(--bubble);box-shadow:0 0 0 3px var(--bubble-ghost)}
.admin-search__input::placeholder{color:var(--color-text-muted)}

/* Toggle activo */
.toggle-switch{position:relative;display:inline-flex;align-items:center;cursor:pointer;gap:8px}
.toggle-switch input{position:absolute;opacity:0;width:0;height:0}
.toggle-track{width:36px;height:20px;background:var(--color-border);border-radius:var(--radius-full);position:relative;transition:background var(--t-fast)}
.toggle-track::after{content:'';position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:var(--shadow-xs);transition:transform var(--t-fast)}
.toggle-switch input:checked + .toggle-track{background:var(--bubble)}
.toggle-switch input:checked + .toggle-track::after{transform:translateX(16px)}

/* Reportes — filtros */
.report-filters{display:flex;gap:var(--space-3);margin-bottom:var(--space-5);flex-wrap:wrap;align-items:flex-end}
.report-filter-group{display:flex;flex-direction:column;gap:4px}
.report-filter-group>label,.report-filter-group .field__label{font-size:10px;font-weight:600;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.4px;margin-bottom:0}
.report-filter-group select,.report-filter-group input,.report-filter-group .field__select{height:34px;padding:0 10px;font-size:12px;font-family:var(--font-sans);border:1.5px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text-primary);outline:none;box-sizing:border-box}
.report-filter-group select:focus,.report-filter-group input:focus,.report-filter-group .field__select:focus{border-color:var(--bubble);box-shadow:0 0 0 3px var(--bubble-ghost)}

/* Tabs de sección */
.section-tabs{display:flex;gap:0;border-bottom:2px solid var(--color-border);margin-bottom:var(--space-6)}
.section-tab{padding:10px var(--space-5);font-size:var(--text-sm);font-weight:600;color:var(--color-text-muted);border-bottom:2px solid transparent;margin-bottom:-2px;transition:color var(--t-fast),border-color var(--t-fast)}
.section-tab:hover{color:var(--color-text-primary)}
.section-tab--active{color:var(--bubble-dark);border-bottom-color:var(--bubble)}

/* Filas clickeables en overview */
.overview-drill:hover td{background:var(--bubble-ghost)}
.overview-drill:hover td:first-child{border-radius:var(--radius-sm) 0 0 var(--radius-sm)}
.overview-drill:hover td:last-child{border-radius:0 var(--radius-sm) var(--radius-sm) 0}

/* Barra de progreso horas */
.hours-bar-cell{min-width:120px}
.hours-bar-wrap{display:flex;align-items:center;gap:var(--space-2)}
.hours-bar-bg{flex:1;height:6px;background:var(--color-border);border-radius:var(--radius-full);overflow:hidden}
.hours-bar-fill{height:100%;background:var(--bubble);border-radius:var(--radius-full);transition:width .5s ease}
.hours-bar-fill--cherry{background:var(--cherry)}
.hours-bar-fill--lime  {background:var(--lime-dark)}
.hours-bar-label{font-size:var(--text-xs);font-weight:600;color:var(--color-text-secondary);white-space:nowrap}

/* ── Presupuesto ─────────────────────────────────────────────── */
.budget-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:var(--space-5);margin-bottom:var(--space-6)}
.budget-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-xs);transition:box-shadow var(--t-base)}
.budget-card:hover{box-shadow:var(--shadow-sm)}
.budget-card__client{font-size:var(--text-xs);color:var(--color-text-muted);font-weight:500;text-transform:uppercase;letter-spacing:.4px;margin-bottom:2px}
.budget-card__name{font-size:var(--text-md);font-weight:700;color:var(--color-text-primary);margin-bottom:var(--space-4)}
.budget-card__code{font-size:var(--text-xs);font-family:monospace;background:var(--color-bg);padding:1px 6px;border-radius:4px;color:var(--color-text-muted)}
.budget-row{display:flex;justify-content:space-between;align-items:center;font-size:var(--text-sm);margin-bottom:var(--space-2)}
.budget-row__label{color:var(--color-text-secondary)}
.budget-row__value{font-weight:700;font-variant-numeric:tabular-nums}
.budget-bar{margin:var(--space-3) 0;height:8px;background:var(--color-border);border-radius:var(--radius-full);overflow:hidden;position:relative}
.budget-bar__fill{height:100%;border-radius:var(--radius-full);transition:width .6s ease}
.budget-bar__fill--ok     {background:var(--bubble)}
.budget-bar__fill--warn   {background:var(--color-warning)}
.budget-bar__fill--danger {background:var(--cherry)}
.budget-bar__fill--over   {background:var(--cherry);animation:pulse-bar 1.5s ease infinite}
@keyframes pulse-bar{0%,100%{opacity:1}50%{opacity:.6}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.budget-pct{font-size:var(--text-xs);font-weight:700;text-align:right;margin-top:2px}
.budget-pct--ok    {color:var(--bubble-dark)}
.budget-pct--warn  {color:var(--color-warning)}
.budget-pct--danger{color:var(--cherry)}
.budget-split{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--color-border)}
.budget-split__item{display:flex;flex-direction:column;gap:2px}
.budget-split__label{font-size:10px;font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.4px}
.budget-split__value{font-size:var(--text-sm);font-weight:700;font-variant-numeric:tabular-nums}

/* ── Clientes ────────────────────────────────────────────────── */
.client-projects-list{display:flex;flex-direction:column;gap:6px;margin-top:var(--space-2)}
.client-project-pill{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;background:var(--color-bg);border-radius:var(--radius-sm);font-size:var(--text-xs)}
.client-project-pill__name{font-weight:500;color:var(--color-text-primary)}
.client-project-pill__code{color:var(--color-text-muted);font-family:monospace}

/* ── Liquidación ─────────────────────────────────────────────── */
.liquidacion-body{padding:var(--space-5) var(--space-6);display:flex;flex-direction:column;gap:var(--space-5)}
.liquidacion-filters{display:flex;gap:var(--space-3);flex-wrap:wrap;align-items:flex-end}
.liq-alert{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-3) var(--space-4);background:var(--color-warning-bg);border:1px solid var(--color-warning);border-radius:var(--radius-sm);font-size:var(--text-sm);color:var(--color-text-primary);line-height:1.5}
.liq-alert svg{color:var(--color-warning);flex-shrink:0;margin-top:1px}
.liq-summary-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;padding:var(--space-4) var(--space-5);background:linear-gradient(135deg,var(--bubble-ghost) 0%,var(--color-surface) 100%);border:1px solid rgba(34,213,202,.3);border-radius:var(--radius-md)}
.liq-summary-chip{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.liq-summary-chip__label{font-size:var(--text-xs);font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.4px}
.liq-summary-chip__value{font-size:22px;font-weight:700;color:var(--bubble-dark);letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.liq-rate{display:inline-block;padding:2px 8px;background:var(--bubble-ghost);color:var(--bubble-dark);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:600;white-space:nowrap}
.liq-row td{vertical-align:middle}
.liq-row--sin-tarifa td{background:rgba(234,0,84,.04)}
.liq-total-row td{background:var(--color-bg);border-top:2px solid var(--color-border);padding:var(--space-3) var(--space-4)}
.liq-grand-total{font-size:var(--text-lg);font-weight:800;color:var(--bubble-dark);font-variant-numeric:tabular-nums;letter-spacing:-.5px}
.tarifa-count-badge{display:inline-block;padding:2px 8px;border-radius:var(--radius-full);font-size:11px;font-weight:600;background:var(--bubble-ghost);color:var(--bubble-dark);border:1px solid rgba(34,213,202,.3)}
.tarifa-count-badge--empty{background:var(--color-bg);color:var(--color-text-muted);border-color:var(--color-border)}
.area-chip{display:inline-block;padding:2px 10px;border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:600;background:var(--bubble-ghost);color:var(--bubble-dark)}

/* ── Modal ───────────────────────────────────────────────────── */
/*
  .modal-overlay — el fondo oscuro.
  align-items: flex-start + padding-top permite que el modal sea scrolleable
  cuando el contenido supera la altura de la ventana.
  overflow-y: auto garantiza que si el overlay mismo fuera demasiado alto,
  el usuario puede hacer scroll en él.
*/
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(48,48,48,.45);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-start;       /* cambiado de center → permite scroll */
  justify-content: center;
  padding: var(--space-6);
  overflow-y: auto;              /* scroll cuando el modal es más alto que la pantalla */
  animation: fade-in .2s ease;
}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
/*
  Bootstrap 5 define .modal con display:none; position:fixed; width:100%; height:100%
  Lo sobreescribimos aquí porque styles.css carga DESPUÉS de Bootstrap.
  Esta es nuestra tarjeta blanca interior — no el overlay.
*/
.modal {
  /* ── Resetear lo que Bootstrap 5 impone en .modal ── */
  display:        block    !important;
  position:       relative !important;
  top:            auto     !important;
  left:           auto     !important;
  width:          100%     !important;
  height:         auto     !important;
  overflow-x:     visible  !important;
  overflow-y:     auto     !important;
  z-index:        auto     !important;
  outline:        none     !important;
  pointer-events: auto     !important;

  /* ── Tarjeta Linkoft ── */
  background:    var(--color-surface);
  border-radius: var(--radius-lg);
  padding:       var(--space-8);
  max-width:     400px;
  box-shadow:    var(--shadow-lg);
  animation:     slide-up .25s ease;

  /* Altura máxima: ocupa como mucho 90% de la ventana.
     margin:auto centra verticalmente cuando hay espacio libre.  */
  max-height: 90vh;
  margin:     auto;
}
@keyframes slide-up{from{transform:translateY(16px);opacity:0}to{transform:translateY(0);opacity:1}}
.modal--lg { max-width: 680px }

/* Modal XL — clientes, proyectos, roles
   Padding reducido para aprovechar mejor el espacio vertical */
.modal--xl {
  max-width: 860px;
  padding: var(--space-5) var(--space-6);
}
.modal__title{font-size:var(--text-lg);font-weight:700;margin-bottom:var(--space-3)}
.modal__body{font-size:var(--text-sm);color:var(--color-text-secondary);margin-bottom:var(--space-6);line-height:1.6}
.modal__actions{display:flex;gap:var(--space-3);justify-content:flex-end}
.modal__form-body{display:flex;flex-direction:column;gap:var(--space-4);margin-bottom:var(--space-5)}
.modal__form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}

/* ── Toast ───────────────────────────────────────────────────── */
.toast-container{position:fixed;bottom:var(--space-6);right:var(--space-6);z-index:9999;display:flex;flex-direction:column;gap:var(--space-3);pointer-events:none}
.toast{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-5);background:var(--color-text-primary);color:#fff;border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:500;box-shadow:var(--shadow-lg);pointer-events:all;animation:toast-in .3s ease,toast-out .3s ease 2.7s forwards;max-width:340px}
.toast--success{background:var(--bubble-dark)}
.toast--error  {background:var(--cherry);font-size:var(--text-base);font-weight:600;max-width:420px;padding:var(--space-4) var(--space-5);animation:toast-in .3s ease,toast-out .3s ease 5.5s forwards}
.toast--info   {background:var(--carbon)}
.toast--lime   {background:var(--lime-dark);color:var(--carbon)}
@keyframes toast-in {from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes toast-out{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(12px)}}

/* ── Estado de proyecto ──────────────────────────────────────── */
.badge--planificacion { background:rgba(99,102,241,.08); color:#4F46E5; }
.badge--activo   { background:var(--lime-ghost);   color:#1A7A6A; }
.badge--en_pausa { background:var(--color-warning-bg); color:var(--color-warning); }
.badge--concluido { background:rgba(16,185,129,.08); color:#059669; }
.badge--inactivo { background:var(--color-bg);     color:var(--color-text-muted); border:1px solid var(--color-border); }

/* Modal extra-grande para proyectos */
/* .modal--xl ya definido arriba junto a .modal--lg */

/* Tabla de asignaciones dentro del modal */
.assign-table { width:100%; border-collapse:collapse; font-size:var(--text-sm) }
.assign-table th {
  padding:var(--space-2) var(--space-3);
  text-align:left; font-size:var(--text-xs); font-weight:600;
  color:var(--color-text-muted); text-transform:uppercase; letter-spacing:.4px;
  background:var(--color-bg); border-bottom:1px solid var(--color-border);
}
.assign-table td {
  padding:var(--space-2) var(--space-3);
  border-bottom:1px solid var(--color-border); vertical-align:middle;
}
.assign-table tbody tr:last-child td { border-bottom:none }
.assign-table input, .assign-table select {
  padding:5px 8px; font-size:var(--text-sm); font-family:var(--font-sans);
  border:1.5px solid var(--color-border); border-radius:var(--radius-sm);
  background:var(--color-surface); color:var(--color-text-primary);
  outline:none; width:100%;
}
.assign-table input:focus, .assign-table select:focus {
  border-color:var(--bubble); box-shadow:0 0 0 2px var(--bubble-ghost);
}

/* Sección separada dentro del modal */
.modal-section {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3);
  margin-top: var(--space-2);
}
.modal-section__title {
  font-size:var(--text-xs); font-weight:700; text-transform:uppercase;
  letter-spacing:.5px; color:var(--color-text-muted); margin-bottom:var(--space-3);
  display:flex; align-items:center; gap:var(--space-2);
}
.modal-section__title svg { color:var(--bubble-dark) }

/* Filas dinámicas (habilidades, certificaciones) */
.dynamic-row {
  display:flex; align-items:center; gap:var(--space-2);
  margin-bottom:var(--space-2);
}
.dynamic-row__del {
  background:none; border:none; cursor:pointer;
  font-size:18px; line-height:1; color:var(--color-text-muted);
  padding:4px 6px; border-radius:var(--radius-sm); flex-shrink:0;
}
.dynamic-row__del:hover { color:var(--cherry); background:var(--color-bg); }
.cert-file-badge {
  display:inline-block; font-size:var(--text-xs); color:var(--bubble-dark);
  background:var(--bubble-ghost); padding:2px 8px; border-radius:var(--radius-sm);
  margin-top:2px; max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ── Tags ────────────────────────────────────────────────────── */
.tag-chip {
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 9px; border-radius:var(--radius-full);
  font-size:10px; font-weight:700;
  color:#fff; white-space:nowrap;
  opacity:.9;
}
.tag-chip--removable { cursor:pointer; }
.tag-chip__x {
  width:13px; height:13px; border-radius:50%;
  background:rgba(255,255,255,.3);
  display:flex; align-items:center; justify-content:center;
  font-size:9px; line-height:1; cursor:pointer;
  transition:background var(--t-fast);
}
.tag-chip__x:hover { background:rgba(255,255,255,.55) }

/* Selector multi-tag */
.tag-selector {
  display:flex; flex-wrap:wrap; gap:5px;
  padding:var(--space-2); border:1.5px solid var(--color-border);
  border-radius:var(--radius-sm); background:var(--color-surface);
  min-height:38px; cursor:text; transition:border-color var(--t-fast);
}
.tag-selector:focus-within { border-color:var(--bubble); box-shadow:0 0 0 3px var(--bubble-ghost) }
.tag-selector__input {
  border:none; outline:none; font-family:var(--font-sans);
  font-size:var(--text-sm); background:transparent;
  min-width:80px; flex:1; padding:2px 4px;
}
.tag-dropdown {
  position:absolute; z-index:200;
  background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-sm); box-shadow:var(--shadow-md);
  min-width:180px; max-height:180px; overflow-y:auto;
}
.tag-dropdown__item {
  display:flex; align-items:center; gap:var(--space-2);
  padding:var(--space-2) var(--space-3); cursor:pointer;
  font-size:var(--text-sm);
}
.tag-dropdown__item:hover { background:var(--color-bg) }

/* ── Adjuntos ────────────────────────────────────────────────── */
.attachment-list {
  display:flex; flex-direction:column; gap:var(--space-2);
}
.attachment-item {
  display:flex; align-items:center; gap:var(--space-3);
  padding:var(--space-3) var(--space-4);
  background:var(--color-bg); border:1px solid var(--color-border);
  border-radius:var(--radius-sm);
  transition:background var(--t-fast);
}
.attachment-item:hover { background:var(--bubble-ghost) }
.attachment-item__icon {
  width:34px; height:34px; border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  font-size:16px; flex-shrink:0;
}
.attachment-item__icon--pdf   { background:#FDECEA; }
.attachment-item__icon--docx  { background:#E8F0FE; }
.attachment-item__icon--excel { background:#E8F5E9; }
.attachment-item__icon--img   { background:#FFF3E0; }
.attachment-item__info { flex:1; min-width:0 }
.attachment-item__name { font-weight:500; font-size:var(--text-sm); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.attachment-item__meta { font-size:11px; color:var(--color-text-muted) }
.attachment-item__actions { display:flex; gap:var(--space-1) }

/* Upload zone */
.upload-zone {
  border:2px dashed var(--color-border);
  border-radius:var(--radius-sm);
  padding:var(--space-6);
  text-align:center;
  /* cursor: default — el cursor pointer solo lo tiene el botón interno */
  cursor:default;
  transition:border-color var(--t-fast), background var(--t-fast);
  /* SIN position:relative aquí para no crear un stacking context que afecte el modal */
}
.upload-zone:hover, .upload-zone--drag { border-color:var(--bubble); background:var(--bubble-ghost) }
.upload-zone svg { color:var(--color-text-muted); margin-bottom:var(--space-2) }
.upload-zone__text { font-size:var(--text-sm); color:var(--color-text-secondary) }
.upload-zone__hint { font-size:11px; color:var(--color-text-muted); margin-top:4px }

/* ── Datos fiscales ──────────────────────────────────────────── */
.fiscal-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:var(--space-4);
}
.fiscal-grid--3 { grid-template-columns:1fr 1fr 1fr }
.fiscal-field__label {
  font-size:10px; font-weight:700; color:var(--color-text-muted);
  text-transform:uppercase; letter-spacing:.5px;
  display:block; margin-bottom:3px;
}
.fiscal-field__value {
  font-size:var(--text-sm); font-weight:500; color:var(--color-text-primary);
}
.fiscal-badge {
  display:inline-block; padding:2px 8px; border-radius:var(--radius-full);
  font-size:10px; font-weight:700;
  background:var(--bubble-ghost); color:var(--bubble-dark);
  border:1px solid rgba(34,213,202,.3);
}

/* Acceso rápido a contactos en tabla */
.btn-contacts-quick {
  display:inline-flex; align-items:center; gap:4px;
  font-size:11px; font-weight:600; color:var(--bubble-dark);
  background:var(--bubble-ghost); border:1px solid rgba(34,213,202,.3);
  border-radius:var(--radius-full); padding:2px 8px;
  cursor:pointer; transition:background var(--t-fast);
  white-space:nowrap;
}
.btn-contacts-quick:hover { background:var(--bubble-light) }

/* ── Contactos de cliente ────────────────────────────────────── */
.contacts-table { width:100%; border-collapse:collapse; font-size:var(--text-sm) }
.contacts-table th {
  padding:var(--space-2) var(--space-3);
  text-align:left; font-size:var(--text-xs); font-weight:600;
  color:var(--color-text-muted); text-transform:uppercase; letter-spacing:.4px;
  background:var(--color-bg); border-bottom:1px solid var(--color-border);
}
.contacts-table td {
  padding:var(--space-2) var(--space-3);
  border-bottom:1px solid var(--color-border);
  vertical-align:middle;
}
.contacts-table tbody tr:last-child td { border-bottom:none }
.contacts-table input, .contacts-table select {
  padding:6px 8px; font-size:var(--text-sm); font-family:var(--font-sans);
  border:1.5px solid var(--color-border); border-radius:var(--radius-sm);
  background:var(--color-surface); color:var(--color-text-primary);
  outline:none; width:100%; transition:border-color var(--t-fast);
}
.contacts-table input:focus, .contacts-table select:focus {
  border-color:var(--bubble); box-shadow:0 0 0 2px var(--bubble-ghost);
}
.contact-principal-star {
  cursor:pointer; font-size:18px; line-height:1;
  transition:transform var(--t-fast);
}
.contact-principal-star:hover { transform:scale(1.2) }

/* Badge de función/rol del contacto */
.contact-rol-badge {
  display:inline-block;
  padding:2px 8px; border-radius:var(--radius-full);
  font-size:10px; font-weight:600;
  background:var(--color-bg); color:var(--color-text-secondary);
  border:1px solid var(--color-border);
  white-space:nowrap;
}

/* ── Roles y Perfiles ────────────────────────────────────────── */
.roles-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:var(--space-5);
  margin-bottom:var(--space-6);
}
.role-card {
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-xs);
  transition:box-shadow var(--t-base), transform var(--t-base);
  cursor:pointer;
}
.role-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px) }

.role-card__header {
  padding:var(--space-4) var(--space-5);
  display:flex; align-items:center; gap:var(--space-3);
}
.role-card__icon {
  width:42px; height:42px; border-radius:var(--radius-md);
  display:flex; align-items:center; justify-content:center;
  font-size:20px; flex-shrink:0;
}
.role-card__name {
  font-size:var(--text-md); font-weight:700;
  color:var(--color-text-primary); line-height:1.2;
}
.role-card__badge {
  display:inline-flex; align-items:center;
  padding:2px 8px; border-radius:var(--radius-full);
  font-size:10px; font-weight:700; margin-top:3px;
  text-transform:uppercase; letter-spacing:.5px;
}
.role-card__body {
  padding:0 var(--space-5) var(--space-4);
}
.role-card__desc {
  font-size:var(--text-sm); color:var(--color-text-secondary);
  line-height:1.6; margin-bottom:var(--space-3);
}
.role-card__perms {
  display:flex; flex-wrap:wrap; gap:4px;
}
.perm-chip {
  padding:2px 8px; border-radius:var(--radius-full);
  font-size:10px; font-weight:600;
  background:var(--bubble-ghost); color:var(--bubble-dark);
  border:1px solid rgba(34,213,202,.25);
}
.perm-chip--muted {
  background:var(--color-bg); color:var(--color-text-muted);
  border-color:var(--color-border);
}
.role-card__footer {
  padding:var(--space-3) var(--space-5);
  border-top:1px solid var(--color-border);
  background:var(--color-bg);
  display:flex; align-items:center; justify-content:space-between;
}
.role-card__users {
  font-size:var(--text-xs); font-weight:600; color:var(--color-text-muted);
}

/* Matriz de permisos */
.perm-matrix { width:100%; border-collapse:collapse; font-size:var(--text-sm) }
.perm-matrix th {
  padding:var(--space-3) var(--space-3);
  font-size:var(--text-xs); font-weight:600;
  color:var(--color-text-muted); text-transform:uppercase;
  letter-spacing:.4px; background:var(--color-bg);
  border-bottom:1px solid var(--color-border);
  white-space:nowrap;
}
.perm-matrix th.perm-matrix__role-col {
  writing-mode:vertical-lr;
  transform:rotate(180deg);
  min-width:56px; max-width:70px;
  height:120px; text-align:left;
  padding:var(--space-3) var(--space-2);
  font-size:10px;
}
.perm-matrix th.perm-matrix__role-col .btn {
  writing-mode:horizontal-tb;
  transform:rotate(180deg);
}
.perm-matrix td {
  padding:var(--space-2) var(--space-3);
  border-bottom:1px solid var(--color-border);
  border-right:1px solid var(--color-border);
  vertical-align:middle;
}
.perm-matrix td.perm-label { min-width:200px; background:var(--color-bg) }
.perm-matrix td.perm-module {
  font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:.5px; color:var(--color-text-muted);
  background:rgba(34,213,202,.05); border-right:none;
}
.perm-matrix tbody tr:hover td { background:rgba(34,213,202,.04) }

.perm-check {
  display:flex; align-items:center; justify-content:center;
}
.perm-check--yes {
  width:22px; height:22px; border-radius:50%;
  background:var(--lime-ghost); color:#1A7A6A;
  display:flex; align-items:center; justify-content:center;
}
.perm-check--no {
  width:22px; height:22px; border-radius:50%;
  background:var(--color-bg); color:var(--color-border);
  display:flex; align-items:center; justify-content:center;
}
.perm-matrix__role-col--editing {
  background:rgba(34,213,202,.08) !important;
}
.perm-cell--editing {
  background:rgba(34,213,202,.06) !important;
}
.perm-cell--editing .perm-check:hover .perm-check--no {
  background:rgba(34,213,202,.15); color:var(--bubble-dark);
}
.perm-cell--editing .perm-check:hover .perm-check--yes {
  background:rgba(220,60,60,.12); color:var(--cherry);
}

/* Asignación de roles */
.user-roles-row { vertical-align:middle }
.role-pills { display:flex; flex-wrap:wrap; gap:4px; }
.role-pill {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 10px; border-radius:var(--radius-full);
  font-size:11px; font-weight:600;
  color:#fff;
}
.role-pill__remove {
  width:14px; height:14px; border-radius:50%;
  background:rgba(255,255,255,.3);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:10px; line-height:1;
  transition:background var(--t-fast);
}
.role-pill__remove:hover { background:rgba(255,255,255,.5) }

/* ── Panel de opciones de usuario ───────────────────────────── */
.user-panel {
  position: fixed;
  z-index: 9500;
  bottom: 80px;
  left: 16px;
  width: 280px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: panel-in .18s ease;
}

/* Para colaborador: aparece pegado al navbar user area */
.user-panel--top {
  bottom: auto;
  top: var(--navbar-h);
  right: var(--space-4);
  left: auto;
}

@keyframes panel-in {
  from { opacity: 0; transform: translateY(8px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.user-panel__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-3);
}

.user-panel__avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--carbon);
  color: var(--lime);
  font-size: 14px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  letter-spacing: .5px;
}

.user-panel__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

.user-panel__name {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-panel__email {
  font-size: 11px;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-panel__role-badge {
  display: inline-block;
  margin-top: 2px;
}

.user-panel__role {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--radius-full);
  font-size: 10px; font-weight: 700;
  background: var(--bubble-ghost);
  color: var(--bubble-dark);
  border: 1px solid rgba(34,213,202,.3);
  text-transform: capitalize;
}

.user-panel__divider {
  height: 1px;
  background: var(--color-border);
  margin: 0;
}

.user-panel__nav {
  padding: var(--space-2) 0;
}

.user-panel__item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px var(--space-4);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
  position: relative;
}

.user-panel__item:hover {
  background: var(--color-bg);
  color: var(--color-text-primary);
}

.user-panel__item svg {
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: color var(--t-fast);
}

.user-panel__item:hover svg {
  color: var(--bubble-dark);
}

.user-panel__item--logout {
  color: var(--cherry);
}
.user-panel__item--logout svg {
  color: var(--cherry);
}
.user-panel__item--logout:hover {
  background: var(--cherry-light);
  color: var(--cherry-dark);
}

.user-panel__badge {
  margin-left: auto;
  background: var(--cherry);
  color: #fff;
  font-size: 10px; font-weight: 700;
  min-width: 18px; height: 18px;
  border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  padding: 0 5px;
}

/* ── Notificaciones Modal ───────────────────────────────────── */
.notif-modal{width:min(860px,95vw);min-width:340px;max-height:92vh;display:flex;flex-direction:column;overflow:hidden}
.notif-toolbar{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-5);border-bottom:1px solid var(--color-border);flex-wrap:wrap}
.notif-toolbar__select-all{display:flex;align-items:center;gap:6px;font-size:var(--text-sm);cursor:pointer;white-space:nowrap}
.notif-toolbar__select-all input{width:16px;height:16px;accent-color:var(--bubble-dark);cursor:pointer}
.notif-toolbar__actions{display:flex;align-items:center;gap:var(--space-2)}
.notif-toolbar__count{font-size:var(--text-xs);color:var(--color-text-muted);white-space:nowrap}
.notif-toolbar__filter{margin-left:auto}
.notif-toolbar__filter select{font-size:var(--text-xs);padding:4px 8px;border-radius:var(--radius-sm)}
.notif-list{flex:1;overflow-y:auto;padding:0}
.notif-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-border);cursor:pointer;transition:background var(--t-fast)}
.notif-item:hover{background:var(--color-bg)}
.notif-item--unread{background:rgba(34,213,202,.04)}
.notif-item--unread .notif-item__title{font-weight:700}
.notif-item--read{opacity:.7}
.notif-item--selected{background:rgba(34,213,202,.1) !important}
.notif-item__check{flex-shrink:0;width:16px;height:16px;accent-color:var(--bubble-dark);cursor:pointer}
.notif-item__dot{flex-shrink:0;width:8px;height:8px;border-radius:50%}
.notif-item--unread .notif-item__dot{background:var(--bubble-dark)}
.notif-item--read .notif-item__dot{background:var(--color-border)}
.notif-item__icon{flex-shrink:0;font-size:18px;line-height:1}
.notif-item__body{flex:1;min-width:0}
.notif-item__title{font-size:var(--text-sm);color:var(--color-text-primary);line-height:1.4}
.notif-item__msg{font-size:var(--text-xs);color:var(--color-text-muted);line-height:1.5;margin-top:2px}
.notif-item__time{font-size:11px;color:var(--color-text-muted);margin-top:4px}
.notif-item__actions{flex-shrink:0;display:flex;gap:4px;opacity:0;transition:opacity var(--t-fast)}
.notif-item:hover .notif-item__actions{opacity:1}
.notif-item__btn{background:none;border:none;cursor:pointer;padding:4px;border-radius:var(--radius-sm);color:var(--color-text-muted);transition:color var(--t-fast),background var(--t-fast)}
.notif-item__btn:hover{background:var(--color-bg);color:var(--color-text-primary)}
.notif-item__btn--delete:hover{color:var(--cherry)}
.notif-empty{padding:var(--space-8) var(--space-5);text-align:center;color:var(--color-text-muted);font-size:var(--text-sm)}

/* Área clickeable del usuario en sidebar admin */
.admin-sidebar__footer {
  cursor: pointer;
  transition: background var(--t-fast);
}
.admin-sidebar__footer:hover {
  background: var(--color-bg);
}

/* Área clickeable del usuario en navbar colaborador */
.navbar__user {
  cursor: pointer;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  transition: background var(--t-fast);
}
.navbar__user:hover {
  background: var(--color-bg);
}

/* ── Misc ────────────────────────────────────────────────────── */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--color-bg)}
::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:#ccc}

/* ── Configuración / Catálogos ────────────────────────────────── */
.config-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--space-5);
  min-height: 400px;
}

.config-tabs {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
}

.config-tab {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 14px;
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
  text-align: left;
}
.config-tab:hover { background: var(--color-bg); color: var(--color-text-primary); }
.config-tab--active {
  background: var(--carbon);
  color: var(--lime);
  font-weight: 600;
}
.config-tab--active:hover { background: var(--carbon); color: var(--lime); }

.config-tab__icon { font-size: 16px; flex-shrink: 0; }
.config-tab__label { flex: 1; }
.config-tab__count {
  font-size: 11px;
  font-weight: 700;
  min-width: 22px;
  height: 20px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full);
  background: rgba(0,0,0,.08);
  padding: 0 6px;
}
.config-tab--active .config-tab__count {
  background: rgba(227,255,101,.25);
  color: var(--lime);
}

.config-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.config-panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.config-panel__title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
}

.config-panel__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 4px 0 0;
}

.config-table { margin: 0; }
.config-table th { background: var(--color-bg); }

.config-row--inactive td {
  opacity: 0.5;
  text-decoration: line-through;
}
.config-row--inactive .status-badge { opacity: 1; text-decoration: none; }

.mail-template-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); }

@media(max-width:960px){
  .config-layout { grid-template-columns: 1fr; }
  .config-tabs { flex-direction: row; overflow-x: auto; }
  .config-tab__label { display: none; }
  .dashboard__columns{grid-template-columns:1fr}
  .dashboard,.admin-content{padding:var(--space-4)}
  .navbar,.admin-topbar{padding:0 var(--space-4)}
  .admin-sidebar{width:220px}
  .collab-tabs{flex-wrap:wrap}
  .collab-tabs__btn{font-size:var(--text-xs)}
  .week-nav__label{min-width:160px;font-size:var(--text-xs)}
  .view-mode-btn{padding:4px 10px;font-size:11px}
}

/* ── Tablet: sidebar auto-colapsado ─────────────── */
@media(max-width:768px){
  .admin-sidebar{width:64px;overflow:visible}
  .admin-sidebar .admin-sidebar__brand svg[aria-label]{opacity:0;width:0;overflow:hidden}
  .admin-sidebar .admin-sidebar__brand{justify-content:center;padding:var(--space-5) var(--space-3)}
  .admin-sidebar .admin-nav{padding:var(--space-4) var(--space-2)}
  .admin-sidebar .admin-nav__section-label{opacity:0;height:0;padding:0;margin:0;pointer-events:none}
  .admin-sidebar .admin-nav__item{justify-content:center;padding:9px 0;font-size:0;line-height:0;gap:0;position:relative;overflow:visible}
  .admin-sidebar .admin-nav__item svg{width:17px;height:17px;min-width:17px;min-height:17px}
  .admin-sidebar .admin-nav__badge{position:absolute;top:2px;right:4px;min-width:14px;height:14px;font-size:8px;line-height:14px;padding:0 3px}
  .admin-sidebar .admin-sidebar__user-info{opacity:0;width:0;pointer-events:none}
  .admin-sidebar .admin-sidebar__footer{justify-content:center;gap:0;padding:var(--space-3)}
  .admin-sidebar .admin-sidebar__footer .btn{display:none}
  .admin-sidebar .sidebar-toggle{display:none}
  .admin-sidebar .admin-nav__item::after{content:attr(data-tooltip);position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);background:var(--carbon);color:#fff;font-size:12px;font-weight:500;padding:4px 10px;border-radius:var(--radius-sm);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s;z-index:999;box-shadow:var(--shadow-md)}
  .admin-sidebar .admin-nav__item:hover::after{opacity:1}
  .admin-content{padding:var(--space-3)}
  .admin-table{font-size:var(--text-xs)}
}

/* ── Mobile topbar (hidden por defecto) ─────────── */
.mobile-topbar{display:none;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);background:var(--color-surface);border-bottom:1px solid var(--color-border);width:100%;position:sticky;top:0;z-index:100}
.mobile-menu-toggle{align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);cursor:pointer;color:var(--color-text-primary);flex-shrink:0}
.mobile-menu-toggle:hover{background:var(--color-border)}

/* ── Mobile: sidebar como overlay ───────────────── */
@media(max-width:580px){
  .mobile-topbar{display:flex!important}
  .mobile-menu-toggle{display:flex!important}
  .admin-sidebar{
    position:fixed;top:0;left:0;bottom:0;width:260px;
    transform:translateX(-100%);transition:transform .25s cubic-bezier(.4,0,.2,1);
    z-index:200;box-shadow:var(--shadow-lg)
  }
  .admin-sidebar .admin-nav{padding:var(--space-4)}
  .admin-sidebar .admin-nav__section-label{opacity:1;height:auto;padding:var(--space-2) var(--space-3);margin:0;pointer-events:auto}
  .admin-sidebar .admin-nav__item{justify-content:flex-start;padding:10px var(--space-3);font-size:var(--text-sm);line-height:1.4;gap:var(--space-3);overflow:hidden}
  .admin-sidebar .admin-nav__item::after{display:none}
  .admin-sidebar .admin-sidebar__brand{justify-content:space-between;padding:var(--space-5)}
  .admin-sidebar .admin-sidebar__brand svg[aria-label]{opacity:1;width:auto}
  .admin-sidebar .admin-sidebar__user-info{opacity:1;width:auto;pointer-events:auto}
  .admin-sidebar .admin-sidebar__footer{gap:var(--space-3);padding:var(--space-4)}
  .admin-sidebar .admin-sidebar__footer .btn{display:inline-flex}
  .admin-sidebar .sidebar-toggle{display:none}
  .admin-sidebar--mobile-open{transform:translateX(0)}
  .mobile-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:199;backdrop-filter:blur(2px)}
  .mobile-overlay--visible{display:block}
  .screen--admin{flex-direction:column}
  .admin-content{padding:var(--space-3);min-height:calc(100vh - 52px)}
  .admin-table th,.admin-table td{padding:var(--space-2) var(--space-3)}
}