/* ============================================================
   ADMIN — Subtabs, table, textarea, actions, tiered pricing
   ============================================================ */

.admin-subtabs { display: flex; gap: 4px; margin-bottom: 24px; border-bottom: 1px solid var(--border-light); padding-bottom: 0; }
.admin-subtab { padding: 10px 20px; font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 500; color: var(--muted); background: none; border: none; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.2s; letter-spacing: 0.02em; margin-bottom: -1px; }
.admin-subtab:hover { color: var(--charcoal); }
.admin-subtab.active { color: var(--gold); border-bottom-color: var(--gold); }
.admin-sub-content { display: none; }
.admin-sub-content.active { display: block; }

.admin-back { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--border); background: var(--white); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; flex-shrink: 0; }
.admin-back:hover { border-color: var(--gold); color: var(--gold); }

.admin-textarea { border: 1.5px solid var(--border); border-radius: 10px; padding: 12px 14px !important; resize: vertical; min-height: 120px; line-height: 1.6; font-size: 14px; }
.admin-textarea:focus { border-color: var(--gold); }

/* Admin Table */
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table thead { background: var(--cream); }
.admin-table th { font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border-light); }
.admin-table td { font-size: 13px; padding: 14px 16px; border-bottom: 1px solid var(--border-light); color: var(--charcoal); }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: var(--gold-bg); }

.admin-table .pkg-name { font-weight: 500; }
.admin-table .pkg-code { font-size: 11px; color: var(--muted); font-family: monospace; }
.admin-table .pkg-range { font-weight: 400; }
.admin-table .pkg-price { font-weight: 600; color: var(--gold); }

.admin-actions { display: flex; gap: 6px; }
.admin-action-btn { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border); background: var(--white); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; }
.admin-action-btn:hover { border-color: var(--gold); color: var(--gold); }
.admin-action-btn.delete:hover { border-color: var(--red); color: var(--red); }
.admin-action-btn svg { width: 14px; height: 14px; }
.admin-action-btn.copy { color: var(--gold); }
.admin-action-btn.copy:hover { background: var(--gold-bg); }

/* ============================================================
   Tiered pricing dropdown in admin Adicionales table
   ============================================================ */
.tarifas-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px 6px 14px;
    background: var(--gold-bg);
    border: 1px solid var(--gold-pale);
    border-radius: 999px;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.tarifas-toggle:hover {
    background: #f5ecd6;
    border-color: var(--gold-light);
}
.tarifas-toggle-precio {
    font-size: 13px;
    font-weight: 500;
    color: var(--gold);
    letter-spacing: 0.2px;
}
.tarifas-toggle-count {
    font-size: 10.5px;
    color: var(--charcoal-light);
    padding: 2px 8px;
    background: #fff;
    border-radius: 999px;
    border: 1px solid var(--border-light);
    font-weight: 400;
}
.tarifas-toggle-chev {
    width: 13px;
    height: 13px;
    color: var(--charcoal-light);
    transition: transform .25s ease;
}
.tarifas-toggle.open .tarifas-toggle-chev {
    transform: rotate(180deg);
}

.tarifas-sub-row > td {
    background: #fcfaf5;
    border-top: 1px solid var(--border-light);
    padding: 0;
}
.tarifas-sub-wrap {
    padding: 18px 28px 20px;
    border-left: 3px solid var(--gold);
}
.tarifas-sub-header {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--border-light);
}
.tarifas-sub-title {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
}
.tarifas-sub-desc {
    font-size: 12px;
    color: var(--muted);
    font-weight: 300;
}

.tarifas-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.tarifa-row {
    display: grid;
    grid-template-columns: minmax(190px, 1fr) 2fr auto;
    align-items: center;
    gap: 16px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: 8px;
}
.tarifa-rango {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--charcoal);
}
.tarifa-icon-personas {
    width: 16px;
    height: 16px;
    color: var(--charcoal-light);
    flex-shrink: 0;
}
.tarifa-rango-num {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.2px;
}
.tarifa-rango-label {
    font-size: 11px;
    color: var(--muted);
    font-weight: 300;
}
.tarifa-desc {
    font-size: 12.5px;
    color: var(--charcoal-light);
    font-style: italic;
}
.tarifa-precio {
    font-size: 14px;
    font-weight: 600;
    color: var(--gold);
    text-align: right;
    white-space: nowrap;
}
/* Monthly extras (hora/persona extra) — full-width second line inside the row */
.tarifa-extras {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--border-light);
}
.tarifa-extra-item {
    font-size: 12px;
    color: var(--charcoal-light);
}
.tarifa-extra-item .lbl {
    color: var(--muted);
    font-weight: 300;
}
.tarifa-extra-item .val { font-weight: 600; }
.tarifa-extra-item .val.is-base {
    font-weight: 400;
    color: var(--muted);
}

