/**
 * PushCenter — componentes de interfaz.
 * Botones, tarjetas, formularios, tablas, badges, modales, avisos, pestañas,
 * pasos, toasts y estados vacíos.
 */

/* ------------------------------------------------------------------ */
/* Botones                                                             */
/* ------------------------------------------------------------------ */

.pc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .55rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--pc-radius);
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color var(--pc-transition), border-color var(--pc-transition),
        color var(--pc-transition), box-shadow var(--pc-transition), transform .08s ease;
}

.pc-btn:hover { text-decoration: none; }
.pc-btn:active:not(:disabled) { transform: translateY(1px); }

.pc-btn:disabled,
.pc-btn.is-disabled {
    opacity: .55;
    cursor: not-allowed;
    pointer-events: none;
}

.pc-btn-primary {
    background: var(--pc-primary);
    color: var(--pc-primary-text);
    box-shadow: var(--pc-shadow-sm);
}

.pc-btn-primary:hover { background: var(--pc-primary-hover); color: var(--pc-primary-text); }

.pc-btn-secondary {
    background: var(--pc-surface);
    color: var(--pc-text);
    border-color: var(--pc-border-strong);
}

.pc-btn-secondary:hover { background: var(--pc-surface-hover); }

.pc-btn-ghost {
    background: transparent;
    color: var(--pc-text-soft);
}

.pc-btn-ghost:hover { background: var(--pc-surface-hover); color: var(--pc-text); }

.pc-btn-danger { background: var(--pc-danger); color: #fff; }
.pc-btn-danger:hover { filter: brightness(.93); color: #fff; }

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

.pc-btn-success { background: var(--pc-success); color: #fff; }
.pc-btn-success:hover { filter: brightness(.93); color: #fff; }

.pc-btn-sm { padding: .35rem .7rem; font-size: .82rem; border-radius: var(--pc-radius-sm); }
.pc-btn-lg { padding: .75rem 1.5rem; font-size: 1rem; border-radius: var(--pc-radius-lg); }

.pc-btn-icon {
    padding: .5rem;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--pc-radius);
}

.pc-btn-block { display: flex; width: 100%; }

/* Estado de carga: el texto se atenúa y aparece un giro. */
.pc-btn.is-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.pc-btn.is-loading::after {
    content: "";
    position: absolute;
    width: 15px;
    height: 15px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: pc-spin .6s linear infinite;
    color: var(--pc-primary-text);
}

.pc-btn-secondary.is-loading::after,
.pc-btn-ghost.is-loading::after { color: var(--pc-text); }

@keyframes pc-spin { to { transform: rotate(360deg); } }

.pc-btn-group {
    display: inline-flex;
    border-radius: var(--pc-radius);
    overflow: hidden;
    border: 1px solid var(--pc-border-strong);
}

.pc-btn-group .pc-btn {
    border-radius: 0;
    border: 0;
    border-right: 1px solid var(--pc-border);
    background: var(--pc-surface);
    color: var(--pc-text-soft);
}

.pc-btn-group .pc-btn:last-child { border-right: 0; }
.pc-btn-group .pc-btn.is-active { background: var(--pc-primary); color: var(--pc-primary-text); }

/* ------------------------------------------------------------------ */
/* Tarjetas                                                            */
/* ------------------------------------------------------------------ */

.pc-card {
    background: var(--pc-surface);
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius-lg);
    box-shadow: var(--pc-shadow-sm);
}

.pc-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.05rem 1.25rem;
    border-bottom: 1px solid var(--pc-border);
}

.pc-card-title { font-size: 1rem; font-weight: 650; margin: 0; }
.pc-card-body { padding: 1.25rem; }
.pc-card-body.is-flush { padding: 0; }

.pc-card-foot {
    padding: .9rem 1.25rem;
    border-top: 1px solid var(--pc-border);
    background: var(--pc-surface-2);
    border-radius: 0 0 var(--pc-radius-lg) var(--pc-radius-lg);
}

.pc-card-hover { transition: box-shadow var(--pc-transition), transform var(--pc-transition); }
.pc-card-hover:hover { box-shadow: var(--pc-shadow-md); transform: translateY(-2px); }

/* ------------------------------------------------------------------ */
/* Tarjeta de indicador (KPI)                                          */
/* ------------------------------------------------------------------ */

.pc-kpi {
    background: var(--pc-surface);
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius-lg);
    padding: 1.15rem 1.25rem;
    box-shadow: var(--pc-shadow-sm);
    display: flex;
    flex-direction: column;
    gap: .35rem;
    position: relative;
    overflow: hidden;
}

