/* ---------------------------------------------------------------------------
 * File     : assets/css/style.css
 * Version  : 1.0.0
 * Date     : 2026-07-22
 * Summary  : Ventas — mobile-first single stylesheet. Zero external assets.
 *            Target : iPhone widths (390 px). Min tap area 44 px.
 * ------------------------------------------------------------------------- */

/* ---------- Reset & base ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
    -webkit-text-size-adjust: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    color: #1a1a1a;
    background: #f2f4f7;
    line-height: 1.4;
}
body { min-height: 100dvh; }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; cursor: pointer; }
input, select, button, textarea { font: inherit; color: inherit; }

/* ---------- Layout helpers ---------------------------------------------- */
.container {
    max-width: 640px;
    margin: 0 auto;
    padding: 16px;
    padding-bottom: 96px;
}
body.centered {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

/* ---------- Card / auth card ------------------------------------------- */
.card {
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06),
                0 6px 24px rgba(0, 0, 0, 0.04);
    padding: 20px;
    margin-bottom: 16px;
}
.auth-card {
    width: 100%;
    max-width: 400px;
}
.auth-card .brand {
    margin: 0 0 4px;
    font-size: 26px;
    letter-spacing: -0.02em;
}
.auth-card .badge {
    display: inline-block;
    background: #0e639c;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    vertical-align: middle;
    margin-left: 6px;
}
.auth-card h2 {
    margin: 20px 0 4px;
    font-size: 18px;
}
.auth-card .muted {
    color: #6a6a6a;
    font-size: 14px;
    margin: 0 0 16px;
}

/* ---------- Forms ------------------------------------------------------ */
/* Honour the HTML5 [hidden] attribute even on elements we style with
   display:block (labels, sections). Otherwise our own display rules win. */
[hidden] { display: none !important; }

