:root {
    --color-bg:          #F0F2F5;
    --color-surface:     #FFFFFF;
    --color-surface-2:   #F7F8FA;
    --color-border:      #E2E6EA;
    --color-text:        #1A1F2E;
    --color-text-muted:  #6B7280;
    --color-primary:     #2563EB;
    --color-primary-dk:  #1D4ED8;
    --color-primary-lt:  #EFF6FF;
    --color-accent:      #0EA5E9;
    --color-success:     #16A34A;
    --color-success-lt:  #F0FDF4;
    --color-warning:     #D97706;
    --color-warning-lt:  #FFFBEB;
    --color-error:       #DC2626;
    --color-error-lt:    #FEF2F2;
    --color-info:        #0EA5E9;
    --color-info-lt:     #F0F9FF;
    --radius:            8px;
    --radius-sm:         4px;
    --shadow:            0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
    --shadow-md:         0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.05);
    --transition:        150ms ease;
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ─── Marca (logo + nombre empresa) en sidebar ─────────────────────── */
.brand-empresa.navbar-brand { max-width: 100%; overflow: hidden; }
.brand-empresa__link { display: flex !important; align-items: center; gap: 8px; max-width: 100%; overflow: hidden; text-decoration: none; white-space: normal; }
.brand-empresa__logo { flex: 0 0 auto; max-height: 26px; max-width: 58px; width: auto; height: auto; background: #fff; border-radius: 4px; padding: 4px 6px; }
.brand-empresa__icon { flex: 0 0 auto; font-size: 1.2rem; line-height: 34px; }
.brand-empresa__text { flex: 1 1 auto; min-width: 0; max-width: 100%; overflow: hidden; display: block; }
.brand-empresa__app,
.brand-empresa__empresa { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 17px; }
.brand-empresa__app { font-size: .85rem; font-weight: 700; }
.brand-empresa__empresa { font-size: .7rem; font-weight: 400; color: #9CA3AF; }
@media (min-width: 992px) {
    .brand-empresa__text { max-width: 140px; }
}

/* ─── Dashboard ─────────────────────────────────────────────────── */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 18px 20px; display: flex; align-items: center; gap: 14px; box-shadow: var(--shadow); transition: box-shadow var(--transition), transform var(--transition); text-decoration: none; color: var(--color-text); }
.stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); text-decoration: none; }
.stat-card--alert { border-left: 4px solid var(--color-warning); }
.stat-card--info  { border-left: 4px solid var(--color-info); }
.stat-card__icon  { font-size: 22px; color: var(--color-primary); }
.stat-card__label { font-size: .78rem; color: var(--color-text-muted); display: block; }
.stat-card__value { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }

.fichar-panel__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.fichar-panel__hora { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; flex: 1; }

.section-title { font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); margin-bottom: 12px; }

.list-simple { list-style: none; }
.list-simple__item { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--color-border); font-size: .875rem; }
.list-simple__item:last-child { border-bottom: none; }
.link { font-size: .8rem; color: var(--color-primary); }

@media (max-width: 768px) { .stats-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .stats-grid { grid-template-columns: 1fr; } }

/* ─── Configuración ─────────────────────────────────────────────── */
.layout-cols { display: grid; grid-template-columns: 380px 1fr; gap: 20px; align-items: start; }
@media (max-width: 900px) { .layout-cols { grid-template-columns: 1fr; } }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }

.checkbox-grid { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.checkbox-label { display: flex; align-items: center; gap: 8px; font-size: .875rem; cursor: pointer; }
.checkbox-label input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--color-primary); }

.permisos-grupo { margin-bottom: 20px; }
.permisos-grupo__titulo { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--color-border); }
.permisos-grupo .checkbox-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 600px) { .permisos-grupo .checkbox-grid { grid-template-columns: 1fr; } }

