/* RESET & BASE STYLES */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: #F7F3EC;
    color: #1F1D1A;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* APP LAYOUT */
.app-container {
    display: flex;
    min-height: 100vh;
}

/* SIDEBAR SYSTEM - BOUTIQUE PREMIUM STYLE */
.sidebar {
    width: 280px;
    background-color: #FFFDF8;
    border-right: 1px solid #E5DDD1;
    display: flex;
    flex-direction: column;
    position: fixed;
    height: 100vh;
    z-index: 100;
    padding: 20px 0;
    transition: all 250ms cubic-bezier(.2,.8,.2,1);
}

.brand {
    padding: 48px 36px;
    border-bottom: none;
    margin-bottom: 24px;
}

.brand h2 {
    font-size: 1.35rem;
    font-weight: 300;
    letter-spacing: 0.08em;
    color: #1F1D1A;
    text-transform: uppercase;
}

.brand h2 span {
    color: #7A8B62;
    font-weight: 600;
    margin-left: 4px;
    font-style: italic;
    text-transform: none;
    letter-spacing: 0;
}

.sidebar-nav {
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    color: #7B7067;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    border-radius: 14px;
    letter-spacing: -0.01em;
    transition: all 250ms cubic-bezier(.2,.8,.2,1);
}

.nav-item:hover {
    background-color: #F2EBE1;
    color: #1F1D1A;
}

.nav-item.active {
    background-color: #DCE8D2;
    color: #3D4A27;
    font-weight: 600;
}

/* MAIN CONTENT AREA */
.main-content {
    margin-left: 280px;
    flex: 1;
    padding: 64px 56px;
    width: calc(100% - 280px);
}

.view-section {
    display: none;
    padding-bottom: 60px;
    animation: fadeIn 350ms cubic-bezier(.2,.8,.2,1);
}

.view-section.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.view-header {
    margin-bottom: 48px;
}

.view-header.split {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
}

.brand-statement {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #7B7067;
    margin-bottom: 12px;
}

.view-header h1 {
    font-size: 2.35rem;
    font-weight: 700;
    color: #1F1D1A;
    letter-spacing: -0.02em;
}

.subtitle {
    font-size: 1rem;
    color: #7B7067;
    margin-top: 8px;
}

/* BOUTIQUE BUTTONS & UTILITIES */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 14px;
    border: 1px solid transparent;
    cursor: pointer;
    font-family: inherit;
    transition: all 250ms cubic-bezier(.2,.8,.2,1);
}

.btn-primary {
    background-color: #7A8B62;
    color: #FFFDF8;
}

.btn-primary:hover {
    background-color: #677651;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(122, 139, 98, 0.2);
}

.btn-primary:disabled {
    background-color: #E5DDD1;
    color: #7B7067;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-secondary {
    background-color: #FFFDF8;
    border-color: #E5DDD1;
    color: #1F1D1A;
}

.btn-secondary:hover {
    background-color: #F7F3EC;
    border-color: #7B7067;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(31, 29, 26, 0.03);
}

.btn-danger {
    background-color: #FFFDF8;
    color: #9C3F3F;
    border-color: #E8C5BE;
}

.btn-danger:hover {
    background-color: #FCEDEA;
    border-color: #C96F63;
}

.btn-full-width {
    width: 100%;
}

.btn-full-width {
    width: 100%;
}

.btn-back {
    background: none;
    border: none;
    color: #7B7067;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 12px;
    padding: 0;
    display: inline-block;
    transition: all 250ms cubic-bezier(.2,.8,.2,1);
}

.btn-back:hover {
    color: #1F1D1A;
    text-decoration: underline;
}

.css-main-ref {
    display: none;
}

.header-actions {
    display: flex;
    gap: 12px;
}

/* ACTION CARDS SYSTEM (HOY VIEW) */
.action-cards-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.action-card {
    background-color: #FFFDF8;
    border: 1px solid #E5DDD1;
    border-radius: 24px;
    padding: 32px 36px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
    box-shadow: 0 4px 20px rgba(31, 29, 26, 0.01);
    transition: all 250ms cubic-bezier(.2,.8,.2,1);
}

.action-card:hover {
    transform: translateY(-3px);
    border-color: #D6CBB7;
    box-shadow: 0 10px 28px rgba(31, 29, 26, 0.04);
}

.action-card-content {
    display: flex;
    align-items: center;
    gap: 28px;
}

.action-icon {
    font-size: 1.8rem;
    background-color: #F7F3EC;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    transition: all 250ms cubic-bezier(.2,.8,.2,1);
}

.action-text h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #1F1D1A;
    letter-spacing: -0.01em;
    margin-bottom: 4px;
}

.action-text p {
    font-size: 0.95rem;
    color: #7B7067;
}

.hidden-metrics-fallback {
    display: none;
}

.hoy-hero {
    margin-bottom: 32px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
}

.hoy-date-card {
    background-color: #FFFDF8;
    border: 1px solid #E5DDD1;
    border-radius: 20px;
    padding: 18px 22px;
    min-width: 190px;
    text-align: right;
    box-shadow: 0 4px 20px rgba(31, 29, 26, 0.01);
}

.hoy-date-card span {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: #7A8B62;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}

.hoy-date-card strong {
    display: block;
    font-size: 1rem;
    color: #1F1D1A;
    line-height: 1.35;
}

.hoy-summary-card {
    background-color: #FFFDF8;
    border: 1px solid #E5DDD1;
    border-radius: 24px;
    padding: 28px 36px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 44px;
    box-shadow: 0 4px 20px rgba(31, 29, 26, 0.01);
}

.hoy-ingresos-compact {
    width: 100%;
    background-color: transparent;
    border: 1px solid #E5DDD1;
    border-radius: 18px;
    padding: 14px 18px;
    margin: -24px 0 36px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    color: #7B7067;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: all 250ms cubic-bezier(.2,.8,.2,1);
}

.hoy-ingresos-compact:hover {
    background-color: #FFFDF8;
    border-color: #7A8B62;
}

.hoy-ingresos-compact span {
    font-size: 0.8rem;
    font-weight: 700;
    color: #7A8B62;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.hoy-ingresos-compact strong {
    color: #1F1D1A;
    font-size: 1rem;
}

.hoy-ingresos-compact small {
    font-size: 0.9rem;
}

.hoy-summary-metric {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-right: 1px solid #F2EBE1;
    background: transparent;
    border-top: none;
    border-bottom: none;
    border-left: none;
    padding: 0;
    font-family: inherit;
    text-align: left;
}

.hoy-summary-metric:last-child {
    border-right: none;
}

button.hoy-summary-metric {
    cursor: pointer;
    color: inherit;
}

button.hoy-summary-metric:hover strong {
    color: #7A8B62;
}

.hoy-summary-metric .label {
    font-size: 0.78rem;
    font-weight: 700;
    color: #7B7067;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.hoy-summary-metric strong {
    font-size: 2rem;
    color: #1F1D1A;
    letter-spacing: -0.02em;
}

.hoy-summary-metric small {
    color: #7B7067;
    font-size: 0.85rem;
    line-height: 1.4;
}

.metric-progress-track {
    width: calc(100% - 16px);
    height: 8px;
    margin-right: 16px;
    background-color: #F2EBE1;
    border-radius: 999px;
    overflow: hidden;
}

.metric-progress-fill {
    height: 100%;
    width: 0;
    background-color: #7A8B62;
    border-radius: 999px;
    transition: width 250ms cubic-bezier(.2,.8,.2,1);
}

.hoy-insights-grid {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(220px, 1fr);
    gap: 24px;
    margin-bottom: 44px;
}

.hoy-business-section + .hoy-insights-grid {
    margin-top: 64px;
}

.hoy-category-card {
    background-color: #FFFDF8;
    border: 1px solid #E5DDD1;
    border-radius: 24px;
    padding: 28px;
    box-shadow: 0 4px 20px rgba(31, 29, 26, 0.01);
}

.hoy-story-card {
    background-color: #FFFBF4;
    border: 1px dashed #E5DDD1;
    border-radius: 20px;
    padding: 18px;
    align-self: start;
}

.hoy-story-card h2,
.hoy-category-card h2 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1F1D1A;
    letter-spacing: -0.01em;
    margin-bottom: 10px;
}

.hoy-story-card p {
    color: #7B7067;
    margin-bottom: 0;
    font-size: 0.92rem;
    line-height: 1.7;
}

.hoy-story-message {
    color: #7B7067;
    margin-bottom: 0;
    white-space: pre-line;
}

.hoy-story-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
}

.hoy-story-metrics div {
    border: 1px solid #F2EBE1;
    border-radius: 18px;
    padding: 16px;
    background-color: #FFFBF4;
}

.hoy-story-metrics span {
    display: block;
    color: #7B7067;
    font-size: 0.82rem;
    line-height: 1.35;
    margin-bottom: 8px;
}

.hoy-story-metrics strong {
    display: block;
    color: #1F1D1A;
    font-size: 1.45rem;
}

.hoy-category-header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 18px;
}

.hoy-category-header span {
    color: #7B7067;
    font-size: 0.85rem;
    white-space: nowrap;
}

.hoy-category-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.hoy-category-empty {
    color: #7B7067;
    font-size: 0.9rem;
}

.hoy-category-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    background-color: #FFFBF4;
    border: 1px solid #F2EBE1;
    border-radius: 18px;
    padding: 12px;
}

.hoy-category-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #F7F3EC;
    border: 1px solid #E5DDD1;
    font-size: 1rem;
}

.hoy-category-name,
.hoy-category-count {
    font-size: 0.88rem;
    color: #1F1D1A;
    font-weight: 600;
}

.hoy-category-count {
    color: #7B7067;
    text-align: right;
}

.hoy-category-track {
    grid-column: 1 / -1;
    height: 8px;
    background-color: #F2EBE1;
    border-radius: 999px;
    overflow: hidden;
}

.hoy-category-fill {
    height: 100%;
    background-color: #7A8B62;
    border-radius: 999px;
}

.is-hidden {
    display: none !important;
}

.hoy-work-section h2,
.hoy-business-section h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1F1D1A;
    margin-bottom: 20px;
    letter-spacing: -0.01em;
}

.hoy-business-section {
    margin-top: 44px;
}

.hoy-work-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

.hoy-work-card {
    background-color: #FFFDF8;
    border: 1px solid #E5DDD1;
    border-radius: 22px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: all 250ms cubic-bezier(.2,.8,.2,1);
    box-shadow: 0 4px 20px rgba(31, 29, 26, 0.01);
}

.hoy-work-card:hover {
    transform: translateY(-3px);
    border-color: #7A8B62;
    box-shadow: 0 10px 28px rgba(31, 29, 26, 0.04);
}