.pc-kpi-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.pc-kpi-label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--pc-text-soft);
}

.pc-kpi-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--pc-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pc-primary-soft);
    color: var(--pc-primary);
    flex-shrink: 0;
}

.pc-kpi-value {
    font-size: 1.85rem;
    font-weight: 700;
    letter-spacing: -.025em;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.pc-kpi-delta {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    font-size: .82rem;
    font-weight: 600;
}

.pc-kpi-delta.is-up { color: var(--pc-success); }
.pc-kpi-delta.is-down { color: var(--pc-danger); }
.pc-kpi-delta.is-flat { color: var(--pc-text-faint); }

.pc-kpi-spark { margin-top: .35rem; height: 34px; }

/* ------------------------------------------------------------------ */
/* Formularios                                                         */
/* ------------------------------------------------------------------ */

.pc-field { margin-bottom: 1.1rem; }

.pc-label {
    display: block;
    margin-bottom: .35rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--pc-text);
}

.pc-label .pc-req { color: var(--pc-danger); margin-left: .15rem; }

.pc-help {
    margin-top: .3rem;
    font-size: .8rem;
    color: var(--pc-text-soft);
}

.pc-input,
.pc-select,
.pc-textarea {
    width: 100%;
    padding: .55rem .75rem;
    font: inherit;
    font-size: .92rem;
    color: var(--pc-text);
    background: var(--pc-surface);
    border: 1px solid var(--pc-border-strong);
    border-radius: var(--pc-radius);
    transition: border-color var(--pc-transition), box-shadow var(--pc-transition);
}

.pc-input:focus,
.pc-select:focus,
.pc-textarea:focus {
    outline: none;
    border-color: var(--pc-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc-primary) 18%, transparent);
}

.pc-input::placeholder, .pc-textarea::placeholder { color: var(--pc-text-faint); }

.pc-input:disabled, .pc-select:disabled, .pc-textarea:disabled {
    background: var(--pc-surface-hover);
    cursor: not-allowed;
    opacity: .75;
}

.pc-textarea { min-height: 92px; resize: vertical; line-height: 1.5; }

.pc-select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .6rem center;
    background-size: 16px;
    padding-right: 2rem;
}

.pc-input.is-invalid, .pc-select.is-invalid, .pc-textarea.is-invalid {
    border-color: var(--pc-danger);
}

.pc-error {
    margin-top: .3rem;
    font-size: .8rem;
    color: var(--pc-danger);
}

.pc-input-group { display: flex; }
.pc-input-group .pc-input { border-radius: var(--pc-radius) 0 0 var(--pc-radius); }
.pc-input-group .pc-btn { border-radius: 0 var(--pc-radius) var(--pc-radius) 0; }

.pc-input-icon { position: relative; }

.pc-input-icon .pc-icon {
    position: absolute;
    left: .65rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--pc-text-faint);
    pointer-events: none;
}

.pc-input-icon .pc-input { padding-left: 2.25rem; }

/* Casillas e interruptores */

.pc-check {
    display: inline-flex;
    align-items: flex-start;
    gap: .55rem;
    cursor: pointer;
    font-size: .9rem;
    user-select: none;
}

.pc-check input { margin-top: .18rem; width: 16px; height: 16px; accent-color: var(--pc-primary); cursor: pointer; }

.pc-switch {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    cursor: pointer;
    user-select: none;
}

.pc-switch input { position: absolute; opacity: 0; width: 0; height: 0; }

.pc-switch-track {
    width: 40px;
    height: 22px;
    border-radius: 999px;
    background: var(--pc-border-strong);
    position: relative;
    transition: background var(--pc-transition);
    flex-shrink: 0;
}

.pc-switch-track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--pc-shadow-sm);
    transition: transform var(--pc-transition);
}

.pc-switch input:checked + .pc-switch-track { background: var(--pc-primary); }
.pc-switch input:checked + .pc-switch-track::after { transform: translateX(18px); }
.pc-switch input:focus-visible + .pc-switch-track { outline: 2px solid var(--pc-primary); outline-offset: 2px; }

/* Tarjetas seleccionables (tipo radio) */

.pc-radio-cards { display: grid; gap: .7rem; }

