/* ============================================================================
   WireVetLite — leyenda de límite del plan (assets/js/liteLimites.js).
   Prefijo `wv-lite-` para no colisionar con nada del sistema.
   ========================================================================== */

.wv-lite-legend {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    background: #f0fdfa; border: 1px solid #99f6e4; border-left: 4px solid #14b8a6;
    border-radius: 10px; padding: 12px 16px; margin-bottom: 14px;
}
.wv-lite-legend--cerca { background: #fffbeb; border-color: #fde68a; border-left-color: #f59e0b; }
.wv-lite-legend--tope  { background: #fef2f2; border-color: #fecaca; border-left-color: #dc2626; }

.wv-lite-legend__info { flex: 1 1 240px; }
.wv-lite-legend__cifra { font-size: 15px; font-weight: 800; color: #0f766e; }
.wv-lite-legend--cerca .wv-lite-legend__cifra { color: #b45309; }
.wv-lite-legend--tope  .wv-lite-legend__cifra { color: #b91c1c; }
.wv-lite-legend__que { font-size: 13px; color: #64748b; }

.wv-lite-legend__barra {
    height: 6px; border-radius: 3px; background: #e2e8f0; overflow: hidden; margin-top: 7px;
}
.wv-lite-legend__barra span { display: block; height: 100%; background: #14b8a6; transition: width .3s; }
.wv-lite-legend--cerca .wv-lite-legend__barra span { background: #f59e0b; }
.wv-lite-legend--tope  .wv-lite-legend__barra span { background: #dc2626; }

.wv-lite-legend__nota { display: block; margin-top: 6px; font-size: 12px; font-weight: 600; color: #b91c1c; }
.wv-lite-legend--cerca .wv-lite-legend__nota { color: #b45309; }

.wv-lite-legend__cta { flex: 0 1 auto; text-align: right; }
.wv-lite-legend__pregunta {
    display: block; margin-bottom: 7px; font-size: 12.5px; font-weight: 800; color: #334155;
}
.wv-lite-legend__btns { display: flex; gap: 8px; flex-wrap: wrap; }

.wv-lite-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 13px; border-radius: 8px;
    font-size: 12.5px; font-weight: 700; text-decoration: none;
    transition: transform .12s, box-shadow .15s;
}
.wv-lite-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 14px -6px rgba(0,0,0,.35); text-decoration: none; }
.wv-lite-btn--wa   { background: #25d366; color: #fff; }
.wv-lite-btn--wa:hover   { color: #fff; }
.wv-lite-btn--mail { background: #1a6fc4; color: #fff; }
.wv-lite-btn--mail:hover { color: #fff; }

@media (max-width: 700px) {
    .wv-lite-legend { flex-direction: column; align-items: stretch; }
    .wv-lite-legend__cta { text-align: left; }
}

/* Contenedor donde cada pantalla monta su leyenda. Sin leyenda no ocupa espacio. */
.wv-lite-zona:not(:empty) { padding: 14px 16px 0; }

/* ============================================================================
   Panel "Tu plan WireVetLite" del dashboard (inicio/panelPlanLite.php).
   ========================================================================== */

.pl-panel {
    background: #fff; border: 1px solid #e2e8f0; border-top: 3px solid #14b8a6;
    border-radius: 12px; padding: 18px 20px;
    box-shadow: 0 1px 3px rgba(15,23,42,.06);
}

.pl-panel__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap; margin-bottom: 16px;
}
.pl-panel__titulo { display: flex; align-items: center; gap: 12px; }
.pl-panel__titulo > i { font-size: 24px; color: #0f766e; }
.pl-panel__titulo h5 { margin: 0; font-size: 16px; font-weight: 800; color: #1e293b; }
.pl-panel__titulo span { font-size: 12.5px; color: #64748b; }

.pl-panel__prueba {
    display: inline-flex; align-items: center; gap: 7px;
    background: #ccfbf1; color: #0f766e; border-radius: 20px;
    padding: 6px 14px; font-size: 12.5px; font-weight: 700;
}

/* Rejilla de topes: se acomoda sola según cuántos haya configurados. */
.pl-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px; margin-bottom: 18px;
}
.pl-item { border: 1px solid #e2e8f0; border-radius: 10px; padding: 11px 13px; background: #f8fafc; }
.pl-item--cerca { background: #fffbeb; border-color: #fde68a; }
.pl-item--tope  { background: #fef2f2; border-color: #fecaca; }

.pl-item__lbl { font-size: 11.5px; font-weight: 700; text-transform: uppercase;
                letter-spacing: .04em; color: #94a3b8; margin-bottom: 4px; }
.pl-item__cifra { font-size: 21px; font-weight: 800; color: #0f766e; line-height: 1.1; }
.pl-item__cifra span { font-size: 12px; font-weight: 600; color: #94a3b8; margin-left: 3px; }
.pl-item--cerca .pl-item__cifra { color: #b45309; }
.pl-item--tope  .pl-item__cifra { color: #b91c1c; }

.pl-item__barra { height: 5px; border-radius: 3px; background: #e2e8f0; overflow: hidden; margin-top: 8px; }
.pl-item__barra span { display: block; height: 100%; background: #14b8a6; transition: width .3s; }
.pl-item--cerca .pl-item__barra span { background: #f59e0b; }
.pl-item--tope  .pl-item__barra span { background: #dc2626; }

.pl-panel__cta {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    flex-wrap: wrap; padding-top: 16px; border-top: 1px solid #f1f5f9;
}
.pl-panel__cta-txt { flex: 1 1 300px; font-size: 13px; line-height: 1.5; color: #64748b; }
.pl-panel__cta-txt strong { color: #1e293b; }
.pl-panel__cta-btns { display: flex; gap: 9px; flex-wrap: wrap; }

.pl-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 18px; border-radius: 9px;
    font-size: 13px; font-weight: 700; text-decoration: none;
    transition: transform .12s, box-shadow .15s;
}
.pl-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -7px rgba(0,0,0,.4); text-decoration: none; }
.pl-btn--wa   { background: #25d366; color: #fff; }
.pl-btn--wa:hover   { color: #fff; }
.pl-btn--mail { background: #1a6fc4; color: #fff; }
.pl-btn--mail:hover { color: #fff; }

@media (max-width: 640px) {
    .pl-panel__cta { flex-direction: column; align-items: stretch; }
    .pl-panel__cta-btns { justify-content: stretch; }
    .pl-btn { flex: 1; justify-content: center; }
}