/* ====== CSS FOR app/views/public/planes.php ====== */

.planes-page { 
    max-width: 1000px; 
    margin: 0 auto; 
    padding: 20px 16px; 
    padding-top: 100px; 
    font-family: 'Inter', system-ui, sans-serif;
}

/* Header */
.page-header { text-align: center; margin-bottom: 50px; }
.back-link { 
    display: inline-flex; align-items: center; gap: 6px; 
    color: #10b981; text-decoration: none; font-size: 14px; font-weight: 700; 
    margin-bottom: 24px; background: white; padding: 8px 20px; 
    border-radius: 50px; box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: transform 0.2s;
}
.back-link:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.08); }
.page-header h1 { font-size: 38px; font-weight: 900; color: #0f172a; margin-bottom: 16px; line-height: 1.2; letter-spacing: -0.5px; }
.launch-offer { 
    background: linear-gradient(135deg, #fef3c7, #fde68a); color: #b45309; 
    display: inline-block; padding: 8px 20px; border-radius: 50px; 
    font-weight: 800; font-size: 14px; margin-bottom: 24px; 
    border: 1px dashed #fbbf24; box-shadow: 0 4px 15px rgba(245, 158, 11, 0.15);
}
.page-header p { color: #64748b; font-size: 17px; line-height: 1.6; max-width: 650px; margin: 0 auto; }
.page-header strong { color: #1e293b; }

/* Grid de Planes */
.worker-plans-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 30px; 
    margin-bottom: 50px; 
    align-items: center; /* Permite que la del centro destaque */
}

/* Tarjeta Base */
.worker-plan-card {
    background: white; 
    border-radius: 24px; 
    padding: 40px 30px; 
    position: relative;
    box-shadow: 0 10px 40px -10px rgba(0,0,0,0.08); 
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease; 
    display: flex; flex-direction: column;
    min-height: 500px;
    z-index: 1;
}
.worker-plan-card:hover { 
    transform: translateY(-8px); 
    box-shadow: 0 20px 40px -10px rgba(0,0,0,0.12); 
    border-color: #10b981; 
}

/* Badges (Insignias) Superiores */
.plan-badge { 
    position: absolute; 
    top: -15px; left: 50%; 
    transform: translateX(-50%); 
    font-size: 12px; font-weight: 800; 
    padding: 6px 16px; 
    border-radius: 50px; 
    text-transform: uppercase; 
    white-space: nowrap; 
    letter-spacing: 0.5px;
    z-index: 10;
}

/* Variantes de Tarjetas */
.worker-plan-card.featured { 
    border-color: #10b981; 
    box-shadow: 0 20px 40px -10px rgba(16, 185, 129, 0.2); 
    transform: scale(1.05); /* Ligeramente más grande */
    z-index: 2;
}
.worker-plan-card.featured:hover { transform: scale(1.05) translateY(-5px); }
.worker-plan-card.featured .featured-badge { background: #10b981; color: white; box-shadow: 0 4px 10px rgba(16,185,129,0.3); }

.worker-plan-card.premium { 
    background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%); 
    color: white; 
    border-color: #334155; 
}
.worker-plan-card.premium .premium-badge { background: #3b82f6; color: white; box-shadow: 0 4px 10px rgba(59,130,246,0.3); }

/* Textos internos */
.plan-header { margin-bottom: 30px; text-align: center; }
.plan-header h2 { font-size: 22px; font-weight: 800; margin: 0 0 10px; color: #0f172a; }
.worker-plan-card.premium .plan-header h2 { color: white; }
.plan-header h3 { font-size: 42px; font-weight: 900; color: #10b981; margin: 0 0 16px; letter-spacing: -1px; }
.plan-desc { font-size: 14px; color: #64748b; line-height: 1.5; }
.worker-plan-card.premium .plan-desc { color: #94a3b8; }

/* Lista de Beneficios */
.plan-features { 
    list-style: none; padding: 0; margin: 0 0 40px; 
    display: flex; flex-direction: column; gap: 16px; 
    flex-grow: 1; /* Empuja el botón hacia abajo */
}
.plan-features li { 
    font-size: 15px; display: flex; align-items: center; gap: 12px; color: #334155; font-weight: 500;
}
.worker-plan-card.premium .plan-features li { color: #f1f5f9; }

/* Botón de Plan */
.plan-footer { display: flex; flex-direction: column; align-items: center; gap: 15px; }
.btn-plan {
    display: block; width: 100%; text-align: center; padding: 16px; 
    border-radius: 14px; font-weight: 800; font-size: 16px; 
    text-decoration: none; transition: all 0.3s;
}
.worker-plan-card:not(.featured):not(.premium) .btn-plan { background: #f8fafc; color: #0f172a; border: 1px solid #e2e8f0; }
.worker-plan-card:not(.featured):not(.premium) .btn-plan:hover { background: #f1f5f9; border-color: #cbd5e1; }

.worker-plan-card.featured .btn-plan { background: #10b981; color: white; box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3); }
.worker-plan-card.featured .btn-plan:hover { background: #059669; transform: translateY(-2px); }

.worker-plan-card.premium .btn-plan { background: white; color: #0f172a; }
.worker-plan-card.premium .btn-plan:hover { background: #f8fafc; transform: translateY(-2px); }

/* Badge de "Gratis Hoy" debajo del botón */
.plan-footer .launch-badge {
    background: #fef2f2; color: #ef4444; padding: 4px 12px; border-radius: 50px; font-size: 12px; font-weight: 800;
}

/* Caja de Aviso */
.notice-box { 
    background: #f8fafc; border: 1px solid #e2e8f0; 
    border-radius: 16px; padding: 24px; 
    display: flex; gap: 16px; align-items: flex-start;
    color: #475569; font-size: 14px; font-weight: 500; line-height: 1.6; 
    max-width: 800px; margin: 0 auto;
}
.notice-box i { flex-shrink: 0; color: #3b82f6; width: 24px; height: 24px; }

/* Responsive */
@media (max-width: 900px) {
    .worker-plan-card.featured { transform: scale(1); }
    .worker-plan-card.featured:hover { transform: translateY(-5px); }
    .worker-plans-grid { gap: 40px; }
}

/* ====== Feature Matrix ====== */
.feature-matrix-section {
    margin-top: 80px;
    margin-bottom: 60px;
    background: white;
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 10px 40px -10px rgba(0,0,0,0.05);
    border: 1px solid #e2e8f0;
}

.matrix-title {
    text-align: center;
    font-size: 28px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 30px;
}

.feature-matrix-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
}

.feature-matrix-table th {
    padding: 20px;
    font-size: 18px;
    font-weight: 800;
    color: #1e293b;
    border-bottom: 2px solid #e2e8f0;
    text-align: center;
}

.feature-matrix-table td {
    padding: 20px;
    border-bottom: 1px solid #f1f5f9;
    text-align: center;
    font-size: 15px;
    color: #475569;
}

.feature-matrix-table .feature-name {
    text-align: left;
    font-weight: 600;
    color: #1e293b;
    width: 40%;
}

.feature-matrix-table tr:last-child td {
    border-bottom: none;
}

.icon-check {
    color: #10b981;
    width: 20px;
    height: 20px;
    stroke-width: 3px;
}

.icon-x {
    color: #cbd5e1;
    width: 20px;
    height: 20px;
}

.col-premium {
    background: rgba(16, 185, 129, 0.05);
    font-weight: 700;
}

.feature-matrix-table th.col-premium {
    color: #059669;
    border-bottom: 2px solid #10b981;
}

@media (max-width: 768px) {
    .feature-matrix-section {
        padding: 20px;
    }
    .feature-matrix-table th, .feature-matrix-table td {
        padding: 12px;
        font-size: 14px;
    }
}