.pc-radio-card {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .85rem 1rem;
    border: 1.5px solid var(--pc-border);
    border-radius: var(--pc-radius);
    cursor: pointer;
    transition: border-color var(--pc-transition), background var(--pc-transition);
}

.pc-radio-card:hover { border-color: var(--pc-border-strong); }

.pc-radio-card input { margin-top: .2rem; accent-color: var(--pc-primary); }

.pc-radio-card:has(input:checked) {
    border-color: var(--pc-primary);
    background: var(--pc-primary-soft);
}

.pc-radio-card-title { font-weight: 620; font-size: .92rem; }
.pc-radio-card-desc { font-size: .82rem; color: var(--pc-text-soft); }

/* Contador de caracteres */

.pc-counter {
    font-size: .76rem;
    color: var(--pc-text-faint);
    font-variant-numeric: tabular-nums;
}

.pc-counter.is-warning { color: var(--pc-warning); }
.pc-counter.is-danger { color: var(--pc-danger); font-weight: 600; }

/* Zona de arrastre para imágenes */

.pc-dropzone {
    border: 2px dashed var(--pc-border-strong);
    border-radius: var(--pc-radius-lg);
    padding: 1.5rem;
    text-align: center;
    color: var(--pc-text-soft);
    cursor: pointer;
    transition: border-color var(--pc-transition), background var(--pc-transition);
}

.pc-dropzone:hover, .pc-dropzone.is-over {
    border-color: var(--pc-primary);
    background: var(--pc-primary-soft);
}

/* ------------------------------------------------------------------ */
/* Badges y etiquetas                                                  */
/* ------------------------------------------------------------------ */

.pc-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .18rem .55rem;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 650;
    line-height: 1.4;
    white-space: nowrap;
}

.pc-badge.is-neutral { background: var(--pc-surface-hover); color: var(--pc-text-soft); }
.pc-badge.is-primary { background: var(--pc-primary-soft); color: var(--pc-primary); }
.pc-badge.is-success { background: var(--pc-success-soft); color: var(--pc-success); }
.pc-badge.is-warning { background: var(--pc-warning-soft); color: #b45309; }
.pc-badge.is-danger  { background: var(--pc-danger-soft); color: var(--pc-danger); }
.pc-badge.is-info    { background: var(--pc-info-soft); color: var(--pc-info); }

.pc-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.pc-badge.is-pulse .pc-badge-dot { animation: pc-pulse 1.6s ease-in-out infinite; }

@keyframes pc-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .45; transform: scale(.8); }
}

.pc-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .22rem .6rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    background: var(--pc-surface-hover);
    color: var(--pc-text-soft);
    border: 1px solid var(--pc-border);
}

.pc-chip-remove {
    cursor: pointer;
    opacity: .6;
    border: 0;
    background: none;
    padding: 0;
    color: inherit;
    display: inline-flex;
}

.pc-chip-remove:hover { opacity: 1; }

/* Avatar */

.pc-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--pc-primary);
    color: var(--pc-primary-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 700;
    flex-shrink: 0;
    overflow: hidden;
}

.pc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pc-avatar-sm { width: 26px; height: 26px; font-size: .7rem; }
.pc-avatar-lg { width: 48px; height: 48px; font-size: 1rem; }

/* ------------------------------------------------------------------ */
/* Tablas                                                              */
/* ------------------------------------------------------------------ */

.pc-table-wrap {
    overflow-x: auto;
    border-radius: var(--pc-radius-lg);
}

.pc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.pc-table th {
    text-align: left;
    padding: .7rem 1rem;
    font-size: .78rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--pc-text-faint);
    background: var(--pc-surface-2);
    border-bottom: 1px solid var(--pc-border);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 2;
}

.pc-table th a { color: inherit; display: inline-flex; align-items: center; gap: .25rem; }
.pc-table th a:hover { color: var(--pc-text); text-decoration: none; }

.pc-table td {
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--pc-border);
    vertical-align: middle;
}

.pc-table tbody tr { transition: background var(--pc-transition); }
.pc-table tbody tr:hover { background: var(--pc-surface-2); }
.pc-table tbody tr:last-child td { border-bottom: 0; }
.pc-table tbody tr.is-selected { background: var(--pc-primary-soft); }

.pc-table .pc-num { text-align: right; font-variant-numeric: tabular-nums; }
.pc-table-actions { white-space: nowrap; text-align: right; }

