.suscripcion-edit-page {
    padding: 1rem 0 4rem;
}

.suscripcion-edit-shell {
    overflow: visible;
}

.suscripcion-form-grid {
    align-items: start;
}

.suscripcion-file-panel {
    display: grid;
    gap: 0.7rem;
}

.suscripcion-dropzone {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 10rem;
    padding: 1.25rem;
    border: 1px dashed #f3c4d4;
    border-radius: 1.15rem;
    background: #fff5f8;
    color: #646173;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.18s ease, border-color 0.18s ease;
}

.suscripcion-dropzone:hover,
.suscripcion-dropzone.is-hover,
.suscripcion-dropzone:focus-within {
    border-color: var(--ecs-color-primary);
    background: #fff;
}

.suscripcion-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.suscripcion-dropzone-content {
    display: grid;
    justify-items: center;
    gap: 0.35rem;
}

.suscripcion-dropzone-content .material-symbols-outlined {
    color: var(--ecs-color-primary);
    font-size: 2.6rem;
}

.suscripcion-dropzone-content strong {
    color: #17131c;
    font-size: 1rem;
    font-weight: 850;
}

.suscripcion-dropzone-content small {
    color: #777586;
    font-size: 0.86rem;
    font-weight: 600;
}

.suscripcion-file-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem;
    border: 1px solid rgba(214, 212, 216, 0.92);
    border-radius: 1rem;
    background: var(--ecs-color-secondary);
}

.suscripcion-file-row.is-preview {
    border-color: #f3c4d4;
    background: #fff5f8;
}

.suscripcion-file-row > .material-symbols-outlined {
    flex: 0 0 auto;
    color: var(--ecs-color-primary);
    font-size: 1.5rem;
}

.suscripcion-file-main {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}

.suscripcion-file-main strong {
    overflow: hidden;
    color: #17131c;
    font-size: 0.95rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.suscripcion-file-main small {
    color: #777586;
    font-size: 0.82rem;
    font-weight: 600;
}

.suscripcion-file-action {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.15rem;
    height: 2.15rem;
    margin-left: auto;
    border: 1px solid #f3c4d4;
    border-radius: 999px;
    background: #fff;
    color: var(--ecs-color-primary);
    text-decoration: none;
    cursor: pointer;
}

.suscripcion-file-action:hover,
.suscripcion-file-action:focus-visible {
    background: #fff5f8;
    color: var(--ecs-color-primary);
    outline: none;
}

.suscripcion-file-action .material-symbols-outlined {
    font-size: 1.15rem;
}

.suscripcion-send-card {
    overflow: hidden;
    border: 1px solid hsla(270, 5%, 84%, 0.92);
    border-radius: 1.15rem;
    background: #fff;
}

.suscripcion-send-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid hsla(270, 5%, 84%, 0.72);
    background: #fff;
}

.suscripcion-send-header span {
    display: block;
    margin-bottom: 0.2rem;
    color: var(--ecs-color-primary);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.suscripcion-send-header h2 {
    margin: 0;
    color: #17131c;
    font-family: "Montserrat", var(--ecs-font-sans);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.suscripcion-send-header strong {
    padding: 0.38rem 0.7rem;
    border: 1px solid #f3c4d4;
    border-radius: 999px;
    background: #fff5f8;
    color: var(--ecs-color-primary);
    font-size: 0.78rem;
    font-weight: 800;
    white-space: nowrap;
}

.suscripcion-send-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.suscripcion-send-table {
    width: 100%;
    min-width: 46rem;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    color: #17131c;
    table-layout: fixed;
}

.suscripcion-send-table thead th {
    padding: 0.8rem 1rem;
    border-bottom: 1px solid hsla(270, 5%, 84%, 0.62);
    background: var(--ecs-color-secondary);
    color: #6f6b77;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-align: left;
    text-transform: uppercase;
}

.suscripcion-send-table tbody td {
    padding: 0.95rem 1rem;
    border-bottom: 1px solid hsla(270, 5%, 84%, 0.5);
    color: #2d2932;
    font-size: 0.86rem;
    font-weight: 600;
    overflow-wrap: anywhere;
    vertical-align: middle;
}

.suscripcion-send-table tbody tr:last-child td {
    border-bottom: 0;
}

.suscripcion-send-table tbody tr:hover {
    background: #fff5f8;
}

.suscripcion-send-col-date { width: 22%; }
.suscripcion-send-col-user { width: 24%; }
.suscripcion-send-col-sub { width: 12%; }
.suscripcion-send-col-queue { width: 12%; }
.suscripcion-send-col-status { width: 16%; }
.suscripcion-send-col-job { width: 14%; }

.suscripcion-send-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.65rem;
    padding: 0.2rem 0.6rem;
    border: 1px solid #f3c4d4;
    border-radius: 999px;
    background: #fff5f8;
    color: var(--ecs-color-primary);
    font-size: 0.75rem;
    font-weight: 800;
    white-space: nowrap;
}

.suscripcion-send-badge.is-queued {
    border-color: rgba(217, 119, 6, 0.28);
    background: #fff8f1;
    color: #b45309;
}

.suscripcion-send-badge.is-sent,
.suscripcion-send-badge.is-completed {
    border-color: rgba(16, 185, 129, 0.28);
    background: #f2fbf6;
    color: #047857;
}

.suscripcion-send-badge.is-failed,
.suscripcion-send-badge.is-error {
    border-color: rgba(220, 38, 38, 0.24);
    background: rgba(220, 38, 38, 0.07);
    color: #b91c1c;
}

.suscripcion-send-empty {
    padding: 3rem 1rem !important;
    color: #77717f !important;
    font-weight: 700;
    text-align: center;
}

.suscripcion-send-empty .material-symbols-outlined {
    display: block;
    margin-bottom: 0.5rem;
    color: #b7b3bd;
    font-size: 2.5rem;
}

.suscripcion-send-muted {
    color: #77717f;
    font-weight: 700;
}

@media (max-width: 767.98px) {
    .suscripcion-send-table {
        min-width: 40rem;
    }
}
