/* ============================================================
   XCELENTRIC TABLERO DE ESTATUS — CSS blindado contra WordPress
============================================================ */

.xct-wrap {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 14px !important;
    color: #111827 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.5 !important;
}
.xct-wrap *, .xct-wrap *::before, .xct-wrap *::after {
    box-sizing: border-box !important;
}

/* ── Título ── */
.xct-wrap .xct-h1 {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
    border: none !important;
}

/* ── Tabs ── */
.xct-wrap .xct-tabs-bar {
    display: flex !important;
    gap: 0 !important;
    border-bottom: 2px solid #e5e7eb !important;
    margin-bottom: 24px !important;
    padding: 0 !important;
}
.xct-wrap .xct-tab {
    background: none !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    margin-bottom: -2px !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #6b7280 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    text-decoration: none !important;
}
.xct-wrap .xct-tab.active {
    color: #111827 !important;
    border-bottom-color: #111827 !important;
}
.xct-wrap .xct-tab:hover {
    color: #374151 !important;
}

/* ── Card ── */
.xct-wrap .xct-card {
    background: #fff !important;
    border-radius: 8px !important;
    padding: 24px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
    margin-bottom: 20px !important;
    border: 1px solid #f3f4f6 !important;
}
.xct-wrap .xct-h2 {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    border: none !important;
}

/* ── Grid 3 columnas (formulario) ── */
.xct-wrap .xct-grid-3 {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px !important;
}
/* ── Grid 4 columnas (filtros) ── */
.xct-wrap .xct-grid-4 {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 14px !important;
}

@media (max-width: 900px) {
    .xct-wrap .xct-grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
    .xct-wrap .xct-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
    .xct-wrap .xct-grid-3 { grid-template-columns: 1fr !important; }
    .xct-wrap .xct-grid-4 { grid-template-columns: 1fr !important; }
}

/* ── Labels e inputs ── */
.xct-wrap label {
    display: block !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    margin-bottom: 5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
}
.xct-wrap input[type="text"],
.xct-wrap input[type="date"],
.xct-wrap input[type="number"],
.xct-wrap select,
.xct-wrap textarea {
    width: 100% !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    padding: 8px 10px !important;
    font-size: 13px !important;
    color: #111827 !important;
    background: #fff !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    transition: border-color 0.15s !important;
}
.xct-wrap input:focus,
.xct-wrap select:focus,
.xct-wrap textarea:focus {
    border-color: #9ca3af !important;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.05) !important;
}
.xct-wrap textarea {
    resize: vertical !important;
    min-height: 70px !important;
}
.xct-wrap select {
    -webkit-appearance: auto !important;
    appearance: auto !important;
}

/* ── Botones ── */
.xct-wrap .xct-btn-blue {
    display: block !important;
    width: 100% !important;
    background: #2563eb !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    margin-top: 16px !important;
    text-align: center !important;
    transition: background 0.2s !important;
}
.xct-wrap .xct-btn-blue:hover { background: #1d4ed8 !important; }

.xct-wrap .xct-btn-green {
    display: inline-block !important;
    background: #16a34a !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    margin-top: 14px !important;
    transition: background 0.2s !important;
}
.xct-wrap .xct-btn-green:hover { background: #15803d !important; }

/* ── Tabla ── */
.xct-wrap .xct-table-wrap { overflow-x: auto !important; }
.xct-wrap .xct-table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 13px !important;
}
.xct-wrap .xct-table thead { background: #f3f4f6 !important; }
.xct-wrap .xct-table th {
    padding: 10px 12px !important;
    border-bottom: 2px solid #e5e7eb !important;
    border-right: 1px solid #e5e7eb !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    color: #374151 !important;
    text-align: left !important;
    white-space: nowrap !important;
}
.xct-wrap .xct-table td {
    padding: 9px 12px !important;
    border-bottom: 1px solid #e5e7eb !important;
    border-right: 1px solid #e5e7eb !important;
    color: #111827 !important;
    vertical-align: middle !important;
}
.xct-wrap .xct-table tr:last-child td { border-bottom: none !important; }

/* Colores de fila por ciudad */
.xct-wrap .xct-ciudad-Tijuana  td { background-color: #eff6ff !important; }
.xct-wrap .xct-ciudad-Mexicali td { background-color: #f0fdf4 !important; }
.xct-wrap .xct-ciudad-Ensenada td { background-color: #faf5ff !important; }
.xct-wrap .xct-ciudad-default  td { background-color: #f9fafb !important; }

/* Celda de días por estatus */
.xct-wrap .xct-est-vencido { background-color: #fecaca !important; font-weight: 700 !important; color: #991b1b !important; }
.xct-wrap .xct-est-urgente  { background-color: #fee2e2 !important; font-weight: 700 !important; color: #b91c1c !important; }
.xct-wrap .xct-est-proximo  { background-color: #fef9c3 !important; font-weight: 700 !important; color: #854d0e !important; }
.xct-wrap .xct-est-normal   { background-color: #dcfce7 !important; font-weight: 700 !important; color: #166534 !important; }

/* Editable */
.xct-wrap .editable { cursor: pointer !important; }
.xct-wrap .editable:hover { background-color: #fffbeb !important; }
.xct-wrap .editable input {
    width: 100% !important;
    border: 1px solid #f59e0b !important;
    border-radius: 3px !important;
    padding: 3px 6px !important;
    background: #fff !important;
    font-size: 13px !important;
}

.xct-wrap .xct-td-center { text-align: center !important; }
.xct-wrap .xct-btn-del {
    background: none !important;
    border: none !important;
    color: #dc2626 !important;
    cursor: pointer !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
}
.xct-wrap .xct-btn-del:hover {
    background: #fee2e2 !important;
    text-decoration: none !important;
}

/* ── Gráficas ── */
.xct-wrap .xct-graficas-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
}
@media (max-width: 900px) {
    .xct-wrap .xct-graficas-grid { grid-template-columns: 1fr !important; }
}

/* ── Kanban ── */
.xct-wrap .xct-kanban-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
}
@media (max-width: 900px) {
    .xct-wrap .xct-kanban-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
    .xct-wrap .xct-kanban-grid { grid-template-columns: 1fr !important; }
}
.xct-wrap .xct-kanban-col {
    background: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 12px !important;
    min-height: 300px !important;
}
.xct-wrap .xct-kanban-col.drag-over {
    background: #eff6ff !important;
    border-color: #3b82f6 !important;
}
.xct-wrap .xct-kanban-col h3 {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    color: #6b7280 !important;
    margin: 0 0 12px !important;
    padding-bottom: 8px !important;
    border-bottom: 2px solid #e5e7eb !important;
}
.xct-wrap .xct-kanban-item {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
    padding: 10px 12px !important;
    margin-bottom: 8px !important;
    cursor: grab !important;
    font-size: 13px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
    transition: box-shadow 0.15s !important;
}
.xct-wrap .xct-kanban-item:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
}