/* LaborVera Faza 2 — planuri si acces, pe standardul Petrol/Ivoire/White. */
.planes-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 16px;
}
.plan-tarjeta { position: relative; min-width: 0; }
.plan-destacado { border-color: var(--acento); box-shadow: 0 0 0 2px var(--acento-suave); }
.plan-insignia {
  display: inline-flex; align-self: flex-start; padding: 4px 10px; border-radius: 999px;
  background: var(--acento-suave); color: var(--acento-oscuro); font-size: .75rem; font-weight: 700;
}
.plan-precio { font-family: "Sora", "Manrope", sans-serif; font-size: 1.625rem; font-weight: 700; }
.plan-precio span { color: var(--apagado); font-family: "Manrope", sans-serif; font-size: .875rem; font-weight: 600; }
.resumen-plan { border-left: 3px solid var(--ambar); }
.metricas-plan { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 0; }
.metricas-plan div { padding: 12px; border-radius: 10px; background: var(--papel); }
.metricas-plan dt { color: var(--apagado); font-size: .75rem; font-weight: 700; text-transform: uppercase; }
.metricas-plan dd { margin: 4px 0 0; font-weight: 700; overflow-wrap: anywhere; }
.estado-pago { display: flex; gap: 8px; flex-wrap: wrap; }
.estado-pago span { color: var(--apagado); }
.formulario-inline { display: flex; flex-flow: row wrap; align-items: end; gap: 10px; }
.formulario-inline label { flex: 1 1 180px; }
.admin-comercial { display: grid; gap: 24px; }
.admin-comercial details { border: 1px solid var(--linea); border-radius: var(--radio); }
.admin-comercial summary { min-height: 44px; padding: 12px 16px; cursor: pointer; font-weight: 700; }
.admin-comercial details > .formulario,
.admin-comercial details > .detalle-contenido { padding: 0 16px 16px; }
.capacidades-lista { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.capacidad-fila { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 10px; }
.estado-sync { color: var(--apagado); overflow-wrap: anywhere; }
.acciones-compactas { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
@media (max-width: 720px) {
  .monetizacion .boton { min-height: 44px; width: 100%; }
  .metricas-plan { grid-template-columns: 1fr; }
}