.hoy-work-card.active {
    border-color: #7A8B62;
    background-color: #F8FBF3;
    box-shadow: 0 10px 28px rgba(122, 139, 98, 0.08);
}

.hoy-work-card .action-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    font-size: 1.45rem;
}

.hoy-work-card .label {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1F1D1A;
}

.hoy-work-card strong {
    font-size: 2rem;
    color: #1F1D1A;
    letter-spacing: -0.02em;
}

.hoy-work-card small {
    color: #7B7067;
    font-size: 0.85rem;
    line-height: 1.4;
}

.mi-dia-detail:empty {
    display: none;
}

.mi-dia-detail {
    margin-top: 22px;
    border: 1px solid #E5DDD1;
    border-radius: 22px;
    background-color: #FFFDF8;
    padding: 18px;
}

.mi-dia-detail-header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    margin-bottom: 14px;
}

.mi-dia-detail-header > div {
    display: flex;
    gap: 12px;
    align-items: center;
}

.mi-dia-detail-header h3 {
    margin: 0;
    color: #1F1D1A;
    font-size: 1rem;
}

.mi-dia-detail-header p {
    margin: 3px 0 0;
    color: #7B7067;
    font-size: 0.82rem;
}

.mi-dia-detail-header strong {
    border-radius: 999px;
    background-color: #E8EBD8;
    color: #566238;
    padding: 7px 10px;
    font-size: 0.78rem;
    white-space: nowrap;
}

.mi-dia-prendas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
}

.mi-dia-prenda-card {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    border: 1px solid #F2EBE1;
    border-radius: 16px;
    background-color: #FFFBF4;
    padding: 10px;
}

.mi-dia-prenda-card .prenda-card-thumbnail {
    width: 58px;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
}

.mi-dia-prenda-card strong,
.mi-dia-prenda-card span,
.mi-dia-prenda-card small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mi-dia-prenda-card strong {
    color: #1F1D1A;
    font-size: 0.9rem;
}

.mi-dia-prenda-card span,
.mi-dia-prenda-card small {
    color: #7B7067;
    font-size: 0.74rem;
}

.mi-dia-prenda-card .btn {
    grid-column: 1 / -1;
    min-height: 34px;
    padding: 8px 10px;
}

/* EDITORIAL CARDS STRUCTURE (LOTES & PRENDAS) */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 32px;
}

.card {
    background-color: #FFFDF8;
    border: 1px solid #E5DDD1;
    border-radius: 24px;
    padding: 36px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    box-shadow: 0 4px 20px rgba(31, 29, 26, 0.01);
    transition: all 250ms cubic-bezier(.2,.8,.2,1);
}

.card:hover {
    transform: translateY(-4px);
    border-color: #7A8B62;
    box-shadow: 0 12px 32px rgba(31, 29, 26, 0.05);
}

.interactive-prenda-card {
    cursor: pointer;
    border-radius: 20px;
    padding: 16px;
    gap: 12px;
}

#prendas-global-container,
#lote-prendas-container {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 18px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.card-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1F1D1A;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.badge {
    display: inline-flex;
    padding: 6px 14px;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 250ms cubic-bezier(.2,.8,.2,1);
}

.badge-pending {
    background-color: #F2EBE1;
    color: #7B7067;
}

.badge-process {
    background-color: #DCE8D2;
    color: #3D4A27;
}

.badge-en-perchero {
    background-color: #FFF1B8;
    color: #7A6422;
}

.prenda-card-status {
    width: fit-content;
    max-width: 100%;
}

.card-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.lote-human-subtitle {
    font-size: 0.95rem;
    color: #7B7067;
    font-weight: 500;
    line-height: 1.4;
}

.card-prop {
    display: flex;
    justify-content: space-between;
    font-size: 0.95rem;
    border-bottom: 1px solid #F7F3EC;
    padding-bottom: 6px;
}

.card-prop span:first-child {
    color: #7B7067;
}

.card-prop span:last-child {
    color: #1F1D1A;
    font-weight: 600;
}

/* PROGRESS BAR HIERARCHY */
.progress-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
}

.progress-bar-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    font-weight: 700;
    color: #7B7067;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.progress-bar-track {
    background-color: #F7F3EC;
    height: 6px;
    border-radius: 99px;
    overflow: hidden;
    position: relative;
}

/* LOTE DETAILS SUMMARY */
.lote-stats-summary {
    display: flex;
    gap: 48px;
    background-color: #FFFDF8;
    border: 1px solid #E5DDD1;
    padding: 24px 36px;
    border-radius: 20px;
    margin-bottom: 40px;
    box-shadow: 0 4px 16px rgba(31, 29, 26, 0.01);
}

.stat-box {
    font-size: 1rem;
}

.stat-box strong {
    color: #7B7067;
    font-weight: 500;
}

.stat-box span {
    color: #1F1D1A;
    font-weight: 700;
    margin-left: 8px;
}

.section-title-secondary {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1F1D1A;
    margin-bottom: 28px;
    letter-spacing: -0.01em;
}

/* MODAL SYSTEM LAYER */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(31, 29, 26, 0.25);
    backdrop-filter: blur(12px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 24px;
    transition: all 250ms cubic-bezier(.2,.8,.2,1);
}

.modal-overlay.active {
    display: flex;
}

.modal-card {
    background-color: #FFFDF8;
    border: 1px solid #E5DDD1;
    width: 100%;
    max-width: 540px;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 28px;
    padding: 44px;
    box-shadow: 0 24px 64px rgba(31, 29, 26, 0.06);
    animation: modalSlideUp 400ms cubic-bezier(.2,.8,.2,1);
    transition: all 250ms cubic-bezier(.2,.8,.2,1);
}

.modal-card-compact {
    max-width: 620px;
}

@keyframes modalSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 36px;
}

.modal-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1F1D1A;
    letter-spacing: -0.02em;
}

.btn-close {
    background: none;
    border: none;
    color: #7B7067;
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
    transition: color 250ms cubic-bezier(.2,.8,.2,1);
}

.btn-close:hover {
    color: #1F1D1A;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
}

.form-group label {
    font-size: 0.85rem;
    font-weight: 700;
    color: #1F1D1A;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.required-field-label {
    color: #8C4E3F !important;
}

/* PREMIUM MODERN INPUTS */
.form-group input[type="text"],
.form-group input[type="number"],
.form-group input[type="date"],
.form-group select,
.form-group textarea {
    background-color: #FFFDF8;
    border: 1px solid #E5DDD1;
    border-radius: 14px;
    padding: 16px;
    color: #1F1D1A;
    font-family: inherit;
    font-size: 1rem;
    outline: none;
    width: 100%;
    transition: all 250ms cubic-bezier(.2,.8,.2,1);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #7A8B62;
    box-shadow: 0 0 0 4px rgba(122, 139, 98, 0.08);
}

/* RADIO GROUPS & ACTIVE INTERACTION STATES */
.radio-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    font-size: 1rem;
    color: #1F1D1A;
    background-color: #F7F3EC;
    padding: 14px 20px;
    border-radius: 14px;
    border: 1px solid transparent;
    transition: all 250ms cubic-bezier(.2,.8,.2,1);
}

.radio-label:hover {
    background-color: #E5DDD1;
}

.radio-label input[type="radio"] {
    accent-color: #7A8B62;
    width: 20px;
    height: 20px;
    transition: all 250ms cubic-bezier(.2,.8,.2,1);
}

.radio-label:has(input:checked) {
    background-color: #DCE8D2;
    border-color: #7A8B62;
    color: #3D4A27;
    font-weight: 600;
}

/* AUTOMATIC CODE GENERATION DESIGN */
.generated-code-container {
    background-color: #F7F3EC;
    padding: 28px;
    border-radius: 20px;
    border: 1px dashed #E5DDD1;
}

.generated-code-display-box {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background-color: #FFFDF8;
    border-radius: 14px;
    border: 1px solid #E5DDD1;
    margin: 16px 0;
}

.code-preview-placeholder {
    font-family: monospace;
    font-size: 2rem;
    font-weight: 700;
    color: #7B7067;
    letter-spacing: 0.05em;
}

.code-helper-text {
    font-size: 0.85rem;
    color: #7B7067;
    text-align: center;
    line-height: 1.5;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 36px;
}

.drop-publication-preview {
    max-height: 360px;
    overflow: auto;
    white-space: pre-wrap;
    border: 1px solid #E5DDD1;
    border-radius: 16px;
    background-color: #FFFBF4;
    color: #1F1D1A;
    font-family: inherit;
    font-size: 0.92rem;
    line-height: 1.55;
    padding: 16px;
}

/* VISTA COMPLETA: PRENDA DETALLE SYSTEM */
.det-prenda-status-row {
    margin-top: 12px;
}

.prenda-progress-panel {
    background-color: #FFFDF8;
    border: 1px solid #E5DDD1;
    border-radius: 24px;
    padding: 32px;
    margin-bottom: 36px;
    box-shadow: 0 4px 20px rgba(31, 29, 26, 0.01);
    transition: all 250ms cubic-bezier(.2,.8,.2,1);
}

.prenda-progress-panel h2 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1F1D1A;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.progress-stats {
    font-size: 0.95rem;
    color: #7B7067;
    font-weight: 600;
    margin-bottom: 16px;
}

.progress-steps-list {
    display: flex;
    justify-content: space-between;
    list-style: none;
    margin-top: 20px;
    gap: 12px;
}

.progress-steps-list li {
    font-size: 0.85rem;
    font-weight: 700;
    color: #7B7067;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 8px 16px;
    background-color: #F7F3EC;
    border-radius: 10px;
    flex: 1;
    text-align: center;
    transition: all 250ms cubic-bezier(.2,.8,.2,1);
}

.progress-steps-list li.step-done {
    background-color: #DCE8D2;
    color: #3D4A27;
}

.pulse-animated {
    animation: completionPulse 500ms ease-out;
}

@keyframes completionPulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(122, 139, 98, 0.4); }
    50% { transform: scale(1.04); box-shadow: 0 0 0 8px rgba(122, 139, 98, 0); }
    100% { transform: scale(1); }
}

/* CAJA DE VALIDACIÓN ELEGANTE */
.validation-alert-box {
    display: none;
    background-color: #FFF1F0;
    border: 1px solid #FFA39E;
    color: #A61D24;
    padding: 16px 24px;
    border-radius: 16px;
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 32px;
    animation: fadeIn 300ms ease;
}

.validation-alert-box.active {
    display: block;
}

.prenda-view-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 32px;
}

.form-section-card {
    background-color: #FFFDF8;
    border: 1px solid #E5DDD1;
    border-radius: 24px;
    padding: 36px;
    box-shadow: 0 4px 20px rgba(31, 29, 26, 0.01);
    transition: all 250ms cubic-bezier(.2,.8,.2,1);
}