/* En móvil, cada fila se convierte en una tarjeta legible. */
@media (max-width: 760px) {
    .pc-table.pc-table-cards thead { display: none; }

    .pc-table.pc-table-cards tbody tr {
        display: block;
        margin-bottom: .75rem;
        border: 1px solid var(--pc-border);
        border-radius: var(--pc-radius);
        padding: .35rem 0;
        background: var(--pc-surface);
    }

    .pc-table.pc-table-cards td {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        border-bottom: 0;
        padding: .4rem 1rem;
        text-align: right;
    }

    .pc-table.pc-table-cards td::before {
        content: attr(data-label);
        font-size: .78rem;
        font-weight: 650;
        color: var(--pc-text-faint);
        text-transform: uppercase;
        text-align: left;
    }
}

/* Barra de acciones masivas */

.pc-bulkbar {
    position: sticky;
    bottom: 1rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: 1rem;
    padding: .7rem 1rem;
    background: var(--pc-text);
    color: var(--pc-surface);
    border-radius: var(--pc-radius-lg);
    box-shadow: var(--pc-shadow-lg);
    z-index: 20;
}

.pc-bulkbar .pc-btn-secondary {
    background: transparent;
    border-color: rgba(255, 255, 255, .3);
    color: inherit;
}

.pc-bulkbar .pc-btn-secondary:hover { background: rgba(255, 255, 255, .12); }

/* ------------------------------------------------------------------ */
/* Barra de progreso                                                   */
/* ------------------------------------------------------------------ */

.pc-progress {
    height: 7px;
    background: var(--pc-surface-hover);
    border-radius: 999px;
    overflow: hidden;
}

.pc-progress-bar {
    height: 100%;
    background: var(--pc-primary);
    border-radius: 999px;
    transition: width .4s ease;
}

.pc-progress-bar.is-success { background: var(--pc-success); }
.pc-progress-bar.is-warning { background: var(--pc-warning); }
.pc-progress-bar.is-danger  { background: var(--pc-danger); }

.pc-progress-sm { height: 4px; }

/* Barra dentro de una celda de tabla, para comparar visualmente. */
.pc-cell-bar {
    height: 5px;
    background: var(--pc-surface-hover);
    border-radius: 999px;
    overflow: hidden;
    margin-top: .25rem;
    min-width: 60px;
}

.pc-cell-bar span { display: block; height: 100%; background: var(--pc-primary); }

/* ------------------------------------------------------------------ */
/* Pestañas y pasos                                                    */
/* ------------------------------------------------------------------ */

.pc-tabs {
    display: flex;
    gap: .25rem;
    border-bottom: 1px solid var(--pc-border);
    overflow-x: auto;
}

.pc-tab {
    padding: .6rem .9rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--pc-text-soft);
    border-bottom: 2px solid transparent;
    cursor: pointer;
    background: none;
    border-top: 0; border-left: 0; border-right: 0;
    white-space: nowrap;
    transition: color var(--pc-transition), border-color var(--pc-transition);
}

.pc-tab:hover { color: var(--pc-text); text-decoration: none; }

.pc-tab.is-active {
    color: var(--pc-primary);
    border-bottom-color: var(--pc-primary);
}

.pc-tab-panel { display: none; padding-top: 1.25rem; }
.pc-tab-panel.is-active { display: block; }

.pc-steps {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.5rem;
}

.pc-step {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .87rem;
    font-weight: 600;
    color: var(--pc-text-faint);
}

.pc-step-num {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--pc-surface-hover);
    color: var(--pc-text-faint);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    flex-shrink: 0;
    transition: background var(--pc-transition), color var(--pc-transition);
}