.horario-grid { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.horario-fila { display: grid; grid-template-columns: 100px 1fr 1fr; gap: 8px; align-items: center; }
.horario-dia { font-size: .85rem; font-weight: 600; color: var(--color-text-muted); }

/* ─── Permisos ──────────────────────────────────────────────────── */
.dl-list { display: grid; grid-template-columns: 140px 1fr; gap: 10px 16px; font-size: .875rem; }
.dl-list dt { font-weight: 600; color: var(--color-text-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; padding-top: 2px; }
.dl-list dd { color: var(--color-text); }

.timeline { display: flex; flex-direction: column; gap: 16px; }
.timeline__item { padding-left: 14px; border-left: 3px solid var(--color-border); }
.timeline__meta { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin-bottom: 4px; }
.timeline__fecha { font-size: .78rem; color: var(--color-text-muted); }
.timeline__quien { font-size: .85rem; font-weight: 600; }
.timeline__accion { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ─── Fichajes ──────────────────────────────────────────────────── */
.horario-semana { display: flex; gap: 8px; flex-wrap: wrap; }
.horario-semana__dia { background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 10px 14px; text-align: center; min-width: 90px; }
.horario-semana__dia--hoy { background: var(--color-primary-lt); border-color: var(--color-primary); }
.horario-semana__nombre { display: block; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); margin-bottom: 4px; }
.horario-semana__horas { display: block; font-size: .85rem; font-weight: 600; }

/* ─── Horarios form ─────────────────────────────────────────────── */
.franja-row { display: grid; grid-template-columns: 90px 130px 60px 110px 110px auto auto; gap: 8px; align-items: center; margin-bottom: 8px; padding: 8px; background: var(--color-surface-2); border-radius: var(--radius-sm); }
@media (max-width: 900px) { .franja-row { grid-template-columns: 1fr 1fr; } }
.franja-dia { font-size: .8rem; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; }

/* ─── Ciclo rotación ────────────────────────────────────────────── */
.horario-ciclo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.horario-ciclo__item { display: flex; align-items: center; gap: 6px; background: var(--color-primary-lt); border: 1px solid var(--color-primary); border-radius: var(--radius-sm); padding: 6px 12px; }
.horario-ciclo__num { background: var(--color-primary); color: #fff; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; flex-shrink: 0; }
.horario-ciclo__nombre { font-size: .875rem; font-weight: 600; }
.horario-ciclo__flecha { color: var(--color-text-muted); font-size: 1.2rem; }

/* ─── Drag & drop listas ────────────────────────────────────────── */
.drag-list { min-height: 48px; border: 2px dashed var(--color-border); border-radius: var(--radius-sm); padding: 8px; display: flex; flex-direction: column; gap: 6px; background: var(--color-surface-2); }
.drag-list--target { border-color: var(--color-primary); background: var(--color-primary-lt); }
.drag-list__empty { color: var(--color-text-muted); font-size: .85rem; text-align: center; padding: 12px; margin: 0; }
.drag-item { display: flex; align-items: center; gap: 10px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 8px 12px; font-size: .875rem; cursor: grab; user-select: none; transition: box-shadow var(--transition); }
.drag-item:hover { box-shadow: var(--shadow-md); }
.drag-item--dragging { opacity: .4; cursor: grabbing; }
.drag-handle { color: var(--color-text-muted); font-size: 14px; cursor: grab; }

/* ─── Modal bloqueo tolerancias ─────────────────────────────────── */
#overlayTolerancia { display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:300; align-items:center; justify-content:center; }
#overlayTolerancia.visible { display:flex; }
.tolerancia-modal { background:#fff; border-radius:var(--radius); padding:28px; max-width:460px; width:90%; box-shadow:0 8px 32px rgba(0,0,0,.2); }

/* ─── Select2 integración ───────────────────────────────────────── */
.select2-container { width: 100% !important; }
.select2-container--default .select2-selection--multiple {
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    min-height: 38px;
    padding: 2px 6px;
    font-size: .9rem;
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,.12);
    outline: none;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--color-primary-lt);
    border-color: var(--color-primary);
    color: var(--color-primary);
    border-radius: var(--radius-sm);
    font-size: .8rem;
}
.select2-dropdown { border-color: var(--color-border); border-radius: var(--radius-sm); font-size: .875rem; }
.select2-results__option--highlighted { background: var(--color-primary) !important; }

/* ─── Comunicaciones ────────────────────────────────────────────── */
.dest-fila { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }

/* ─── Menú drag-drop ────────────────────────────────────────────── */
#navbar-menu-sortable { cursor: grab; }
#navbar-menu-sortable li.sortable-ghost { opacity: 0.4; background: var(--color-surface-2); }
#navbar-menu-sortable li.sortable-drag { opacity: 0.5; cursor: grabbing; }
#navbar-menu-sortable li { transition: opacity var(--transition); }