.form-section-card:hover {
    box-shadow: 0 8px 30px rgba(31, 29, 26, 0.03);
    border-color: #D6CBB7;
}

.form-section-card h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1F1D1A;
    margin-bottom: 28px;
    border-bottom: 1px solid #F7F3EC;
    padding-bottom: 12px;
    letter-spacing: -0.01em;
}

.section-explanation-text {
    font-size: 0.85rem;
    color: #7B7067;
    line-height: 1.4;
    margin-bottom: 20px;
    font-style: italic;
}

.custom-measures-panel {
    border-top: 1px solid #F7F3EC;
    margin-top: 28px;
    padding-top: 24px;
}

.custom-measures-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.custom-measures-header h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1F1D1A;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

#custom-measures-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.custom-measures-empty {
    color: #7B7067;
    font-size: 0.9rem;
}

.custom-measure-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 12px;
    align-items: center;
}

.custom-measure-row input {
    background-color: #FFFDF8;
    border: 1px solid #E5DDD1;
    border-radius: 14px;
    padding: 14px;
    color: #1F1D1A;
    font-family: inherit;
    font-size: 0.95rem;
    outline: none;
    width: 100%;
}

.custom-measure-remove {
    width: 48px;
    height: 48px;
    padding: 0;
    font-size: 1.2rem;
}

.prenda-card-thumbnail {
    width: 100%;
    aspect-ratio: 1 / 1;
    min-height: 0;
    border-radius: 16px;
    background-color: #F7F3EC;
    border: 1px solid #E5DDD1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 18px;
    color: #7B7067;
    font-size: 0.9rem;
    font-weight: 600;
    overflow: hidden;
}

.interactive-prenda-card .card-title {
    font-size: 1.02rem;
}

.interactive-prenda-card .card-body {
    gap: 8px;
}

.interactive-prenda-card .card-prop {
    font-size: 0.82rem;
}

.prenda-card-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

.prenda-card-thumbnail.has-file-name,
.prenda-card-thumbnail.is-empty {
    flex-direction: column;
    gap: 8px;
}

.thumbnail-icon {
    font-size: 1.5rem;
}

.draft-thumbnail {
    border-style: dashed;
}

.draft-photo-note {
    grid-column: 1 / -1;
    color: #7B7067;
    font-size: 0.76rem;
    line-height: 1.35;
    margin: -4px 0 0;
}

.draft-photo-note {
    background-color: #FFFDF8;
    border: 1px dashed #E5DDD1;
    border-radius: 14px;
    padding: 10px 12px;
}

.prendas-filters-panel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.prendas-filters-panel .form-group {
    margin-bottom: 0;
}

/* PROTAGONISMO VISUAL DE MONEDA PERUANA */
.currency-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background-color: #FFFDF8;
    border-radius: 16px;
    border: 1px solid #E5DDD1;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.01);
}

.currency-symbol {
    position: absolute;
    left: 24px;
    font-size: 1.35rem;
    font-weight: 700;
    color: #1F1D1A;
}

.currency-input-wrapper input {
    padding-left: 64px !important;
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
    border: none !important;
    height: 56px;
}

.comercial-metrics-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 24px;
}

.comercial-metric-box {
    background-color: #F7F3EC;
    padding: 18px;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border: 1px solid #E5DDD1;
    transition: all 250ms cubic-bezier(.2,.8,.2,1);
}

.comercial-metric-box .label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #7B7067;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.comercial-metric-box .value {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1F1D1A;
}

.dropdown-spacing-top {
    margin-top: 24px;
}

/* SECCIÓN DE ESTILOS DINÁMICOS ESCALABLES */
.styles-dynamic-manager {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.styles-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    max-height: 260px;
    overflow-y: auto;
    padding-right: 4px;
}

.add-new-style-action-box {
    display: flex;
    gap: 12px;
    background-color: #F7F3EC;
    padding: 16px;
    border-radius: 16px;
    border: 1px dashed #E5DDD1;
}

.add-new-style-action-box input {
    flex: 1;
    background-color: #FFFDF8 !important;
}

/* MULTIMEDIA STUDIO GALLERY CARDS */
.visual-studio-multimedia-section {
    grid-column: 1 / -1;
}

.multimedia-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 24px;
    margin-top: 8px;
}

.multimedia-tile-card {
    background: #FFFDF8;
    border: 1px solid #E5DDD1;
    border-radius: 18px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    transition: all 250ms cubic-bezier(.2,.8,.2,1);
    box-shadow: 0 2px 8px rgba(31, 29, 26, 0.01);
}

.multimedia-tile-card:hover {
    transform: translateY(-2px);
    border-color: #7A8B62;
    box-shadow: 0 6px 16px rgba(31, 29, 26, 0.03);
}

.tile-header {
    font-size: 0.85rem;
    font-weight: 700;
    color: #1F1D1A;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tile-preview-frame {
    height: 120px;
    background: #F7F3EC;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px;
    text-align: center;
    border: 1px solid transparent;
    transition: all 250ms cubic-bezier(.2,.8,.2,1);
}

.tile-preview-frame.has-file {
    background: #DCE8D2;
    border-color: #7A8B62;
}

.tile-placeholder-text {
    font-size: 0.85rem;
    color: #7B7067;
    font-weight: 500;
}

.file-success-icon {
    font-size: 1.35rem;
    color: #3D4A27;
    font-weight: 700;
    margin-bottom: 4px;
}

.file-success-name {
    font-size: 0.75rem;
    color: #3D4A27;
    font-weight: 600;
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tile-uploader-trigger {
    position: relative;
    overflow: hidden;
}

.tile-uploader-trigger input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 5;
}

/* PREMIUM CHECKBOX PANEL DESIGN */
.checkbox-group-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.checkbox-label-premium {
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    font-size: 1rem;
    color: #1F1D1A;
    background-color: #F7F3EC;
    padding: 16px;
    border-radius: 14px;
    transition: all 250ms cubic-bezier(.2,.8,.2,1);
    position: relative;
    user-select: none;
}

.checkbox-label-premium input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkbox-custom {
    width: 22px;
    height: 22px;
    background-color: #FFFDF8;
    border: 2px solid #E5DDD1;
    border-radius: 7px;
    transition: all 250ms cubic-bezier(.2,.8,.2,1);
    position: relative;
}

.checkbox-label-premium input:checked ~ .checkbox-custom {
    background-color: #7A8B62;
    border-color: #7A8B62;
}

.checkbox-custom::after {
    content: "";
    position: absolute;
    display: none;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #FFFDF8;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox-label-premium input:checked ~ .checkbox-custom::after {
    display: block;
}

.checkbox-label-premium:has(input:checked) {
    background-color: #DCE8D2;
    color: #3D4A27;
    font-weight: 600;
}

.tile-help-text {
    color: #7B7067;
    font-size: 0.76rem;
    line-height: 1.35;
}

/* COMMERCIAL MODULE */
.commercial-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 28px;
}

.commercial-tab {
    border: 1px solid #E5DDD1;
    background-color: #FFFDF8;
    color: #7B7067;
    border-radius: 999px;
    padding: 11px 16px;
    font-family: inherit;
    font-weight: 700;
    cursor: pointer;
}

.commercial-tab.active {
    background-color: #1F1D1A;
    color: #FFFDF8;
    border-color: #1F1D1A;
}

.commercial-panel {
    display: none;
}

.commercial-panel.active {
    display: block;
}

.commercial-section-header {
    background-color: #FFFDF8;
    border: 1px solid #E5DDD1;
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.commercial-section-header h2 {
    font-size: 1.25rem;
    color: #1F1D1A;
    margin-bottom: 8px;
}

.commercial-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    background-color: #FFFDF8;
    border: 1px solid #E5DDD1;
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 24px;
}

#form-commercial-content {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: stretch;
}

#form-commercial-content > select,
#form-commercial-content > input,
#form-commercial-content > .commercial-date-field {
    grid-column: span 3;
}

#form-commercial-content > textarea,
#form-commercial-content > .commercial-reference-fields {
    grid-column: span 6;
}

#form-commercial-content > .commercial-context-summary {
    grid-column: span 6;
}

#form-commercial-content > .commercial-format-hint {
    grid-column: span 6;
    align-self: stretch;
}

#form-commercial-content > .commercial-production-checklist,
#form-commercial-content > .commercial-prenda-selector,
#form-commercial-content > .btn {
    grid-column: 1 / -1;
}

.commercial-form-grid input,
.commercial-form-grid select,
.commercial-form-grid textarea {
    width: 100%;
    border: 1px solid #E5DDD1;
    border-radius: 14px;
    padding: 12px 14px;
    background-color: #FFFBF4;
    font-family: inherit;
    color: #1F1D1A;
}

.commercial-date-field {
    display: grid;
    gap: 6px;
    color: #7B7067;
    font-size: 0.78rem;
    font-weight: 800;
}

.commercial-date-field input {
    font-size: 0.95rem;
    font-weight: 500;
}

#drop-status[data-status="borrador"] {
    background-color: #F7F3EC;
}

#drop-status[data-status="programado"] {
    background-color: #FFF4C9;
}

#drop-status[data-status="publicado"] {
    background-color: #E7F0DD;
}

#drop-status[data-status="cerrado"] {
    background-color: #ECEAE6;
}

.commercial-form-grid select[multiple] {
    min-height: 118px;
}

.commercial-prenda-selector {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 18px;
}

.commercial-selector-filters {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
    padding: 12px;
    border: 1px solid #E5DDD1;
    border-radius: 16px;
    background-color: #FFFBF4;
}

.commercial-selector-filters input,
.commercial-selector-filters select {
    width: 100%;
    border: 1px solid #E5DDD1;
    border-radius: 12px;
    padding: 10px 12px;
    background-color: #FFFDF8;
    font-family: inherit;
    color: #1F1D1A;
}

.commercial-selector-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    border: 1px solid #E5DDD1;
    border-radius: 12px;
    padding: 10px 12px;
    background-color: #FFFDF8;
    color: #4F4942;
    font-size: 0.82rem;
    font-weight: 800;
}

.commercial-selector-checkbox input {
    width: 16px;
    height: 16px;
    accent-color: #7A8B62;
}

.commercial-selector-scope {
    min-height: 42px;
    align-self: stretch;
}

.commercial-format-hint {
    grid-column: 1 / -1;
    color: #7B7067;
    background-color: #FFFBF4;
    border: 1px dashed #E5DDD1;
    border-radius: 14px;
    padding: 10px 12px;
    font-size: 0.82rem;
    line-height: 1.45;
}

.commercial-field-hint {
    display: block;
    margin-top: 5px;
    color: #7B7067;
    font-size: 0.72rem;
    font-weight: 700;
}

