/* ============================================================
   Tabla Envío Express - Frontend Styles
   ============================================================ */

.tee-shipping-selector-wrapper { margin:0 0 16px; }
.shipping-options-selector { padding:14px 16px; background:linear-gradient(135deg,#fff8f0,#fff3e6); border:2px solid #ff8a00; border-radius:8px; text-align:center; }
.shipping-options-selector label { display:block; margin-bottom:8px; font-size:15px; color:#333; }
.tee-shipping-select { width:100%; max-width:500px; padding:10px 14px; font-size:15px; border:2px solid #ddd; border-radius:4px; background:#fff; cursor:pointer; transition:border-color .3s; }
.tee-shipping-select:hover, .tee-shipping-select:focus { border-color:#ff8a00; outline:none; box-shadow:0 0 5px rgba(255,138,0,.3); }

/* Summary */
.tee-summary { background:#f7f7f7; border:1px solid #ddd; border-radius:6px; padding:10px 16px; margin-bottom:12px; font-size:13px; line-height:1.6; text-align:center; transition:all .3s; }
.tee-summary.tee-summary-active { background:linear-gradient(135deg,#fff8f0,#fff3e6); border-color:#ff8a00; }
.tee-summary-title { font-weight:800; color:#ff8a00; text-transform:uppercase; font-size:12px; letter-spacing:.5px; display:block; margin-bottom:3px; }
.tee-summary-text { color:#333; }
.tee-summary-text strong { color:#555; font-weight:600; }

/* Table */
.tee-table-wrap { margin:18px 0 8px; clear:both; }
.tee-table { width:100%; border-collapse:collapse; border:2px solid #222; font-size:14px; margin-top:10px; }
.tee-table th, .tee-table td { border:1px solid #333; padding:12px 8px; text-align:center; vertical-align:middle; }
.tee-th-corner { background:#333; color:#fff; font-size:11px; text-transform:uppercase; font-weight:800; min-width:120px; }
.tee-th-qty { background:#f5f5f5; font-size:15px; font-weight:900; min-width:95px; transition:all .3s; }
.tee-td-plazo { text-align:left; padding:12px 10px; min-width:120px; font-weight:800; }
.tee-plazo-name { font-size:13px; font-weight:800; line-height:1.3; }
.tee-plazo-pct { font-size:11px; font-weight:600; opacity:.65; margin-top:2px; }

/* Tier colors */
.tee-tier1 { background:#ffcf9b; }
.tee-tier2 { background:#e3f2db; }
.tee-tier3 { background:#cfe6bf; }

/* Prices */
.tee-price { font-weight:900; font-size:16px; color:#111; white-space:nowrap; transition:all .3s; }
.tee-unit { font-size:12px; color:#444; opacity:.85; margin-top:3px; }

/* Column highlight */
.tee-th-qty.tee-col-active { background:#ff8a00!important; color:#fff; font-size:17px; position:relative; }
.tee-th-qty.tee-col-active::after { content:'▼'; display:block; font-size:9px; margin-top:2px; color:#fff; }
.tee-td-price.tee-col-active { box-shadow:inset 0 0 0 3px #ff8a00; position:relative; }
.tee-td-price.tee-col-active .tee-price { font-size:18px; color:#000; font-weight:900; }
.tee-table:has(.tee-col-active) .tee-th-qty:not(.tee-col-active) { opacity:.4; }
.tee-table:has(.tee-col-active) .tee-td-price:not(.tee-col-active) { opacity:.35; transition:opacity .3s; }
.tee-table:has(.tee-col-active) .tee-td-price:not(.tee-col-active):hover { opacity:.75; }

/* Animations */
.price-updating { opacity:.5; transition:opacity .06s; }
.price-updated { animation:priceHL .5s ease; }
@keyframes priceHL { 0%{background-color:#fff59d!important} 100%{background-color:inherit} }
.tee-flash { animation:teeFlash .6s ease; border-radius:4px; }
@keyframes teeFlash { 0%{background:rgba(255,193,7,.3)} 100%{background:transparent} }

/* Responsive */
@media(max-width:768px){
    .tee-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;font-size:12px;}
    .tee-table th,.tee-table td{padding:8px 6px;}
    .tee-th-qty{font-size:13px;min-width:80px;}
    .tee-price{font-size:14px;} .tee-unit{font-size:11px;}
    .tee-td-plazo{min-width:90px;font-size:11px;}
    .tee-shipping-select{font-size:14px;padding:8px 12px;}
}
@media(max-width:480px){
    .tee-th-qty{font-size:12px;min-width:70px;} .tee-price{font-size:13px;} .tee-unit{font-size:10px;}
    .shipping-options-selector{padding:10px;} .tee-summary{font-size:12px;padding:8px 10px;}
    .tee-th-qty.tee-col-active::after{display:none;}
}