/* ============================================================
   Camiseta Configurador v2.1 - Estilos frontend
   ============================================================ */

/* Layout principal: mockup izquierda, controles derecha */
.cc-wrap {
    display: flex;
    flex-direction: row;
    gap: 28px;
    margin: 24px 0;
    align-items: flex-start;
    flex-wrap: wrap;
}

/* ---- Canvas (izquierda) ---- */
.cc-canvas-col {
    flex: 0 0 360px;
    order: 1;
    position: sticky;
    top: 20px;
}

/* ---- Controles (derecha) ---- */
.cc-controls-col {
    flex: 1;
    min-width: 260px;
    max-width: 520px;
    order: 2;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ---- Pestañas de vista ---- */
.cc-vista-tabs {
    display: flex;
    gap: 5px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.cc-vista-tab {
    flex: 1;
    padding: 7px 5px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    transition: all .15s;
    text-align: center;
    white-space: nowrap;
}
.cc-vista-tab.active {
    background: #1a1a1a;
    color: #fff;
    border-color: #1a1a1a;
}
.cc-vista-tab:hover:not(.active) { background: #f5f5f5; }

/* ---- Canvas ---- */
.cc-canvas-container {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e5e5e5;
    background: #fafafa;
}
.cc-canvas-container canvas {
    display: block;
    width: 100% !important;
    height: auto !important;
    cursor: crosshair;
}
.cc-hint {
    font-size: 11px;
    color: #999;
    text-align: center;
    margin: 6px 0 0;
}

/* ---- Paneles ---- */
.cc-panel {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    padding: 12px 14px;
}
.cc-panel-title {
    font-size: 11px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin: 0 0 10px;
}

/* ---- Colores ---- */
.cc-color-row { display: flex; gap: 8px; flex-wrap: wrap; }
.cc-csw {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border .15s, transform .15s;
    box-shadow: 0 0 0 1px rgba(0,0,0,.15);
}
.cc-csw:hover { transform: scale(1.12); }
.cc-csw.active { border-color: #1a1a1a; }
.cc-csw.out { opacity: .3; cursor: not-allowed; }
.cc-color-name { font-size: 12px; color: #666; margin: 6px 0 0; }

/* ---- Tallas ---- */
.cc-size-grid { display: flex; gap: 6px; flex-wrap: wrap; }
.cc-sz {
    min-width: 40px;
    padding: 5px 8px;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 6px;
    cursor: pointer;
    background: #fff;
    color: #444;
    transition: all .12s;
}
.cc-sz:hover:not(.out) { border-color: #999; }
.cc-sz.active { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
.cc-sz.out { opacity: .35; cursor: not-allowed; text-decoration: line-through; }
.cc-stock-dot {
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    margin: 3px auto 0;
    background: #ccc;
}
.cc-stock-dot.ok  { background: #15803d; }
.cc-stock-dot.low { background: #d97706; }
.cc-stock-dot.out { background: #dc2626; }
.cc-stock-info { font-size: 12px; color: #888; margin: 8px 0 0; }

/* ---- Zonas ---- */
.cc-zone-tabs { display: flex; gap: 5px; flex-wrap: wrap; }
.cc-ztab {
    flex: 1;
    padding: 6px 4px;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 6px;
    cursor: pointer;
    background: #fff;
    color: #666;
    transition: all .12s;
    white-space: nowrap;
}
.cc-ztab.active { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
.cc-ztab:hover:not(.active) { background: #f5f5f5; }

.cc-zone-badge {
    display: inline-block;
    font-size: 11px;
    padding: 1px 8px;
    border-radius: 20px;
    background: #e8f0fe;
    color: #1a56db;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

/* ---- Upload ---- */
.cc-upload-zone {
    border: 1.5px dashed #ccc;
    border-radius: 8px;
    padding: 16px;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    color: #888;
    transition: background .15s, border-color .15s;
}
.cc-upload-zone:hover { background: #f9f9f9; border-color: #aaa; }
.cc-upload-zone.loaded { border-color: #15803d; color: #15803d; background: #f0fdf4; }
.cc-upload-icon { font-size: 22px; display: block; margin-bottom: 5px; }

/* ---- Inputs ---- */
.cc-text-input {
    width: 100%;
    margin-bottom: 6px;
    padding: 7px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
    box-sizing: border-box;
}
.cc-text-input:focus { outline: none; border-color: #1a1a1a; }
.cc-row2 { display: flex; gap: 8px; }
.cc-row2 > div { flex: 1; min-width: 0; }
.cc-row2 label { font-size: 12px; color: #888; display: block; margin-bottom: 3px; }
.cc-row2 input[type=range] { width: 100%; }
.cc-panel select {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
    background: #fff;
}
.cc-panel input[type=color] {
    width: 100%;
    height: 36px;
    padding: 2px;
    border: 1px solid #ddd;
    border-radius: 6px;
    cursor: pointer;
}

/* ---- Boton centrar ---- */
.cc-btn-sm {
    padding: 6px 12px;
    font-size: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    color: #555;
    white-space: nowrap;
    transition: all .12s;
    width: 100%;
}
.cc-btn-sm:hover { background: #f5f5f5; border-color: #aaa; }

/* ---- Precio ---- */
.cc-price-box {
    background: #f5f5f5;
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.cc-price-label { font-size: 12px; color: #888; margin-bottom: 2px; }
.cc-price-val { font-size: 28px; font-weight: 600; color: #1a1a1a; line-height: 1; }
.cc-price-val .amount { font-size: 28px !important; font-weight: 600 !important; }
.cc-price-badge {
    display: inline-block;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 20px;
    background: #dcfce7;
    color: #15803d;
    margin-top: 4px;
}
.cc-price-detail { font-size: 12px; color: #888; line-height: 1.6; text-align: right; }

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .cc-wrap { flex-direction: column; }
    .cc-canvas-col { flex: none; width: 100%; order: 1; position: static; }
    .cc-controls-col { order: 2; max-width: 100%; }
}