.commercial-context-summary {
    grid-column: 1 / -1;
    background-color: #FFFDF8;
    border: 1px solid #E5DDD1;
    border-radius: 14px;
    color: #7B7067;
    font-size: 0.86rem;
    line-height: 1.45;
    padding: 12px 14px;
}

.commercial-content-summary {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 10px 16px;
    margin: 10px 0 18px;
    border: 1px solid #E5DDD1;
    border-radius: 16px;
    background-color: #FFFDF8;
    padding: 12px 16px;
}

.commercial-content-summary > strong {
    color: #1F1D1A;
    font-size: 0.9rem;
    line-height: 1.2;
}

.commercial-content-format-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.commercial-content-format-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid #E5DDD1;
    border-radius: 999px;
    background-color: #FFFBF4;
    color: #6B625A;
    padding: 7px 12px;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.2;
}

.commercial-content-format-chip.has-pending {
    border-color: #E7C7BD;
    background-color: #FFF4EF;
    color: #8F4034;
    font-weight: 900;
}

.commercial-content-format-chip.is-empty {
    opacity: 0.58;
}

.creative-start-panel {
    border: 1px solid #E5DDD1;
    border-radius: 18px;
    background-color: #FFFDF8;
    margin-bottom: 14px;
}

.creative-start-panel {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    overflow: hidden;
    position: relative;
    margin-bottom: 14px;
    border: 1px solid #E5DDD1;
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(247, 237, 248, 0.72), rgba(255, 251, 244, 0.92) 48%, rgba(232, 235, 216, 0.42)),
        #FFFDF8;
    padding: 18px;
}

.creative-start-panel span,
.creative-next-header span {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 6px;
    color: #775072;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.creative-start-panel h3 {
    margin: 0;
    color: #1F1D1A;
    font-size: 1.05rem;
}

.creative-start-panel p {
    margin: 4px 0 0;
    color: #7B7067;
    font-size: 0.84rem;
}

.creative-start-mark {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border: 1px solid rgba(119, 80, 114, 0.18);
    border-radius: 16px;
    background-color: rgba(255, 253, 248, 0.74);
    color: #A9789D;
    font-size: 1.15rem;
}

.creative-start-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.creative-next-panel {
    display: grid;
    gap: 14px;
    margin-bottom: 18px;
    padding: 14px;
    border: 1px solid #E5DDD1;
    border-radius: 18px;
    background-color: #FFFDF8;
}

.creative-next-header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
}

.creative-next-header h3 {
    margin: 0;
    color: #1F1D1A;
    font-size: 1.08rem;
}

.creative-next-header p {
    margin: 4px 0 0;
    color: #7B7067;
    font-size: 0.84rem;
}

.creative-next-header strong {
    border-radius: 999px;
    background-color: #E8EBD8;
    color: #566238;
    padding: 6px 10px;
    font-size: 0.76rem;
    white-space: nowrap;
}

.creative-next-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    align-items: start;
}

.creative-story-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.creative-story-filter {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid #E5DDD1;
    border-radius: 999px;
    background-color: #FFFBF4;
    color: #6B625A;
    padding: 7px 10px;
    font: inherit;
    font-size: 0.76rem;
    font-weight: 800;
    cursor: pointer;
}

.creative-story-filter strong {
    display: grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    border-radius: 999px;
    background-color: #F5EFE5;
    color: #6B625A;
    font-size: 0.72rem;
}

.creative-story-filter.active {
    border-color: #D8C6DD;
    background-color: #FBF3FA;
    color: #775072;
}

.creative-group-card {
    display: flex;
    min-height: 184px;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
    border: 1px solid #F2EBE1;
    border-radius: 16px;
    background-color: #FFFBF4;
    padding: 16px;
}

.creative-group-card.active {
    border-color: #B9C59A;
    box-shadow: 0 10px 24px rgba(86, 98, 56, 0.08);
}

.creative-group-count {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: 12px;
    border-radius: 14px;
    background-color: #E8EBD8;
    color: #566238;
    font-size: 1.1rem;
    font-weight: 900;
}

.creative-group-card h4,
.creative-group-card p,
.creative-group-card small {
    display: block;
}

.creative-group-card h4 {
    margin: 0;
    color: #1F1D1A;
    font-size: 1rem;
}

.creative-group-card p {
    margin: 5px 0 0;
    color: #1F1D1A;
    font-size: 0.86rem;
    font-weight: 800;
    line-height: 1.35;
}

.creative-group-card small {
    margin-top: 6px;
    color: #7B7067;
    font-size: 0.76rem;
    line-height: 1.35;
}

.creative-next-detail:empty {
    display: none;
}

.creative-story-card {
    display: flex;
    position: relative;
    overflow: visible;
    min-height: 176px;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid #F2EBE1;
    border-radius: 16px;
    background-color: #FFFBF4;
    padding: 14px;
}

.creative-story-card > div:not(.creative-story-menu-wrap) {
    padding-right: 28px;
}

.creative-story-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background-color: #E6D9C8;
}