label {
    display: block;
    margin-top: 14px;
}
label > span {
    display: block;
    font-size: 13px;
    color: #555;
    margin-bottom: 6px;
    font-weight: 500;
}
input[type="text"],
input[type="password"],
input[type="number"],
select {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid #d5d9df;
    border-radius: 10px;
    background: #fff;
    font-size: 16px;         /* avoids iOS zoom */
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus, select:focus {
    border-color: #0e639c;
    box-shadow: 0 0 0 3px rgba(14, 99, 156, 0.15);
}
select {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23555'><path d='M5.5 7.5L10 12l4.5-4.5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 20px;
    padding-right: 36px;
}

/* ---------- Buttons ---------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 10px 18px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    transition: background 0.15s, transform 0.05s;
    -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.98); }
.btn-block { width: 100%; margin-top: 18px; }
.btn-primary {
    background: #0e639c;
    color: #fff;
}
.btn-primary:hover { background: #0b527f; }
.btn-secondary {
    background: #eef1f4;
    color: #1a1a1a;
    border-color: #d5d9df;
}
.btn-secondary:hover { background: #e2e6ea; }
.btn-danger {
    background: #c62828;
    color: #fff;
    border-color: #a01818;
}
.btn-danger:hover { background: #a01818; }
.em-clock-clear { margin-top: 10px; }
.btn-ghost {
    background: transparent;
    color: #fff;
    border-color: rgba(255,255,255,0.35);
    min-height: 40px;
    padding: 6px 14px;
    font-size: 14px;
}
.btn-ghost:hover { background: rgba(255,255,255,0.08); }

/* ---------- Flash messages -------------------------------------------- */
.flash {
    margin: 0 0 12px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 14px;
    border: 1px solid transparent;
}
.flash.big { padding: 16px; font-size: 15px; }
.flash-info    { background: #eef4fa; color: #0b3d61; border-color: #cadff0; }
.flash-success { background: #e8f6ee; color: #0a5a2a; border-color: #b6e0c4; }
.flash-error   { background: #fdecec; color: #7a1414; border-color: #f2c1c1; }

/* ---------- App shell (entry.php) ------------------------------------- */
.app-header {
    background: #0e639c;
    color: #fff;
    padding: 12px 16px;
    padding-top: max(12px, env(safe-area-inset-top));
}
.app-header-inner {
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.app-title    { font-weight: 700; font-size: 18px; line-height: 1.2; }
.app-subtitle { font-size: 13px; opacity: 0.85; margin-top: 2px; }

.date-banner {
    background: #fff;
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.date-label { color: #6a6a6a; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
.date-value { font-size: 18px; font-weight: 600; margin-top: 4px; text-transform: capitalize; }

/* Date banner with ← / → day navigation. */
.date-banner-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 8px;
}
.date-banner-nav .db-center {
    flex: 1;
    text-align: center;
    min-width: 0;
}
.date-banner-nav .db-arrow {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #eef4fa;
    color: #0e639c;
    font-size: 22px;
    font-weight: 600;
    text-decoration: none;
    flex-shrink: 0;
}
.date-banner-nav .db-arrow:hover { background: #dbeaf5; }
.date-banner-nav .db-arrow.is-disabled {
    background: #f2f4f7; color: #b6bcc4; cursor: not-allowed;
}
.date-banner-nav .db-today {
    display: inline-block;
    margin-top: 6px;
    font-size: 13px;
    color: #0e639c;
    text-decoration: none;
    font-weight: 600;
}
.date-banner-nav .db-today:hover { text-decoration: underline; }

/* ---------- Brand list + qty input ------------------------------------ */
.brand-list {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    margin-bottom: 16px;
}
.brand-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 2px 14px;
    border-bottom: 1px solid #eef1f4;
}
.brand-row:last-child { border-bottom: none; }
.brand-name {
    flex: 1;
    font-weight: 500;
    font-size: 14px;
    min-width: 0;
    overflow-wrap: anywhere;
}
input.qty-input {
    width: 48px;
    min-width: 48px;
    max-width: 48px;
    height: 32px;
    min-height: 32px;
    text-align: center;
    border: 1px solid #d5d9df;
    border-radius: 8px;
    background: #fff;
    font-size: 16px;
    font-weight: 600;
    padding: 0;
    -moz-appearance: textfield;
    flex-shrink: 0;
}
input.qty-input::-webkit-outer-spin-button,
input.qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input.qty-input:focus {
    outline: none;
    border-color: #0e639c;
    box-shadow: 0 0 0 3px rgba(14, 99, 156, 0.15);
}

/* ---------- Totals + actions ----------------------------------------- */
.totals {
    background: #fff;
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.totals-label { color: #6a6a6a; font-size: 14px; }
.totals-value {
    font-size: 28px;
    font-weight: 700;
    color: #0e639c;
    font-variant-numeric: tabular-nums;
}
.actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.actions .btn-block { margin-top: 0; }

/* ---------- Summary table (locked view + confirm modal) --------------- */
.summary-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}
.summary-table th,
.summary-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #eef1f4;
    text-align: left;
}
.summary-table th {
    font-weight: 600;
    color: #555;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.summary-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.summary-table tfoot th {
    padding-top: 12px;
    font-size: 16px;
    color: #0e639c;
    border-top: 2px solid #eef1f4;
    text-transform: none;
    letter-spacing: 0;
}

/* ---------- Dialog / modal ------------------------------------------- */
.modal {
    max-width: 92vw;
    width: 400px;
    border: none;
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.25);
    background: #fff;
    color: inherit;
}
.schedule-modal { width: 640px; }
.schedule-copy-from { margin: 8px 0 12px; }
.schedule-copy-from label { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.schedule-copy-from select { min-height: 32px; padding: 4px 8px; }
.schedule-table {
    width: 100%; border-collapse: separate; border-spacing: 4px; margin: 4px 0 12px;
}
.schedule-table th { font-size: 12px; color: #555; font-weight: 600; text-align: center; }
.schedule-table td { padding: 0; }
.schedule-table input[type="time"] {
    width: 100%; padding: 4px 6px; border: 1px solid #d5d9df; border-radius: 6px;
    font-size: 13px;
}
.schedule-table .sch-day { text-align: left; font-weight: 700; color: #0b3d61; padding: 0 6px; }
.schedule-table tr.is-unavailable { background: #f2f4f7; }
.schedule-table tr.is-unavailable .sch-day { color: #999; text-decoration: line-through; }
.schedule-table tr.is-unavailable input[type="time"] { background: #eef1f4; color: #666; }
.sch-copy-all:disabled { opacity: 0.4; cursor: not-allowed; }
.modal::backdrop { background: rgba(20, 25, 30, 0.4); }
.modal h3 { margin: 0 0 8px; font-size: 18px; }
.modal p  { margin: 0 0 12px; color: #555; }
.modal .summary-table { margin-bottom: 12px; max-height: 40vh; }
.modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 12px;
}
.modal-actions .btn { min-width: 120px; margin: 0; }

/* ---------- Admin nav (tabs) ---------------------------------------- */
.admin-nav {
    background: #0b527f;
    color: #fff;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.admin-nav-inner {
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    gap: 4px;
    padding: 0 12px;
}
.admin-nav a {
    padding: 12px 14px;
    color: rgba(255,255,255,0.75);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
}
.admin-nav a:hover { color: #fff; }
.admin-nav a.active {
    color: #fff;
    border-bottom-color: #fff;
}

/* ---------- Period bar (dashboard) ---------------------------------- */
.period-bar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
}
.period-selector {
    display: flex;
    gap: 4px;
    background: #eef1f4;
    border-radius: 12px;
    padding: 4px;
}
.period-selector a {
    flex: 1;
    text-align: center;
    padding: 10px 8px;
    border-radius: 8px;
    color: #444;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
}
.period-selector a.active {
    background: #fff;
    color: #0e639c;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.period-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: space-between;
}
.period-nav .btn {
    min-width: 48px;
    padding: 8px 12px;
    font-size: 18px;
    min-height: 40px;
    margin: 0;
}
.period-label {
    flex: 1;
    text-align: center;
    font-weight: 600;
    font-size: 15px;
    text-transform: capitalize;
}
.period-today {
    display: flex;
    justify-content: center;
}
.period-today .btn {
    min-height: 36px;
    padding: 6px 16px;
    margin: 0;
}
.btn.btn-dark {
    color: #0e639c;
    background: #eef4fa;
    border-color: #cadff0;
    font-size: 13px;
}

/* ---------- Dashboard tables + grid --------------------------------- */
.grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
.grid-2 .col-stack { display: flex; flex-direction: column; gap: 16px; }
.section-title {
    margin: 0 0 12px;
    font-size: 15px;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
}
.muted { color: #6a6a6a; }

/* ---------- Grand total card --------------------------------------- */
.grand-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #0e639c 0%, #0b527f 100%);
    color: #fff;
}
.grand-label {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.85;
    font-weight: 600;
}
.grand-value {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}
.grand-qty {
    font-size: 14px;
    opacity: 0.85;
    font-variant-numeric: tabular-nums;
}
.grand-amount {
    font-size: 22px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ---------- Pending list ------------------------------------------ */
.pending-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.pending-list li {
    background: #fdecec;
    color: #7a1414;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 13px;
    border: 1px solid #f2c1c1;
}

/* ---------- Export row (placeholder for lot d) --------------------- */
.export-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
}
.export-row .btn { flex: 1; min-width: 140px; }
.btn.disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

/* ---------- Data tables (users / brands admin) --------------------- */
.table-scroll {
    overflow: visible;
    margin: 0 -20px;
    padding: 0 20px;
}
.data-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #f7f8fa;
    box-shadow: inset 0 -1px 0 #eef1f4;
}
.data-table {
    width: 100%;
    min-width: 640px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
}
.data-table th,
.data-table td {
    padding: 10px 8px;
    border-bottom: 1px solid #eef1f4;
    text-align: left;
    vertical-align: middle;
}
.data-table th {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #555;
    font-weight: 700;
    background: #f7f8fa;
}
.data-table td.num,
.data-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: #555; }
.row-muted { opacity: 0.55; }

/* ---------- Inline forms (add user / add brand) -------------------- */
.inline-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: end;
}
.inline-form label { margin: 0; }
.inline-form .btn { margin: 0; min-height: 44px; }

/* ---------- Row action buttons ------------------------------------ */
.row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.row-action-form { display: inline-flex; align-items: center; gap: 4px; margin: 0; }
.btn.btn-sm { min-height: 36px; padding: 6px 12px; font-size: 13px; margin: 0; }
.input-inline {
    min-height: 36px;
    padding: 6px 10px;
    font-size: 14px;
    border-radius: 8px;
}
.input-inline.wide   { min-width: 180px; }
.input-inline.narrow { width: 90px; text-align: right; }

/* ---------- Pills (status badges) ---------------------------------- */
.pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid transparent;
}
.pill-ok   { background: #e8f6ee; color: #0a5a2a; border-color: #b6e0c4; }
.pill-off  { background: #eef1f4; color: #555;    border-color: #d5d9df; }
.pill-warn { background: #fff4de; color: #7a4a00; border-color: #f2d7a3; }

/* ---------- Admin gets a wider content column on laptop ------------ */
body.admin .container {
    max-width: 1100px;
}

/* Full-width variant for pages that need it (schedule grid). */
body.admin-fullwidth .container {
    max-width: none;
    padding-left: 24px;
    padding-right: 24px;
}

/* ---------- Category pill (shops) ---------------------------------- */
.pill-cat-pdlc    { background: #eef4fa; color: #0b3d61; border-color: #cadff0; }
.pill-cat-andorra { background: #fff4de; color: #7a4a00; border-color: #f2d7a3; }

/* Distance-out-of-range badge in the fichaje log (red). */
.pill-far { background: #fdecec; color: #7a1414; border-color: #f2c1c1; }

/* Position input on the shops page — takes a "lat, lng" pasted from Google
   Maps. Wider than the previous 2 separate coord inputs. */
input.input-inline.position {
    width: 210px;
    min-width: 210px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
}

/* "Check posición" button in a disabled state (no GPS recorded / no coords). */
.btn.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    background: #eef1f4;
    color: #6a6a6a;
    border-color: #d5d9df;
    pointer-events: none;
}

/* Compact 5-column layout for the "Añadir tienda" form so everything fits
   on a single line on desktop admin-fullwidth. Position takes one column. */
@media (min-width: 640px) {
    .inline-form.form-shop-add {
        grid-template-columns: 2fr 1.3fr 1.6fr 0.7fr auto;
    }
}

/* Fichaje log : each column has a fixed width and the table itself does
   NOT stretch to the container. That way spacing between columns is even
   (no "gruyère" gaps) and any leftover width sits cleanly on the right. */
.clock-log-table {
    width: auto;
    min-width: 0;
    table-layout: fixed;
}
.clock-log-table th,
.clock-log-table td {
    white-space: nowrap;
    padding-left: 12px;
    padding-right: 12px;
}
.clock-log-table th:nth-child(1),
.clock-log-table td:nth-child(1) { width:  90px; font-variant-numeric: tabular-nums; }  /* Fecha    */
.clock-log-table th:nth-child(2),
.clock-log-table td:nth-child(2) { width: 180px; }                                       /* Promotor */
.clock-log-table th:nth-child(3),
.clock-log-table td:nth-child(3) { width: 180px; }                                       /* Tienda   */
.clock-log-table .col-time {
    width: 120px;
    text-align: right;
}
/* Extra 20 px of breathing room after Entrada, Salir, Vuelta, Salida and
   Duración de trabajo (columns 4→8). Duración de pausa (col 9) keeps the
   default padding so the leftover whitespace sits on the outside. */
.clock-log-table th:nth-child(4),  .clock-log-table td:nth-child(4),
.clock-log-table th:nth-child(5),  .clock-log-table td:nth-child(5),
.clock-log-table th:nth-child(6),  .clock-log-table td:nth-child(6),
.clock-log-table th:nth-child(7),  .clock-log-table td:nth-child(7),
.clock-log-table th:nth-child(8),  .clock-log-table td:nth-child(8) {
    width: 140px;
    padding-right: 32px;
}

.dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-left: 4px;
    vertical-align: middle;
    border: 1px solid rgba(0, 0, 0, .15);
    cursor: pointer;
    transition: transform 0.1s;
}
.dot:hover { transform: scale(1.4); }
.dot.is-disabled { cursor: not-allowed; opacity: 0.9; }
.dot.is-disabled:hover { transform: none; }
.dot-ok        { background: #2e7d32; }
.dot-far       { background: #c62828; }
.dot-no_gps    { background: #b6bcc4; }
.dot-imprecise { background: #f9a825; }
.dot-neutral   { background: #4463d8; }
.dot-manual    { background: #00e676; }  /* neon green : admin manual entry */

/* ---------- Panel : "Ventas por promotor" detailed breakdown -------- */
.promotor-detail {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.promotor-block {
    background: #fafbfc;
    border: 1px solid #e0e4e9;
    border-radius: 10px;
    padding: 12px 14px;
}
.promotor-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 2px solid #0e639c;
}
.promotor-name {
    font-weight: 700;
    font-size: 15px;
    color: #0b3d61;
}
.promotor-total {
    font-weight: 700;
    font-size: 15px;
    color: #0e639c;
    font-variant-numeric: tabular-nums;
}
/* Entrada manual : narrow phone-like column. Overrides the admin default
   1100px so the form feels mobile-first. */
body.admin-narrow .container {
    max-width: 480px;
    padding-left: 16px;
    padding-right: 16px;
}

/* Fichaje sub-section on the Entrada manual page. */
.em-clock .em-clock-hint { font-size: 13px; margin: 0 0 12px; }
.em-clock-form label { margin-top: 10px; }

/* Entrada manual : promotor picker layout. Wide select, big label. */
.em-selector { display: block; margin: 0; }
.em-selector label { margin: 0; display: block; }
.em-selector label > span {
    font-size: 13px; color: #555; margin-bottom: 6px; font-weight: 500;
}
.em-selector select { max-width: 400px; }

/* Fixed column widths across ALL promotor blocks : without this, each
   table auto-sizes to its own content and "Cantidad" ends up shifting
   left/right between promotors. */
.promotor-lines {
    font-size: 14px;
    table-layout: fixed;
    width: 100%;
}
.promotor-lines .col-marca  { width: 52%; }
.promotor-lines .col-qty    { width: 12%; }
.promotor-lines .col-price  { width: 16%; }
.promotor-lines .col-amount { width: 20%; }
.promotor-lines tfoot th { color: #0e639c; }
.promotor-lines tfoot th.col-qty { color: #0e639c; font-weight: 700; }

/* Compact promotor filter row + inline dots legend on the fichaje log. */
.filter-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0;
}
.filter-row label.filter-seller {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #555;
}
.filter-row label.filter-seller > span { margin: 0; }
.filter-row label.filter-seller select {
    width: 200px;
    min-width: 200px;
    min-height: 36px;
    padding: 6px 30px 6px 10px;
    font-size: 14px;
}
.dot-legend {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 13px;
    color: #555;
}
.dot-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.dot-legend .dot {
    cursor: default;
    margin: 0;
}
.dot-legend .dot:hover { transform: none; }

/* Fichaje log period bar : tight arrows near the label, range picker in
   the middle, tabs on the left, "Hoy" on the right. */
.clock-period-bar {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.clock-period-bar.card .period-nav {
    flex: 0 0 auto;
    justify-content: center;
    gap: 0;
}
.clock-period-bar.card .period-nav .period-label {
    text-align: center;
    padding: 0 15px;
    min-width: 0;
}
.clock-range {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 0;
}
.clock-range-lbl {
    font-size: 13px;
    color: #555;
    font-weight: 500;
}
.clock-range input[type="date"] {
    width: 145px;
    min-width: 145px;
    min-height: 36px;
    padding: 6px 8px;
    font-size: 14px;
}
.period-export {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 12px;
    padding-left: 12px;
    border-left: 1px solid #e0e4e9;
    flex: 0 0 auto;
}

/* Category select in inline-form : same look as the generic select */
.inline-form select { min-height: 44px; }

/* ---------- Schedule : mobile notice ------------------------------- */
/* Shown only under 768px. Above that the grid takes over. */
.schedule-mobile-notice {
    display: none;
    background: #fff4de;
    color: #7a4a00;
    border: 1px solid #f2d7a3;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    font-weight: 600;
    margin-bottom: 16px;
}
/* ---------- Schedule : mobile consultation view ------------------- */
.schedule-mobile-view { display: none; }
@media (max-width: 767px) {
    .schedule-mobile-notice { display: none; }
    .schedule-wrap          { display: none; }
    .schedule-mobile-view   { display: block; }
}
.sm-topbar {
    display: flex; align-items: center; gap: 6px;
    background: #fff; border-radius: 12px; padding: 6px 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,.05); margin-bottom: 10px;
    flex-wrap: wrap;
}
.sm-navbtn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 6px;
    background: #eef1f4; color: #1a1a1a; text-decoration: none;
    font-weight: 700; font-size: 14px;
}
.sm-navbtn:hover, .sm-navbtn:active { background: #e2e6ea; }
.sm-weeklabel { font-weight: 700; font-size: 13px; padding: 0 4px; }
.sm-condensed-toggle {
    margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600; color: #333;
}
.sm-condensed-toggle input { width: 16px; height: 16px; margin: 0; }
.schedule-mobile-view:has(#sm-condensed:checked) .sm-row.sm-week-empty { display: none; }

/* Sticky footer pool (mobile) */
.sm-pool-footer {
    position: fixed; left: 0; right: 0; bottom: 0;
    background: #fff; padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    box-shadow: 0 -2px 12px rgba(0,0,0,.12);
    display: flex; flex-wrap: wrap; gap: 5px;
    max-height: 32vh; overflow-y: auto;
    z-index: 30;
    border-top: 1px solid #d5d9df;
}
.sm-pool-badge {
    background: var(--sc); color: #fff;
    padding: 4px 8px; border-radius: 5px;
    font-size: 12px; font-weight: 600; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 4px;
}
.sm-pool-badge em { font-style: normal; font-size: 10px; opacity: 0.85; }
.sm-pool-badge.is-empty { opacity: 0.35; }
.sm-pool-badge { touch-action: none; user-select: none; -webkit-user-select: none; }
.sm-pool-badge.is-dragging { opacity: 0.4; }
.sm-drag-ghost {
    position: fixed; pointer-events: none; z-index: 100;
    opacity: 0.85; transform: scale(1.15);
    box-shadow: 0 6px 16px rgba(0,0,0,.3);
}
.sm-badges.is-drop-target {
    background: #d1f0d5; outline: 2px dashed #2e7d32; outline-offset: -2px;
}
.sm-badges.is-busy { opacity: 0.5; }
/* Reserve space under the day sections so the last row isn't hidden by the footer. */
.schedule-mobile-view { padding-bottom: 30vh; }
.sm-day {
    background: #fff; border-radius: 12px; margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,.05); overflow: hidden;
}
.sm-day-title {
    margin: 0; padding: 10px 14px; background: #eef4fa; color: #0b3d61;
    font-size: 15px; font-weight: 700;
    position: sticky; top: 0; z-index: 2;
}
.sm-day.is-weekend .sm-day-title { background: #fdecec; color: #7a1414; }
.sm-day-table { width: 100%; border-collapse: collapse; }
.sm-cathead td {
    padding: 6px 14px; font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.sm-cathead.cat-pdlc td    { background: #0e639c; color: #fff; }
.sm-cathead.cat-andorra td { background: #b7791f; color: #fff; }
.sm-row td {
    padding: 8px 14px; border-top: 1px solid #eef1f4; vertical-align: top;
    font-size: 13px;
}
.sm-row .sm-shop   { width: 45%; font-weight: 600; }
.sm-row .sm-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.sm-badge {
    background: var(--sc); color: #fff; padding: 3px 8px;
    border-radius: 4px; font-size: 12px; font-weight: 600; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 4px;
    user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
    touch-action: none;
}
.sm-badge.is-dragging { opacity: 0.4; }
/* Mobile pool acting as removal zone (dragging assigned badge over it) */
.sm-pool-footer.is-remove-zone {
    background: #fdecec;
    box-shadow: 0 -2px 12px rgba(198,40,40,.4);
}
/* Desktop pool acting as removal zone */
.schedule-pool.is-remove-zone {
    background: #fdecec;
    outline: 2px dashed #c62828; outline-offset: -4px;
    border-radius: 12px;
}
.sched-badge.is-dragging { opacity: 0.4; }

/* ---------- Schedule : toolbar --------------------------------------- */
.schedule-toolbar {
    background: #fff;
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
}
.schedule-weeknav {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
/* Single-day shift arrows (« / ») at the extreme edges of the week nav. */
.schedule-weeknav .db-shift {
    min-width: 34px;
    padding: 6px 10px;
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
}
.schedule-weeklabel {
    font-weight: 700;
    font-size: 15px;
    color: #0e639c;
    padding: 0 8px;
    text-transform: capitalize;
}
.schedule-actions {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.schedule-condensed-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    margin: 0; padding: 0 8px;
    font-size: 14px; color: #444;
    user-select: none;
}
.schedule-condensed-toggle input { width: 16px; height: 16px; margin: 0; min-height: 0; }

/* ---------- Schedule : grid ------------------------------------------ */
.schedule-grid-wrap {
    background: #fff;
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
    margin-bottom: 12px;
    overflow: visible;
}
.sched-corner, .sched-dayhead {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #eef4fa;
}
.sched-dayhead.is-weekend { background: #fdecec !important; }
.schedule-grid {
    display: grid;
    grid-template-columns: minmax(180px, 220px) repeat(7, minmax(120px, 1fr));
    gap: 4px;
    min-width: 900px;
}
.sched-corner, .sched-dayhead {
    background: #eef4fa;
    color: #0b3d61;
    font-weight: 700;
    font-size: 13px;
    padding: 8px 10px;
    border-radius: 6px;
    text-align: center;
}
.sched-corner { text-align: left; }
.sched-dayhead.is-weekend { background: #fdecec; color: #7a1414; }

.sched-cathead {
    grid-column: 1 / -1;
    margin-top: 6px;
}
.sched-cathead .sched-cattoggle {
    width: 100%;
    text-align: left;
    background: #0e639c;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 8px 12px;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.02em;
    display: flex; align-items: center; gap: 8px;
}
.sched-cathead.cat-andorra .sched-cattoggle { background: #b7791f; }
.sched-cattoggle .tri { font-size: 22px; line-height: 1; }
.sched-catcount { opacity: 0.8; font-weight: 500; }

.sched-row {
    display: contents;
}
.sched-row.is-cat-collapsed > *,
.sched-row.is-condensed-hidden > * {
    display: none;
}

.sched-shopname {
    background: #f7f8fa;
    font-weight: 600;
    font-size: 13px;
    padding: 8px 10px;
    border-radius: 6px;
    display: flex; align-items: center;
}
.sched-cell {
    background: #fafbfc;
    border: 1px dashed transparent;
    border-radius: 6px;
    min-height: 54px;
    padding: 4px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 3px;
}
.sched-cell.is-weekend { background: #fff7f7; }
.sched-cell.is-drophover {
    background: #eef4fa;
    border-color: #0e639c;
}
.sched-cell.is-busy { opacity: 0.6; pointer-events: none; }

.sched-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--sc, #0e639c);
    color: #fff;
    padding: 2px 4px 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
}
.sched-badge .badge-name { white-space: nowrap; }
.sched-badge .badge-x {
    background: rgba(255,255,255,.2);
    color: #fff;
    border: none;
    width: 18px; height: 18px;
    border-radius: 50%;
    font-size: 13px;
    line-height: 1;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.sched-badge .badge-x:hover { background: rgba(255,255,255,.35); }

/* ---------- Schedule : sellers pool --------------------------------- */
.schedule-pool {
    background: #fff;
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.pool-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 10px;
}
.pool-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.pool-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--sc, #eef4fa);
    color: #fff;
    border: 1px solid rgba(0,0,0,.15);
    padding: 5px 6px 5px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    cursor: grab;
    user-select: none;
    position: relative;
}
.pool-badge:active { cursor: grabbing; }
.pool-badge.is-dragging { opacity: 0.6; }
.pool-badge.is-empty {
    background: #f2f4f7; color: #999; border-color: #d5d9df;
    cursor: not-allowed; opacity: 0.7;
}
/* Green note indicator dot before the promotor name in the schedule pool.
   Clickable → opens the note-view modal. Red is reserved for pending absence conflict. */
.pool-badge .note-dot {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #2e7d32;
    box-shadow: 0 0 0 1.5px #fff;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.1s;
}
.pool-badge .note-dot:hover { transform: scale(1.3); }

/* Red blinking dot : pending absence request conflicting with the planning. */
@keyframes abs-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.25; }
}
.abs-dot {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #c62828;
    box-shadow: 0 0 0 1.5px #fff;
    flex-shrink: 0;
    animation: abs-blink 0.5s infinite;
    margin-right: 3px;
}
.sched-badge.has-abs-pending { outline: 2px solid #c62828; }

/* Nav submenu (hover-triggered dropdown, escapes clipping via fixed pos). */
.admin-nav-item.has-submenu { position: relative; display: inline-flex; }
.admin-nav-item.has-submenu > a {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 12px 14px; color: rgba(255,255,255,0.75);
    text-decoration: none; font-size: 14px; font-weight: 500;
    border-bottom: 3px solid transparent; white-space: nowrap;
}
.admin-nav-item.has-submenu > a:hover { color: #fff; }
.admin-nav-item.has-submenu > a.active,
.admin-nav-item.has-submenu.active > a { color: #fff; border-bottom-color: #fff; }
.admin-nav-item.has-submenu > a .caret { font-size: 10px; opacity: 0.7; line-height: 1; }
.admin-submenu {
    position: fixed; z-index: 1000;
    display: none; min-width: 200px;
    background: #0b527f; border-top: 1px solid rgba(255,255,255,0.15);
    box-shadow: 0 6px 14px rgba(0,0,0,0.25);
    border-radius: 0 0 8px 8px; padding: 4px 0;
}
.admin-submenu.is-open { display: block; }
.admin-submenu a {
    display: block; padding: 10px 16px;
    color: rgba(255,255,255,0.85); text-decoration: none;
    font-size: 14px; font-weight: 500; white-space: nowrap;
    border-bottom: none;
}
.admin-submenu a:hover { background: rgba(255,255,255,0.08); color: #fff; }
.admin-submenu a.active { color: #fff; background: rgba(255,255,255,0.12); }

/* Presencia */
.presencia-section { margin-bottom: 24px; }
.presencia-section h3 { margin: 0 0 2px; font-size: 16px; }
.presencia-section .sub {
    color: #5a6672; font-size: 13px; margin-bottom: 8px;
    display: flex; flex-wrap: wrap; gap: 14px;
}
.presencia-section .sub .k { color: #8a94a0; font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.04em; margin-right: 4px; }
.presencia-table .stack-plan { display: block; color: #8a94a0; font-size: 11px;
    line-height: 1.15; font-variant-numeric: tabular-nums; }
.presencia-table .stack-fich { display: block; color: #1a1a1a; font-size: 13px;
    line-height: 1.15; font-variant-numeric: tabular-nums; font-weight: 500; }
.presencia-table td { vertical-align: middle; }
.presencia-table td.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.presencia-table .diff-pos { color: #1b7a3e; font-weight: 600; }
.presencia-table .diff-neg { color: #c62828; font-weight: 600; }
.presencia-table tr.row-total td { border-top: 2px solid #d5d9df; font-weight: 700; background: #f7f9fb; }
.presencia-table tr.row-offday td { background: #fde8ec; }
.presencia-table tr.row-offday.row-total td { background: #f7f9fb; }
.presencia-table tr.row-absent td { background: #fbfbfb; color: #5a6672; font-style: italic; }
.presencia-table tr.row-absent td.num { font-style: normal; }
.presencia-flag {
    display: inline-block; width: 8px; height: 8px; margin-left: 6px;
    background: #c62828; border-radius: 50%; vertical-align: middle;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.6);
}

/* Nav badge (unread pending count above "Ausencias" tab). */
.admin-nav a { position: relative; }
.nav-badge {
    position: absolute; top: 2px; right: 4px;
    min-width: 18px; height: 18px; padding: 0 5px;
    background: #c62828; color: #fff;
    border-radius: 9px;
    font-size: 11px; font-weight: 700; line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 1.5px #0b527f;
}

/* Tiendas : table sans espace fantôme + input position plus étroit */
.shops-table { width: max-content; min-width: 0; }
.shops-table td { padding: 6px 8px; vertical-align: middle; }
.shops-table th { padding: 8px 8px; }
.shops-table .position { max-width: 190px; }

/* Modal semanas obligatorias por tienda */
.wk-list {
    max-height: 340px;
    overflow-y: auto;
    border: 1px solid #d5d9df; border-radius: 8px;
    padding: 4px; margin: 6px 0 12px;
}
.wk-row {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 8px; border-bottom: 1px dashed #eef1f4;
    font-size: 13px; cursor: pointer; margin: 0;
}
.wk-row:last-child { border-bottom: none; }
.wk-row:hover { background: #f7f8fa; }
.wk-row input[type="checkbox"] { width: 16px; height: 16px; margin: 0; }
.wk-row strong { color: #0b3d61; min-width: 44px; }
.wk-row .wk-dates { color: #555; }

/* Liseré 1 px sur les cases du planning en fonction de l'obligation. */
.sched-cell.req-filled { box-shadow: inset 0 0 0 1px #2e7d32; }
.sched-cell.req-empty  { box-shadow: inset 0 0 0 1px #3FA8EE; }

/* Pool badge : rose pâle si le promoteur a une absence acceptée qui touche la semaine visible. */
/* Règle : lettrage gris = promoteur indisponible (fond rose pour absence acceptée). */
.pool-badge.is-absent {
    background: #fdecec;
    color: #7a7a7a;
    border-color: #d5d9df;   /* même filet gris que les badges .is-empty */
    opacity: 1;
    cursor: not-allowed;
}
.pool-badge.is-absent .pb-counter { background: #d5d9df; color: #666; }

/* Bouton "Esta semana · S31" un poil plus large. */
.sched-this-week { min-width: 130px; }

/* Ausencias : filtre historial vraiment sur 1 ligne */
.abs-history-filter {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: center;
    margin: 0 0 12px;
    overflow-x: auto;         /* scroll horizontal si écran très étroit */
}
.abs-history-filter .abs-dates-inline {
    display: flex; align-items: center; gap: 4px; flex-shrink: 0;
}
.abs-history-filter input[type="date"],
.abs-history-filter select {
    min-height: 34px; padding: 4px 8px; border: 1px solid #d5d9df;
    border-radius: 6px; font-size: 13px;
    flex: 0 0 auto;          /* ne s'étire jamais */
}
.abs-history-filter input[type="date"] { width: 140px; }
.abs-history-filter select { width: 180px; }
.abs-hide-check {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 13px; white-space: nowrap; flex-shrink: 0;
}
.abs-hide-check input { width: 16px; height: 16px; margin: 0; }
.abs-history-filter .btn { flex-shrink: 0; }

/* Fichaje manual — todo en una sola línea, alineado abajo. */
#manual-clock-banner .mc-form {
    display: flex; flex-wrap: nowrap; gap: 16px; align-items: flex-end;
    overflow-x: auto;
}
#manual-clock-banner select,
#manual-clock-banner input[type="date"],
#manual-clock-banner input[type="time"] {
    min-height: 34px; padding: 4px 8px; border: 1px solid #d5d9df;
    border-radius: 6px; font-size: 13px; flex: 0 0 auto;
}
#manual-clock-banner select { width: 200px; }
#manual-clock-banner input[type="date"] { width: 150px; }
#manual-clock-banner input[type="time"] { width: 96px; font-variant-numeric: tabular-nums; }
.mc-mom-inline { display: flex; flex-direction: column; gap: 3px; flex: 0 0 auto; }
.mc-mom-head { display: flex; align-items: baseline; gap: 8px; padding-left: 2px; }
.mc-mom-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: #5a6672; font-weight: 600; }
.mc-plan { font-size: 11px; color: #8a94a0; font-variant-numeric: tabular-nums; }
#manual-clock-banner .btn { flex-shrink: 0; margin-left: 4px; }

/* Formulaire manuel de saisie d'ausencia (une seule ligne). */
.abs-manual-form {
    display: flex; flex-wrap: nowrap; gap: 8px; align-items: center;
    overflow-x: auto;
}
.abs-manual-form input[type="date"],
.abs-manual-form select {
    min-height: 34px; padding: 4px 8px; border: 1px solid #d5d9df;
    border-radius: 6px; font-size: 13px; flex: 0 0 auto;
}
.abs-manual-form input[type="date"] { width: 140px; }
.abs-manual-form select[name="user_id"] { width: 200px; }
.abs-manual-form select[name="motivo_id"] { width: 160px; }
.abs-manual-form .btn { flex-shrink: 0; }

/* Yellow warning triangle on Ausencias rows with planning conflict. */
.abs-warn {
    display: inline-block;
    color: #b7791f; font-size: 15px; font-weight: 700;
    margin-left: 6px;
    cursor: help;
}

/* Absences modal list (accepted list on Promotor page). */
.abs-modal-list { max-height: 60vh; overflow-y: auto; }
.abs-modal-ul { list-style: none; padding: 0; margin: 8px 0 0; }
.abs-modal-ul li { padding: 6px 0; border-bottom: 1px solid #eef1f4; font-size: 14px; }

/* Vendor absence panel (expand-in-place, not modal). */
.my-absences { background: #fff; border-radius: 14px; padding: 12px 14px; margin-top: 16px;
               box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.my-absences-counts { margin: 6px 0 8px; font-size: 13px; }
.abs-count-link { color: #0e639c; text-decoration: underline; }
.abs-panel { margin-top: 10px; }
.abs-form label { display: block; margin-bottom: 10px; }
.abs-form label > span { display: block; font-size: 12px; color: #555; margin-bottom: 4px; text-transform: uppercase; }
.abs-form .abs-dates { display: flex; gap: 6px; align-items: center; }
.abs-form .abs-dates input[type="date"] { flex: 1; min-height: 40px; padding: 6px 8px; border-radius: 8px; border: 1px solid #d5d9df; }
.abs-form select { min-height: 40px; padding: 6px 8px; border-radius: 8px; border: 1px solid #d5d9df; width: 100%; }
.abs-total { margin: 4px 0 12px; }
.abs-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.abs-pending-list { list-style: none; padding: 0; margin: 0; }
.abs-pending-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px;
                       padding: 8px 0; border-bottom: 1px solid #eef1f4; font-size: 13px; }
.abs-pending-list li:last-child { border-bottom: none; }

.pool-badge .pb-counter {
    background: #fff;
    color: var(--sc, #0e639c);
    font-style: normal;
    font-weight: 700;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}
.pool-badge.is-empty .pb-counter { background: #d5d9df; color: #666; }

/* Floating "free days" tooltip, shown on hover only when the counter is
   between 1 and 6 (updated live by schedule.js). */
.pool-tip {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #222;
    color: #fff;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    z-index: 30;
    box-shadow: 0 4px 12px rgba(0,0,0,.25);
    pointer-events: none;
}
.pool-tip::after {
    content: '';
    position: absolute;
    top: 100%; left: 50%; transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #222;
}
.pool-badge:hover .pool-tip:not([hidden]) { display: block; }

/* ---------- Users : compact "Añadir promotor" bar ------------------ */
/* Small, low-height row : narrow name + narrower usuario + tiny Guardar
   + Ver todos toggle. Frees vertical space on the Promotor tab. */
.users-add-card { padding: 12px 14px; }
.form-user-add {
    display: flex;
    align-items: end;
    gap: 10px;
    grid-template-columns: none;
    margin: 0;
}
.form-user-add label { margin: 0; flex-shrink: 0; }
.form-user-add label > span { font-size: 12px; margin-bottom: 4px; }
.form-user-add label input {
    min-height: 36px;
    padding: 6px 10px;
    font-size: 13px;
}
.form-user-add label:nth-of-type(1) input { width: 200px; }
.form-user-add label:nth-of-type(2) input { width: 160px; }
.form-user-add .btn { margin: 0; align-self: end; }

/* Compact fonts for the display_name input and the read-only username. */
.users-table {
    width: max-content;       /* le tableau fait exactement la largeur du contenu, plus jamais d'espace fantôme */
    min-width: 0;
}
.users-table td { vertical-align: middle; padding: 6px 8px; }
.users-table th { padding: 8px 8px; }
.users-table .row-actions { gap: 4px; flex-wrap: nowrap; }
.users-table .un-checkboxes { gap: 2px; }
.users-table .un-check { padding: 2px 4px; min-width: 26px; }
/* Pills Estado/Contraseña : padding réduit → colonnes plus étroites */
.users-table .pill { padding: 3px 6px; font-size: 11px; }
/* Cellules toggle Fichaje/GPS : padding minimal pour resserrer avec Contraseña */
.users-table td.cell-toggle, .users-table th.cell-toggle { padding-left: 2px; padding-right: 2px; }
.users-table .users-display {
    font-size: 13px;
    max-width: 180px;
}
.users-table .users-username {
    display: inline-block;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    color: #6a6a6a;
    padding: 6px 10px;
    background: transparent;
    border: none;
}

/* Nota button : white paper icon with a red dot indicator if a note exists. */
.note-btn { position: relative; padding-left: 10px; padding-right: 10px; }
.note-btn.has-note::after {
    content: '';
    position: absolute;
    top: 3px; right: 3px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #2e7d32;
    box-shadow: 0 0 0 1.5px #fff;
}
/* Icon-only buttons in the Promotor row : bigger emoji, no border. */
.icon-btn {
    background: transparent;
    border: none;
    padding: 2px 4px;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.75;
    transition: opacity 0.1s, transform 0.1s;
    position: relative;
}
.icon-btn:hover  { opacity: 1; }
.icon-btn:active { transform: scale(0.92); }
.icon-btn.has-note::after,
.icon-btn.has-schedule::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 8px; height: 8px;
    border-radius: 50%;
    box-shadow: 0 0 0 1.5px #fff;
}
.icon-btn.has-note::after      { background: #2e7d32; }
.icon-btn.has-schedule::after  { background: #2e7d32; }
.unlock-form input[type="date"] { max-width: 130px; padding: 4px 6px; font-size: 12px; }
/* Schedule button : green dot indicator if a schedule is set. */
.schedule-btn { position: relative; padding-left: 10px; padding-right: 10px; }
.schedule-btn.has-schedule::after {
    content: '';
    position: absolute;
    top: 3px; right: 3px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #2e7d32;
    box-shadow: 0 0 0 1.5px #fff;
}

/* ---------- Users : "No disponibles" checkboxes (vertical stack) ---- */
/* Each cell = day letter on top, checkbox below → very compact, leaves
   room for the new Fichaje / GPS columns on the same row. */
.un-checkboxes {
    display: flex;
    gap: 4px;
    flex-wrap: nowrap;
    white-space: nowrap;
}
.un-check {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 4px 6px;
    background: #f7f8fa;
    border: 1px solid #d5d9df;
    border-radius: 6px;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    margin: 0;
    min-width: 32px;
}
.un-check input {
    width: 14px; height: 14px; margin: 0; min-height: 0;
}
.un-check:has(input:checked) {
    background: #fdecec;
    border-color: #f2c1c1;
    color: #7a1414;
    font-weight: 700;
}

/* Fichaje / GPS single-toggle cells in the Promotor table : just a big
   centered checkbox for a quick on/off scan. */
.data-table td.cell-toggle,
.data-table th.cell-toggle { text-align: center; }
.data-table td.cell-toggle input[type="checkbox"] {
    width: 20px; height: 20px; margin: 0; min-height: 0; cursor: pointer;
}
/* .un-form obsolete since the row commit is unified into the save_all form. */

/* Row-level "Guardar" : posé juste après les icônes, sans push auto vers la
   droite (qui élargissait tout le TD Acciones et créait un grand blanc entre
   les jours "No disponibles" et le premier icône). */
.row-actions .row-save {
    margin-left: 6px;
    padding-left: 12px;
    padding-right: 12px;
}

/* ---------- Bypass modal ------------------------------------------- */
.modal-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px;
    background: #fff4de;
    border: 1px solid #f2d7a3;
    border-radius: 8px;
    margin: 12px 0;
    font-size: 14px;
    color: #7a4a00;
    cursor: pointer;
}
.modal-check input {
    width: 18px; height: 18px; margin: 2px 0 0; min-height: 0; flex-shrink: 0;
}

/* ---------- Fichaje (clocking block on entry.php) ------------------- */
.clock-block {
    margin-top: 20px;
    background: #fff;
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.clock-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #e8f6ee;
    color: #0a5a2a;
    border: 1px solid #b6e0c4;
    font-weight: 500;
    font-size: 14px;
    min-height: 48px;
}
.clock-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px; height: 24px;
    background: #0a5a2a;
    color: #fff;
    border-radius: 50%;
    font-size: 14px;
    flex-shrink: 0;
}
.clock-item strong { font-weight: 700; }
.clock-btn { margin-top: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.clock-btn.is-loading { opacity: 0.6; cursor: wait; }
.clock-expected {
    display: block; font-size: 11px; font-weight: 400; opacity: 0.85;
    text-transform: none; letter-spacing: 0;
}
.clock-rgpd {
    text-align: center;
    margin: 8px 0 0;
    font-size: 12px;
}
.clock-rgpd a {
    color: #6a6a6a;
    text-decoration: underline;
    text-decoration-color: #cbd0d6;
}
.clock-rgpd a:hover { color: #0e639c; }

/* ---------- Ajustes toggle ------------------------------------------ */
.settings-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 15px;
    cursor: pointer;
    user-select: none;
}
.settings-toggle input { width: 20px; height: 20px; margin: 0; min-height: 0; }

/* ---------- Seller "Mi planificación" (entry.php) ------------------- */
.my-schedule { margin-top: 20px; }
.my-schedule-toggle .tri { margin-left: 6px; font-size: 12px; }
.my-schedule-panel {
    margin-top: 10px;
    background: #fff;
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.my-schedule-list { list-style: none; margin: 0; padding: 0; }
.my-schedule-list li {
    padding: 10px 4px;
    border-bottom: 1px solid #eef1f4;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: baseline;
}
.my-schedule-list li:last-child { border-bottom: none; }
.mp-date { text-transform: capitalize; color: #555; font-size: 13px; }
.mp-shop { font-weight: 600; color: #0e639c; }

/* Week navigation bar inside the fetched fragment. */
.ms-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eef1f4;
}
.ms-nav .ms-arrow {
    min-width: 44px;
    font-size: 18px;
    padding: 6px 10px;
    margin: 0;
}
.ms-weeklabel {
    flex: 1;
    text-align: center;
    font-weight: 700;
    color: #0e639c;
    font-size: 14px;
}
.ms-empty { text-align: center; padding: 16px 0; margin: 0; }

/* ---------- Tablet / desktop tweaks ------------------------------- */
@media (min-width: 640px) {
    .container { padding: 24px; }
    .brand-name { font-size: 16px; }
    .grid-2 { grid-template-columns: 1fr 1fr; }
    .period-bar {
        flex-direction: row;
        align-items: center;
        gap: 20px;
    }
    .period-bar .period-selector { flex: 0 0 auto; }
    .period-bar .period-nav      { flex: 1; }
    .period-bar .period-today    { flex: 0 0 auto; }
    .inline-form {
        grid-template-columns: 2fr 1fr 1fr auto;
        gap: 14px;
    }
    .table-scroll { margin: 0; padding: 0; }
}