.pc-step.is-active { color: var(--pc-primary); }
.pc-step.is-active .pc-step-num { background: var(--pc-primary); color: var(--pc-primary-text); }
.pc-step.is-done { color: var(--pc-success); }
.pc-step.is-done .pc-step-num { background: var(--pc-success); color: #fff; }

.pc-step-line {
    flex: 1;
    height: 2px;
    background: var(--pc-border);
    border-radius: 2px;
    min-width: 16px;
}

/* ------------------------------------------------------------------ */
/* Avisos                                                              */
/* ------------------------------------------------------------------ */

.pc-alert {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .85rem 1rem;
    border-radius: var(--pc-radius);
    font-size: .9rem;
    border: 1px solid transparent;
}

.pc-alert-icon { flex-shrink: 0; margin-top: .1rem; }
.pc-alert-body { flex: 1; min-width: 0; }
.pc-alert-title { font-weight: 650; margin-bottom: .15rem; }

.pc-alert.is-info    { background: var(--pc-info-soft); color: var(--pc-info); border-color: color-mix(in srgb, var(--pc-info) 25%, transparent); }
.pc-alert.is-success { background: var(--pc-success-soft); color: var(--pc-success); border-color: color-mix(in srgb, var(--pc-success) 25%, transparent); }
.pc-alert.is-warning { background: var(--pc-warning-soft); color: #b45309; border-color: color-mix(in srgb, var(--pc-warning) 30%, transparent); }
.pc-alert.is-danger  { background: var(--pc-danger-soft); color: var(--pc-danger); border-color: color-mix(in srgb, var(--pc-danger) 25%, transparent); }

/* ------------------------------------------------------------------ */
/* Modales y paneles laterales                                         */
/* ------------------------------------------------------------------ */

.pc-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .5);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    z-index: 1000;
    opacity: 0;
    transition: opacity var(--pc-transition);
}

.pc-modal-backdrop.is-open { opacity: 1; }

.pc-modal {
    background: var(--pc-surface);
    border-radius: var(--pc-radius-xl);
    box-shadow: var(--pc-shadow-xl);
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - 2.5rem);
    display: flex;
    flex-direction: column;
    transform: scale(.96) translateY(8px);
    transition: transform .22s cubic-bezier(.16, 1, .3, 1);
}

.pc-modal-backdrop.is-open .pc-modal { transform: scale(1) translateY(0); }

.pc-modal-sm { max-width: 400px; }
.pc-modal-lg { max-width: 760px; }
.pc-modal-xl { max-width: 1080px; }

.pc-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.35rem;
    border-bottom: 1px solid var(--pc-border);
}

.pc-modal-title { font-size: 1.05rem; font-weight: 660; margin: 0; }
.pc-modal-body { padding: 1.35rem; overflow-y: auto; flex: 1; }

.pc-modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: .6rem;
    padding: 1rem 1.35rem;
    border-top: 1px solid var(--pc-border);
    background: var(--pc-surface-2);
    border-radius: 0 0 var(--pc-radius-xl) var(--pc-radius-xl);
}

.pc-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 440px;
    max-width: 100vw;
    background: var(--pc-surface);
    box-shadow: var(--pc-shadow-xl);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .26s cubic-bezier(.16, 1, .3, 1);
}

.pc-drawer.is-open { transform: translateX(0); }

/* ------------------------------------------------------------------ */
/* Toasts                                                              */
/* ------------------------------------------------------------------ */

.pc-toasts {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    max-width: 380px;
    pointer-events: none;
}

.pc-toast {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .8rem 1rem;
    background: var(--pc-surface);
    border: 1px solid var(--pc-border);
    border-left: 3px solid var(--pc-info);
    border-radius: var(--pc-radius);
    box-shadow: var(--pc-shadow-lg);
    font-size: .9rem;
    pointer-events: auto;
    animation: pc-toast-in .28s cubic-bezier(.16, 1, .3, 1);
    position: relative;
    overflow: hidden;
}

.pc-toast.is-success { border-left-color: var(--pc-success); }
.pc-toast.is-error   { border-left-color: var(--pc-danger); }
.pc-toast.is-warning { border-left-color: var(--pc-warning); }

.pc-toast.is-leaving { animation: pc-toast-out .22s ease forwards; }

.pc-toast-icon { flex-shrink: 0; margin-top: .05rem; }
.pc-toast.is-success .pc-toast-icon { color: var(--pc-success); }
.pc-toast.is-error   .pc-toast-icon { color: var(--pc-danger); }
.pc-toast.is-warning .pc-toast-icon { color: var(--pc-warning); }
.pc-toast.is-info    .pc-toast-icon { color: var(--pc-info); }

.pc-toast-body { flex: 1; min-width: 0; }

.pc-toast-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    background: currentColor;
    opacity: .3;
    animation: pc-toast-progress linear forwards;
}