@media (max-width: 720px) {
    .tarifa-row {
        grid-template-columns: 1fr auto;
        gap: 8px 12px;
    }
    .tarifa-desc {
        grid-column: 1 / -1;
        margin-top: 2px;
    }
    .tarifas-sub-wrap {
        padding: 14px 18px 16px;
    }
}

/* vs Base chip (used in monthly-prices: form table + table sub-row) */
.vs-base-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2px;
    white-space: nowrap;
}
.vs-base-chip.up   { background: #e8f5e9; color: #1f7a25; }
.vs-base-chip.down { background: #fde8e8; color: #b13b3b; }
.vs-base-chip.flat { background: #f4f4f4; color: #888; }

/* ============================================================
   USUARIOS — sub-tab badge, filter chips, search bar, avatar,
   role chip, pagination, password generator.
   ============================================================ */

/* Sub-tab counter chip (next to "Usuarios" label) */
.admin-subtab-count {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--gold);
    background: var(--gold-bg);
    border-radius: 10px;
    letter-spacing: 0.02em;
}
.admin-subtab.active .admin-subtab-count {
    background: var(--gold);
    color: var(--white);
}

/* Filters row: chips on the left, search on the right */
.usr-filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.usr-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.usr-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.18s;
    letter-spacing: 0.02em;
}
.usr-chip:hover { border-color: var(--gold); color: var(--charcoal); }
.usr-chip.active {
    background: var(--gold-bg);
    border-color: var(--gold);
    color: var(--gold);
}
.usr-chip-count {
    display: inline-block;
    min-width: 18px;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    color: var(--muted);
    background: var(--cream);
    border-radius: 10px;
}
.usr-chip.active .usr-chip-count {
    color: var(--gold);
    background: var(--white);
}

.usr-search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 320px;
    max-width: 480px;
}
.usr-search-input {
    flex: 1;
    padding: 9px 14px;
    font-size: 13px;
}
.usr-search-btn {
    padding: 9px 18px;
    font-size: 12px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* User cell (avatar + name + id) */
.usr-cell-user {
    display: flex;
    align-items: center;
    gap: 12px;
}
.usr-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    flex-shrink: 0;
    user-select: none;
}
.usr-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--charcoal);
    line-height: 1.3;
}
.usr-id {
    font-size: 10px;
    color: var(--muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    line-height: 1.2;
    margin-top: 2px;
}
.usr-you {
    font-size: 10px;
    font-weight: 400;
    color: var(--gold);
    font-style: italic;
}
.usr-email {
    font-size: 12px;
    color: var(--charcoal-light);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.usr-ultimo {
    font-size: 12px;
    color: var(--charcoal-light);
}

/* Role chip */
.usr-rol-chip {
    display: inline-block;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 500;
    border-radius: 12px;
    letter-spacing: 0.02em;
}
.usr-rol-admin {
    background: var(--gold-bg);
    color: var(--gold);
    border: 1px solid var(--gold);
}
.usr-rol-emp {
    background: var(--cream);
    color: var(--charcoal-light);
    border: 1px solid var(--border);
}

/* Pagination */
.usr-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 8px 4px;
    gap: 12px;
    flex-wrap: wrap;
}
.usr-pagination-info {
    font-size: 12px;
    color: var(--muted);
}
.usr-pagination-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}
.usr-pagination-current {
    font-size: 12px;
    color: var(--charcoal-light);
}
.usr-page-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--white);
    color: var(--charcoal);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.18s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.usr-page-btn:hover:not(:disabled) {
    border-color: var(--gold);
    color: var(--gold);
}
.usr-page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Password input + Generate button (form view) */
.usr-pwd-wrap {
    display: flex;
    align-items: stretch;
    gap: 8px;
}
.usr-pwd-input { flex: 1; }
.usr-pwd-generate {
    padding: 0 14px;
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gold);
    background: var(--white);
    border: 1px solid var(--gold);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.18s;
    white-space: nowrap;
}
.usr-pwd-generate:hover {
    background: var(--gold-bg);
}

/* Disabled inputs in edit mode (email, rol) */
.input-disabled {
    background: var(--cream) !important;
    color: var(--muted) !important;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Password reveal modal (shown after create / reset_password) */
.modal-pwd-reveal { max-width: 520px; }
.pwd-reveal-box {
    margin: 18px 0 22px;
    padding: 16px 18px;
    background: var(--gold-bg);
    border: 1px dashed var(--gold);
    border-radius: 12px;
    text-align: center;
}
.pwd-reveal-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 6px;
}
.pwd-reveal-value {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 18px;
    font-weight: 600;
    color: var(--charcoal);
    letter-spacing: 0.04em;
    word-break: break-all;
    user-select: all;
}

/* Responsive — stack filters on narrow screens */
@media (max-width: 640px) {
    .usr-filters {
        flex-direction: column;
        align-items: stretch;
    }
    .usr-search-bar {
        max-width: 100%;
    }
    .usr-pagination {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }
}