.creative-story-card-drop::before {
    background: linear-gradient(90deg, #E8D7F0, #F3D4DD);
}

.creative-story-card-collection::before {
    background: linear-gradient(90deg, #DCE9CE, #CFE0C5);
}

.creative-story-card.has-editorial-plan {
    border-color: #EFE0B4;
    background-color: #FFF8E2;
}

.creative-story-card.has-editorial-plan::before {
    background: linear-gradient(90deg, #F2DFA6, #F8EDC8);
}

.creative-story-card-content::before {
    background: linear-gradient(90deg, #E9DFD1, #F0E7DA);
}

.creative-story-menu-wrap {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
}

.creative-story-menu {
    position: relative;
}

.creative-story-menu summary {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid #E5DDD1;
    border-radius: 999px;
    background-color: rgba(255, 253, 248, 0.88);
    color: #7B7067;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    list-style: none;
}

.creative-story-menu summary::-webkit-details-marker {
    display: none;
}

.creative-story-menu div {
    display: grid;
    position: absolute;
    top: 34px;
    right: 0;
    min-width: 178px;
    gap: 4px;
    border: 1px solid #E5DDD1;
    border-radius: 12px;
    background-color: #FFFDF8;
    box-shadow: 0 16px 36px rgba(69, 54, 35, 0.12);
    padding: 6px;
}

.creative-story-menu button {
    border: 0;
    border-radius: 9px;
    background-color: transparent;
    color: #4E4740;
    padding: 8px 9px;
    text-align: left;
    font: inherit;
    font-size: 0.76rem;
    font-weight: 800;
    cursor: pointer;
}

.creative-story-menu button:hover {
    background-color: #F8F0E5;
}

.creative-story-menu button.danger {
    color: #9A3F33;
}

.creative-story-type {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 8px;
    border-radius: 999px;
    background-color: transparent;
    color: #7B7067;
    padding: 0;
    font-size: 0.68rem;
    font-weight: 800;
}

.creative-story-kind {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 8px;
    border-radius: 999px;
    background-color: #F7EDF8;
    color: #775072;
    font-size: 0.68rem;
    font-weight: 800;
    padding: 5px 9px;
}

.creative-story-card h4 {
    margin: 0;
    color: #1F1D1A;
    font-size: 0.96rem;
}

.creative-story-card p {
    margin: 5px 0 8px;
    color: #7B7067;
    font-size: 0.78rem;
    line-height: 1.4;
}

.creative-story-card .creative-story-line {
    margin: 6px 0 0;
    color: #6B625A;
    font-size: 0.8rem;
    font-weight: 700;
}

.creative-story-card .creative-story-numbers {
    display: grid;
    gap: 4px;
    margin: 8px 0 4px;
    color: #7B7067;
    font-size: 0.76rem;
    font-weight: 400;
    line-height: 1.45;
}

.creative-story-card .creative-story-numbers span {
    display: block;
}

.creative-story-deadline,
.creative-drop-deadline-line {
    display: inline-flex;
    width: fit-content;
    margin-top: 7px;
    border-radius: 999px;
    padding: 5px 10px;
    color: #6B625A;
    font-size: 0.78rem;
    font-weight: 900;
}

.creative-story-deadline.deadline-overdue,
.creative-drop-deadline-line.deadline-overdue {
    background-color: #FFF1ED;
    color: #9A3F33;
}

.creative-story-deadline.deadline-urgent,
.creative-drop-deadline-line.deadline-urgent {
    background-color: #FFF7DF;
    color: #8B641B;
}

.creative-story-deadline.deadline-neutral,
.creative-drop-deadline-line.deadline-neutral {
    background-color: #F5EFE5;
}

.creative-story-card .btn {
    width: 100%;
    min-height: 32px;
    padding: 7px 10px;
    font-size: 0.82rem;
    font-weight: 800;
}

.creative-story-card-drop {
    border-color: #F2EBE1;
    background-color: #FFFBF4;
}

.creative-story-card-drop.is-open {
    border-color: #D8CEC1;
    box-shadow: 0 10px 28px rgba(69, 54, 35, 0.08);
}

.creative-story-card.is-editorial-seed {
    min-height: 136px;
    background-color: #FFFDF8;
}

.creative-story-card.is-editorial-seed .creative-story-line {
    color: #7B7067;
    font-weight: 500;
}

.creative-story-card.is-editorial-seed .creative-story-meta {
    color: #8C8177;
    font-weight: 500;
}

.creative-story-meta {
    display: block;
    margin-top: 8px;
    color: #6B625A;
    font-size: 0.76rem;
    font-weight: 700;
}

.creative-story-card-drop .commercial-status-badge {
    display: none;
}

.creative-drop-studio {
    display: grid;
    gap: 14px;
    margin-bottom: 18px;
    border: 1px solid #E5DDD1;
    border-radius: 18px;
    background-color: #FFFDF8;
    padding: 16px;
}

.creative-drop-studio.is-hidden {
    display: none;
}

.creative-drop-studio-header,
.creative-drop-content-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.creative-drop-studio-header h3,
.creative-drop-content-head h4 {
    margin: 0;
    color: #1F1D1A;
}

.creative-drop-studio-header p,
.creative-drop-content-head p {
    margin: 4px 0 0;
    color: #7B7067;
    font-size: 0.82rem;
}

.creative-drop-studio-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.creative-drop-missing {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

.creative-drop-missing div {
    border: 1px solid #F0E2CA;
    border-radius: 14px;
    background-color: #FFF8EA;
    padding: 12px;
}

.creative-drop-missing strong,
.creative-drop-missing span {
    display: block;
}

.creative-drop-missing strong {
    color: #8B6D42;
    font-size: 0.76rem;
    text-transform: uppercase;
}

.creative-drop-missing span {
    margin-top: 5px;
    color: #1F1D1A;
    font-size: 0.88rem;
    font-weight: 800;
}

.creative-drop-studio-metrics div,
.creative-drop-studio-summary,
.creative-drop-empty,
.creative-drop-content-card {
    border: 1px solid #F2EBE1;
    border-radius: 14px;
    background-color: #FFFBF4;
    padding: 12px;
}

.creative-drop-studio-metrics .deadline-overdue {
    border-color: #F3C9C0;
    background-color: #FFF1ED;
}

.creative-drop-studio-metrics .deadline-overdue strong {
    color: #9A3F33;
}

.creative-drop-studio-metrics .deadline-urgent {
    border-color: #F1D7A8;
    background-color: #FFF7DF;
}

.creative-drop-studio-metrics .deadline-urgent strong {
    color: #8B641B;
}

.creative-drop-studio-metrics strong,
.creative-drop-studio-metrics span,
.creative-drop-studio-summary strong,
.creative-drop-studio-summary span,
.creative-drop-empty strong,
.creative-drop-empty span {
    display: block;
}

.creative-drop-studio-metrics strong {
    color: #1F1D1A;
    font-size: 0.96rem;
}

.creative-drop-studio-metrics span,
.creative-drop-studio-summary span,
.creative-drop-empty span {
    margin-top: 4px;
    color: #7B7067;
    font-size: 0.76rem;
}

.creative-drop-studio-body,
.creative-drop-content-list {
    display: grid;
    gap: 10px;
}

.creative-drop-format-summary {
    display: grid;
    gap: 8px;
    border: 1px solid #F0E2CA;
    border-radius: 12px;
    background-color: #FFFDF8;
    padding: 10px;
}

.format-pending-group {
    display: grid;
    gap: 6px;
}

.format-pending-group > strong {
    color: #1F1D1A;
    font-size: 0.78rem;
    line-height: 1.2;
}

.format-pending-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.format-pending-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid #E5DDD1;
    border-radius: 999px;
    background-color: #FFFBF4;
    color: #6B625A;
    padding: 4px 8px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
}

.format-pending-chip.has-pending {
    border-color: #E7C7BD;
    background-color: #FFF4EF;
    color: #8F4034;
    font-weight: 900;
}

.format-pending-chip.is-empty {
    opacity: 0.55;
}

.creative-drop-prendas-panel {
    display: grid;
    gap: 10px;
    width: 100%;
    border: 1px solid #F2EBE1;
    border-radius: 14px;
    background-color: #FFFDF8;
    padding: 10px 12px;
}

.creative-drop-prendas-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.creative-drop-prendas-title {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: baseline;
    min-width: 0;
}

.creative-drop-prendas-head strong {
    color: #1F1D1A;
    font-size: 0.82rem;
    white-space: nowrap;
}

.creative-drop-prendas-head span {
    color: #7B7067;
    font-size: 0.76rem;
    font-weight: 500;
}

.creative-drop-prendas-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.creative-drop-prendas-filters button,
.creative-drop-prendas-more {
    border: 1px solid #E5DDD1;
    border-radius: 999px;
    background-color: #FFFBF4;
    color: #6B625A;
    padding: 6px 9px;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 800;
    cursor: pointer;
}

.creative-drop-prendas-filters button.active {
    border-color: #D8C6DD;
    background-color: #FBF3FA;
    color: #775072;
}

.creative-drop-prendas-filters button span {
    display: inline;
    margin-left: 4px;
    color: inherit;
    font-size: 0.7rem;
}

.creative-drop-prendas-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 26px;
    gap: 0 26px;
    width: 100%;
    overflow: hidden;
    border-top: 1px solid #EFE6DA;
    border-bottom: 1px solid #EFE6DA;
    background-color: #FFFDF8;
}

.creative-drop-prenda-row {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr) 66px;
    gap: 10px;
    align-items: center;
    min-height: 32px;
    max-height: 40px;
    border-bottom: 1px solid #F3ECE2;
    background-color: transparent;
    padding: 4px 0;
}

.creative-drop-prenda-row:nth-last-child(-n + 2) {
    border-bottom: 0;
}

.creative-drop-prenda-row strong {
    color: #1F1D1A;
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

.creative-drop-prenda-row span {
    color: #6B625A;
    font-size: 0.76rem;
    font-weight: 500;
    line-height: 1.25;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.creative-drop-prenda-row.needs-work span {
    color: #9A4C3E;
}

.creative-drop-prenda-row button {
    justify-self: end;
    border: 0;
    background-color: transparent;
    color: #3B332D;
    padding: 2px 0;
    font: inherit;
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
}

.creative-drop-prenda-row.needs-work button {
    color: #8F4034;
}

.creative-drop-prendas-more {
    justify-self: start;
}

.commercial-content-prendas-panel {
    margin-top: 10px;
}

.creative-drop-content-card {
    display: grid;
    gap: 10px;
}

.creative-drop-content-card .commercial-content-progress {
    margin-top: 0;
}

.creative-drop-content-card .commercial-thumb-strip {
    gap: 10px;
    margin-top: 10px;
}

.creative-drop-content-card .commercial-strip-thumb {
    flex-basis: 104px;
    width: 104px;
    border-radius: 14px;
}

.creative-drop-content-card .commercial-strip-thumb .commercial-prenda-thumb {
    font-size: 0.72rem;
}

.creative-drop-content-card .content-task-checks {
    align-items: center;
}

.creative-drop-content-card .content-task-checks small,
.content-task-file-slot {
    color: #7B7067;
    font-size: 0.7rem;
    font-weight: 800;
}

.content-task-file-slot {
    display: block;
    margin-top: 6px;
}

.creative-drop-content-actions {
    display: flex;
    justify-content: flex-end;
}

.creative-drop-empty {
    display: grid;
    gap: 10px;
}

.creative-drop-empty .btn {
    width: fit-content;
}

.creative-empty-state {
    grid-column: 1 / -1;
    border: 1px dashed #E5DDD1;
    border-radius: 16px;
    background-color: #FFFBF4;
    padding: 18px;
}

.creative-empty-state strong,
.creative-empty-state span {
    display: block;
}

.creative-empty-state strong {
    color: #1F1D1A;
    font-size: 1rem;
}

.creative-empty-state span {
    margin-top: 4px;
    color: #7B7067;
    font-size: 0.86rem;
}

.creative-ideas-panel {
    display: grid;
    gap: 14px;
    margin-bottom: 18px;
    padding: 14px;
    border: 1px solid #E5DDD1;
    border-radius: 18px;
    background-color: #FFFDF8;
}

.creative-ideas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
}

.creative-idea-card {
    border: 1px solid #F2EBE1;
    border-radius: 16px;
    background-color: #FFFBF4;
    cursor: pointer;
    font-family: inherit;
    padding: 14px;
    text-align: left;
    transition: all 200ms ease;
}

.creative-idea-card:hover {
    border-color: #B9C59A;
    transform: translateY(-2px);
}

.creative-idea-card span,
.creative-idea-card strong,
.creative-idea-card small {
    display: block;
}

.creative-idea-card span {
    font-size: 1.35rem;
    margin-bottom: 9px;
}

.creative-idea-card strong {
    color: #1F1D1A;
    font-size: 0.88rem;
}

.creative-idea-card small {
    margin-top: 4px;
    color: #7B7067;
    font-size: 0.74rem;
    line-height: 1.35;
}

.creative-next-section {
    display: grid;
    gap: 8px;
    min-width: 0;
    border: 1px solid #F2EBE1;
    border-radius: 14px;
    background-color: #FFFBF4;
    padding: 10px;
}

.creative-next-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.creative-next-section-head h4 {
    margin: 0;
    color: #1F1D1A;
    font-size: 0.86rem;
}

.creative-next-section-head p {
    margin: 3px 0 0;
    color: #7B7067;
    font-size: 0.74rem;
}

.creative-next-section-head span {
    border-radius: 999px;
    background-color: #F2EBE1;
    color: #7B7067;
    min-width: 24px;
    padding: 4px 7px;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 900;
}

.creative-next-urgent .creative-next-section-head span {
    background-color: #F7DDE6;
    color: #7C3F55;
}

.creative-next-week .creative-next-section-head span {
    background-color: #FFF4C9;
    color: #75622E;
}

.creative-next-list {
    display: grid;
    gap: 7px;
}

.creative-next-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px 8px;
    align-items: center;
    border-radius: 12px;
    background-color: #FFFDF8;
    border: 1px solid #F2EBE1;
    padding: 8px;
}

.creative-next-type,
.creative-next-date {
    width: fit-content;
    border-radius: 999px;
    padding: 4px 7px;
    font-size: 0.66rem;
    font-weight: 900;
    line-height: 1;
}

.creative-next-type {
    background-color: #EFE3F1;
    color: #6B4A70;
}

.creative-next-date {
    background-color: #FFF4C9;
    color: #75622E;
}

.creative-next-row-main {
    min-width: 0;
}

.creative-next-row-main strong,
.creative-next-row-main small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.creative-next-row-main strong {
    color: #1F1D1A;
    font-size: 0.82rem;
}

.creative-next-row-main small {
    margin-top: 2px;
    color: #7B7067;
    font-size: 0.72rem;
}

.creative-next-row .commercial-status-badge {
    margin: 0;
    padding: 4px 7px;
    font-size: 0.62rem;
}

.creative-next-more {
    border: none;
    border-radius: 999px;
    background-color: #1F1D1A;
    color: #FFFDF8;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.74rem;
    font-weight: 800;
    padding: 7px 10px;
    justify-self: start;
}

.commercial-production-checklist {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
    gap: 8px;
    padding: 12px;
    border: 1px solid #E5DDD1;
    border-radius: 16px;
    background-color: #FFFDF8;
}

.commercial-production-checklist h3 {
    grid-column: 1 / -1;
    margin: 0 0 4px;
    font-size: 0.92rem;
    color: #1F1D1A;
}

.content-plan-card {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 6px;
    border-radius: 12px;
    background-color: #FFFBF4;
    border: 1px solid #F2EBE1;
    min-height: 96px;
    padding: 10px;
    color: #4F4942;
    font-size: 0.78rem;
}

.content-plan-card > input[type="checkbox"] {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
}

.content-plan-card strong {
    grid-column: 1 / -1;
    color: #1F1D1A;
    font-size: 0.84rem;
}

.content-plan-icon {
    grid-column: 1;
    font-size: 1.1rem;
    line-height: 1;
}

.content-plan-count {
    grid-column: 1 / -1;
    width: fit-content;
    border-radius: 999px;
    background-color: #E8EBD8;
    padding: 4px 8px;
    color: #7A8B62;
    font-size: 0.74rem;
    font-weight: 800;
}

.content-plan-qty-label {
    display: none;
    color: #7B7067;
    font-size: 0.68rem;
    font-weight: 700;
}

.commercial-production-checklist input[type="checkbox"] {
    width: 16px;
    height: 16px;
}

.commercial-production-checklist input[type="number"] {
    grid-column: 1 / -1;
    min-width: 0;
    padding: 6px 8px;
    text-align: center;
}

.commercial-reference-fields {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(150px, 0.6fr) minmax(220px, 1fr) minmax(220px, 1fr);
    gap: 10px;
    align-items: center;
    padding: 12px;
    border: 1px solid #E5DDD1;
    border-radius: 16px;
    background-color: #FFFDF8;
}

.commercial-reference-fields strong {
    color: #1F1D1A;
    font-size: 0.86rem;
}

.commercial-drop-cover-field {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(150px, 0.45fr) minmax(180px, 0.75fr) minmax(160px, 1fr);
    gap: 10px;
    align-items: center;
    padding: 12px;
    border: 1px solid #E5DDD1;
    border-radius: 16px;
    background-color: #FFFDF8;
}

.commercial-drop-cover-field > span {
    color: #1F1D1A;
    font-size: 0.86rem;
    font-weight: 800;
}

.commercial-drop-cover-preview {
    width: 132px;
    height: 84px;
    border: 1px dashed #D9CFC0;
    border-radius: 14px;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #7B7067;
    font-size: 0.78rem;
    font-weight: 800;
    background-color: #FFFBF4;
}

.commercial-drop-cover-preview.has-cover {
    border-style: solid;
}

.commercial-drop-cover-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.commercial-list-switch {
    display: inline-flex;
    gap: 8px;
    background-color: #FFFDF8;
    border: 1px solid #E5DDD1;
    border-radius: 999px;
    padding: 6px;
    margin: 0 0 18px;
}

.commercial-list-mode {
    border: none;
    border-radius: 999px;
    background-color: transparent;
    color: #7B7067;
    cursor: pointer;
    font-family: inherit;
    font-weight: 800;
    padding: 9px 14px;
}

.commercial-list-mode.active {
    background-color: #1F1D1A;
    color: #FFFDF8;
}

.commercial-list {
    display: grid;
    gap: 14px;
}

.commercial-catalog-grid {
    grid-template-columns: 1fr;
    align-items: start;
}

.commercial-catalog-section {
    display: grid;
    gap: 12px;
}

.commercial-catalog-section h3,
.commercial-calendar-group h3 {
    color: #1F1D1A;
    font-size: 1rem;
    margin: 4px 0 0;
}

.commercial-catalog-section-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}

.commercial-calendar-group {
    display: grid;
    gap: 10px;
}

.commercial-calendar-items {
    display: grid;
    gap: 10px;
}

.commercial-calendar-toolbar,
.commercial-calendar-month,
.commercial-calendar-day-detail,
.commercial-calendar-undated {
    background-color: #FFFDF8;
    border: 1px solid #E5DDD1;
    border-radius: 20px;
    padding: 18px;
}

.commercial-calendar-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: start;
}