@keyframes pc-toast-in {
    from { opacity: 0; transform: translateX(24px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes pc-toast-out {
    to { opacity: 0; transform: translateX(24px); }
}

@keyframes pc-toast-progress {
    from { width: 100%; }
    to { width: 0; }
}

/* ------------------------------------------------------------------ */
/* Menú desplegable                                                    */
/* ------------------------------------------------------------------ */

.pc-dropdown { position: relative; display: inline-block; }

.pc-dropdown-menu {
    position: absolute;
    right: 0;
    top: calc(100% + .35rem);
    min-width: 190px;
    background: var(--pc-surface);
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius);
    box-shadow: var(--pc-shadow-lg);
    padding: .3rem;
    z-index: 100;
    display: none;
}

.pc-dropdown-menu.is-open { display: block; animation: pc-fade-in .14s ease; }
.pc-dropdown-menu.to-left { right: auto; left: 0; }

@keyframes pc-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.pc-dropdown-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    padding: .48rem .6rem;
    border: 0;
    background: none;
    font: inherit;
    font-size: .88rem;
    color: var(--pc-text);
    text-align: left;
    border-radius: var(--pc-radius-sm);
    cursor: pointer;
    transition: background var(--pc-transition);
}

.pc-dropdown-item:hover { background: var(--pc-surface-hover); text-decoration: none; color: var(--pc-text); }
.pc-dropdown-item.is-danger { color: var(--pc-danger); }
.pc-dropdown-item.is-danger:hover { background: var(--pc-danger-soft); }

.pc-dropdown-sep { height: 1px; background: var(--pc-border); margin: .3rem 0; }

/* ------------------------------------------------------------------ */
/* Estado vacío y esqueletos de carga                                  */
/* ------------------------------------------------------------------ */

.pc-empty {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--pc-text-soft);
}

.pc-empty-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: var(--pc-surface-hover);
    color: var(--pc-text-faint);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pc-empty-title { font-size: 1.05rem; font-weight: 650; color: var(--pc-text); margin-bottom: .35rem; }
.pc-empty-text { font-size: .9rem; max-width: 420px; margin: 0 auto 1.25rem; }

.pc-skeleton {
    background: linear-gradient(90deg, var(--pc-surface-hover) 25%, var(--pc-border) 50%, var(--pc-surface-hover) 75%);
    background-size: 200% 100%;
    animation: pc-shimmer 1.4s infinite;
    border-radius: var(--pc-radius-sm);
    height: 1rem;
}

@keyframes pc-shimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

/* ------------------------------------------------------------------ */
/* Paginación                                                          */
/* ------------------------------------------------------------------ */

.pc-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 1.25rem;
    border-top: 1px solid var(--pc-border);
    flex-wrap: wrap;
}

.pc-pagination-info { font-size: .85rem; color: var(--pc-text-soft); }
.pc-pagination-list { display: flex; gap: .25rem; align-items: center; }

.pc-page {
    min-width: 32px;
    height: 32px;
    padding: 0 .5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--pc-radius-sm);
    font-size: .85rem;
    font-weight: 600;
    color: var(--pc-text-soft);
    border: 1px solid transparent;
    transition: background var(--pc-transition);
}

.pc-page:hover { background: var(--pc-surface-hover); text-decoration: none; color: var(--pc-text); }
.pc-page.is-active { background: var(--pc-primary); color: var(--pc-primary-text); }
.pc-page.is-disabled { opacity: .4; pointer-events: none; }
.pc-page-gap { color: var(--pc-text-faint); padding: 0 .2rem; }

/* ------------------------------------------------------------------ */
/* Bloque de código copiable                                           */
/* ------------------------------------------------------------------ */

.pc-code {
    position: relative;
    background: #0f172a;
    color: #e2e8f0;
    border-radius: var(--pc-radius);
    padding: 1rem 1rem;
    font-family: var(--pc-mono);
    font-size: .8rem;
    line-height: 1.6;
    overflow-x: auto;
    white-space: pre;
}

.pc-code-copy {
    position: absolute;
    top: .5rem;
    right: .5rem;
    padding: .3rem .6rem;
    font-size: .75rem;
    background: rgba(255, 255, 255, .12);
    color: #e2e8f0;
    border: 0;
    border-radius: var(--pc-radius-sm);
    cursor: pointer;
}

.pc-code-copy:hover { background: rgba(255, 255, 255, .22); }

/* ------------------------------------------------------------------ */
/* Iconos                                                              */
/* ------------------------------------------------------------------ */

.pc-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pc-icon svg { width: 1em; height: 1em; display: block; }

/* ------------------------------------------------------------------ */
/* Barra de filtros                                                    */
/* ------------------------------------------------------------------ */

.pc-filters {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    align-items: center;
    padding: .9rem 1.25rem;
    border-bottom: 1px solid var(--pc-border);
    background: var(--pc-surface-2);
    border-radius: var(--pc-radius-lg) var(--pc-radius-lg) 0 0;
}

.pc-filters .pc-input,
.pc-filters .pc-select { width: auto; min-width: 150px; }

.pc-filters .pc-search { flex: 1; min-width: 220px; }

/* ------------------------------------------------------------------ */
/* Vista previa de la notificación                                     */
/* ------------------------------------------------------------------ */

.pc-preview-shell {
    background: linear-gradient(160deg, #64748b, #334155);
    border-radius: var(--pc-radius-lg);
    padding: 1.5rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
}

.pc-notif {
    width: 100%;
    max-width: 340px;
    background: #fff;
    color: #111827;
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .3);
    overflow: hidden;
    font-size: .84rem;
}

.pc-notif-main { display: flex; gap: .7rem; padding: .8rem .85rem; }

.pc-notif-icon {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: var(--pc-primary);
    flex-shrink: 0;
    object-fit: cover;
}

.pc-notif-texts { min-width: 0; flex: 1; }
.pc-notif-title { font-weight: 650; font-size: .88rem; margin-bottom: .1rem; }
.pc-notif-body { color: #4b5563; font-size: .82rem; line-height: 1.4; }
.pc-notif-site { color: #9ca3af; font-size: .74rem; margin-top: .3rem; }
.pc-notif-image { width: 100%; max-height: 150px; object-fit: cover; display: block; }

.pc-notif-actions {
    display: flex;
    border-top: 1px solid #e5e7eb;
}

.pc-notif-action {
    flex: 1;
    padding: .55rem;
    text-align: center;
    font-size: .8rem;
    font-weight: 600;
    color: #374151;
    border-right: 1px solid #e5e7eb;
    background: #f9fafb;
}

.pc-notif-action:last-child { border-right: 0; }

/* Fila superior con el nombre de la aplicación (Android e iOS). */
.pc-notif-app {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem .85rem 0;
    font-size: .72rem;
    color: #6b7280;
}

.pc-notif-app-dot {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--pc-primary);
    flex-shrink: 0;
}

.pc-notif-app-time { margin-left: auto; }
.pc-notif-time { font-size: .72rem; color: #9ca3af; align-self: flex-start; }

/* ---- Windows: esquinas rectas y fondo oscuro del centro de actividades ---- */
.pc-shell-windows { background: linear-gradient(160deg, #1e3a5f, #0f172a); }

.pc-notif.is-windows {
    border-radius: 8px;
    background: #2b2b2b;
    color: #f3f4f6;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}

.pc-notif.is-windows .pc-notif-body { color: #cbd5e1; }
.pc-notif.is-windows .pc-notif-site { color: #94a3b8; }

.pc-notif.is-windows .pc-notif-actions { border-top-color: #3f3f46; }

.pc-notif.is-windows .pc-notif-action {
    background: #3a3a3a;
    color: #e5e7eb;
    border-right-color: #4b4b52;
}

/* ---- macOS: muy redondeada, clara y con la hora a la derecha ---- */
.pc-shell-macos { background: linear-gradient(160deg, #7dd3fc, #4f46e5); }

.pc-notif.is-macos {
    border-radius: 16px;
    background: rgba(250, 250, 250, .98);
    max-width: 330px;
}

.pc-notif.is-macos .pc-notif-icon { border-radius: 10px; }

/* ---- Android: pastilla ancha, icono pequeño y redondo ---- */
.pc-shell-android { background: linear-gradient(160deg, #34d399, #065f46); }

.pc-notif.is-android {
    border-radius: 24px;
    background: #f1f3f4;
}

.pc-notif.is-android .pc-notif-main { padding: .35rem .85rem .7rem; }
.pc-notif.is-android .pc-notif-icon { border-radius: 50%; width: 24px; height: 24px; }
.pc-notif.is-android .pc-notif-title { font-size: .84rem; }
.pc-notif.is-android .pc-notif-image { margin-top: .2rem; }

.pc-notif.is-android .pc-notif-actions {
    border-top: 0;
    padding: 0 .6rem .6rem;
    gap: .4rem;
    background: transparent;
}

.pc-notif.is-android .pc-notif-action {
    background: transparent;
    border: 0;
    color: #1a73e8;
    text-transform: uppercase;
    font-size: .74rem;
    letter-spacing: .02em;
}

/* ---- iOS: tarjeta translúcida, nombre en mayúsculas y sin extras ---- */
.pc-shell-ios { background: linear-gradient(160deg, #a78bfa, #1e1b4b); }

.pc-notif.is-ios {
    border-radius: 20px;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(12px);
    max-width: 320px;
}

.pc-notif.is-ios .pc-notif-app { letter-spacing: .06em; font-size: .68rem; }
.pc-notif.is-ios .pc-notif-main { padding: .3rem .85rem .8rem; }
.pc-notif.is-ios .pc-notif-icon { border-radius: 9px; width: 38px; height: 38px; }

/* Aviso de lo que la plataforma va a descartar. */
.pc-warn { color: var(--pc-warning, #d97706); }

/* ------------------------------------------------------------------ */
/* Campo de imagen: subir, elegir de la biblioteca o pegar una URL     */
/* ------------------------------------------------------------------ */

/* En una sola columna caben la miniatura y los botones al lado. Estos campos
   suelen ir de tres en tres, así que por debajo de cierto ancho la miniatura
   pasa arriba: si no, los botones se apilan de uno en uno y el campo de texto
   se desborda. */
.pc-imagen-caja {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    align-items: flex-start;
}

.pc-imagen-muestra {
    width: 74px;
    height: 74px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    background: var(--pc-surface-2, rgba(127, 127, 127, .08));
    border: 1px dashed var(--pc-border);
    border-radius: var(--pc-radius);
    color: var(--pc-text-faint, #94a3b8);
    transition: border-color .15s, color .15s;
}

.pc-imagen-muestra:hover {
    border-color: var(--pc-primary);
    color: var(--pc-primary);
}

.pc-imagen-muestra img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pc-imagen-acciones {
    flex: 1 1 150px;
    min-width: 0;
}

/* Los botones no rompen el texto ni empujan la caja a lo ancho. */
.pc-imagen-acciones .pc-btn {
    white-space: nowrap;
    padding-inline: .55rem;
}

.pc-imagen-acciones .pc-input {
    width: 100%;
    max-width: 100%;
}

.pc-imagen .pc-input-sm {
    font-size: .78rem;
    padding: .35rem .55rem;
}

/* Mientras se arrastra un archivo encima. */
.pc-imagen.is-soltando .pc-imagen-muestra {
    border-color: var(--pc-primary);
    border-style: solid;
    background: var(--pc-primary-soft, rgba(99, 102, 241, .12));
}

.pc-imagen-estado.pc-ok { color: var(--pc-success, #16a34a); }
.pc-imagen-estado.pc-danger { color: var(--pc-danger); }

/* Rejilla del selector de biblioteca. */
.pc-imagen-rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
    gap: .7rem;
}

.pc-imagen-opcion {
    padding: 0;
    cursor: pointer;
    background: none;
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    transition: border-color .15s, transform .1s;
}

.pc-imagen-opcion:hover {
    border-color: var(--pc-primary);
    transform: translateY(-2px);
}

.pc-imagen-opcion img {
    width: 100%;
    height: 84px;
    object-fit: cover;
    display: block;
    background: var(--pc-surface-2, rgba(127, 127, 127, .08));
}

.pc-imagen-opcion span { padding: 0 .3rem .3rem; }

/* Zona de arrastrar y soltar de la biblioteca. */
.pc-soltar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.4rem 1.5rem;
    cursor: pointer;
    background: var(--pc-surface-2, rgba(127, 127, 127, .05));
    border: 2px dashed var(--pc-border);
    border-radius: var(--pc-radius-lg);
    color: var(--pc-text-faint, #94a3b8);
    transition: border-color .15s, background .15s, color .15s;
}

.pc-soltar:hover,
.pc-soltar.is-soltando {
    border-color: var(--pc-primary);
    background: var(--pc-primary-soft, rgba(99, 102, 241, .1));
    color: var(--pc-primary);
}

.pc-soltar strong { color: var(--pc-text); }
.pc-soltar-estado { margin-left: auto; }
.pc-soltar-estado.pc-ok { color: var(--pc-success, #16a34a); }
.pc-soltar-estado.pc-danger { color: var(--pc-danger); }