.commercial-calendar-toolbar h3 {
    font-size: 1.45rem;
    margin: 3px 0 4px;
    text-transform: capitalize;
}

.commercial-calendar-toolbar p {
    color: #75695F;
    margin: 0;
}

.commercial-calendar-eyebrow {
    color: #7B4F79;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.commercial-calendar-controls,
.commercial-calendar-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.commercial-calendar-filters {
    grid-column: 1 / -1;
    justify-content: flex-start;
}

.commercial-calendar-weekdays,
.commercial-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.commercial-calendar-weekdays {
    gap: 8px;
    margin-bottom: 8px;
    color: #8A7B70;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.commercial-calendar-weekdays span {
    padding: 0 6px;
}

.commercial-calendar-grid {
    border: 1px solid #EFE6DA;
    border-radius: 16px;
    overflow: hidden;
}

.commercial-calendar-day {
    min-height: 138px;
    background-color: #FFFDF8;
    border-right: 1px solid #EFE6DA;
    border-bottom: 1px solid #EFE6DA;
    padding: 8px;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 6px;
}

.commercial-calendar-day:nth-child(7n) {
    border-right: none;
}

.commercial-calendar-day:nth-last-child(-n + 7) {
    border-bottom: none;
}

.commercial-calendar-day.is-muted {
    background-color: #FAF5EC;
    color: #A29487;
}

.commercial-calendar-day.is-today {
    box-shadow: inset 0 0 0 2px #D8C5A5;
}

.commercial-calendar-day.is-selected {
    background-color: #FFF9EE;
}

.commercial-calendar-day.has-late {
    background-color: #FFF6F1;
}

.commercial-calendar-day.is-loaded .commercial-calendar-day-button strong {
    background-color: #E7D7B5;
}

.commercial-calendar-day-button {
    border: 0;
    background: transparent;
    color: #1F1D1A;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    text-align: left;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.commercial-calendar-day-button strong {
    background-color: #EEE7DC;
    border-radius: 999px;
    color: #62584F;
    font-size: 0.7rem;
    padding: 3px 7px;
}

.commercial-calendar-events {
    display: grid;
    align-content: start;
    gap: 5px;
}

.commercial-calendar-event {
    width: 100%;
    border: 1px solid transparent;
    border-radius: 9px;
    padding: 5px 7px;
    background-color: #F7F0E7;
    color: #3C332B;
    font: inherit;
    font-size: 0.76rem;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.commercial-calendar-event span {
    margin-right: 4px;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.66rem;
}

.commercial-calendar-event-drop {
    background-color: #F6EAF4;
    color: #684263;
}

.commercial-calendar-event-content {
    background-color: #FFF2CE;
    color: #765728;
}

.commercial-calendar-event-collection {
    background-color: #EAF4DF;
    color: #506B3B;
}

.commercial-calendar-event.is-late,
.commercial-calendar-detail-item.is-late {
    background-color: #FCE0D9;
    border-color: #F2B7A9;
    color: #933B2F;
}

.commercial-calendar-more {
    color: #7D7065;
    font-size: 0.72rem;
    padding-left: 3px;
}

.commercial-calendar-day-detail,
.commercial-calendar-undated {
    display: grid;
    gap: 12px;
}

.commercial-calendar-day-detail-head,
.commercial-calendar-undated-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.commercial-calendar-day-detail-head span {
    color: #7B4F79;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.commercial-calendar-day-detail-head h3 {
    margin: 2px 0 0;
    text-transform: capitalize;
}

.commercial-calendar-day-detail-head strong,
.commercial-calendar-undated-summary strong {
    background-color: #E9EAD7;
    border-radius: 999px;
    color: #516032;
    font-weight: 800;
    padding: 7px 12px;
    white-space: nowrap;
}

.commercial-calendar-day-detail-list,
.commercial-calendar-undated-list {
    display: grid;
    gap: 8px;
}

.commercial-calendar-detail-item {
    border: 1px solid #E8DED1;
    border-radius: 14px;
    background-color: #FFFDF8;
    padding: 11px 12px;
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.commercial-calendar-detail-item span {
    color: #7B4F79;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.commercial-calendar-detail-item strong {
    color: #1F1D1A;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.commercial-calendar-detail-item small {
    color: #75695F;
    text-align: right;
}

.commercial-calendar-undated-summary {
    border: 0;
    background: transparent;
    color: #1F1D1A;
    font: inherit;
    padding: 0;
    text-align: left;
    cursor: pointer;
}

.commercial-calendar-undated-summary span {
    font-size: 1rem;
    font-weight: 800;
}

.commercial-item-card {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
    background-color: #FFFDF8;
    border: 1px solid #E5DDD1;
    border-radius: 16px;
    padding: 14px;
}

.commercial-item-card > div:first-child {
    min-width: 0;
    flex: 1;
}

.commercial-item-card h3 {
    font-size: 0.96rem;
    color: #1F1D1A;
    margin-bottom: 4px;
}

.commercial-item-card p,
.commercial-item-card small,
.commercial-item-help {
    display: block;
    color: #7B7067;
    line-height: 1.45;
}

.commercial-item-suggestion {
    display: block;
    width: fit-content;
    margin-top: 6px;
    border-radius: 999px;
    background-color: #FFF4C9;
    color: #75622E;
    padding: 5px 9px;
    font-size: 0.74rem;
    font-weight: 800;
}

.commercial-item-help {
    margin-top: 4px;
    font-size: 0.78rem;
}

.commercial-status-badge {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    border-radius: 999px;
    padding: 4px 9px;
    margin-bottom: 6px;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.commercial-status-borrador {
    background-color: #F2EBE1;
    color: #7B7067;
}

.commercial-status-programado {
    background-color: #FFF4C9;
    color: #75622E;
}

.commercial-status-publicado {
    background-color: #DCE8D2;
    color: #3D4A27;
}

.commercial-status-cerrado {
    background-color: #ECEAE6;
    color: #6B665F;
}

.commercial-status-idea {
    background-color: #F2EBE1;
    color: #7B7067;
}

.commercial-status-por-producir {
    background-color: #FFF4C9;
    color: #75622E;
}

.commercial-status-produciendo {
    background-color: #DCE9EF;
    color: #355568;
}

.commercial-status-producido {
    background-color: #DCE9EF;
    color: #355568;
}

.commercial-status-listo-para-editar {
    background-color: #E8EBD8;
    color: #566238;
}

.commercial-status-editando {
    background-color: #EFE3F1;
    color: #6B4A70;
}

.commercial-status-editado {
    background-color: #EFE3F1;
    color: #6B4A70;
}

.commercial-status-editado-listo {
    background-color: #EFE3F1;
    color: #6B4A70;
}

.commercial-status-listo-para-publicar {
    background-color: #DCE8D2;
    color: #3D4A27;
}

.commercial-status-archivado {
    background-color: #ECEAE6;
    color: #6B665F;
}

.commercial-status-recordatorio {
    background-color: #F7DDE6;
    color: #7C3F55;
}

.commercial-status-oculto {
    background-color: #F2EBE1;
    color: #7B7067;
}

.commercial-status-destacado {
    background-color: #FFF1B8;
    color: #7A6422;
}

.commercial-status-retirado {
    background-color: #ECEAE6;
    color: #6B665F;
}

.commercial-item-status-publicado,
.commercial-item-status-archivado {
    opacity: 0.78;
}

.commercial-content-progress {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.commercial-content-plan-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 7px;
    margin-top: 10px;
}

.content-task-card {
    display: grid;
    gap: 7px;
    align-content: start;
    min-height: 0;
    border: 1px solid #F2EBE1;
    border-radius: 14px;
    background-color: #FFFBF4;
    padding: 7px 8px;
}

.content-task-card.is-complete {
    border-color: #DCE8D2;
    background-color: #F8FBF3;
}

.content-task-head {
    display: grid;
    gap: 3px;
    color: #4F4942;
    font-size: 0.74rem;
    font-weight: 800;
}

.content-task-head strong,
.content-task-head span {
    display: block;
}

.content-task-progress {
    display: none;
}

.content-task-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background-color: #7A8B62;
}

.content-task-checks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin-top: 0;
}

.content-task-checks label,
.content-task-checks input {
    width: 18px;
    height: 18px;
}

.content-task-checks input {
    accent-color: #7A8B62;
}

.content-task-controls {
    display: flex;
    align-items: center;
    gap: 7px;
}

.content-task-controls button,
.commercial-copy-actions button {
    border: 1px solid #E5DDD1;
    border-radius: 999px;
    background-color: #FFFDF8;
    color: #4F4942;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    padding: 5px 8px;
}

.content-task-controls button {
    width: 24px;
    height: 24px;
    padding: 0;
}

.commercial-copy-actions button:disabled {
    cursor: not-allowed;
    opacity: 0.48;
}

.commercial-progress-step {
    border: 1px solid #E5DDD1;
    border-radius: 999px;
    background-color: #FFFBF4;
    color: #7B7067;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 6px 9px;
}

.commercial-progress-step.active {
    border-color: #7A8B62;
    background-color: #DCE8D2;
    color: #3D4A27;
}

.commercial-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.commercial-item-card-content {
    display: grid;
    grid-template-columns: 1fr;
}

.commercial-item-card-content .commercial-content-progress {
    margin-top: 10px;
}

.commercial-item-card-content .commercial-thumb-strip {
    gap: 10px;
    margin-top: 12px;
    flex-wrap: nowrap;
}

.commercial-item-card-content .commercial-strip-thumb {
    flex-basis: 104px;
    width: 104px;
    border-radius: 14px;
}

.commercial-item-card-content .commercial-strip-thumb .commercial-prenda-thumb {
    font-size: 0.72rem;
}

.commercial-item-card-drop {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.commercial-drop-main {
    display: grid;
    gap: 6px;
}

.commercial-drop-heading {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

.commercial-drop-heading strong {
    border-radius: 999px;
    background-color: #E8EBD8;
    color: #566238;
    padding: 6px 10px;
    font-size: 0.78rem;
    white-space: nowrap;
}

.commercial-item-card-drop .commercial-thumb-strip {
    grid-column: 1;
    grid-row: auto;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid #F2EBE1;
}

.commercial-item-card-drop .commercial-actions {
    grid-column: 1;
    grid-row: auto;
    justify-content: flex-start;
    padding-top: 12px;
    border-top: 1px solid #F2EBE1;
}

.commercial-item-card-drop > div:first-child {
    display: block;
}

.commercial-item-card-drop > div:first-child > h3,
.commercial-item-card-drop > div:first-child > .commercial-status-badge,
.commercial-item-card-drop > div:first-child > p,
.commercial-item-card-drop > div:first-child > small {
    grid-column: 1;
}

.commercial-drop-visual-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin-top: 0;
    padding-top: 12px;
    border-top: 1px solid #F2EBE1;
    overflow: hidden;
}

.commercial-drop-visual-row .commercial-thumb-strip {
    flex: 1;
    min-width: 0;
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.commercial-drop-cover-thumb {
    position: relative;
    flex: 0 0 clamp(104px, 12vw, 120px);
    width: clamp(104px, 12vw, 120px);
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 16px;
    border: 2px solid #C8B99F;
    background-color: #F2EBE1;
}

.commercial-drop-cover-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.commercial-drop-cover-thumb span {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 1;
    border-radius: 999px;
    background-color: rgba(255, 253, 248, 0.92);
    color: #4F4942;
    font-size: 0.64rem;
    font-weight: 900;
    padding: 4px 7px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.commercial-drop-prendas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 10px;
}

.commercial-drop-prenda-card {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    border: 1px solid #F2EBE1;
    border-radius: 14px;
    background-color: #FFFBF4;
    padding: 8px;
}

.commercial-drop-prenda-card.is-ready {
    border-color: #DCE8D2;
    background-color: #F8FBF3;
}

.commercial-drop-prenda-photo {
    width: 76px;
    aspect-ratio: 1 / 1.18;
    border-radius: 12px;
    overflow: hidden;
    display: grid;
    place-items: center;
    text-align: center;
    background-color: #F2EBE1;
    color: #7B7067;
    font-size: 0.68rem;
    font-weight: 800;
}

.commercial-drop-prenda-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.commercial-drop-prenda-photo span {
    display: block;
    font-size: 1.1rem;
}

.commercial-drop-prenda-info {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.commercial-drop-prenda-info strong {
    color: #1F1D1A;
    font-size: 0.86rem;
}

.commercial-drop-prenda-info span,
.commercial-drop-prenda-info small {
    color: #7B7067;
    font-size: 0.74rem;
    line-height: 1.25;
}

.commercial-drop-readiness {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 3px;
}

.commercial-drop-readiness span {
    border-radius: 999px;
    background-color: #FFF4C9;
    color: #75622E;
    padding: 3px 7px;
    font-size: 0.66rem;
    font-weight: 800;
}

.commercial-drop-readiness span.is-ready {
    background-color: #DCE8D2;
    color: #3D4A27;
}

.commercial-drop-prenda-actions {
    grid-column: 1 / -1;
    display: flex;
    gap: 6px;
}

.commercial-drop-prenda-actions button {
    flex: 1;
    border: 1px solid #E5DDD1;
    border-radius: 999px;
    background-color: #FFFDF8;
    color: #4F4942;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 7px 8px;
}

.commercial-drop-prenda-actions button:disabled {
    cursor: not-allowed;
    opacity: 0.48;
}

.commercial-catalog-group-card {
    display: grid;
    grid-template-columns: 1fr;
}

.commercial-catalog-group-card .commercial-actions {
    justify-content: flex-start;
    gap: 6px;
}

.commercial-catalog-group-card .commercial-actions .btn {
    flex: 1 1 calc(50% - 6px);
    padding: 8px 10px;
    font-size: 0.78rem;
}

.commercial-actions .btn {
    white-space: nowrap;
}

.commercial-actions:empty {
    display: none;
}

.commercial-prenda-card {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    background-color: #FFFDF8;
    border: 1px solid #E5DDD1;
    border-radius: 18px;
    padding: 12px;
}

.commercial-prenda-card-selector {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(94px, 1fr) auto;
    align-items: start;
    min-height: 0;
    padding: 10px;
}

.commercial-prenda-card-catalog {
    grid-template-columns: 1fr;
    align-content: start;
    gap: 12px;
    padding: 14px;
}

.commercial-prenda-card-selector .commercial-actions {
    grid-column: auto;
    justify-content: stretch;
    align-self: end;
}

.commercial-prenda-card-selector .commercial-actions .btn {
    width: 100%;
    padding: 9px 12px;
    min-height: 36px;
    font-size: 0.82rem;
}

.commercial-prenda-card.is-selected {
    border-color: #7A8B62;
    background-color: #F8FBF3;
}

.commercial-prenda-thumb {
    width: 74px;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    background-color: #F2EBE1;
    overflow: hidden;
    display: grid;
    place-items: center;
    color: #7B7067;
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
}

.commercial-prenda-card-selector .commercial-prenda-thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    font-size: 0.74rem;
}

.commercial-prenda-card-catalog .commercial-prenda-thumb {
    width: 100%;
    aspect-ratio: 4 / 5;
    border-radius: 16px;
    font-size: 0.82rem;
}

.commercial-prenda-thumb.is-empty {
    gap: 6px;
    background:
        linear-gradient(135deg, rgba(255, 251, 244, 0.92), rgba(242, 235, 225, 0.94)),
        radial-gradient(circle at top left, rgba(122, 139, 98, 0.2), transparent 42%);
}

.commercial-prenda-thumb-icon {
    display: block;
    font-size: 1.35rem;
    line-height: 1;
}

.commercial-prenda-card-catalog .commercial-prenda-thumb-icon {
    font-size: 2rem;
}

.commercial-prenda-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.commercial-prenda-info {
    min-width: 0;
    align-self: center;
}

.commercial-prenda-card-selector .commercial-prenda-info {
    align-self: start;
}

.commercial-prenda-info h3 {
    font-size: 0.98rem;
    color: #1F1D1A;
    margin-bottom: 4px;
    white-space: nowrap;
}

.commercial-prenda-info p,
.commercial-prenda-info small,
.commercial-prenda-note,
.commercial-prenda-status {
    display: block;
    color: #7B7067;
    line-height: 1.35;
}

.commercial-prenda-status {
    width: fit-content;
    margin-top: 8px;
    padding: 4px 8px;
    border-radius: 999px;
    background-color: #F2EBE1;
    color: #7B7067;
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.commercial-prenda-note {
    margin-top: 6px;
    color: #7A8B62;
    font-weight: 700;
}

.commercial-prenda-axis {
    display: grid;
    gap: 4px;
    margin-top: 8px;
}

.commercial-prenda-axis > span,
.commercial-drop-axis-label {
    display: block;
    color: #7B7067;
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.commercial-prenda-axis div {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.commercial-prenda-axis em {
    width: fit-content;
    border-radius: 999px;
    background-color: #FFF4C9;
    color: #75622E;
    padding: 3px 7px;
    font-size: 0.66rem;
    font-style: normal;
    font-weight: 800;
    line-height: 1.2;
}

.commercial-prenda-axis-comercial em {
    background-color: #EFE3F1;
    color: #6B4A70;
}

.commercial-prenda-axis-operativo em {
    background-color: #FFF4C9;
    color: #75622E;
}

.commercial-prenda-axis em.is-ready {
    background-color: #DCE8D2;
    color: #3D4A27;
}

.commercial-prenda-card-catalog .commercial-actions {
    justify-content: stretch;
}

.commercial-prenda-card-catalog .commercial-actions .btn {
    flex: 1;
}

.commercial-related-prendas {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.commercial-thumb-strip {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin-top: 12px;
    overflow: hidden;
}

.commercial-strip-thumb {
    flex: 0 0 54px;
    width: 54px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 12px;
    background-color: #F2EBE1;
}

.commercial-item-card-drop .commercial-strip-thumb {
    flex-basis: clamp(104px, 12vw, 120px);
    width: clamp(104px, 12vw, 120px);
    aspect-ratio: 3 / 4;
    border-radius: 16px;
}

.commercial-item-card-drop .commercial-strip-thumb .commercial-prenda-thumb {
    font-size: 0.72rem;
}

.commercial-calendar-card {
    min-height: 90px;
    padding: 10px 12px;
    border-left: 5px solid #DCE8D2;
}

.commercial-calendar-group:nth-of-type(1) .commercial-calendar-card {
    border-left-color: #D97373;
}

.commercial-calendar-group:nth-of-type(2) .commercial-calendar-card {
    border-left-color: #D97373;
}

.commercial-calendar-group:nth-of-type(3) .commercial-calendar-card {
    border-left-color: #E8C85A;
}

.commercial-calendar-card h3 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-bottom: 3px;
}

.commercial-calendar-card h3 span {
    color: #7A8B62;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.commercial-calendar-card .commercial-thumb-strip {
    margin-top: 6px;
}

.commercial-copy-tools,
.commercial-reference-preview {
    display: grid;
    margin-top: 10px;
}

.commercial-reference-preview {
    border: 1px solid #F2EBE1;
    border-radius: 12px;
    background-color: #FFFBF4;
    padding: 8px;
}

.commercial-copy-tools {
    width: 100%;
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    column-gap: 18px;
    row-gap: 0;
    border-top: 1px solid #EFE6DA;
    border-bottom: 1px solid #EFE6DA;
}

.commercial-copy-row {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) 68px;
    gap: 10px;
    align-items: center;
    min-height: 32px;
    max-height: 40px;
    border-bottom: 1px solid #F3ECE2;
    padding: 4px 0;
}

.commercial-copy-row:last-child {
    border-bottom: 0;
}

.commercial-copy-row strong,
.commercial-reference-preview strong {
    color: #1F1D1A;
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

.commercial-copy-row span,
.commercial-reference-preview span,
.commercial-reference-preview a {
    color: #7B7067;
    font-size: 0.76rem;
    line-height: 1.25;
}

.commercial-copy-row span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.commercial-copy-row.needs-work span {
    color: #9A4C3E;
}

.commercial-copy-actions {
    display: flex;
    justify-content: flex-end;
}

.commercial-copy-actions button {
    border: 0;
    background-color: transparent;
    color: #3B332D;
    padding: 2px 0;
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1.2;
}

.commercial-copy-row.needs-work .commercial-copy-actions button {
    color: #8F4034;
}

.commercial-strip-thumb .commercial-prenda-thumb {
    width: 100%;
    height: 100%;
    border-radius: 0;
    font-size: 0.6rem;
}

.commercial-strip-thumb.has-overflow {
    display: grid;
    place-items: center;
    color: #1F1D1A;
    font-size: 0.85rem;
    font-weight: 900;
}

.commercial-related-card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-width: 180px;
    border: 1px solid #E5DDD1;
    border-radius: 14px;
    padding: 8px;
    background-color: #FFFBF4;
}

.commercial-related-card .commercial-prenda-thumb {
    width: 42px;
    border-radius: 10px;
    font-size: 0.62rem;
}

.commercial-related-card strong,
.commercial-related-card span {
    display: block;
    line-height: 1.3;
}

.commercial-related-card strong {
    color: #1F1D1A;
    font-size: 0.82rem;
    white-space: nowrap;
}

.commercial-related-card span,
.commercial-related-missing {
    color: #7B7067;
    font-size: 0.76rem;
}

.commercial-item-card-drop .commercial-related-prendas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
}

.commercial-item-card-drop .commercial-related-card {
    grid-template-columns: 1fr;
    min-width: 0;
    text-align: left;
}

.commercial-item-card-drop .commercial-related-card .commercial-prenda-thumb {
    width: 100%;
    border-radius: 12px;
}

.commercial-appearances-list {
    background-color: #FFFBF4;
    border: 1px solid #E5DDD1;
    border-radius: 16px;
    padding: 16px;
}

.commercial-appearance-list {
    display: grid;
    gap: 8px;
    padding-left: 18px;
    color: #1F1D1A;
}

.empty-state-inline {
    color: #7B7067;
    margin: 0;
    line-height: 1.5;
}

/* RESPONSIVE REFINEMENTS */
@media (max-width: 1024px) {
    .sidebar { width: 88px; }
    .brand h2 { display: none; }
    .brand { padding: 32px 0; text-align: center; }
    .sidebar-nav { align-items: center; padding: 0; }
    .nav-item { justify-content: center; width: 56px; height: 56px; padding: 0; font-size: 0; color: transparent; }
    .nav-item .icon { font-size: 1.35rem; display: block; }
    .main-content { margin-left: 88px; width: calc(100% - 88px); padding: 48px 32px; }
    .hoy-summary-card { grid-template-columns: 1fr 1fr; }
    .hoy-summary-metric:nth-child(2) { border-right: none; }
    .hoy-insights-grid { grid-template-columns: 1fr; }
    .hoy-ingresos-compact { margin-top: -20px; }
}

@media (max-width: 768px) {
    .action-card { flex-direction: column; align-items: flex-start; gap: 24px; padding: 28px; }
    .action-trigger { width: 100%; }
    .view-header.split { flex-direction: column; align-items: flex-start; gap: 20px; }
    .view-header.split .btn { width: 100%; }
    .lote-stats-summary { flex-direction: column; gap: 14px; padding: 24px; }
    .modal-card { padding: 32px 24px; }
    .prenda-view-form-grid { grid-template-columns: 1fr; }
    .progress-steps-list { flex-direction: column; gap: 8px; }
    .styles-grid-container { grid-template-columns: 1fr 1fr; }
    .multimedia-gallery-grid { grid-template-columns: 1fr 1fr; }
    .custom-measures-header { flex-direction: column; align-items: flex-start; }
    .custom-measures-header .btn { width: 100%; }
    .custom-measure-row { grid-template-columns: 1fr; }
    .custom-measure-remove { width: 100%; }
    .hoy-hero { flex-direction: column; }
    .hoy-date-card { width: 100%; text-align: left; }
    .hoy-summary-card { grid-template-columns: 1fr; padding: 24px; }
    .hoy-summary-metric { border-right: none; border-bottom: 1px solid #F2EBE1; padding-bottom: 16px; }
    .hoy-summary-metric:last-child { border-bottom: none; padding-bottom: 0; }
    .hoy-category-header { flex-direction: column; }
    .hoy-category-row { grid-template-columns: auto 1fr auto; gap: 8px; }
    .hoy-category-track { grid-column: 1 / -1; }
    .hoy-category-count { text-align: left; }
    .hoy-ingresos-compact { align-items: flex-start; flex-direction: column; gap: 6px; }
    .commercial-prenda-card { grid-template-columns: 64px minmax(0, 1fr); }
    .commercial-prenda-card-selector { grid-template-columns: 1fr; }
    .commercial-prenda-card .commercial-actions { grid-column: 1 / -1; justify-content: stretch; }
    .commercial-prenda-card .commercial-actions .btn { width: 100%; }
    .commercial-prenda-thumb { width: 64px; }
    .commercial-prenda-card-selector .commercial-prenda-thumb { width: 100%; }
    .commercial-prenda-card-catalog { grid-template-columns: 1fr; }
    .commercial-prenda-card-catalog .commercial-prenda-thumb { width: 100%; }
    .creative-start-panel {
        flex-direction: column;
    }
    .creative-start-actions {
        justify-content: flex-start;
    }
    .creative-next-grid { grid-template-columns: 1fr; }
    .creative-next-header { flex-direction: column; }
    .commercial-content-summary {
        grid-template-columns: 1fr;
    }
    #form-commercial-content {
        grid-template-columns: 1fr;
    }
    #form-commercial-content > select,
    #form-commercial-content > input,
    #form-commercial-content > textarea,
    #form-commercial-content > .commercial-date-field,
    #form-commercial-content > .commercial-reference-fields,
    #form-commercial-content > .commercial-context-summary,
    #form-commercial-content > .commercial-format-hint {
        grid-column: 1 / -1;
    }
    .creative-drop-prendas-head {
        flex-direction: column;
    }
    .creative-drop-prendas-filters {
        justify-content: flex-start;
    }
    .creative-drop-prendas-list {
        grid-template-columns: 1fr;
        column-gap: 0;
    }
    .creative-drop-prenda-row {
        grid-template-columns: 62px minmax(0, 1fr) 62px;
        gap: 8px;
    }
    .creative-drop-prenda-row:nth-last-child(-n + 2) {
        border-bottom: 1px solid #F3ECE2;
    }
    .creative-drop-prenda-row:last-child {
        border-bottom: 0;
    }
    .creative-drop-prenda-row button {
        justify-self: end;
    }
    .commercial-drop-cover-field { grid-template-columns: 1fr; }
    .commercial-drop-heading { flex-direction: column; }
    .commercial-drop-cover-preview { width: 120px; height: 76px; }
    .commercial-drop-cover-thumb { flex-basis: 84px; width: 84px; }
    .commercial-drop-prendas { grid-template-columns: 1fr; }
    .commercial-reference-fields { grid-template-columns: 1fr; }
    .commercial-item-card,
    .commercial-item-card-content,
    .commercial-item-card-drop {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }
    .commercial-item-card-drop > div:first-child {
        display: block;
    }
    .commercial-item-card-drop .commercial-thumb-strip {
        margin-top: 10px;
    }
    .commercial-item-card-drop .commercial-strip-thumb {
        flex-basis: 78px;
        width: 78px;
    }
    .commercial-calendar-toolbar {
        grid-template-columns: 1fr;
    }
    .commercial-calendar-controls {
        justify-content: flex-start;
    }
    .commercial-calendar-month,
    .commercial-calendar-day-detail,
    .commercial-calendar-undated {
        padding: 14px;
    }
    .commercial-calendar-weekdays {
        gap: 0;
        font-size: 0.68rem;
        text-align: center;
    }
    .commercial-calendar-weekdays span {
        padding: 0;
    }
    .commercial-calendar-day {
        min-height: 54px;
        padding: 5px;
        gap: 2px;
    }
    .commercial-calendar-day-button {
        min-height: 40px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        text-align: center;
    }
    .commercial-calendar-events {
        display: none;
    }
    .commercial-calendar-detail-item {
        grid-template-columns: 1fr auto;
    }
    .commercial-calendar-detail-item span {
        grid-column: 1 / -1;
    }
    .commercial-calendar-detail-item small {
        text-align: right;
    }
    .commercial-copy-tools {
        grid-template-columns: 1fr;
    }
    .commercial-copy-row {
        grid-column: 1 / -1;
        grid-template-columns: 62px minmax(0, 1fr) 62px;
        gap: 8px;
    }
    .commercial-copy-actions {
        justify-content: flex-end;
    }
}

.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px;
  color: #7B7067;
  background: #FFFDF8;
  border: 1px dashed #E5DDD1;
  border-radius: 20px;
}

.progress-bar-fill {
  height: 100%;
  background-color: #7A8B62;
  border-radius: 99px;
  transition: width 250ms cubic-bezier(.2,.8,.2,1);
}